Un proyecto exitoso es una combinación de buen diseño, contenido matador y un poco de suerte. Con demasiada frecuencia, un diseño se descarrila por simples errores de UX que arruinan el contenido y confunden las acciones previstas de la interfaz.
Los usuarios pueden perder fácilmente el rastro de por qué están allí y lo que deben hacer. Afortunadamente, muchos de estos errores de diseño son fáciles de identificar y corregir. (Como beneficio adicional, los ejemplos en esta publicación están haciendo las cosas bien; ¡úselos como una guía!)
1. Tipografía ilegible
Hubo una fase corta en la que los diseños estaban repletos de tipografías novedosas. Si bien eso no es un problema en sí mismo, presenta un problema cuando las palabras son difíciles de leer. (¿Qué significan las palabras en un diseño si el usuario no puede entender lo que dicen?)
Cuando mire las opciones de novedad, tenga en cuenta cómo se ven las letras con las palabras que está usando. Algunas combinaciones pueden funcionar mejor en un tipo de letra que otras. Preste atención al kerning y al número de caracteres utilizados, particularmente con un tipo de letra novedoso. (A menudo, menos caracteres son mejores con la tipografía de visualización especializada).
¿Cómo sabes que es difícil de leer? Tenga cuidado con los tipos de letra con inclinaciones extremas, formas de letras apretadas y condensadas, swashes excesivamente elaborados, colas o ligaduras, o formas de letras que parecen estar juntas o tienen formas poco comunes.
Arréglalo ahora: Cambie ese tipo de letra ilegible por algo con una postura más amplia y formas de letras más comunes. No tienes que cambiar todo el camino a Helvetica, pero ve por algo legible e interesante. Prueba algo de esta colección de fuentes de Google.
Haciéndolo bien: LeadGen
2. Alineación pobre
Izquierda, derecha, venter, justificado?
No discutiremos los méritos de los tipos de alineación aquí. La gran conclusión es esta: la alineación consistente es lo que realmente importa. Tipo y elementos deben descansar cómodamente dentro de una cuadrícula. Deben evitarse los bordes dentados.
El problema con la alineación deficiente es que interrumpe el flujo visual, lo que dificulta que los usuarios pasen de un elemento al siguiente en el diseño. Pueden perderse en el desorden y pueden perder lo que es más importante cuando se trata de contenido.
Arréglalo ahora: Establecer estilos de alineación para elementos. ¿Están las fotos centradas o están alineadas con el texto en el margen izquierdo? Cree un conjunto de pautas, ajuste el diseño y respete las reglas que avanzan.
Haciéndolo bien: Lorem Ipsum
3. Imágenes inadecuadas
Las imágenes inapropiadas son un asesino de contenido. Puede crear una conexión visual inconexa con el texto o dejar que el usuario se rasque la cabeza.
Mientras que las imágenes que se quedan cortas a menudo vienen en "¿lo saben cuando las ven?" De moda, hay algunas banderas rojas para buscar en tus proyectos.
- Imágenes tontas o usadas en exceso: si la foto no parece real (la gente de negocios se adapta a sonreír sin rumbo) o si la ha visto en otros sitios web similares, evítela.
- Imágenes de baja calidad: si la foto está desenfocada, oscura o mal compuesta, no la use. Ninguna foto es mejor que una mala foto.
- Imágenes de baja resolución: una imagen pixelada siempre es mala. Muchas de las reglas de fotos que formaron parte de los flujos de trabajo de diseño hace un par de años deben revisarse gracias al dominio y la popularidad de las pantallas de alta resolución.
- Las imágenes de pelusa no mejoran el contenido: no te quedes atascado incluyendo una foto solo porque puedes, incluso cuando no tiene relación con el contenido. Las imágenes deben mejorar el contenido, no embarrarlo.
Arréglalo ahora: Hacer una auditoria fotográfica. Ir a través de su diseño y eliminar las imágenes que contienen las banderas rojas de arriba. No tiene que reemplazar una imagen si no tiene algo apropiado.
Haciéndolo bien: Xpand Laces
4. descuidar los detalles móviles
Es de conocimiento general que los sitios web deben diseñarse en marcos sensibles. Sería difícil encontrar un diseñador o desarrollador que argumentara lo contrario. Pero una plantilla sensible no es una solución única. El diseño debe ser ajustado para diferentes tamaños de pantalla.
Con demasiada frecuencia se descuida ese detalle. El sitio web funciona en dispositivos móviles, pero los tamaños de los tipos son demasiado pequeños o las imágenes tienen un tamaño sensible y proporcionalmente para la relación de aspecto diferente de un dispositivo móvil. Estos pequeños detalles pueden molestar seriamente a los usuarios.
Arréglalo ahora: Pasa algo de tiempo con tu diseño móvil. Tome nota de todos los detalles que parecen fuera de lugar y causan frustración. Compruebe el tamaño del texto, las imágenes, los tiempos de carga, la ubicación de los botones y realice los ajustes necesarios para proporcionar una experiencia más fluida.
Haciéndolo bien: y co
5. Color loco
Un diseñador aburrido creará un diseño inconexo. Una de las formas en que esto se manifiesta a menudo es con el color loco y la falta de una paleta definida.
Demasiado color puede distraer y, a menudo, tiene una sensación de aficionado. Por cada proyecto que saca una paleta inspirada en el arco iris, otros 1,000 proyectos fallan. A menos que las pautas de su marca requieran el uso de ese tipo de combinación de colores, evítelo. (Y si su marca tiene tales pautas, fomente una actualización).
Arréglalo ahora: Crear una paleta de colores fuertes. Comience con un color dominante y una o dos opciones secundarias. Si necesita más variación, use tonos y tonos de esa paleta (y cree reglas para esos también). No empieces a añadir más color.
Haciéndolo bien: Rush Flyer Printing
6. No dar a los usuarios algo que hacer
Imagina aterrizar en una hermosa página web, pero luego no saber qué hacer a continuación. ¿Te desplazas? ¿Haces click? ¿Hay un próximo paso para encontrar más contenido?
Debería haber.
Un buen diseño de sitio web es una red de acciones, interacciones y movimientos que fluyen de una página a otra. El objetivo es que los visitantes se conecten con el mayor contenido posible en el camino hacia una acción deseada.
Arréglalo ahora: Cada página en el diseño debe contener una llamada a la acción.Los usuarios deben saber exactamente cuál es el objetivo de cada página y querer hacer clic en el botón, completar un formulario, jugar un juego o comprar un producto. La estructura de diseño debe incluir elementos de interfaz de usuario en negrita para alentar clics o toques desde estilos de botones hasta instrucciones prácticas.
Haciéndolo bien: Vinebox
7. Demasiado de una buena cosa
No exageres con tu elemento super-cool.
¿Tienes una gran ilustración? Utilízalo Utilízalo grande, incluso. Pero no lo abarrote con muchas otras ilustraciones que diluyen la imagen.
Lo mismo ocurre con los iconos o cualquier otra técnica que sea su gancho para atraer a los usuarios. Quieres dejarlos deseados más, no abrumados por el volumen. Esto suena bastante fácil, pero puede ser difícil en la realidad. (Solo piense en el paquete de iconos que compró y siente la necesidad de obtener el valor de su dinero utilizando cada artículo).
Arréglalo ahora: Emplear menos es más estrategia. Utilice solo los elementos que necesite para mejorar el contenido. No lo abruman. Ir a través del diseño actual e imaginar tomar un elemento de cada página. ¿Qué podría ser? ¿Es mejor el diseño para ello?
Haciéndolo bien: Art Lovers Australia
Conclusión
Cada diseñador comete un error de diseño aquí y allá. (Algunos de nosotros ganamos más de lo que nos gustaría admitir). ¿Pero puedes identificar los problemas y recuperarte?
Debe tener un buen comienzo en esa dirección ahora con esta lista de errores y formas de corregirlos. No te avergüences cuando cometas un pecado de diseño, ajústalo y sigue adelante.