Las claves de la usabilidad, los gures Nielsen y Krug

Consejos aplicados al portal www.bcn.cl

Felipe Almazn Tepliski

E-Mail: falmazan@bcn.cl Servicios Digitales Biblioteca del Congreso Nacional de Chile Noviembre de 2005

Ricardo Baeza: 5 objetivos del web

Buscabilidad

Visibilidad

Web Contenido

USABILIDAD
Esttica

Fidelidad

Jacob Nielsen
Usabilidad

(Nota: alguien no lo conoce o no ha escuchado hablar de l?)

Jakob Nielsen
El rey de la Usabilidad" (Internet Magazine) N 6 de los 10 ms influyentes del web (ZDNet) "gur de la usabilidad en Web" (The New York Times) Jakob Nielsen La persona ms inteligente del Web" (AnchorDesk) Principal experto mundial en usabilidad" (U.S. News & World Report) Principal experto mundial en diseo orientado al usuario" (Stuttgarter Zeitung, Germany) Sabe ms que nadie en el planeta qu hace que un sitio web funcione" (Chicago Tribune, March 6, 2000) Uno de los expertos mundiales ms avanzado en usabilidad" (Business Week) Zar de la usabilidad en el web" (WebReference.com) El gur reinante de la Usabilidad en web" (FORTUNE) Gur eminente de la usabilidad en Web" (CNN) "no tan famoso como Elvis, an" (CONTENTIOUS Magazine)

 Consejos de Jakob Nielsen Aclarar el propsito del sitio 1. Incluir un lema 2. Ttulo en ventana para buscadores 3. Agrupar informacin corporativa

Consejos de Jakob Nielsen Ayudar a los usuarios a encontrar lo que buscan 1. Enfatizar en mensaje principal 2. Incluir sistema de bsqueda

 Consejos de Jakob Nielsen Mostrar el contenido del sitio 1. Mostrar ejemplos de contenidos 2. Enlaces con la palabra ms til 3. Mantener visibles temas pasados

Consejos de Jakob Nielsen Diseo para mejorar Interaccin, no para definirla 1. No apoyar demasiado con grficos 2. Usar grficos significativos

A B

B
Texto zona B Texto zona B Texto zona B

1. Visibilidad del estado del Sistema El sistema debe mantener siempre informado a los usuarios acerca de lo que est ocurriendo, a travs de una retroalimentacin o "feed-back" adecuado y en un tiempo razonable.
Aplicacin 1: Formularios

Estimado Seor(a): Felipe Almazn. Hemos recibido su consulta. Nos contactaremos con usted a la direccin falmazan@bcn.cl dentro de las siguientes 48 horas. Gracias por utilizar nuestros servicios. BCN

1. Visibilidad del estado del Sistema El sistema debe mantener siempre informado a los usuarios acerca de lo que est ocurriendo, a travs de una retroalimentacin o "feed-back" adecuado y en un tiempo razonable.
Aplicacin 2: Resultados de Bsqueda

2. Adecuacin entre el sistema y el mundo real El sistema debe hablar el lenguaje de los usuarios, con palabras, frases y conceptos que les sean familiares, ms que con trminos propios del sistema. Debe seguir las convenciones del mundo real, haciendo que la informacin aparezca en un orden natural y lgico.
Aplicacin 1: Reemplazo de Trminos Reemplazo de trmino Referencista Virtual por Ayuda: funcionalidad es la misma (pedir ayuda)

Reemplazo de trmino Legislacin Nacional por Leyes Chilenas.

2. Adecuacin entre el sistema y el mundo real El sistema debe hablar el lenguaje de los usuarios, con palabras, frases y conceptos que les sean familiares, ms que con trminos propios del sistema. Debe seguir las convenciones del mundo real, haciendo que la informacin aparezca en un orden natural y lgico.
Aplicacin 2: rbol de Navegacin Basado en principios taxonmicos internos de la BCN (Biblioteca Legal)

3. Control y libertad del usuario Los usuarios eligen a menudo opciones del sistema por error y necesitarn una "salida de emergencia" claramente delimitada para abandonar el estado no deseado en que se hallan sin tener que mantener un dilogo largo con el sistema.
Aplicacin: Control de usuario

No se han eliminado barras ni opciones del browser. La excepcin la constituye las ventanas pop-up.

4. Consistencia y estndares Los usuarios no tienen por qu imaginar que diferentes palabras, situaciones o acciones significan lo mismo. Es conveniente seguir convenciones.
Aplicacin: - Para ver detalle detalles o temas relacionados: se explica con texto descriptivo - Para volver atrs (zona baja, derecha de cada pgina) - Logo enva a raz del sitio

- Men ubicado a la izquierda, zona superior

5. Prevencin de errores Mejor que un mensaje de error es un diseo cuidadoso que prevenga los errores. Por ejemplo, ofrecer diversas opciones en un men en lugar de hacer que el usuario deba teclear algo.
Aplicacin: - El Buscador superior, minimiza el ingreso de datos y presenta esquemas de bsqueda de acuerdo al tipo de informacin - Formulacin de listados basados en resultados de bsquedas ms realizadas (por sobre las opciones de bsqueda hgalas Ud. mismo)

- Formulacin de formularios OnSelect por sobre los TxtBox

6. Reconocer mejor que recordar Hacer visibles objetos, acciones y opciones. El usuario no tiene por qu recordar informacin de una parte del dilogo con el sistema en otra parte. Las instrucciones de uso del sistema deben estar visibles o fcilmente localizables cuando proceda.
Aplicacin: -Los datos de uso, glosario de trminos utilizados y preguntas frecuentes realizadas, se encuentra disponible en el men horizontal superior. Este men se encuentra siempre disponible. - Uso de analogas de navegacin, tales como el men del Explorador de Windows (caso del men de navegacin izquierdo)

7. Flexibilidad y eficiencia de uso Los aceleradores o atajos que el usuario principalmente no nota pueden hacer ms rpida la interaccin para usuarios expertos, de tal forma que el sistema sea til para los dos tipos de usuarios. Permite a los usuarios adaptar acciones frecuentes. Por ejemplo, los atajos de teclados o combinaciones de teclas: F5, ctrl + C, ctrl + F, etctera.
Aplicacin: - Uso de Breadcrumbs como mecanismo para llegar rpidamente a un rea ya visitada dentro del sitio.

- Uso del buscador superior, como atajo para encontrar documentos o pginas

- Posibilidad de dejar como pgina de inicio y/o dejar como Favorito (zona baja de la portada)

8. Esttica y diseo minimalista Los dilogos entre sistema y usuarios no deben contener informacin irrelevante o raramente necesitada. Cada unidad de informacin extra en un dilogo compite con las unidades relevantes de informacin y disminuye su visibilidad relativa.

Aplicacin: - Estilo editorial que privilegia el lenguaje claro, breve y conciso.

- Disposicin de informacin relevante en forma inmediata al ttulo y descripcin (bajada) de la hoja

- Aireado y limpieza en la disposicin de informacin relevante

9. Ayudar a los usuarios a reconocer, diagnosticar y solucionar errores Los mensajes de errores deben expresarse en un lenguaje comn sin cdigos, indicar con precisin el problema y sugerir de forma constructiva una solucin.

Aplicacin: - Indicacin de tipo de error en envo de datos por formulario

10. Ayuda y documentacin Aunque es buena seal que el sistema pueda ser usado sin documentacin, puede ser necesario proveer cierto tipo de ayuda. Cualquier informacin debe ser fcil de buscar, especificar los pasos que sern necesarios para realizarla y no ser muy amplia.
Aplicacin: - Los datos de uso, glosario de trminos utilizados y preguntas frecuentes realizadas, se encuentra disponible en el men horizontal superior. Este men se encuentra siempre disponible.

Steve Krug
No me hagas pensar

(Krug: Los conceptos)

Steve Krug
Libro: No me hagas pensar Diseo debe cumplir con la mxima de que el usuario no debe pensar para hacer cosas en un sitio web El lema es: Veo una pgina y uso Nadie lee nada, sino que todos dan saltos por la pgina

Steve Krug

 Steve Krug
Interesante visin grfica de los problemas de Usabilidad

Steve Krug
Los problemas ms habituales:
Sitios que no dicen de qu se trata el sitio Sitios que no dicen quin los publica Sitios sin jerarqua visual de contenidos Sitios que sugieren contenidos que no tienen Sitios que tienen demasiada informacin en la pgina y cada pieza de informacin no recibe la informacin que se merece

 Steve Krug
Hay reglas para la Usabilidad?
No.

Cuando se mire una pgina web sta ha de ser obvia, evidente, clara y fcil de entender. Tendra que poder "entenderla" (qu es y cmo usarla) sin agotar esfuerzos pensando en ella.

Steve Krug

Consejos de Steve Krug

1. 2. 3. 4. 5. 6. 7. 8. No leemos: saltamos por el contenido Crear jerarquas visuales Usar mtodos convencionales Usar signos visibles de navegacin Crear reas bien definidas Hacer obvio lo que es clickeable Minimizar el ruido Escribir lo justo y necesario

1. LEY: No me hagas pensar Evitar nombres tcnicos y reemplazarlos por palabras de uso cotidiano por parte de la gente. Uso de idioma natural, evitando trminos en otros idiomas o tecnicismos legales (en la medida de lo posible, sin caer en la deformacin del lenguaje ley o legislacin nacional?, etc.-

2. Diseo basado en el comportamiento del usuario (ojear, ser suficientes y arreglrselas) Disposicin de contenidos agrupados temticamente, diferenciando zonas de navegacin y contenido claramente.

3. Diseo de carteleras Basado en la creacin de jerarquas visuales (basado en tamaos y colores de ttulos y letras), anidamiento de contenido relacionado (ver ms, ver otros noticias, etc.).

4. Clasificaciones mecnicas (animal, vegetal o mineral) Se estudiaron clasificaciones de acuerdo a las consultas ms realizadas y mbitos de duda enviados por los mismos usuarios. En base a este estudio, se formularon los tipos de acceso a las diferentes fuentes de datos.

5. Omisin de palabras innecesarias Basado en un estilo editorial que busc omitir las palabras no necesarias, usando escritura vigorosa y concisa.

6. Migas de Pan y Sealizacin Se implement un breadcrumbs en la parte superior de cada pgina y mapa del sitio.

La usabilidad es sentido comn Piensen en sus clientes !

Bibliografa