Upload
manu1jhc
View
238
Download
0
Embed Size (px)
DESCRIPTION
is2
Citation preview
Ingeniera de Software 2
Ing. Marco Aedo Lpez
Usabilidad Web
Quit 8.3
Objetivos
Comprender la importancia de la
usabilidad en el diseo de
aplicaciones web
Quit 8.4
1. Conceptos
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
Quit 8.5
1. Conceptos
Usabilidad,qu es?, importancia y
beneficios.
Diferencia entre funcionalidad y usabilidad
Diseo Centrado en el Usuario
Quit 8.6
1. Conceptos
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
Quit 8.7
2. Sistema usable
Funcionalmente correcto (efectividad)
Eficiente de usar
Fcil de aprender
Fcil de recordar
Tolerante a los errores
Subjetivamente agradable (satisfaccin)
Quit 8.8
2. Sistema usable
El futuro (y presente) es que la tecnologa sea til a TODAS las
personas
Quit 8.9
3. La usabilidad Web
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
Quit 8.10
3. La usabilidad Web
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
Quit 8.11
3. La usabilidad Web
Es tan fcil ir a cualquier otra parte, que la competencia de todo el mundo est a un
solo clic [J. Nielsen 2000]
Quit 8.12
3. La usabilidad Web
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
Quit 8.13
Quit 8.14
3. Las buenas noticias
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
Quit 8.15
3. Las buenas noticias
A diferencia de las herramientas
informticas necesarias para hacer el
trabajo diario, nadie est obligado a visitar
nuestro sitio Web!!!
Quit 8.16
4. Pautas para aplicar usabilidad
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
Quit 8.17
4. Pautas para aplicar usabilidad
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
Quit 8.18
4. Pautas para aplicar usabilidad
2. USAR LAS CONVENCIONES
Son tiles
A menudo los diseadores tratan de
reinventar la rueda
Quit 8.19
4. Pautas para aplicar usabilidad
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?
Quit 8.20
Quit 8.21
Quit 8.22
Quit 8.23
4. Pautas para aplicar usabilidad
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
Quit 8.24
4. Pautas para aplicar usabilidad
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
Quit 8.25
4. Pautas para aplicar usabilidad
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
Quit 8.26
4. Pautas para aplicar usabilidad
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
Quit 8.27
4. Pautas para aplicar usabilidad
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
Quit 8.28
4. Pautas para aplicar usabilidad
3. REDACCIN DE CONTENIDO
Qu debemos eliminar?
Todo el texto que resuene a Bla, bla, bla...
Minimizar los textos largos
Quit 8.29
4. Pautas para aplicar usabilidad
3. REDACCIN DE CONTENIDO
Recomendaciones de estilo de texto
Estructurar las pginas con dos o tres niveles de ttulos ( , , ...)
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
Quit 8.30
4. Pautas para aplicar usabilidad
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
Quit 8.31
4. Pautas para aplicar usabilidad
4. NAVEGACIN
En un autoservicio:
Hay orden
Siempre est la opcin de preguntar a un
vendedor
Quit 8.32
4. Pautas para aplicar usabilidad
4. NAVEGACIN
Normalmente estamos buscando algo
Hay 2 opciones: navegar en pgina o
buscar (ambas opciones deseables)
Quit 8.33
Quit 8.34
4. Pautas para aplicar usabilidad
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
Quit 8.35
4. Pautas para aplicar usabilidad
4. NAVEGACIN
Convenciones
Quit 8.36
4. Pautas para aplicar usabilidad
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)
Quit 8.37
4. Pautas para aplicar usabilidad
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)
Quit 8.38
4. Pautas para aplicar usabilidad
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
Quit 8.39
4. Pautas para aplicar usabilidad
4. NAVEGACIN
Nombres de las pginas
Quit 8.40
4. Pautas para aplicar usabilidad
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
Quit 8.41
4. Pautas para aplicar usabilidad
4. NAVEGACIN
Migas de pan
BOOKS > SUBJECTS > COMPUTERS > WEB DEVELOPMENT
Quit 8.42
4. Pautas para aplicar usabilidad
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
Quit 8.43
4. Pautas para aplicar usabilidad
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
Quit 8.44
4. Pautas para aplicar usabilidad
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
Quit 8.45
5. CONCLUSIONES
El usuario de internet es enormemente exigente
Hacer nuestras aplicaciones lo ms usables posible har que nuestros sitios web sean ms exitosos
Quit 8.46
Quit 8.47
Quit 8.48
EJERCICIO
5 Sitio web ms visitados Primera impresin
Por qu lo visita?
Cmo mejorarlo?
Es usable?. Realizar anlisis
2 Sitio web menos visitados 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