TEMA07 USABILIDADWEB

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


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


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


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


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


2. USAR LAS CONVENCIONES

Son tiles

A menudo los diseadores tratan de

reinventar la rueda

Quit 8.19



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



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


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



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



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



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



Qu debemos eliminar?

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

Minimizar los textos largos

Quit 8.29



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

En un autoservicio:

Hay orden

Siempre est la opcin de preguntar a un

vendedor

Quit 8.32


4. NAVEGACIN

Normalmente estamos buscando algo

Hay 2 opciones: navegar en pgina o

buscar (ambas opciones deseables)

Quit 8.33

Quit 8.34


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

Convenciones

Quit 8.36


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

Nombres de las pginas

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

Quit 8.41


4. NAVEGACIN

Migas de pan

BOOKS > SUBJECTS > COMPUTERS > WEB DEVELOPMENT

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

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

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

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

TEMA07 USABILIDADWEB

Documents

Transcript of TEMA07 USABILIDADWEB