Fundador de Seindor Ingeniería Web + Escritor + Desarrollo Web + E-commerce + Marketing Online + Analítica Web.
Twitter de Miguel Angel Acera Facebook de Miguel Angel Acera Google+ de Miguel Angel Acera Linkedin de Miguel Angel Acera YouTube de Miguel Angel Acera Instagram de Miguel Angel Acera Pinterest de Miguel Angel Acera
Blog de Miguel Angel Acera

Simplifica el diseño con iconos estándar

Tiempo de lecturaEste artículo puedes leerlo en 1 minuto.

11/02/2013
249 palabras.
diseño

Es importante conocer hacia dónde van los estándars de diseño para aplicarlos y reducir la curva de aprendizaje del usuario para conseguir una mayor y más rápida aceptación del sitio web o aplicación web/móvil. Un ejemplo simple, si sabemos que el icono de una lupa significa “Buscar”, no hace falta complicarnos más, usemos sólo este icono, no hace falta texto. El diseño quedará más limpio si, además, utilizamos sólo dos colores. Vemos algunos iconos estándar en la figura 1.

Figura 1. Ejemplo de algunos iconos estándar.

Figura 1. Ejemplo de algunos iconos estándar.

En aplicaciones para dispositivos móviles está siendo habitual usar el icono “Atrás” (figura 1) en la esquila superior izquierda, mientras que el icono “Menú” suele situarse en el extremo derecho. En la figura 2 vemos como ejemplo la interfaz de Skype para tablet.

Figura 2. Iconos estándar en Skype para tablet.

Figura 2. Iconos estándar en Skype para tablet.

Figura 3. Barra con opciones de Evernote.

Figura 3. Barra con opciones de Evernote.

Otra tendencia es simplificar la barra de menú usando sólo dos colores y sólo iconos, sin texto, algo a lo que anteriormente había hecho referencia. En la figura 2 ya podíamos ver esto. En la figura 3 vemos otro ejemplo, en este caso de Evernote.

Pensar que estos diseños de menús y opciones sólo deben aplicarse a dispositivos móviles es un error. Si es un diseño con el cual se ha familiarizado el usuario y es más simple o sencillo que lo que tenemos ahora, entonces debemos usarlo.

En la figura 4 muestro la estructura general de un menú de este tipo.

Figura 4. Estructura de una barra de menú con inconos estándar.

Figura 4. Estructura de una barra de menú con inconos estándar.


Publica tu comentario

Los comentarios enviados serán publicados después de ser aprobados, por lo que no aparecerán inmediatamente.

 

Etiquetas: ···