Usabillidad web 2013

UsabilidadSitios web amigables

Steve Krug

“No me hagan pensar”

Primera regla de usabilidad de Krug

Pensando

Sin pensar

Para que las páginas web no me hagan pensar tienen que…..

Explicarse por sí mismas, ser evidentes

Tener un objetivo claro

Dirigirse a un público determinado (o si lo hacen a un público amplio, considerar ese punto))

Punto de partida…

Que el internauta vea la página y no tenga que pensar (o por lo menos que no invierta muchos segundos en pensar).

Que toque el botón tal, o vaya a la home, que cliquée. Que se maneje intuitivamente.

¿Qué cosas nos hacen pensar?

Términos no usuales.

Ejemplo

¿Qué nos hace pensar?

Links y botones que no son obvios (que nos hacen dudar si realmente son links o botones

¿Qué tan difícil puede ser saber si eso es o no es un link?

Basta con pasar el cursor por arriba y ver si se transforma en manito, ¿no?

Sí, pero no….

Cuando se usa la web, cada signo de pregunta suma puntos al trabajo mental que a su vez distrae la atención de la tarea central: hacer lo que tengo que hacer en esa web.

¿Hay algo más sencillo que buscar?

Hay formas sencillas y otras no tanto

No a los manuales

Krug parte del convencimiento de que a la mayoría de la gente no le gusta invertir tiempo en saber cómo hacer las cosas.

Quieren hacerlas y ya.

Obviedad

Por eso casi todo en un sitio web deber ser los más OBVIO posible

Usables?

¿Cómo se descifran las páginas web?

Gran misterio

Todos leen un sitio web de manera diferente

Lectura vs scaneo

Mito/realidad

¿Cómo usamos la web?

Miramos con atención?

Escanemos y nos detenemos dónde nos interesa?

Cliqueamos en el primer botón que se destaca?

Diseñar para el escaneo

Jerarquía visual clara

Convenciones

Dividir las páginas en áreas claramente definidas

Que lo cliqueable sea muy obvio

Bajar el nivel de ruido (contaminación) al mínimo indispensable.

No leemos páginas

Las escaneamos

Diseño/uso

Señales claras ¿En qué sitio estoy?

¿En qué página estoy?

¿Cuáles son las principales secciones de este sitio?

¿Qué opciones tengo en este nivel?

¿Cómo puedo buscar?

¿Por qué?

Usamos la web para ahorrar tiempo

Por eso siempre estamos apurados

Sabemos que no tenemos que leer todo; buscamos lo relevante para nuestros objetivos.

Estamos acostumbrados a escanear (diarios, revistas, folletos)

El nuevo Amazon

¿Qué quieren que haga acá?

Principio básico

Eliminar dudas, no crear nuevas dudas

Claridad

Inicio/Home

Preguntas que debe responder la home page

¿Qué es esto?

¿Qué tienen acá?

¿Qué puedo hacer aquí?

¿Por qué debería quedarme en este página y no irme a otra?

¿Por dónde empiezo?

Principio de la jerarquía

Cuanto más importante, más prominente

Pero no todo puede ser importante.

Los títulos más importantes son más grandes, gruesos o con tipografías en negrita. Están más arriba en la página y tienen blancos alrededor.

Muy importante

Un poco menos importante

Todavía menos importante

Inexistente

Relaciones

Los elementos de una página que se relacionan lógicamente, deben estar vinculados visualmente.

Los elementos se agrupan visualmente para mostrar qué es parte de qué.

Jeraquía visual viene de lejos

Cuando hay errores…

El internauta pierde tiempo buscando pistas que le indiquen qué es lo más importante, dónde está lo que busca.

Convenciones

Lo que funciona se pega

Lo obvio

Lo no obvio

Cuanto menos ruido, mejor

No a:

La complejidad sin razón

Las distracciones inútiles

La hipótesis de los clicks

Teoría sin bases, pero extendida: “el usuario está a un click de irse de tu página”

Krug dice que no es real.

Usuario tiene más paciencia de la que se cree.

Puede cliquear varias veces, en tanto considere que está avanzando. Y siempre que tenga forma siempre de volver atrás (botón Back)

Puede seguir clickeando en tanto entienda que las opciones son lógicas.

Aunque algunas no lo son

“-Deshacerse de la mitad de las palabras en cada página. Y luego deshacerse de la mitad de lo que queda”

Segunda regla de Krug

Palabras contadas

Evitar términos que no agregan nada.

Evitar instrucciones inútiles

¿Usabilidad?

Pensar y diseñar un sitio web para que los seres humanos puedan usarlo

Nielsen

Tabletas no es igual a móviles

Usabilidad tabletas

Principales problemas

Diseño plano

Diseño incorrectamente escalado.

Gestos Flujo de tabletas

Sitios web se adaptan bien

La mayoría de los sitios web se adaptan bien a las tabletas, a diferencia de lo que sucede en pantallas de celulares.

Apps vs sitios web móviles

Diseño y desarrollo de apps: desafíos extras (incluyendo la adaptación de la interfaz de usuario a cada tipo de tableta)

La pregunta es: ¿por qué una empresa u organización debería tener una app?

Nielsen aconseja que se atengan a sus sitios web y que inviertan en mejorar la usabilidad de la web en vez de hacerlo en una app

Apps, cuándo desarrollarlas

-Cuando la empresa tiene una funcionalidad extra con valor por sobre lo que ofrece en su sitio web.

-Nunca utilizar la app para móviles escalada a tabletas. Miles se usan de esta manera pero se desaprovecha espacio de pantalla.

10 errores frecuentes en diseño web

Fuente. Nielsen Norman Group

1- Búsquedas defectuosas

• Manejan mal las faltas de tipeo, las variantes de una palabra.

• Devuelven resultados no pertinentes.

• Búsqueda: cable a tierra para el usuario

2- PDFs para leer online

• Formato PDF es ideal para manuals y otros tipos de documentos de muchas páginas.

• Pero no para sustituir páginas web de un sitio.

• Interrumpe el ritmo de la navegabilidal

3- Colores de los links

• No cambiar el color de los links una vez que se ya se ha cliqueado en ellos confunde al usuario

• El link es esencial para orientar en la navegación (que se hizo en el pasado y que se hará en el futuro

• Guía de usabilidad para links

4- Texto no escaneable

• No a las masas de texto

• Utilizar recursos que funcionan en la web

• Subtítulos

• Listas con bullets

• Palabras resaltadas

• Párrafos cortos

• Pirámide invertida

• Escritura sencilla

5- Fuentes de tamaño fijo

• Al programar la hoja de estilos CSS hay que darle al usuario la libertad de elegir el tamaño de letra que desea usar.

• Lo puede elegir en cada navegador.

• Especificar el tamaño de las fuentes en términos relativos y no en un número absoluto de píxeles

6- Títulos de páginas con baja visibilidad para buscadores

• El título de la página es una gran herramienta para atraer nuevos visitantes desde el buscador y para orientar al que ya está en tu sitio, para que encuentre la página que está buscando

• Está contenido en la etiqueta de HTML <title>

7- Todo lo que parezca un aviso

• Usuario desarrollan una “ceguera” a los baners

• Por eso hay que evitar formatos de diseño que puedan parecerse a avisos

• También tienden a pasar por alto animaciones rápidas

• Cierran rápido los pop ups

8- No respetar convenciones

• Usuario valora consistencia en el diseño.

• Cuando las cosas funcionan de la misma manera el usuario no tiene preocupaciones extras

• Usuarios basan las expectativas de lo que encontrarán en tu sitio web en lo que hacen en otros sitios web

9- Abrir nuevas pestañas

• Los diseñadores suelen abrir nuevas pestañas para mantener al usuario en su sitio.

• Esta es una esperanza vana

• El usuario no quiere movimientos que no elige y valora el botón de Back

• Prefieren usar el “Abrir una nueva ventana” de su navegador

10- No responder las preguntas del usuario

• El ejemplo más negativo es cuando se evita poner el precio de un producto, cuando lo que se quiere es vendero (y el usuario llega al sitio web con la intención primaria de comprar)

Búsqueda

Botón de “Back”

Users frequently want to search on tablets; they also want to return to their search results. Unfortunately, many apps don’t provide a proper SERP (search engine results page) as a primary navigation object that users can easily return to. Instead, search results are shown in one of those zombie-attack frames with a fleeting screen presence.

The Back button has long been the user’s lifeline on the web; if anything, it’s even more important on tablets, where accidental activation is a common consequence of the touchscreen interface. Unfortunately, even with apps that did offer Back, our testing revealed periodic usability problems: sometimes the feature was hard to find, while other times it didn’t undo the user’s last action as expected.

Gestural user interfaces have several inherent problems that tablet apps need to minimize:

Accidental activation: users often touch things by mistake and need a way to undo the result.

Swipe ambiguity: when the screen is divided into subregions (such as the frames we caution against), the same gesture can have different effects, depending on where it’s activated. This problem is exacerbated by the trend toward flat design, which doesn’t clearly demarcate the regions.

Invisibility: users can’t see the gesture they just made, and they sometimes can’t even see what they’re supposed to touch. Again, flat design makes this worse.

Low learnability: all of the previous problems combine to make gestures hard to learn. Advanced gestures might as well not exist, as very few users employ anything beyond the basic tap, press, swipe, drag, and pinch gestures.

Despite these inherent problems, most of the tablet apps we tested employed gestures reasonably well. The exaggerated skeuomorphism of the early days has also subsided.

Dangers Ahead

The two main threats to tablet usability are:

Flat design. Why not allow users to easily see what they can do? We need a golden middle ground between skeuomorphism and a dearth of distinguishing signifiers for UI elements.

Rescaled design. Whether shoehorned down from a bigger screen or grotesquely exploded from a phone screen, too many Android designs simply don’t fit the tablet’s actual screen size. (Poorly rescaled designs are less common on iPad and Windows tablets, probably because of smaller device diversity.)

The flat design threat is a fashionable trend that will hopefully subside before it hurts users (and companies) too much. The second threat will be with us longer, because it’s caused by resource constraints and the naïve idea that a single design is good enough as long as it adapts to the available screen space.

IOS 7 Flat design

http://www.nngroup.com/articles/ios-7/

Cross channel usability

http://www.nngroup.com/articles/cross-channel-consistency/

10 principales errores diseño web

http://www.nngroup.com/articles/top-10-mistakes-web-design/