Digitales 2017

[digitales2017-blog]

Has tu contenido saltable

Los lectores están en una página web por una razón. Están buscando algo. Si no tienen inmediatamente la sensación de que van a encontrar lo que buscan debido a su uso de bloques gigantes de texto, es probable que rebote.

Los patrones de lectura forman un patron de “F”. Perdiendo interes a medida que bajan por  el sitio.

Recomendaciones: Asegúrate que tu contenido sea saltable, usando Títulos, Espacio negativo, etc.

(Source: ConstantContent - 7 Best Practices for Improving Website Usability )

[digitales2017-blog]

Los usuarios se centran en las caras.

Las personas instintivamente notan a otras personas de inmediato cuando se ven a la vista. En las páginas web, tendemos a centrarnos en las caras y los ojos de las personas, lo que da a los vendedores una buena técnica para atraer la atención. Pero nuestra atracción por los rostros y ojos de las personas es sólo el principio; resulta que realmente echamos un vistazo en la dirección que la persona en la imagen está buscando.

Recomendaciones:

- Usar la dirección de la foto para mover la atención del usuario

Ejemplo:

Aquí hay un estudio de seguimiento de los ojos que demuestra esto. Estamos instintivamente atraídos por las caras, pero si esa cara está buscando en otra parte que no sea nosotros, también miraremos en esa dirección. Aproveche este fenómeno llamando la atención de sus usuarios sobre las partes más importantes de su página o anuncio.

Fuente: https://www.smashingmagazine.com/2009/09/10-useful-usability-findings-and-guidelines/

[digitales2017-blog]

Conservar los clicks de los usuarios

Volver al motor de búsqueda para encontrar una versión diferente de cada producto es una pérdida de tiempo para el usuario. Los distintos tamaños y colores en que puede variar el producto deberían estar a la vista del comprador.

Lo anterior cumple con el principio de Minimalismo Funcional, ya que es información relevante que debería tener el usuario antes de realizar la compra.

En el ejemplo de Urban Outfitters, se muestra la selección del usuario del tamaño y el color del marco a comprar.

En Hot Topic, al seleccionar la talla y cantidad del producto a comprar, el botón cambia para que el usuario lo note mejor.

Recomendaciones:

Tener todas las variaciones de un producto en la misma página.

Marcar los datos elegidos por los usuarios de forma diferente para notarlo.

Fuente: http://usabilitygeek.com/

[digitales2017-blog]

Mostrar el tamaño del producto

Mostrar el tamaño del producto puede ser necesario para que los usuarios conozcan sus proporciones reales.

Esta práctica responde al principio de Minimalismo Funcional, ya que cumple con mostrar información relevante para el usuario.

Urban Outfitters tiene una silla en su catálogo y para proporcionarla, la muestra con una persona parada sobre ella.

En Amazon.com se muestra un producto siendo usado, lo que ayuda a proporcionarlo con el cuerpo humano.

Recomendaciones:

Si el producto es pequeño, se puede situar al lado de otro producto (con el que los usuarios estén familiarizados) como referencia. Lo mismo aplica para los productos más grandes.

En las imágenes se puede mostrar una persona haciendo uso del producto para reconocer las proporciones de éste.

Fuente: http://usabilitygeek.com/

[digitales2017-blog]

Agregar políticas de privacidad

Si se requieren datos personales como nombre, rut, localización, dirección IP, entre otros, se debe asegurar en la misma pestaña que su información no será almacenada, y pedir autorización en caso de ser revelada a terceros.

En las políticas se debe incluir la información justa y necesaria, relevante para el usuario, como pide que se cumpla en el principio de Minimalismo Funcional. Es por esto que deben ser claras y concisas, para que no existan vacíos legales.

Practical E-commerce usa lineas de privacidad en su página de contacto.

Hot Topic hace caso omiso a esta práctica, y tiene una pestaña muy extensa con todas sus políticas de privacidad.

Recomendaciones:

Incluir sellos verificados como el de TRUSTe, el cual asegura que las políticas de privacidad son de altos standards.

Agregar líneas políticas como “Respetamos su privacidad” junto a los datos que los usuarios puedan sentirse inseguros de entregar.

Fuente: http://usabilitygeek.com/

[digitales2017-blog]

Usa la predictibilidad a tu favor

Ser creativo con su sitio web es agradable, pero no practicar esto en áreas donde la predictibilidad puede ser preferida sobre la singularidad. Esto es particularmente cierto para los menús de navegación de sitios web que los visitantes van a utilizar simplemente para pasar de una página a otra.

El uso de una barra de progreso en encuestas es comun. Mantiene al usuario atento a su progreso, y le da una meta a la cual llegar.

Aquí Youzee tiene una iconografía para describir los pasos de su sitio o su servicio, pero no comunican bien su propósito, y confunden al usuario.

Crear navegación no convencional sólo lo hará confuso - y los usuarios confundidos son menos propensos a permanecer en su página por más tiempo. Recuerda el principio del minimalismo.

Recomendaciones: Estudia lo que le es natural al usuario, y después úsalo para ayudarlo a usar tu sitio.

(Source: 10 Guidelines For Navigation Usability - Usability Geek )

[digitales2017-blog]

Persuadir con números

Los números proyectan confianza, un diseñador que ha hecho 100 páginas web, o 50 aplicaciones va sonar de mayor confianza que un diseñador “con vasta experiencia en el rubro”. esta especificidad permite al usuario sentir que tiene información concreta de lo que esta comprando.

Ejemplo:

El sitio web de esta fotografa provee informacion exacta de sus méritos, no un indice vago de su experiencia.

Recomendaciones:

- Obviamente hay que mantener los números simples, indices económicos o datos científicos solo servirán en ciertos círculos.

Fuente: http://www.smartinsights.com/user-experience/essential-2017-web-design-trends/

[digitales2017-blog]

Permite el uso de Shortcuts a usuarios frecuentes

Permite a los usuarios adaptar (manipular y personalizar) acciones frecuentes. Las abreviaturas, las teclas de función, los comandos ocultos y las macros son muy útiles para un usuario experto.

El OSX de Apple usa comandos rápidos para navegar en Finder.

Universalmente, los navegadores de carpeta o internet, usan shortcuts establecidos para crear o desplazarse entre ventanas. Esto corresponde al principio de eficiencia.

Recomendaciones: Piensa que tipo de atajos, customizaciones, o abreviaciones, podrían agilizar la navegación de tu usuario habiloso.

(Source: 10 Usability Heuristics for User Interface Design - UX Planet )

[digitales2017-blog]

Adios imágenes basura

Hoy en día las páginas we son mas que una plataforma de información. hoy en día la página web de cualquier negocio o empresa debe reflejar los valores de la empresa, y no solo servir como plataforma de comunicación.

Cada vez mas, la gente basa su percepción a través de las cosas que descubre en internet, por lo que nuestra página debe comunicar esos elementos de manera muy específica.

Ejemplo:

Esta imagen es muy noventera para los estándares actuales de diseño de web, si no tengo una imagen mas específica y comunicativa los usuarios no van a enganchar.

Recomendaciones:

- Existen bancos de imágenes en los que uno puede comprar cientos y miles de imágenes, organizados por mood, colores, etc... Lo barato a veces sale caro.

-Evitar usar fotografías no profesionales, la foto de mi iphone no será suficiente a menos que tenga un conocimiento profundo o experiencia utilizando cámaras.

Fuente: https://econsultancy.com/blog/68600-10-sensible-web-design-trends-for-2017

[digitales2017-blog]

Adios Parallax

A pesar de haber sido un trend en años pasados, el parallax scrolling esta siendo lentamente dejado atrás por los buenos sitios y aplicaciones. La mayoría de las veces los usuarios quieren cumplir alguna tarea de manera rápida y efectiva, o revisar contenido específico. El parallax solo agrega una imagen de fondo mas “animada” en un lugar donde el usuario no esta poniendo su atención.

Ademas, el parallax causa ralentización de las cargas, y en general de cualquier página por su peso gráfico.

Ejemplo:

A pesar de ser visualmente atractivo, el efecto parallax no suma a la intencion de la página de urgir a la gente a compartir rutas arquitectónicas de urbanwalks.

Recomendaciones:

- Cualquier cosa animada vale mas la pena como una micro animación que me impulsa a tomar decisiones, pues estas tienen tiempos de carga mas rápidos.

- El fondo de la página debería ser mas limpio, para priorizar la captura de información por parte del usuario.

Fuente: https://econsultancy.com/blog/68600-10-sensible-web-design-trends-for-2017

[digitales2017-blog]

Usar iconos y símbolos para transmitir el significado de una interacción

Los iconos son fundamentales para la navegación de la pagina, hay que intentar no variar mucho, el usuario podría confundirse.

Los símbolos y iconos están muy estandarizados, por eso evitar intentar ser diferente al resto si es que esto saboteara tu sitio y/o app, los usuarios no suelen reconocer iconos que nunca han visto.

Recomendaciones: 

- mantener la misma linea grafica

- no abusar del uso de los iconos

Ejemplo:

Fuente: https://www.nickkolenda.com/user-experience/#ux-strategy36

Juan José Abogabir

[digitales2017-blog]

Romper el texto con la variedad visual.

La mayoría de los usuarios procesarán su contenido escaneándolo, por eso se debe hacer su interfaz más propicio para la exploración.

Es mejor para reconocer secciones si se varia en el display de estas, de esta manera, el usuario sabra donde se encuentra en todo momento.

Esta practica funciona en paginas con mucho contenido, ayudando a dividirlo y mejorando la navegación para el usuario.

Recomendaciones:

- Utilizar sin abusar

- Variar dependiendo del contenido

- No usar las mismas en distintos contenidos

Fuente: https://www.nickkolenda.com/user-experience/#ux-strategy36

Juan José Abogabir

[digitales2017-blog]

Cree una Guía de Estilo de Inicio

Create a document summarizing the design specifications for each element in your interface.

El trabajo sera simplificado y ayudara a crear una linea grafica coherente, de esta manera el usuario podra reconocer secciones y jerarquias dentro del sitio o pagina.

Otros elementos incluyen:     Colores     Grids y Layouts     Colocación y Posicionamiento     Tamaño y forma     Etiquetas y Lenguaje     Navegación     Mesas     Listas     Links     Voz y tono

Recomendaciones:

- Usar tipografías simples y legibles 

Ejemeplo:

Fuente: https://www.nickkolenda.com/user-experience/#ux-strategy26

[digitales2017-blog]

Indique las opciones que elija la mayoría de los usuarios

Las opciones requieren esfuerzo. Reduzca ese esfuerzo simplificando esas tareas.

Los usuarios sabran con mayor rapidez que opción es la más factible y mejorara el tiempo que usen en la pagina.

Recomendaciones: 

- Usar para diagramas o varios menus

Fuente: https://www.nickkolenda.com/user-experience/#ux-strategy16

Juan José Abogabir

[digitales2017-blog]

Planificar cuidadosamente el “default”

Al pensar cuidadosamente y anticipar a los usuarios es posible hacer que reciban menos carga para tomar decisiones. Esto es especialmente importante en los procesos engorrosos en los que los usuarios deben proporcionar mucha información, como en las formas.

Conocer al usuario permite entregarles algunos campos pre-definidos para así mantenerlos menos cansados o frustrados en el proceso de completar una tarea.

Ejemplo:

Uber reconoce los lugares a los que mas vamos, y tiene un algoritmo que le permite conocer con gran exactitud estos lugares, en base a los horarios y la cantidad de tiempo que pasamos en cada lugar.

Recomendaciones:

- La información preseleccionada debe poder ser cambiada de manera fácil, no podemos esperar saber siempre lo que el usuario va a rellenar

- Para la información como la del ejemplo es importante haber pedido al usuario el permiso pertinente en primer lugar, no queremos parecer como que estamos persiguiendo al usuario.

- Hay informacion mas sensible, como raza, genero o edad, que no es recomendable de intuir.

Fuente: https://www.usability.gov

[digitales2017-blog]

Asegúrate de que el sistema informa de lo que sucede

Queremos que el usuario tenga la mayor seguridad de que el servicio en cuestión va sobre ruedas. Si el usuario tiene que esforzarse mucho para obtener la información clave sobre el estado de su tarea, solo se va a frustrar.

La utilización de la interfaz para comunicar el estado del servicio, e incluso los siguientes pasos a seguir, ademas de toda la información pertinente, asegura un usuario feliz.

Ejemplo:

En el caso de uber, no solo se muestra el auto y su ubicación, ademas ofrece maneras de contactar al chofer, ver la placa del auto y conocer el nombre del conductor.

Recomendaciones:

- Añadir botones grandes y notorios que permitan acceder a mayor información, a cancelación de desiciones anteriores, etc.

- La información en tiempo real siempre viene bien, como sabemos, el usuario debe sentir el control.

Fuente: https://www.usability.gov

[digitales2017-blog]

Exhibir certificados de autenticidad/distribuidores reconocidos

Se debe tener algún tipo de acuerdo de distribución, o certificados de autenticidad para poder vender productos en un sitio. Se hace evidencia de esto para demostrarle a los usuarios que no están comprando replicas, si no que productos originales.

Los sellos de certificación cumplen con información relevante para el usuario, por lo que tenerlo presente en la página responde al principio de usabilidad Minimalismo Funcional.

En Myntra se muestra su sello de productos 100% originales en el footer del sitio.

Bag Servant incrementó sus ventas en un 72.05% y se les otorgó el premio Rare WOW, el cual se muestra en el header del sitio.

Recomendaciones:

Aplicarlos en lugares estratégicos en la página para que el usuario pueda encontrarlos fácilmente.

Utilizar tamaños adecuados para el espacio destinado a los sellos.

Fuente: http://usabilitygeek.com/