El diseño de la barra de pestañas del iPhone

14/04/2011 por Redacción

Estando todos sumergidos en esta marea de aplicaciones para dispositivos móviles, en el que cada empresa, cada individuo, parece tener en proyecto su propia aplicación para iPhone, es fácil que clientes, programadores y diseñadores, en su afán de destacar, de singularizar sus propuestas acaben olvidando algunas reglas básicas que diferencian el éxito del fracaso.

Cuando se trata de diseño de aplicaciones para iPhone, el elemento común de todas las aplicaciones (normalmente) es la barra de pestañas que se sitúa en la parte superior, y que actúa como distribuidor de las demás funcionalidades, permitiendo, si está bien diseñada, que el usuario se desplace rápida y cómodamente por ella, y si está mal diseñada que el usuario se frustre una y otra vez, intentando encontrar lo que busca pero incapaz de recordar en qué epígrafe lo colocaron (y todos hemos tenido este tipo de experiencias).

Tab bar compilation

El diseñador Petter Silfver nos ofrece 6 puntos fundamentales que no se pueden olvidar cuando se trata de usabilidad, satisfacción del cliente y coherencia en la experiencia.

Punto 1: El número mágico es el cinco

Como la pantalla del iPhone tiene un ancho de 320 puntos (1 punto son 1 ó 2 píxeles), Apple diseñó la barra estándar para que contenga no más de cinco pestañas, que a su vez permiten que tanto los iconos como los textos sean visibles y legibles.

Por supuesto, está la tentación de seguir metiendo más pestañas dentro de la infame pestaña "Más" (o "More" -si la aplicación está en inglés). Sin embargo, Petter aconseja intentar meter todo en cintura en las cinco pestañas estándar porque la denominación "Más" contiene algunos problemas que conviene evitar, como por ejemplo, que pierdes esa pestaña estándar o que los usuarios no sólo muchas veces no entienden lo que quiere decir "Más" en la aplicación sino que se les obliga a recordar qué se esconde allí dentro. Además, si las opciones contenidas dentro de "Más" superan las cinco (el usuario será incapaz de recordarlas todas) recomienda que se permita al usuario reordenar las pestañas, para que pueda ponerlas según el orden que más sentido tenga para él.

Punto 2: Pregunta a tus usuarios

Parece una obviedad, pero muchas veces el fabricante, diseñador, programador, está tan seguro de saber lo que quieren/necesitan sus usuarios que no les pregunta... y luego pasa lo que pasa. El objetivo del diseño es que tenga significado inmediatamente en la cabeza del cliente apenas empiece a utilizar la aplicación. Saber qué considera importante, qué funciones usa más, y si dado un determinado icono o nombre de categoría entiende lo que contiene.

Como hemos dicho, no por ser obvio deja de ser un punto que tiende a saltarse ya que el diseñador, el fabricante, se consideran ellos mismos modelos de usuario y si ellos lo entienden seguro que todo el mundo lo entiende. Error. Pregunta a tus usuarios -a los de verdad, los que no están metidos en el proyecto.

Punto 3: Dedica mucho tiempo a diseñar los iconos y los textos

Primero es que los iconos y los textos realmente resuman las actividades que contienen. No hay nada peor que querer hacer algo y recorrer toda la aplicación porque los iconos que presuntamente está relacionados con lo que queremos hacer no tienen nada que ver con ella, o los nombres de las características no tienen ningún parecido con lo que queremos hacer ("Y sin embargo sé que está porque lo hice....").

Segundo. Si pones un icono, es que no necesitas poner también el nombre. Y si no hay un icono adecuado, deja sólo el nombre. Intenta simplificar al máximo la información a decodificar por el usuario. Y elementos redundantes pueden provocar significados contradictorios. Por ejemplo, si pones un pincel junto al nombre "Notas" ¿Quieres decir que puedo dibujar? ¿Quieres decir que sólo se puede escribir? ¿Se pueden hacer las dos cosas?

Tercero. Evita las palabras repetidas. No pongas "Mis libros" Mis discos" "Mis Notas". No sólo es el factor de uniformidad de todos los nombres -todos empiezan igual así que requieren más atención para saber cuál es el que buscamos sino que el usuario no puede abstraer su mente, y una y otra vez tendrá que leer y decodificar el "Mis" -que no le aporta nada. Todo está en "Mi" teléfono, así que todo lo que contiene es mio, no hace falta que me lo recuerden en cada botón. Toda la información que puedas suprimir sin perder significado, deshazte de ella sin dudar.

Punto 4: Mantén la coherencia de las pestañas

Si estás usando un sistema de navegación por pestañas, no pases de repente a un sistema de navegación diferente. Y viceversa. Si la manera de moverse por la aplicación es por tablas, no pongas de repente pestañas dentro de una categoría, ya que sólo conseguirás desorientar al usuario, que sentirá que "ha perdido" la orientación.

Punto 5: No pongas pestañas de acceso restringido

Otro de los grandes puntos de desorientación del usuario. Aunque todos (bueno, muchos) nos hemos acostumbrado al interfaz táctil, seguimos manteniendo una desconfianza latente a que el sistema en cualquier momento puede fallar. Unas pestañas desactivadas provocarán repetidos toques provocados porque -al no producirse el efecto deseado, pensamos que el fallo es nuestro que no hemos tocado donde debíamos.

Si tienes que poner una zona de acceso restringido, o bien reduce su puerta de acceso al mínimo para que el usuario común no se encuentre con ella cada vez que entra a la aplicación, o bien deja bien claro qué son esas pestañas e implementa todo el sistema para que se den de alta sobre la marcha. No hay nada peor (y hemos visto aplicaciones con este método) que tener una zona restringida y decirle al usuario que vaya a la web de la empresa a registrarse y que, una vez completado el proceso, vuelva a la aplicación para ingresar sus datos. Abandono de aplicación prácticamente garantizado.

Punto 6: Personaliza, pero con cuidado

Como decíamos al empezar el artículo, la barra de pestañas de navegación del iPhone es el elemento más visto y utilizado, común a la gran mayoría de las aplicaciones disponibles.

Por eso es fácil caer en la tentación de querer reinventar el interfaz y salirse de lo estándar, con el objeto de ofrecer una aplicación más exclusiva, memorable, adictiva... pero cuidado porque es un sendero lleno de trampas.

La primera es que, precisamente por ser estándar, los elementos están predefinidos y prediseñados en el propio sistema, así que romper el estándar quiere decir despreciar todo ese trabajo ya hecho y programarlo desde cero en todas las pantallas. O sea, trabajo, mucho trabajo extra. Asegúrate de que lo que vas a ofrecer realmente merece la pena.

El esquema de colores del iPhone no es algo que ha sucedido por casualidad. Está minuciosamente pensado para añadir profundidad al interfaz y jerarquía a la navegación. Si vas a pensar tu propio esquema de colores, asegúrate de no romper ese equilibrio.

En caso de duda sobre el diseño, vuelve sobre los puntos uno y dos, que te ayudarán a determinar si caminas por la senda del éxito o si por el contrario estás sobre arenas movedizas.

Basado en el artículo de Petter Silfver

0
Comentarios