La consistencia en el diseño de UI 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 están optando por 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 completamente las interacciones estándar de hardware con sus propios patrones de interfaz únicos. Si bien la ruptura de la coherencia entre las reglas de la interfaz de usuario del hardware y la experiencia de su aplicación puede no ser una mala idea, romper la coherencia de su aplicación puede serlo.
Tres pasos para un diseño de interfaz de usuario consistente
Básicamente, hay tres tipos de consistencia en los que debe pensar cuando diseña sus diseños web y de aplicaciones móviles:
- 1. Manténgase consistente con las pautas y comportamientos de la UI del dispositivo
- 2. Mantente 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 algo importante, principalmente porque no quiere confundir o sorprender a sus usuarios dentro de su propia aplicación.
No desea que un usuario vaya de su página de inicio a una subpágina y vea estilos diferentes o incluso interacciones de usuarios muy diferentes. Este tipo de cosas puede sorprender a los usuarios o, en algunos casos, incluso asustarlos. La coherencia no solo es un gran problema para la usabilidad general del sitio, sino que también puede aumentar considerablemente la conversión.
Estructura consistente e interacciones
Esta es la clave para crear una interfaz de usuario consistente. A veces, cuando desarrollamos, nos olvidamos de cómo la estructura y la interacción afectarán la experiencia general del usuario. Pero al igual que la creación de planos y la creación de planes es importante cuando se construye una casa o un edificio, también es importante para crear una UI consistente y utilizable. Hay algunas cosas en que pensar y planear con anticipación antes de comenzar a escribir el código.
- 1. Considere cómo colocar elementos de manera consistente en su sitio o aplicación.
- 2. Piensa en qué patrones de UI usarás.
- 3. Planifica qué elementos de entrada necesitarás.
- 4. Averigüe qué iconos necesitará, y elija o diseñe un buen conjunto de iconos que los cubra a todos.
La colocación de elementos es una forma enorme de reducir la sorpresa en el usuario y crear expectativas consistentes y confiables. Mantenga sus navegaciones en el mismo lugar, nada irrita al usuario más rápidamente que mover o desaparecer elementos de navegación. También mantenga los logotipos y otros elementos de marca en las mismas ubicaciones en todo el sitio.
? Nada irrita a un usuario más rápido que mover o desaparecer elementos de navegación?Si está utilizando una barra lateral, no mueva demasiado la barra lateral cambiando lo que hay en ellos de una página a otra. Parte 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 cosa importante que se debe mantener siempre es el inicio de sesión y los botones o botones de configuración del usuario.
Considere los patrones de interfaz de usuario
Planee con anticipación y piense qué patrones de UI necesitará. ¿Vas a necesitar una galería? Modales? 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 qué patrones de diseño necesitará también le ayudará a descubrir su contenido con anticipación, lo que también le ahorrará mucho tiempo.
Esto también solucionará los problemas y responderá a las 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 UI, ya la tomó y no lo sorprenderán creando una mezcla de patrones de diseño. a lo largo de su sitio.
Piensa en tus formularios de antemano también. Planifique qué elementos de formulario va a necesitar y descubra los elementos que no necesitará o que podría reemplazar. Los elementos del formulario pueden dar miedo o incluso ser difíciles para que los usuarios naveguen de todos modos, así que si puedes eliminar o intercambiar algunas entradas que pueden ser obstáculos, hazlo.
"Si puedes eliminar o intercambiar algunas entradas que pueden ser escollos, hazlo".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.
Una vez más, plan de cabeza. Planifica qué iconos necesitarás antes de tiempo. Una forma súper rápida de arruinar su consistencia es estar a mitad de camino en el desarrollo de su aplicación cuando descubra que necesitará íconos para imprimir, y luego darse cuenta de que no puede recordar dónde obtuvo sus íconos o incluso si puede hacerlo. encuentre un icono de impresión que coincida con el resto de sus iconos.
Esto no es ni siquiera un problema de estilo, sino uno interactivo. Los usuarios se acostumbrarán al aspecto de los íconos particulares y podrán reconocerlos rápidamente. Pero si está utilizando un conjunto de iconos de mosaico, confundirá a su usuario o incluso le dificultará saber qué representan determinados iconos.
Estilo consistente
El estilo y 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. Del mismo modo que es importante tener un conjunto de iconos coherentes, es importante que su aplicación tenga una consistencia general en el diseño. Puede pensar que ciertos botones son geniales, aunque no coincidan con el diseño general o la combinación de colores del sitio, pero esto confundirá a su usuario y se verá feo.
Al diseñar un kit de IU, hay algunas cosas que se deben tener en cuenta para crear coherencia:
- 1. Esquema de colores
- 2. Estilo
- 3. Las fronteras
- 4. Tipo y fuentes
- 5. tamaño
- 6. Imagenes de fondo
- 7. Efectos
Colores
Como dije anteriormente, mantenga su color de interfaz de usuario consistente con la combinación de colores de su sitio. Incluso cuando diseñe la llamada a las acciones en las que desea que los botones se destaquen y se noten, tenga cuidado de que su llamada a la acción no sea un cumplido feo para su esquema de color.Para ayudarlo, use herramientas como Kuler o ColorSchemer para ayudar a seleccionar colores que combinen bien.
Cuando hablo de mantener un estilo coherente, estoy hablando de no usar un botón de degradado loco con sombras y biselado si el resto del diseño del sitio es plano y no tiene una sombra o degradado. Además de mantener la coherencia con el diseño general del sitio, mantenga la coherencia con el estilo de los elementos de su interfaz de usuario. Si está usando un color o estilo de fuente particular en sus etiquetas de entrada, manténgalo y úselo en todas las etiquetas.
Las fronteras
Ahh, las fronteras. Muy a menudo veo sitios que usan tres o cuatro grosores o radios de bordes de botones 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 compatibles entre sí. Esto no significa que tenga que usar en el radio del borde, puede mezclarlo teniendo unos pocos 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 constantes y no utilice 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 se puedan leer y predecir fácilmente.
tamaño
El tamaño de las fuentes y otros elementos deben ser coherentes o complementarios entre sí. Los encabezados y el título de las páginas deben ser coherentes para que su usuario sepa que esas líneas de texto coinciden en realidad con los encabezados y los títulos. El tamaño coherente también se aplica a cualquier elemento de la interfaz de usuario de las regiones de contenido, enlaces, elementos de navegación o barras laterales. Evite alterar el tamaño de cualquiera de estos para que aparezcan drásticamente entre las vistas de página, de modo que el usuario pueda reconocerlos inmediatamente cuando se carga la página.
Imágenes de fondo
Intenta no cambiar demasiado tus imágenes de fondo. Esto no sucede mucho en estos días como solía hacerlo, pero aún así es una buena idea evitar cambiar sus imágenes de fondo de la vista de página a la vista de página. Si lo hace, intente que la imagen se pueda relacionar entre sí de alguna manera para que las páginas no pierdan consistencia. Cambiar la imagen de fondo, especialmente las grandes, puede hacer que el sitio se sienta inconexo y hacer que el usuario se sienta como si hubiera dejado su sitio por completo, así que trate de evitar esta tentación.
Efectos
Los efectos, lo que es más importante, 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 logro o no lo tiene que ver con el usuario, pero para el observador exigente puede 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
El diseño para la coherencia puede parecer mundano o incluso aburrido a veces y es posible que solo desee lanzar algo en su diseño para sorprender al usuario, y eso es realmente genial.
Es bueno mantener a los usuarios en estado de alerta, no se preocupen tanto que se desanimen o se confundan tanto que se van y se van a otro lugar. Un poco de consistencia puede recorrer un largo camino.