Ingeniera de Software 2

Ing. Marco Aedo Lpez

Usabilidad Web

Objetivos
8.3

Quit

Comprender

la importancia de la
usabilidad en el diseo de
aplicaciones web

1. Conceptos
8.4

Quit

Usabilidad se define coloquialmente como

facilidad de uso, ya sea de una pgina
web, una aplicacin informtica o cualquier
otro sistema que interacte con un usuario

1. Conceptos
8.5

Quit

Usabilidad,qu

es?, importancia y

beneficios.
Diferencia entre funcionalidad y usabilidad
Diseo Centrado en el Usuario

1. Conceptos
8.6

Quit

ISO/IEC

9126:
"La usabilidad se refiere a la capacidad de
un software de ser comprendido, aprendido,
usado y ser atractivo para el usuario, en
condiciones especficas de uso
ISO/IEC 9241:
La medida en la que un producto se puede
usar por determinados usuarios para
conseguir objetivos especficos con
efectividad, eficiencia y satisfaccin en un
contexto de uso

2. Sistema usable
8.7

Quit

Funcionalmente

correcto (efectividad)
Eficiente de usar
Fcil de aprender
Fcil de recordar
Tolerante a los errores
Subjetivamente agradable (satisfaccin)

2. Sistema usable
8.8

Quit

El futuro (y presente) es que la

tecnologa sea til a TODAS las
personas

3. La usabilidad Web
8.9

Quit

La

WEB se est convirtiendo en un

elemento clave en el desarrollo de las
organizaciones
Las instituciones ofrecen informacin y
servicios a travs de la WEB
La usabilidad es un factor estratgico
fundamental para conseguir un mximo
aprovechamiento de ella

3. La usabilidad Web
8.10

Quit

Importancia

para los usuarios

Van fcilmente de un sitio a otro

Solo tardan 1 2 min. para conocer el
funcionamiento
Experimentan la usabilidad de un sitio antes que
se hayan comprometido a usarlo y, sobretodo,
antes de que hayan pagado algo

3. La usabilidad Web
8.11

Quit

Es tan fcil ir a cualquier otra parte, que la

competencia de todo el mundo est a un
solo clic
[J. Nielsen 2000]

3. La usabilidad Web
8.12

Quit

Beneficios

Reduccin de costos de mantenimiento y

soporte
Reduccin de costos de uso, mayor
productividad y menor esfuerzo del
usuario
Ms visitado, mejor marketing
Menor soporte al cliente

8.13

Quit

3. Las buenas noticias

8.14

Quit

La

mayor parte del trabajo se reduce a

sentido comn

Segn Descartes: el sentido comn es la mejor

cosa repartida del mundo, aun los ms
inconformes creen tener lo suficiente de l

Usabilidad

significa visitantes ms
satisfechos y ms posibilidades de que
regresen a nuestro sitio Web

Si algo es difcil de usar, simplemente no lo

usaremos

3. Las buenas noticias

8.15

Quit

diferencia de las herramientas

informticas necesarias para hacer el
trabajo diario, nadie est obligado a visitar
nuestro sitio Web!!!

4. Pautas para aplicar usabilidad

Quit

8.16

1. NO ME HAGAS PENSAR

Primera ley de usabilidad

Al llegar a un sitio web todo debe ser
evidente
Donde cualquier tipo de usuario se sienta
cmodo de usarla

4. Pautas para aplicar usabilidad

Quit

8.17

1. NO ME HAGAS PENSAR

Las 5 Ws:

Dnde estoy?
Dnde debera empezar?
Dnde pondran ________?
Qu es ms importante de esta pgina?
Por qu lo llamaran as?

EVITAR QUE LOS USUARIOS PIENSEN

EN CUALQUIERA DE ESTAS COSAS

4. Pautas para aplicar usabilidad

Quit

8.18

2. USAR LAS CONVENCIONES

Son tiles
A menudo los diseadores tratan de
reinventar la rueda

4. Pautas para aplicar usabilidad

Quit

8.19

2. USAR LAS CONVENCIONES

Ejemplo: La barra de desplazamiento vertical

Inherente al Web, desde la concepcin del
HTML
La proporciona el navegador (como cualquier
otra aplicacin de un sistema operativo de
ventanas)
Los usuarios saben perfectamente para qu
sirve y cmo utilizarla
Entonces por qu tenemos que padecer
ocurrencias como las siguientes?

8.20

Quit

8.21

Quit

8.22

Quit

4. Pautas para aplicar usabilidad

Quit

8.23

2. USAR LAS CONVENCIONES

Cundo no usar las convenciones?

Si la estamos reemplazando por algo tan

obvio que no requiere curva de aprendizaje y
resulta por tanto tan bueno como una
convencin
Si proporciona tanto valor aadido que
merece la pena una ligera curva de
aprendizaje

En resumen: innovar slo cuando

tengamos una idea mejor que la
convencin existente

4. Pautas para aplicar usabilidad

Quit

8.24

3. REDACCIN DE CONTENIDO

Eliminar la mitad de las palabras de cada

pgina; despus, eliminar la mitad de las
que queden
Tercera ley de usabilidad de Krug

4. Pautas para aplicar usabilidad

Quit

8.25

3. REDACCIN DE CONTENIDO

No podemos disear las pginas

pensando que la gente las va a leer (ni
mucho menos que las va a leer en orden)
Qu buscan los usuarios de internet?
Es decir, normalmente hay grandes
porciones de la pgina para las que ni
siquiera miramos

4. Pautas para aplicar usabilidad

Quit

8.26

3. REDACCIN DE CONTENIDO

Por qu hojeamos las pginas?

Normalmente tenemos prisa

Sabemos que en cada pgina hay mucha
informacin irrelevante
Estamos acostumbrados a hacerlo, somos
buenos en ello
Tendemos a fijarnos en palabras que
concuerdan

4. Pautas para aplicar usabilidad

Quit

8.27

3. REDACCIN DE CONTENIDO

Recomendacin: omitir las palabras

innecesarias

Reduce el nivel de ruido de la pgina

Hace que el contenido til sea ms
prominente
Hace las pginas ms cortas
Valorar el espacio en blanco

4. Pautas para aplicar usabilidad

Quit

8.28

3. REDACCIN DE CONTENIDO

Qu debemos eliminar?

Todo el texto que resuene a Bla, bla, bla...

Minimizar los textos largos

4. Pautas para aplicar usabilidad

Quit

8.29

3. REDACCIN DE CONTENIDO

Recomendaciones de estilo de texto

Estructurar las pginas con dos o tres niveles
de ttulos (<h1> <h1>, , <h2> <h2>...)
Usar ttulos significativos que llamen la
atencin
Facilitar la lectura rpida

Emplear listas, mrgenes, prrafos

Usar resaltado y nfasis

HTML para el contenido y CSS para la
apariencia

4. Pautas para aplicar usabilidad

8.30

Quit

4. NAVEGACIN

No solemos regresar a los sitios Web en

los que no podemos encontrar lo que
buscamos o en los que no sabemos
cmo se organiza la informacin

4. Pautas para aplicar usabilidad

Quit

8.31

4. NAVEGACIN

En un autoservicio:

Hay orden
Siempre est la opcin de preguntar a un
vendedor

4. Pautas para aplicar usabilidad

Quit

8.32

4. NAVEGACIN

Normalmente estamos buscando algo

Hay 2 opciones: navegar en pgina o
buscar (ambas opciones deseables)

8.33

Quit

4. Pautas para aplicar usabilidad

8.34

Quit

4. NAVEGACIN

Propsitos

Llevar al usuario de un lugar a otro

Decirle dnde est

Al hacer visible la jerarqua del sitio,

revela su contenido

Le dice, implcitamente, cmo utilizar el

sitio

Crea una buena impresin del sitio

4. Pautas para aplicar usabilidad

8.35

Quit

4. NAVEGACIN

Convenciones

4. Pautas para aplicar usabilidad

8.36

Quit

4. NAVEGACIN
Convenciones: navegacin persistente

Son los elementos de navegacin que

aparecen en todas las pginas de un sitio

Posibles excepciones:
La pgina inicial (puede tener una
apariencia distinta)
Formularios (tal vez baste con el ID, el
enlace a la pgina principal y alguna
ayuda)

4. Pautas para aplicar usabilidad

8.37

Quit

4. NAVEGACIN
Convenciones: navegacin persistente

Debe aparecer siempre en el mismo lugar

y tener la misma apariencia

Se recomienda incluir los siguientes cinco

elementos:

Identificador (ID) del sitio

Secciones

Enlace a la pgina principal

Bsqueda

Utilidades (cesta de la compra, mapa

del sitio, ayuda, acerca de)

4. Pautas para aplicar usabilidad

8.38

Quit

4. NAVEGACIN
Nombres de las pginas

Cada pgina necesita un nombre

El nombre tiene que estar en el lugar

adecuado

Tiene que ser prominente

Posicin, tamao, color, tipo de fuente

Tiene que concordar con el enlace que

llev a la pgina

Si no iguales, lo ms parecidos posible

4. Pautas para aplicar usabilidad

8.39

Quit

4. NAVEGACIN
Nombres de las pginas

4. Pautas para aplicar usabilidad

Quit

8.40

4. NAVEGACIN
Migas de pan

Muestran al usuario donde se encuentra

Indica la ruta, el camino desde la pgina inicial
hasta la pgina actual
No debe ser el nico esquema de navegacin
Ponerlas arriba del todo el contenido
Usar Usar > entre los distintos niveles (no : o
-))
Usar una fuente pequea (es slo un accesorio)
Poner en negrita el ltimo elemento
Debe ser el nombre de la pgina actual

4. Pautas para aplicar usabilidad

8.41

Quit

4. NAVEGACIN
Migas de pan
BOOKS > SUBJECTS > COMPUTERS > WEB DEVELOPMENT

4. Pautas para aplicar usabilidad

Quit

8.42

5. TEORIA DEL COLOR

Los colores evocan emociones y las

emociones pueden influir en el proceso
de tomar decisiones
La eleccin de colores para tu sitio web
debera reflejar el mensaje y/o
sentimiento que desees comunicar al
espectador

4. Pautas para aplicar usabilidad

Quit

8.43

5. TEORIA DEL COLOR

Azul - el color de la estabilidad

Rojo - el color de la pasin
Amarillo - el color de las ideas
Verde - el color de la naturaleza
Naranja - el color de la energia
Morado - el color de la nobleza
Beige y Gris - el color de la neutralidad
Caf - el color de la confianza
Negro - el color de la sofisticacin

4. Pautas para aplicar usabilidad

Quit

8.44

6. CONSIDERACIONES FINALES

Contenidos actualizados
Informacin de contacto

Direccin de correo electrnico

Direccin postal

Nmeros de telfono, fax, etc.

Realizar pruebas con usuarios para
retroalimentar diferentes aspectos

5. CONCLUSIONES
Quit

8.45

El usuario de internet es enormemente

exigente
Hacer nuestras aplicaciones lo ms
usables posible har que nuestros sitios
web sean ms exitosos

8.46

Quit

8.47

Quit

EJERCICIO
8.48

Quit

5 Sitio web ms visitados

2 Sitio web menos visitados

Primera impresin
Por qu lo visita?
Cmo mejorarlo?
Es usable?. Realizar anlisis
Primera impresin
Por qu lo visita?
Cmo mejorarlo?
Es usable?. Realizar anlisis

Si un requerimiento no funcional de su proyecto

final fuera que se desea implementarlo como
una aplicacin web, realizar el diseo de sus
interfaces aplicando los conceptos de usabilidad
web