• Dom. Oct 17th, 2021

Menu de hamburguesa

💓 Grupo de botones html

El desarrollo de un icono de menú pequeña y sin etiqueta donde se pudieran enterrar algunas de las funciones más avanzadas fue una técnica habitual que surgió para liberar espacio en la pantalla. El símbolo se conoce como el menú de hamburguesas, que consta de tres barras apiladas.
Según los datos de Moovweb, aunque hay quien no tiene ni idea de qué es el menú de hamburguesas. «Aumentar el compromiso un 61% sólo etiquetándolas con la palabra» menú «. Sin embargo, se hace clic en el menú de hamburguesas el 20% del tiempo en la red del sitio Moovweb y es una de las interacciones móviles más habituales que amamos .
El menú de hamburguesas, también conocido como cajón lateral o menú lateral, tiene una historia rica que se remonta a una de las primeras interfaces gráficas de usuario: la Xerox «Star» de 1981. Su diseñador, Norm Cox, quería la «placa única» «eran el menú de hamburguesas. la apariencia de una lista de menús fue imitada por las tres filas apiladas.
Sin embargo, el menú de las hamburguesas no se revisó hasta varios años después de que apareciera en Xerox Star. El icono no se revisó hasta la llegada de los teléfonos inteligentes y de su software correspondiente. El primer caso parece ser el software Voice Memos de IOS. Un toque rápido en el icono de hamburguesa nos proporcionó una lista útil de notas y opciones para compartir.

Últimamente, se ha debatido mucho sobre si el uso del icono y los submenús Burger en general es realmente una buena idea, sobre todo en cuanto al diseño UX de un sitio web. Sin embargo, había más gente que preguntaba de donde provenía y cómo se tenía que utilizar tan ampliamente.
Fue desarrollado por Xerox Star, la primera interfaz gráfica de usuario del mundo, por Norm Cox. Norm Cox es cofundador de Cox & Hall y ha sido consultor de diseño de interacciones y experiencias desde 1982. El icono del documento también se diseñó para la misma interfaz. Geoff Alday es el increíble diseñador de software que buscó el creador del icono de hamburguesa y logró encontrar este vídeo.
Su diseño gráfico está diseñado para ser muy sencillo, funcionalmente memorable e imitar la apariencia de la lista de menú resultante como «señal de tráfico». Sería muy diferente, pero claro, con tan pocos píxeles. Creo que sólo teníamos 16-16 píxeles para hacer la imagen. (O quizás 13’13 … no lo recuerdas exactamente). ‘.
Los diseñadores tuvieron que averiguar cómo hacerlo funcionar en una pantalla de 4 pulgadas con la nueva interfaz, mucho más pequeña, que se encuentra a los teléfonos inteligentes. Se desconoce la aplicación que la utilizó por primera vez, pero algunos de los primeros juegos que la gente recuerda que utilizó el icono de hamburguesa son:

👇 Cabecera de respuesta CSS

Su delicioso nombre proviene de su disposición: está formado por tres líneas horizontales que parecen, bien, como una hamburguesa. Y, al igual que su homólogo de la vida real, el menú de hamburguesas es una herramienta para ahorrar espacio.
«Como contenedor para las opciones del menú contextual, diseñé este símbolo hace muchos años», dijo Cox en una entrevista en 2014. «Es algo similar al menú contextual que usamos hoy. Hoy con un clic derecho sobre los objetos. «.
Sin embargo, el menú de hamburguesas permaneció en silencio después de Xerox Star. El menú comenzó a reaparecer en todas partes, ya que los diseñadores de UX tenían que averiguar como caber multitud de botones en las pequeñas pantallas de nuestros teléfonos.
Hoy, el menú de hamburguesas ha convertido en el símbolo que los diseñadores les gusta odiar. Al fin y al cabo, realmente la gente hace clic en los menús de hamburguesas? Y aunque lo hagan, no deberían aparecer todo el tiempo si los elementos del menú son tan importantes?
Es un símbolo que ha sido arraigado en la conciencia social durante décadas como botón para que el usuario acceda al cajón de navegación. Por este motivo, la gente entiende y puede confiar, por ejemplo, en cómo los usuarios saben que el icono de la papelera es donde puede eliminar archivos o que el icono de casa es el lugar donde puede acceder al menú principal.

Una de las situaciones en las que veo una práctica cuestionable es el famoso menú de hamburguesas. Un día navega por la red con un lector de pantalla o sólo con el teclado, y también podrá experimentar algunos de los problemas. Veamos los errores más habituales y cómo evitarlos.
Se puede discutir si es necesario antes de pensar la mejor manera de encajar en un menú de hamburguesas. En lugar de eso, hay diferentes plantillas de navegación sensibles que puede utilizar. Últimamente, en las pantallas grandes, también hay una tendencia a utilizar un menú de hamburguesas, aunque puede parecer extravagante, obligando al usuario a hacer doble clic para ir a cualquiera de las páginas mencionadas. Por lo tanto, si hay espacio disponible, es más fácil mostrar directamente todos los elementos de navegación y simplemente cubrirlos en pequeñas pantallas detrás del mezclador de hamburguesas.
Para ilustrar visualmente las tres líneas, muchos utilizan el signo Unicode para «IDENTIFICAR A» (U + 2261) o para «trígrafo AL CIELO» (U + 2630). El primer problema de este método de visualización de iconos es que no todos los navegadores admiten estas señales Unicode y no todos los tipos de letra, lo que significa que estos usuarios verán un cuadrado en lugar de tres líneas (también conocido como tofu o glifo de sustitución).