Historia del icon hamburger

Iconburger fué creado por Norm Cox en 1981. Norm es el creador de Xerox Star,  el primer sistema comercial informático que disponía de un conjunto de tecnologías como una interfaz gráfica con ventanas, carpetas, iconos, ethernet, ratón, servidor de impresoras... diciéndolo de otra forma, el creador de los ordenadores tal y como los conocemos actualmente. Norm no solo es el creador del famoso icono hamburguesa, también es el creador del "icono documentos" entre muchas otras cosas. El icono acabó desapareciendo con XeroxStar.

En el siguiente video podéis ver la presentación del icon hamburger, mirar a partir del minuto 21:07.

Más de 20 años pasaron para que la aplicación de Tweetie de iPad lo incorporara en su menú. Aunque el uso no era el mismo, Loren Brichter, ex-trabajador de Apple lo incorporó en la aplicación. ¿Veis alguna relación entre Apple y Xerox? :)

Solo tuvo que pasar un año (2009), cuando Facebook lanzo una actualización de su App con el famoso icono, situado en la parte superior izquierda. A partir de ese momento todos siguieron ha Facebook. No hay que olvidar que las apps para móviles venían con una estructura de menú en forma de matriz.
 

Facebook App 2008 y 2009
Facebook App 2008 y 2009

El "icon hamburger" tiene cosas buenas y malas, aunque desde mi punto de vista las malas pesan más sobre las buenas. En el siguiente post, hablo sobre el uso del icono y sus consecuencias.


Android Patterns - Diseño de Apps Android

Son diferentes los problemas que nos podemos encontrar cuando tenemos que hacer por primera vez un sketch, wireframe, diseño o prototipado para una interfaz que desconocemos. Hoy os presento una de esas webs (Android Patterns) que os pueden sacar de un buen apuro o ayudaros cuando queráis hacer vuestra App para Android Mobile.

Android Pattern ofrece un conjunto de patrones de interacción que pueden ayudar a diseñar aplicaciones de Android. Un "patrón de interacción" es una explicación/resumen de como diseñar una acción a partir de ejemplos o diseños que actualmente sabemos que están funcionando. Los patrones son una guía, por lo tanto pueden modificarse, no debemos aferrarnos a ellos.

¿Qué patrones describe Android Patterns?

  • Como mostramos los datos o información
  • De que forma podemos introducir datos
  • Patrones de navegación
  • Las notificaciones
  • Interacciones en la pantalla
  • Formularios y personalización de campos
  • Compartir elementos en las apps (Share buttons).

Estructuración de los patrones

Una de las cosas que me gusta más de esta guía-web es el formato que tiene y a su vez la "socialización" de la misma. Son los mismos usuarios los que crean los patrones y a su vez ponen ejemplos y crean debates. Muchas veces puede ser complicado como explicar un patrón pero Android Pattern muestra con ilustraciones el funcionamiento de los mismos.

Cada página de patrón se estructura de la siguiente forma:

  • It works like this: Ilustración de como funciona actualmente el patrón. Explican paso a paso como debe hacerse.
  • Use when:  Explica cuando debemos utilizar este patrón. A su vez los usuarios pueden explicar "Cosas buenas" y "Cosas malas" del patrón y a su vez cuando debemos utilizarlo y cuando no debemos utilizarlo.
  • Ejemplos: Los usuarios pueden subir ejemplos con screenshots de aplicaciones y explicar el funcionamiento del mismo.
  • Debate: Finalmente hay un apartado donde se comentan diferentes puntos y a su vez podemos hacer preguntas.

Os invito que visitéis la página de  Android Patterns y que trasteéis un poco. Seguro que en el momento que necesitéis pensar como hacer el boceto de vuestra app, wireframe, prototipado o todo lo que haga referencia a una app para Android os ayudará mucho.

Es cierto que AndroidPatterns hace bastante que no se actualiza pero mantiene la idea y la ayuda.

¿Conocéis alguna página parecida para iOS o otra interfaz?