Hay quienes admiran el iPhone de Apple y hay quienes piensan que no es tan maravilloso, que hay muchas restricciones y que no fomentan la aparición de aplicaciones disruptivas. Sin embargo, hay algo en lo que todo el mundo parece estar de acuerdo: han hecho un excelente trabajo al crear los elementos por defecto que conforman las interfaces de las aplicaciones para iPhone.

Por un lado, un usuario que se enfrenta por primera vez a una aplicación iPhone se encuentra con elementos intuitivos y sencillos de utilizar. Por otro lado, cuando este usuario vaya avanzando en su proceso de aprendizaje irá descubriendo que la mayor parte de las aplicaciones disponibles para este terminal comparten esos elementos de la interfaz, y por tanto, utilizar una nueva aplicación no le supondrá tener que aprender a manejarla.

Hay unas cuantas aplicaciones disponibles que en su afán por diferenciarse del resto han intentado reinventar la rueda. Con esto solo han conseguido tirar a la basura todo el excelente trabajo hecho por Apple y como resultado han obtenido una aplicación poco intuitiva para el usuario acostumbrado a una serie de elementos comunes en todas las aplicaciones de iPhone.

Muchas veces, no es necesario reinventar los elementos existentes para poder hacer algo diferente. Un ejemplo bastante típico es el de Postage de la empresa RogueSheep quienes han sabido hacer una aplicación que parece diferente pero que utiliza los elementos característicos (y alguna innovación como es la selección de tipografía).

Fijaros como gracias a un cambio en la tonalidad y la utilización de iconos nuevos han conseguido un diseño diferente pero intuitivo. Al fin y al cabo mantienen la barra de navegación superior y también utilizan “tabs” o pestañas en la parte inferior, dos patrones muy típicos en las aplicaciones para iPhone.

Las aplicaciones para móviles deben ser sencillas. Hay que pensar que la plantalla es pequeña y por tanto tendremos que tener especial cuidado con el tamaño del texto que no debe ser ni muy grande ni muy pequeño, con la cantidad de elementos que mostramos y con la disposición que hacemos de estos. Ha de haber un balance general. Veamos un ejemplo de lo que no se ha de hacer:

A la derecha podemos ver la primera versión de la aplicación TripLog. En este caso se observan varios errores de diseño de los que hemos hablado antes. Por un lado se han utilizado demasiados elementos, por el otro, estos no están alineados dando una sensación de desorden y confundiendo al usuario. A la izquierda, podemos ver la versión actual de la aplicación. En este caso a pesar de que hay demasiados elementos estos están mejor alineados y mejoran un poco la percepción que se tiene.

Como ya hemos dicho, siempre tiene que haber un balance. Cuando el contenido de una vista es excesivo y observamos que sobran elementos, tenemos que replantear el flujo de trabajo de la aplicación. La mejor manera de conseguirlo es tener en mente los modelos o patrones por defecto que Apple ofrece. Haciendo un repaso de ellos veremos que el 99% de las aplicaciones existentes se basan en uno de estos patrones o elementos.

Barra de navegación / Navigation bar

Barra con elementos de control

Barra con elementos de navegación

Barra multisegmentos

Barra con título sin elemento

Barra de herramientas / Toolbar

Permite ejecutar acciones sobre la vista actual, normalmente se coloca en la zona inferior

Un ejemplo

Barra de pestañas / Tab bar

Permite cambiar de vista

Un ejemplo: En la aplicación Clock de iPhone la barra de navegación permite cambiar entre los diferentes modos

Aun quedan muchos otros elementos por mostrar: tablas, botones, alertas, etc. Sin embargo, estos son los principales elementos de control sobre las diferentes vistas y son los que ayudan a definir el flujo de nuestra aplicación. Haced el ejercicio de ver cuántas de las aplicaciones de iPhone que utilizáis se basan en alguno de estos controles y veréis que la gran mayoría los utilizan. Como ya hemos dicho, son la clave para conseguir una experiencia de usuario agradable y un proceso de aprendizaje sencillo e intuitivo.

Comunicar una idea o proyecto en una presentación, diseñar el envoltorio de un producto, construir el escaparate de una tienda o realizar una página web o aplicación para el iPhone. Todos tienen algo en común. Queremos comunicar una idea o una sensación a nuestros clientes, y queremos hacerlo de la mejor manera posible. Nosotros cuando pensamos sobre nuestros proyectos o cuando escuchamos propuestas de clientes, siempre hacemos lo mismo. Entender lo que queremos, analizar todas las opciones, mezclar conceptos de diversos sectores o campos para expandir las posibilidades, dibujar lo que queremos hacer, coger la esencia y simplificar lo más posible para que sea obvio qué es lo que queremos mostrar en la web o qué permite la aplicación móvil. Es un proceso de experiencia, cuantas más veces lo hagas mejor te saldrá; pero también es de intuición, de creatividad.

Descubrí el otro día la presentación Thinking Visually de David Armano, y me produjo una buena sensación asi que busqué el vídeo de su charla en Chicago. Lo acabo de ver confirmando las buenas vibraciones y recibiendo los buenos consejos que da cuando quieres comunicar algo visualmente. Para empezar una frase que hace pensar:

Los ojos no son responsables cuando es la mente la que ve

Podéis ver en la presentación los 6 pasos que utiliza él, nosotros variamos y especializamos un poco su uso para nuestros proyectos. Lo voy a denominar la técnica OSEC, cuatro pasos para desarrollar una buena interfaz o envoltorio:

1. Observa. Ve el mundo con los ojos de un niño. Tienes que observar todo sobre el proyecto, preguntar todo lo que se te ocurra, ver qué hacen los competidores, qué esperan los clientes o cuáles son las tendencias.
2. Sintetiza. Analiza todo y con todo lo que has sacado, pregúntate cuál es la esencia; qué es lo que se quiere transmitir, qué es lo que se quiere hacer. Separa lo esencial de lo que no es necesario.
3. Esboza. Coge un papel y dibuja los esquemas, las interfaces de las pantallas principales expresando la esencia; constrúyete los casos de uso dibujándolos y comprueba que es eso lo que se quiere conseguir. Dibuja en papel tanto como quieras. Espera un día, y vuelve a pensar desde cero. Si ves que algo no cuadra, vuelve al punto 2 y pregúntate de nuevo qué es lo importante.
4. Construye. Ya sabes lo que quieres conseguir así que es hora de ponerse manos a la obra. Sé fiel a tus dibujos, pero no intentes hacerlo simétrico. A veces cuando dibujamos y pensamos no nos damos cuenta de ciertas dificultades. Rodea esos problemas para que se siga manteniendo esa sencillez.

Con estos 4 pasos conseguimos mejorar la idea inicial, potenciando lo diferencial y haciéndolo tremendamente intuitivo. Cada uno tiene su método así que estamos encantados de escuchar el vuestro y saber qué puntos añadiríais.

Como recomendación del autor me estoy leyendo ahora mismo el libro Don’t make me think! que es una referencia en el campo de la usabilidad web. No hay más que ver la media que tiene en Amazon (4,5/5 sobre más de 500 críticas). Ya comentaré más adelante sobre las conclusiones que estoy sacando.

El diseño abarca muchos campos, desde la moda hasta las portadas de revistas, pasando por páginas webs o envoltorios de productos. El gran diseñador alemán Dieter Rams dijo que el buen diseño tiene que innovar, tiene que hacer útil al producto, debe ser estético y abarca hasta el último detalle. Uno de sus discípulos no oficiales, Jonathan Ive, responsable de diseño de Apple; lo ha asimilado perfectamente y ha creado productos tan bien diseñados como el iMac, el iPod o el iPhone.

Una de las áreas del diseño no tan conocidas son los infogramas, las representaciones de datos e informaciones en gráficas de forma que aporten lo máximo posible manteniendo la sencillez al verlas. Las nubes de etiquetas, los votos de los electores, los mapas de pisos en venta o los mapas de expansión de la gripe A. The New York Times tiene un grupo de diseñadores y programadores trabajando juntos en nuevos infogramas representando la actualidad en mapas y gráficos de forma que aporten mucho más información.

Infograma de la gripe A por el New York Times

Muchas veces queremos mostrar datos y nos equivocamos al hacer tablas, o intentar explicarlo con palabras. Esto sucede en todo tipo de situaciones, ya sea al escribir una historia, hacer un trabajo para la universidad, preparar la presentación de un nuevo producto o intentar convencer a inversores de que tu servicio va a hacerse con el mercado. Cuando veas que algo no cuadra, párate a pensar en la esencia de lo que quieres transmitir y seguramente consigas hacerlo con la elegancia y buen hacer de estos siguientes infogramas.

Infograma de la historia de la automoción

Infograma de la densidad de población en USA

Infograma del tráfico global de Internet

Tienes mucho más ejemplos de infogramas en este artículo de Six Revisions con 40 ejemplos y en un artículo sobre este tema de la revista Fast Company.