Mantener la coherencia en su diseño de interfaz de usuario

La coherencia en el diseño de la interfaz de usuario es un principio de la vieja escuela y algo olvidado en algunos de los diseños web y de aplicaciones actuales. Parece que los diseñadores eligen omitir la coherencia de sus interfaces.

En el caso del diseño de aplicaciones móviles, algunos diseñadores eligen reinventar, recrear o incluso romper por completo las interacciones estándar de hardware con sus propios patrones de interfaz únicos. Si bien romper la coherencia entre las reglas de la interfaz de usuario de hardware y la experiencia de sus aplicaciones puede no ser una mala idea, romper la coherencia de sus propias aplicaciones puede serlo.

Tres pasos para un diseño de interfaz de usuario coherente

Básicamente, debe tener en cuenta tres tipos de coherencia al diseñar sus diseños de aplicaciones web y móviles:

• 1. Manténgase consistente con las pautas y comportamientos de la interfaz de usuario del dispositivo
• 2. Manténgase consistente con otros sitios o aplicaciones similares
• 3. Mantente consistente con tu propio diseño

A los efectos de este artículo, me gustaría centrarme más en el tercero: mantener la coherencia en su propia interfaz de usuario. Esto es un gran problema principalmente porque no desea confundir o sorprender a sus usuarios dentro de su propia aplicación.

No desea que un usuario pase de su página de inicio a una subpágina y vea un estilo diferente o incluso interacciones de usuario muy diferentes. Este tipo de cosas puede sorprender a los usuarios o, en algunos casos, incluso asustarlos. La consistencia no solo es un gran problema para la usabilidad general del sitio, sino que también puede aumentar en gran medida la conversión.

Estructura e interacciones consistentes

Esta es la clave para crear una interfaz de usuario coherente. A veces, cuando nos desarrollamos, nos olvidamos de cómo la estructura y la interacción afectarán la experiencia general del usuario. Pero al igual que el diseño y la creación de planes son importantes al construir una casa o edificio, también es importante para crear una interfaz de usuario coherente y utilizable. Hay algunas cosas en las que pensar y planificar con anticipación antes de comenzar a escribir código.

• 1. Considere cómo colocar elementos consistentemente en su sitio o aplicación.
• 2. Piensa en los patrones de UI que usarás.
• 3. Planifique qué elementos de entrada necesitará.
• 4. Descubre qué iconos necesitarás y elige o diseña un buen conjunto de iconos que los cubra a todos.

La colocación de elementos es una gran manera de reducir la sorpresa en el usuario y crear expectativas consistentes y confiables. Mantenga sus navegaciones en el mismo lugar, nada irrita a un usuario más rápidamente que mover o desaparecer elementos de navegación. También mantenga logotipos y otros artículos de marca en las mismas ubicaciones en todo el sitio.

"Nada irrita a un usuario más rápidamente que mover o desaparecer elementos de navegación"

Si está utilizando una barra lateral, no agite demasiado la barra lateral cambiando lo que está presente en ellas de una página a otra. Algo de esto puede ser relevante para el contenido de la página, pero evite eliminar o incluso mover elementos generales de importación como los formularios de búsqueda. Una gran cosa para mantenerse colocado constantemente es el inicio de sesión y los enlaces o botones de configuración del usuario.

Considere patrones de IU

Planifique con anticipación y piense qué patrones de UI necesitará. ¿Vas a necesitar una galería? Modalidades? Acordeones? Barras laterales? Planificar los patrones de diseño con anticipación no solo lo ayudará a desarrollar y diseñar su aplicación más rápido, sino que pensar en los patrones de diseño que necesitará también ayuda a determinar su contenido con anticipación, lo que también puede ahorrarle mucho tiempo.

Esto también resolverá problemas y responderá preguntas con anticipación, de esta manera cuando llegue a una sección o página en su sitio que requiera una decisión de interfaz de usuario, ya lo ha hecho y no quedará atrapado creando una mezcla de patrones de diseño en todo tu sitio.

Piense en sus formularios de antemano también. Planifique qué elementos de formulario necesitará y descubra los elementos que no necesitará o que podría reemplazar. Los elementos de formulario pueden ser atemorizantes o incluso difíciles para que los usuarios naveguen de todos modos, por lo que si puede eliminar o intercambiar algunas entradas que pueden ser obstáculos, hágalo.

"Si puede eliminar o cambiar algunas entradas que pueden ser obstáculos, hágalo".

Esta también es una excelente manera de eliminar la toma de decisiones del proceso de desarrollo. Mantener formas consistentes en estilo, estructura e interacción a veces puede hacer o deshacer una tasa de conversión.

Nuevamente, planifique la cabeza. Planifique con anticipación qué iconos necesitará. Una manera súper rápida de arruinar su consistencia es estar a la mitad del desarrollo de su aplicación cuando descubra que necesitará imprimir iconos, y luego darse cuenta de que no puede recordar dónde los obtuvo o incluso si puede encuentre un ícono de impresión que coincida con el resto de sus íconos.

Esto ni siquiera es realmente un problema de estilo, sino interactivo. Los usuarios se acostumbrarán a la apariencia de iconos particulares y podrán reconocerlos rápidamente. Pero si está utilizando un conjunto de iconos de patchwork, confundirá a su usuario o incluso dificultará que sepan qué representan ciertos iconos.

Estilo consistente

El estilo y el diseño de cada elemento de la interfaz de usuario es importante y mantener la coherencia entre ellos también es importante para el usuario. Al igual que es importante tener un conjunto de iconos coherente, es importante que su aplicación tenga una coherencia de diseño general. Puede pensar que ciertos botones son geniales a pesar de que no se acercan al diseño general o al esquema de colores del sitio, pero esto confundirá a su usuario y se verá feo.

Al diseñar un kit de interfaz de usuario, hay algunas cosas a tener en cuenta para crear consistencia:

• 1. Esquema de color
• 2. Estilo
• 3. Fronteras
• 4. Tipo y fuentes
• 5. Tamaño
• 6. Imágenes de fondo
• 7. Efectos

Colores

Como dije antes, mantenga el color de su interfaz de usuario consistente con el esquema de color general de su sitio. Incluso cuando diseñe un llamado a la acción en el que desea que los botones se destaquen y sean notados, tenga cuidado de no hacer que su llamado a la acción sea un cumplido feo y permanente para su esquema de color general. Para ayudarlo, use herramientas como Kuler o ColorSchemer para seleccionar colores que combinen bien.

Cuando hablo de mantener su estilo consistente, estoy hablando de no usar un botón de gradiente loco con sombras y bisel si el resto del diseño del sitio es plano y no tiene sombra o degradado. Además de mantenerse consistente con el diseño general del sitio, manténgase consistente con el estilo de los elementos de su interfaz de usuario. Si está usando un color o estilo de fuente en particular en sus etiquetas de entrada, quédese con él y úselo en todas las etiquetas.

Fronteras

Ahh, fronteras. Con demasiada frecuencia veo sitios que usan tres o cuatro grosores o radios de borde de botón diferentes y esto puede ser realmente confuso. Mantenga todos sus bordes en botones, entradas, selecciones, galerías, imágenes y todos los demás elementos de la interfaz de usuario coherentes entre sí. Esto no significa que tenga que usar en el radio del borde, puede mezclarlo con algunos valores o incluso usar un estilo de manera consistente en cada elemento.

Tipo y fuentes

Usar el mismo tipo y fuentes en sus elementos es algo muy importante, especialmente cuando se trata de elementos de formulario. Mantenga los encabezados consistentes y no use muchas fuentes, aunque le gusten todas, puede guardarlas para otros proyectos. Las entradas y los botones deben tener estilos de fuente que coincidan o se complementen entre sí para que los formularios sean fáciles de leer y predecibles.

Talla

El tamaño de las fuentes y otros elementos deben ser consistentes o complementarios entre sí. Los encabezados y el título de las páginas deben permanecer consistentes para que el usuario sepa que esas líneas de texto coinciden con los encabezados y títulos. El tamaño constante también se aplica a cualquier elemento de la interfaz de usuario de regiones de contenido, enlaces, elementos de navegación o barras laterales. Evite alterar drásticamente el tamaño de estos entre las vistas de la página para que el usuario pueda reconocerlos inmediatamente cuando se carga la página.

Imágenes de fondo

Intenta no cambiar demasiado las imágenes de fondo. Esto no sucede mucho en la actualidad como solía hacerlo, pero sigue siendo una buena idea evitar cambiar las imágenes de fondo de la vista de página a la vista de página. Si lo hace, intente hacer que la imagen se relacione entre sí de alguna manera para que las páginas no pierdan coherencia. Cambiar la imagen de fondo, especialmente las grandes, puede hacer que el sitio se sienta desarticulado y hacer que el usuario sienta que incluso ha abandonado su sitio por completo, así que trate de evitar esta tentación.

Efectos

Los efectos, sobre todo los efectos de iluminación, pueden hacer que lo que parece un gran diseño de sitio no tenga ningún sentido para el usuario. Por ejemplo, si está usando un resaltado en el botón que parece que una luz brilla sobre él, use el mismo efecto de iluminación en el texto biselado en los botones o en las entradas de texto biselado.

Honestamente, esto realmente no es un gran problema para el usuario, pero para el espectador exigente pueden notar la inconsistencia de sus efectos y distraerse de hacer lo que se supone que deben hacer con su aplicación o sitio.

No seas aburrido

Diseñar para lograr consistencia puede parecer mundano o incluso aburrido a veces y es posible que solo desee agregar algo en su diseño para sorprender al usuario, y eso es realmente genial.

Es bueno mantener a los usuarios alerta, pero no sacuda tanto las cosas que se desanimen o se confundan tanto que se van y se van a otro lado. Un poco de consistencia puede ser muy útil.