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

1
 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)

2
 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

3
 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

B
A Texto zona B

Texto zona B

B Texto zona B

4
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

5
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)

6
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

7
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)

8
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
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.

10
 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

11
 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

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

13
 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.

14
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 !

15
Bibliografa

16