advertisement

Evolution Day: Usabilidad Web

43 %
57 %
advertisement
Information about Evolution Day: Usabilidad Web

Published on February 18, 2014

Author: PIMOD_com

Source: slideshare.net

advertisement

Miro y Entiendo: Fundamentos del diseño usable Curso Usabilidad Web: Monitores, Tabletas y celulares. Dictado por Daniel Mordecki Hotel Sheraton Montevideo 24/01/2014

Una definición formal La Usabilidad tiene como objetivo reducir al mínimo las dificultades de uso inherentes a una herramienta informática, analizando la forma en que los usuarios utilizan las aplicaciones y sitios Web con el objetivo de detectar los problemas que se les presentan y proponer alternativas para solucionarlos, de modo de que la interacción de dichos usuarios con las aplicaciones y sitios Web sea sencilla, agradable y productiva.

En forma esquemática Objetivo: Reducir las dificultades de uso esenciales de una herramienta informática Metodología: Analizar la forma en que los usuarios utilizan las aplicaciones y sitios Web Resultado: Interacción sencilla, agradable y productiva.

3 niveles de interacción Miro y entiendo Leo y entiendo Pienso y entiendo ¡¿ ?!

Miro y entiendo La asociación de formas, colores, tamaños, y ubicación, entre otros, permite comprender sin información adicional

Google Google Una Sola imagen poco texto menos es mas, vínculos azules y subrayados.

Fondo y marco para reforzar agrupación

Bloques bien definidos El fondo agrega desorden visual

Correcta agrupación El espaciado podría mejorar

Correcta agrupación Se ve casi como un bloque

El espaciado podría mejorar

Correcta agrupación Se ve casi como un bloque

No son links!!!

Leo y entiendo Haga click aquí Textos en los botones: entender bien Call to action, siempre se puede ser más claros. Leo y Entiendo Ejemplo: Google Una Sola imagen poco texto menos es mas, vínculos azules y subrayados.

Legibilidad Utilice colores con contraste entre texto y fondo:  Negro sobre fondo blanco (óptimo)  Blanco sobre fondo negro (casi tan bueno) Evitar color de fondo y texto distinto de blanco o negro a la vez (rojo sobre verde, azul sobre rosado, etc.) Si utiliza fondo, es mejor liso que con imágenes y si utiliza imágenes, que sean muy sutiles. Utilizar fuentes lo suficientemente grandes como para que se puedan leer

Legibilidad ¡¡¡Deje el texto quieto!!! EVITE ESCRIBIR CON MAYÚSCULAS, ES 10% MÁS DIFÍCIL DE LEER. Las itálicas se leen muy mal sobre la pantalla, sobre todo cuando son pequeñas Y ni que hablar de los tipos de letra extraños, como script, entre muchos otros.

Redacción Breve: sin concesiones Un párrafo una idea Directo: lenguaje positivo, conciso, sin floreos. Siempre con título Uso intensivo de listas Cuidar relación contenido  navegación

Légibilidad mínima Legibilidad baja

Legibilidad mínima Legibilidad baja

Títulos claros, párrafos cortos

Jerarquía 1 2

24 segundos para la noticia 4

33 segundos para la noticia 3

30 segundos para la noticia 3 Julio 2013

Alternativas para móviles

Distribución de tráfico - 1 Sitio con 5 millones de visitas al mes

Distribución de tráfico - 2 Sitio con 130 mil visitas al mes

Distribución de tráfico - 3 Sitio con 1 millón de visitas al mes

Distribución de tráfico – 3 Un año atrás (10/2012) Sitio con 1 millón de visitas al mes

Sistemas Operativos Combinación de sitios

Tablet 10.2 pulgadas

Tablet 10.2 pulgadas

Tablet 10.2 pulgadas

Tablet 10.2 pulgadas

Tablet 10.2 pulgadas

La mayoría tiene además una App Solo para iOS

BROU tiene además una app

Diseño responsivo Se basa en el diseño líquido. Agrega la modificación del esquema de distribución de elementos.

Ejemplo

Diseño responsivo - Ventajas Un solo sitio para todos los dispositivos Brinda una experiencia móvil de calidad en el 100% del contenido del sitio La adaptación es a nivel de estilos: no requiere ni contenido ni programación especial Permite trabajar sobre la navegación, los formularios y la interacción

Aplicación Móvil (App) - Ventajas Control total del dispositivo, con acceso a todas las características (teléfono, sms, cámara, brújula, GPS, etc.) Se puede almacenar datos localmente Velocidad de ejecución Funcionamiento con o sin conexión

Aplicación Móvil (App) - Desventajas Una versión para cada sistema operativo: iOS, Android, Windows Phone, etc. Implementación compleja para obtener calidad El usuario tiene que instalarla para poder usarla, no está siempre disponible Dependencia de las tiendas (Google Play, Apple Store, Windows Phone Store, …) Manejo de versiones y compatibilidades

Usabilidad de dispositivos móviles

Tiempo de descarga Obsesión por páginas delgadas es la única receta El mundo móvil castiga más duramente la lentitud que el escritorio Para peor, el teléfono se “duerme” si la descarga demora

Contenido primero, después navegación

Modelo de interacción de los 80 … … pero ahora es touch

1 - Login

2 - Contenido

5 Nuevo 4 Contenido 3 Digitación 2 – Login 1 - Menú menú El teclado tapa los campos, inclusive en una pantalla de 5”

Textos: más grandes, más breves

Textos: más grandes, más breves

Textos: más grandes, más breves

Imágenes: recortar específicamente Original

“Lo esencial es invisible a los ojos… Los hombres han olvidado esta verdad. Pero tú no debes olvidarla.” Diálogo entre El Principito y el zorro Antoine De Saint-Exupéry

Add a comment

Related pages

Usability Inspection Methods: Book by Jakob Nielsen

Usability Inspection Methods Jakob Nielsen, 1994. The first comprehensive, book-length work in the field of usability evaluation. Designed to ...
Read more

Usability - Wikipedia, the free encyclopedia

... and contribute ideas and enthusiasm to the evolution of ... The UPA also sponsors World Usability Day each ... Web usability; World Usability Day;
Read more

25 Years in Usability - Nielsen Norman Group: UX Training ...

25 Years in Usability. ... Evolution: How Things Have ... Not a day passes without a big-shot CEO declaring support for better user experience.
Read more

Website | Define Website at Dictionary.com

Website definition, a connected group of pages on the World Wide Web regarded as a single entity, usually maintained by one person or organization and ...
Read more

Nielsen Global E Commerce Report August 2014 - scribd.com

... EVOLUTION OR REVOLUTION IN THE FAST-MOVING ... E-commerce is big business and getting bigger every day. ... 03 Cuestionarios Modelo Usabilidad Web.
Read more

Brave People | A Digital Creative Agency In Tampa, FL.

Brave People of Tampa, FL An Agency for the Detailed. Hire Us. A New Approach to Investment Kingfish Group ... After years of evolution in the digital ...
Read more

Linux Enterprise Desktop | SUSE

60 Day Free Trial 60 Days of Patches ... In addition, SUSE Linux Enterprise Desktop gives you dozens of leading applications, including a web browser ...
Read more

The $300 Million Button UX Articles by UIE

The $300 Million Button by Jared M ... Web Form Design: Filling in ... to find out it reached about 160,000 per day. 75% of these people never tried to ...
Read more