M谩s

    Dise帽o = Emociones + Usabilidad

    - Advertisement -

    Si bien las bellas artes son un campo subjetivo, el dise帽o gr谩fico es m谩s formulado en sus fundamentos. Un dise帽o efectivo debe hacer que las personas sentir de cierta manera y tomar una determinada acci贸n. En este art铆culo me gustar铆a compartir Gravity Switch 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 visual clara; se consistente; romper las reglas (cuando sea necesario); no abuse de los trucos; y finalmente probar, medir y mejorar.

    1. Defina primero los objetivos

    Apuesto a que pens贸 que iba a decir 芦enf贸quese primero en los usuarios禄, eso es lo que la mayor铆a gente decir. Olv铆dalo, empecemos con tus objetivos. Comience cada proyecto de dise帽o de sitio web con una sesi贸n de lluvia de ideas que describa objetivos claros y realistas del sitio web que refuercen su objeto comercialtivos

    Para ilustrar mejor esto, echemos un vistazo a Amazon. Su objetivo es maximizar las ventas de productos. A trav茅s de 鈥渧entas adicionales鈥 y 鈥渧entas cruzadas鈥 pueden maximizar el poder adquisitivo de cada usuario, pero para tener 茅xito en esto deben desacelerar 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 el dise帽o de un sitio puede cumplir objetivos comerciales 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 tradicionales todav铆a lo tienen.

    2. Centrarse en los usuarios en segundo lugar

    Con sus metas claras en mente, entonces necesitar谩 definir y priorizar usuarios. Sea lo m谩s espec铆fico posible. Algunos ejemplos de preguntas a realizar son:

    • 驴Desglose masculino vs. femenino?
    • 驴Nivel de Educaci贸n?
    • Ubicaciones en el pa铆s?
    • 驴Pasatiempos relacionados?
    • 驴Rango de ingresos?
    • 驴Qui茅n impulsa 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 que puedan asegurarse de que sus dise帽os no bloqueen las rutas de uso clave.

    3. Dise帽o para emociones

    Aseg煤rate de entender qu茅 emociones debe transmitir tu marcamuy Idea genial. Hacer preguntas. Obtener acuerdo. Y posiblemente lo m谩s importante, conc茅ntrese en estas emociones cuando presente a sus clientes. Nunca preguntes si a tu cliente le 鈥済usta鈥 un dise帽o. Cuando entregues dise帽os, deber铆as hacer preguntas como 芦驴Cu谩l de estos te hace sentir m谩s profesional?禄 o 鈥淐uando compares estos dos dise帽os ver谩s que este es m谩s moderno, mientras que este es m谩s din谩mico. Esas eran ambas emociones que eran importantes para ti, ahora que las est谩s viendo visualmente, 驴cu谩l crees que es la emoci贸n m谩s importante para presentar a tu p煤blico objetivo?

    emociones

    驴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

    Hay muchos elementos peque帽os que los usuarios de sitios web usan consciente e inconscientemente 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 deshace un dise帽o de p谩gina.
    • Espacio negativo: prestar mucha atenci贸n a los m谩rgenes, el relleno y la altura de las l铆neas es la diferencia entre parecerse al New York Times y a un bolet铆n de secundaria.
    • Fuentes: a todos les encanta elegir fuentes, pero un gran dise帽ador puede detectar una fuente profesional r谩pidamente y tiene la moderaci贸n de mantener la cantidad de fuentes en el sitio web en 1 o 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 de manera efectiva. Hay tantas reglas para elegir una buena paleta de colores, y si bien es tentador usar generadores de paletas de colores en l铆nea, dedique tiempo a dise帽ar su propia paleta de colores.
    • Dise帽o: cree un buen 鈥渇lujo鈥 visual de la p谩gina para que los ojos del usuario vayan a donde usted quiere que vayan en la p谩gina sin que otros elementos nublen visualmente sus objetivos.

    5. Cree una jerarqu铆a visual clara

    Los visitantes del sitio web hojean. Ellos no leen. Capte su atenci贸n y ll茅velos a la informaci贸n m谩s importante con un mensaje claramente definido. jerarqu铆a visual bien pensada. Un dise帽o bien pensado (sitio > p谩gina > secci贸n) lleva al usuario a trav茅s de la p谩gina de la manera que desea. 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 lo dif铆cil que es para su ojo saber de qu茅 trata la p谩gina o d贸nde comienza el art铆culo.

    mala-jerarqu铆a-visual

    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 de la p谩gina. 隆Actualmente tiene un tama帽o de fuente m谩s peque帽o que el t铆tulo que se encuentra m谩s abajo en la p谩gina! As铆 que aument茅 el tama帽o del t铆tulo del art铆culo y reduje el tama帽o de los encabezados.
  • El encabezado m谩s abajo en la p谩gina tambi茅n se desconect贸 visualmente del contenido para el que era un encabezado, por lo que tambi茅n ajust茅 el espacio debajo del encabezado y dej茅 el espacio sobre el encabezado para que los usuarios supieran 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 para que cuando un usuario escanee el lado izquierdo de la p谩gina para orientarse, el t铆tulo del art铆culo est茅 a la vista.
  • Elimin茅 las clases de borde y fondo en la propaganda azul para que ya no compita con el encabezado y elimin茅 el margen superior. Ya hab铆a una clase para hacerlo gris, lo que funciona bien en este caso.
  • Tambi茅n elimin茅 el texto y la imagen que distraen y que resaltan que se trata de un art铆culo reimpreso, as铆 como algunos p谩rrafos vac铆os y etiquetas

    .

  • buena-jerarqu铆a-visual

    Intencionalmente dej茅 todos los anuncios como estaban codificados originalmente, asumiendo que es una parte cr铆tica de esta p谩gina.

    6. Sea consistente

    No confunda a sus usuarios. Los enlaces deben ser consistentes y distintos. Si elige usar 铆conos, fotos e ilustraciones, aseg煤rese de que se vean y se sientan como si pertenecieran a un conjunto cohesivo. Las inconsistencias distraer谩n a su usuario y oscurecer su mensaje. No use m谩s de 3 fuentes; es mejor si todas pertenecen a la misma familia. Lim铆tese a 5 o 6 colores (Nota: el logotipo puede tener una fuente diferente y, a menudo, deber铆a serlo).

    7. Rompe las reglas (cuando sea necesario)

    Si hay algo particularmente 煤nico o importante que necesita 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 enfatiza la tasa impositiva al convertirlo en un elemento m谩s grande con un toque de color.

    tipos de iva

    Cuando la gente visita la p谩gina de informaci贸n sobre el impuesto al IVA, los dise帽adores de GOV.UK se aseguraron de que la informaci贸n que la mayor铆a de la gente necesita est茅 al frente y al centro.

    8. No abuses de los trucos

    Haz que tu dise帽o sea divertido, pero aseg煤rese de que esos elementos apoyen lo que est谩 tratando de lograr en el sitio. por ejemplo el Inze El sitio es hermoso de ver 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 comienzas a desplazarte, lo que desafortunadamente me llev贸 al final de la p谩gina. Como resultado, ni siquiera not茅 la sutil navegaci贸n que aparec铆a en la parte superior. Me desplac茅 la mayor parte del camino hasta el final antes de darme cuenta de que (finalmente) hab铆a una navegaci贸n en la parte superior. La navegaci贸n 芦oculta禄 es un efecto claro, pero el 芦dise帽o禄 me impidi贸 tomar la acci贸n deseada. Al final, transmite una imagen de marca confusa y descuidada.

    Compare Inze con lo que sucede en este art铆culo aqu铆 en Web Designer Depot cuando pasa un enlace en su computadora de escritorio. Tenemos un efecto limpio, pero no crea una 芦barrera禄 para los usuarios por el bien de un truco. Tambi茅n se degrada con gracia para que no se rompa en navegadores m贸viles o m谩s antiguos.

    9. Prueba. Medida. Mejorar

    Los sitios web evolucionan. Dise帽o para la flexibilidad y la adaptabilidad. La recopilaci贸n y el an谩lisis de datos de prueba continuos impulsar谩n una mejora constante. Recuerde, se trata de crear un dise帽o que cumpla con sus objetivos.

    tci-ejemplo

    Al medir cuidadosamente los resultados de una serie de cambios menores en el dise帽o de la p谩gina de destino original (izquierda), creamos un nuevo dise帽o (derecha) que aument贸 el porcentaje de suscripciones en un 60 %.

    Recuerda

    El dise帽o gr谩fico efectivo necesita conectar emocionalmente al usuario con la marca y, al mismo tiempo, hacer que haga lo que usted quiere. Se puede hacer.

    驴Est谩s de acuerdo con estas reglas para el dise帽o? 驴A帽adir铆as alguno m谩s? H谩ganos saber sus puntos de vista en los comentarios.

    Imagen/miniatura destacada, imagen de emoci贸n a trav茅s de Shutterstock.

    Populares

    M谩s de esta categor铆a

    DEJA UNA RESPUESTA

    Por favor ingrese su comentario!
    Por favor ingrese su nombre aqu铆

    Este sitio usa Akismet para reducir el spam. Aprende c贸mo se procesan los datos de tus comentarios.