Usabilidad
-
Upload
harold-maduro -
Category
Education
-
view
631 -
download
0
description
Transcript of Usabilidad
![Page 1: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/1.jpg)
UsabilidadHarold Maduro
http://www.flickr.com/photos/ellasdad/425813314/
![Page 2: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/2.jpg)
¿Usabilidad?
Jackob Nielsen
wikipedia.org
Jackob Nielsen definió Usabilidad como el atributo de calidad que mide lo fáciles que son de usar las interfaces Web.
![Page 4: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/4.jpg)
algunos tips:
Tus usuarios no son tontos.¿Por qué tu sitio los hace sentir de esa manera?
http://jjg.net
![Page 5: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/5.jpg)
Haz el sitio para satisfacer al público objetivo,no a la junta directiva
![Page 6: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/6.jpg)
El sitio debe ser fácil de usar para todos,no sólo para los usuarios más avanzados del
Internet.
![Page 7: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/7.jpg)
La información debe ser fácil de encontrar.
![Page 8: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/8.jpg)
El sitio debe verse bien en la mayor variedad de computadoras* posibles, no sólo en la tuya.
(*) navegadores, resoluciones distintas de pantallas y sistemas operativos
![Page 9: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/9.jpg)
El contenido (texto) debe estar bien organizado y legible.
![Page 10: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/10.jpg)
Reduce el texto de contenido en un 50%. Luego, redúcelo nuevamente.
![Page 11: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/11.jpg)
No utilices animaciones innecesarias, demasiado movimiento desconcentra al usuario
de lo que realmente esta buscando.
![Page 12: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/12.jpg)
Evita usar pop-ups o abrir nuevas ventanas.
![Page 13: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/13.jpg)
Si tu sitio va a ser todo en flash, que no rompa la forma como funciona un sitio corriente, como el
botón de back, por ejemplo.
![Page 14: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/14.jpg)
Si vas a usar íconos que representen conceptos o contenidos, asegúrate que comuniquen
correctamente tu mensaje.
![Page 15: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/15.jpg)
¡Nunca, nunca, nunca, nunca, nunca incluyas un “splash screen”!
![Page 16: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/16.jpg)
Escoge bien los colores: que exista un buen contraste entre el color de fondo y color
de texto
No uses fondos muy complicados o cargados.
![Page 18: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/18.jpg)
no seamos losmalos de la película.
![Page 19: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/19.jpg)
¡No hagas al usuario pensar!
![Page 20: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/20.jpg)
Diseño centrado en el usuario
En términos generales, el diseño centrado en el usuario es una filosofía y proceso de diseño en el que las necesidades, los deseos y las limitaciones del usuario final de una interfaz toman una atención y relevancia considerable en cada nivel del proceso de diseño.
![Page 21: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/21.jpg)
diseño centrado en el usuario = UX
http://www.alexrossart.com/
![Page 22: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/22.jpg)
![Page 23: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/23.jpg)
casos de éxito
http://www.alexrossart.com/
![Page 24: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/24.jpg)
stri.org
![Page 25: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/25.jpg)
ten en cuenta a tu audiencia
![Page 26: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/26.jpg)
stri.org
![Page 27: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/27.jpg)
![Page 28: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/28.jpg)
interfaz
La interfaz permite al usuario navegar y usar el sitio web o medio digital para realizar una tarea o consumir contenido.
![Page 29: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/29.jpg)
interfazLa interfaz debe responder algunas preguntas:
¿Dónde estoy?
![Page 30: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/30.jpg)
dónde estoy: imagen de marca
![Page 31: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/31.jpg)
patrones de recorrido del ojo en forma de F
![Page 32: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/32.jpg)
dónde estoy: los colores también comunican la marca
![Page 33: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/33.jpg)
dónde estoy: la fotografía también comunica la marca
![Page 34: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/34.jpg)
dónde estoy: la fotografía también comunica la marca
![Page 35: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/35.jpg)
dónde estoy: la fotografía también comunica la marca
![Page 36: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/36.jpg)
dónde estoy: la fotografía también comunica la marca
![Page 37: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/37.jpg)
interfazLa interfaz debe responder algunas preguntas:
¿Hacia dónde puedo ir?
![Page 38: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/38.jpg)
hacia dónde puedo ir: navegación y búsqueda
![Page 39: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/39.jpg)
hacia dónde puedo ir: más contenido
![Page 40: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/40.jpg)
hacia dónde puedo ir: banners
![Page 41: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/41.jpg)
hacia dónde puedo ir: búsquedas especializadas
![Page 42: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/42.jpg)
hacia dónde puedo ir: enlaces a herramientas
![Page 43: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/43.jpg)
hacia dónde puedo ir: navegación por audiencia
![Page 44: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/44.jpg)
hacia dónde puedo ir: pie de página o footer
![Page 45: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/45.jpg)
elementos de navegación: las páginas 404
![Page 46: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/46.jpg)
elementos de navegación: las páginas 404
![Page 47: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/47.jpg)
elementos de navegación: navegación local
![Page 48: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/48.jpg)
elementos de navegación: navegación local
![Page 49: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/49.jpg)
elementos de navegación: navegación local
![Page 50: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/50.jpg)
navegación: también te dice dónde estás
![Page 51: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/51.jpg)
navegación: también te dice dónde estás
1
2
34
![Page 52: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/52.jpg)
elementos de navegación: rutas navegadas
![Page 53: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/53.jpg)
elementos de navegación: mapa del sitio
![Page 54: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/54.jpg)
elementos de navegación: el logo (te lleva al home)
![Page 55: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/55.jpg)
elementos de navegación: búsqueda
![Page 56: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/56.jpg)
interfazLa interfaz debe responder algunas preguntas:
¿Qué hay aquí?
![Page 57: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/57.jpg)
contenido
![Page 58: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/58.jpg)
contenido
enlaces a más contenidos
noticias
búsqueda especializada
fotos / banners
![Page 59: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/59.jpg)
contenido
![Page 60: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/60.jpg)
contenido
fechas de eventos
banners (promociones,
eventos)noticias
![Page 61: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/61.jpg)
contenido
![Page 62: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/62.jpg)
contenido
mapas
![Page 63: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/63.jpg)
¡el contenido es el rey!
![Page 64: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/64.jpg)
ahora te toca a tí.
http://www.alexrossart.com/
![Page 65: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/65.jpg)
mtsobek.com
![Page 66: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/66.jpg)
tropicstar.com
![Page 67: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/67.jpg)
puntacaracol.com.pa
![Page 68: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/68.jpg)
Usabilidad es tener un avanzado sentido común
![Page 69: Usabilidad](https://reader034.fdocuments.mx/reader034/viewer/2022051412/548ee9c5b4795990798b4610/html5/thumbnails/69.jpg)
como Batman.http://www.alexrossart.com/