Diseño = Emociones + Usabilidad
Si bien las bellas artes son un campo subjetivo, el diseño gráfico es más formulista en sus fundamentos. Un diseño efectivo debe hacer que las personas se sientan de cierta manera y tomen una determinada medida . En este artículo, me gustaría compartir Gravity Switch's principios de diseño web y nuestro pensamiento detrás de ellos.
Esas reglas son: definir metas primero; centrarse en los usuarios en segundo lugar; diseño para la emoción; seguir las reglas del diseño visual; construir una jerarquía clara y visual; se consistente; romper las reglas (cuando sea necesario); no abusar de los trucos; y finalmente probar, medir y mejorar.
1. Definir objetivos primero
Apuesto a que pensaste que iba a decir "concéntrate primero en los usuarios", eso es másgentedecir. Olvídate de eso, comencemos con tus objetivos. Comience cada proyecto de diseño de sitio web con una sesión de lluvia de ideas que describa objetivos de sitio web claros y realistas que refuercen los objetivos de su negocio .
Para ilustrar mejor esto, miremos a Amazon. Su objetivo es maximizar las ventas de productos. A través de "upselling" y "cross-selling" pueden maximizar el poder de compra de cada usuario, pero para tener éxito en esto, ralentizan el proceso de compra. A diferencia de muchos de sus competidores, Amazon no tiene un botón de "comprar ahora" en sus resultados de búsqueda. Los usuarios deben visitar una página más (con posibles ventas adicionales) antes de realizar una compra. Este es un ejemplo perfecto de cómo un diseño de sitio puede cumplir objetivos de negocios claros.
La mayoría de los sitios de comercio electrónico modernos han eliminado el botón "comprar ahora" de sus resultados de búsqueda, aunque algunos puntos de venta todavía lo tienen.
2. Centrarse en los usuarios segundo
Con sus objetivos claros en primer lugar, deberá definir y priorizar a los usuarios . Sea lo más específico posible. Algunos ejemplos de preguntas para hacer son:
- ¿Desglose masculino / femenino?
- ¿Nivel de Educación?
- Ubicaciones en el país?
- Pasatiempos relacionados?
- ¿Rango de ingresos?
- ¿Quién está impulsando las compras de productos para niños? Niños? Padres? ¿Abuelos?
El punto clave es que los diseñadores deben conocer a los usuarios para asegurarse de que sus diseños no bloqueen las rutas de uso de las claves.
3. Diseño para las emociones
Asegúrese de entender qué emociones debe contener su marca . Idea genial. Hacer preguntas. Obtener un acuerdo Y posiblemente lo más importante, concéntrese en estas emociones al presentarlas a sus clientes. Nunca preguntes si a tu cliente le gusta un diseño. Cuando entrega diseños, debería hacer preguntas como "¿Cuál de estos te hace sentir más profesional?" O "Al comparar estos dos diseños verás que este es más moderno, mientras que este es más dinámico. Esas fueron las dos emociones que fueron importantes para ti, ahora que las estás viendo visualmente, ¿cuál crees que es la emoción más importante que debes presentar a tu público objetivo? "
¿Cuáles de estas organizaciones son divertidas? ¿Relajante? ¿Innovador? ¿Ocupado? ¿Real? (Diseños de @JessicaShiner y Christine Mark)
4. Sigue las reglas del diseño visual
Existen muchos elementos pequeños que los usuarios de sitios web utilizan consciente y subconscientemente para decidir si van a confiar en un sitio web. Los más importantes son:
- Recortar: seleccionar fotos es solo la mitad de la batalla, recortar fotos es lo que hace o rompe el diseño de una página.
- Espacio negativo: prestando especial atención a los márgenes, el relleno y la altura de la línea es la diferencia entre parecerse al New York Times vs. un boletín de la escuela secundaria.
- Fuentes: a todo el mundo le encanta elegir fuentes, pero un gran diseñador puede detectar rápidamente una fuente profesional y tiene la restricción para mantener el número de fuentes en el sitio web entre 1 y 2 (sin contar el logotipo, que a menudo es su propia fuente).
- Colores: los colores son una de las cosas más difíciles de usar para los diseñadores. Hay tantas reglas para elegir una buena paleta de colores, y aunque es tentador usar en línea generadores de paleta de colores , dedique tiempo a diseñar su propia paleta de colores.
- Diseño: crea un buen "flujo" de página visual para que los ojos del usuario vayan a donde quieras que vayan en la página sin que otros elementos nublen tus objetivos visualmente.
5. Construya una jerarquía clara y visual
Los visitantes del sitio web descremada. Ellos no leen. Capture su atención y obtenga la información más importante con una jerarquía visual claramente definida y bien pensada . Una sección bien pensada de diseño - sitio> página - lleva al usuario a través de la página de la manera que desee. Los usuarios deberían poder echar un vistazo a su página y entenderla en una fracción de segundo.
Mire el siguiente ejemplo de un artículo y observe cómo es difícil para su ojo saber de qué se trata la página o dónde comienza el artículo.
A continuación se muestra una maqueta que hice cambiando una docena de líneas de CSS para crear una jerarquía visual más clara en esta página de las siguientes maneras:
- El título del artículo debe ser el elemento más destacado en la página. ¡Actualmente es un tamaño de letra más pequeño que el encabezado más abajo en la página! Así que aumenté el tamaño del título del artículo y disminuí el tamaño de los títulos.
- El encabezado más abajo de la página también se desconectó del contenido para el que era visualmente, por lo que también apreté el espacio debajo del encabezado, dejando el espacio sobre el encabezado para que los usuarios sepan que es un encabezado para el párrafo debajo. .
- También moví la pequeña imagen a la derecha del título en lugar de a la izquierda, de modo que cuando un usuario escanea el lado izquierdo de la página para orientarse, el título del artículo está en su visión.
- Eliminé las clases de borde y fondo en el marcador azul para que no compita con el encabezado y eliminé el margen superior. Ya había una clase en el lugar para que sea gris, que funciona bien en este caso.
- También eliminé el texto y la imagen que distraen que destaca que este es un artículo de reimpresión, así como algunos párrafos vacíos y
etiquetas.
Dejé intencionalmente todos los anuncios tal como estaban originalmente codificados, suponiendo que esa es una parte fundamental de esta página.
6. Sea consistente
No confundas a tus usuarios. Los enlaces deben ser consistentes y distintos. Si elige usar iconos, fotos e ilustraciones en todas partes, asegúrese de que se vean y se sientan como si pertenecieran a un conjunto cohesivo. Las incoherencias distraerán a su usuario y oscurecerán su mensaje. No use más de 3 tipos de letra, es mejor si todos pertenecen a la misma familia. Límite a 5-6 colores (Nota: el logo puede ser una fuente diferente, y a menudo debería ser).
7. Rompe las reglas (cuando sea necesario)
Si hay algo particularmente único o importante que debe resaltar, es posible que deba "romper las reglas". Puede usar uno o dos colores contrastantes para ayudar a que el elemento se destaque. Por ejemplo, el sitio web del Reino Unido a continuación destaca la tasa de impuestos al hacer de este un elemento más grande con un toque de color.
Cuando las personas visitan la página de información sobre el Impuesto sobre el IVA los diseñadores de GOV.UK se aseguraron de que la información que la mayoría de las personas necesita sea de primer plano.
8. No abusar de los trucos
Haga que su diseño sea divertido, pero asegúrese de que esos elementos respalden lo que intenta lograr en el sitio. Por ejemplo, el Inze el sitio es hermoso y maravilloso en el móvil, pero cuando lo visité en mi computadora de escritorio estaba perdido. Resulta que la navegación está oculta hasta que empiezas a desplazarte, lo que desafortunadamente me llevó a la parte inferior de la página. Como resultado, ni siquiera noté la navegación sutil que aparece en la parte superior. Me desplacé la mayor parte del camino hasta el fondo incluso antes de darme cuenta de que había (finalmente) una navegación en la parte superior. La navegación "oculta" es un efecto limpio, pero el "diseño" me impidió tomar la acción deseada. Al final, transmite una imagen de marca descuidada y confusa.
Compare Inze con lo que sucede en este artículo aquí en Web Designer Depot cuando pasas un enlace en tu computadora de escritorio. Tenemos un efecto claro, pero no crea una "barrera" para los usuarios en aras de un truco. También se degrada graciosamente por lo que no se romperá en los navegadores móviles o antiguos.
9. Prueba. Medida. Mejorar
Los sitios web evolucionan. Diseño para flexibilidad y adaptabilidad. Recolectar y analizar los datos de prueba en curso generará una mejora constante. Recuerde, se trata de crear un diseño que satisfaga sus objetivos.
Al medir cuidadosamente los resultados de una serie de pequeños cambios de diseño en la página de destino original (izquierda), se nos ocurrió un nuevo diseño (a la derecha) que aumentó el porcentaje de registros en un 60%.
Recuerda
El diseño gráfico eficaz necesita conectar emocionalmente al usuario con la marca y, al mismo tiempo, lograr que hagan lo que usted desea. Se puede hacer.
¿Estás de acuerdo con estas reglas para el diseño? ¿Agregarías algo más? Háganos saber sus puntos de vista en los comentarios.
Imagen / miniatura destacada, imagen de emoción a través de Shutterstock.