Diseño de InteracciónDiseño de InteracciónProf. Marcelo Santos Prof. Marcelo Santos

Diseño de InteracciónDiseño de InteracciónProf. Marcelo Santos Prof. Marcelo Santos

Clase 5: Usabilidad – “mejores prácticas”

1 semestre - 2012

2 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

¿Qué son Mejores Prácticas?

• Qué: estándares sugeridos para los diferentes aspectos del diseño

• Quiénes: científicos, académicos, profesionales del rubro

• Cómo: entrenamiento perceptivo• Por qué: asegurar mejor

usabilidad• Cuándo: contexto + objetivos

3 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

Design: ¿Planificación o Darwinismo?*

¿Nueces o Semillas?¿Nueces o Semillas?

* Concepto extraído de “Designing Web Usability” de Jakob Nielsen

4 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

Criterios

1. Contenido

2. Diseño

3. Texto

4. Hipertexto

5. Portadas

6. Sistemas de Navegación (AI)

7. Servicios

8. Políticas

9. Desempeño

10.Sociabilidad

11.Accesibilidad

12.Encontrabilidad

5 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

Criterio 1: Contenido

• Actualización

• Ciclo de vida

• Segmentación

• Formato

6 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

Criterio 2: Diseño

• Identidad Corporativa u Organizacional

• Uso del espacio

• Uso de colores

• Multimedia

• “Look and Feel”

• Legibilidad del contenido

• Modelos de página (templates)

7 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

Criterio 3: Texto

• Discurso directo/objetivo

• Estructuración del Texto

• Vocabulario y léxico

• Siglas y acrónimos

• Traducción a otros idiomas

8 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

Criterio 4: HiperTexto

• Articulación de ideas

• Color de enlaces

• Dilemas del hipertexto– Profundización x articular– Interrumpir x continuar

• Fuentes y referencias

9 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

Criterio 5: Portadas

• Jerarquía de Contenido

• Misión / Visión

• ‘Sub-portadas’

• URL

10 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

Criterio 6: Navegación

• Menú principal• Menús secundarios• Menú de Herramientas• Consistencia• Coherencia taxonómica• Ubicación y contexto• Estándares:

– Logo– Contacto– Búsqueda

11 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

Criterio 7: Servicios

• Mediados (sistema + persona)– SLA (Service Level Agreement)– Disponibilidad

• Non mediados (sistemas automáticos) – Confiabilidad– Seguridad– Ayuda y Formularios

12 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

Criterio 8: Políticas

• Uso y Copyright

• Privacidad

• Publicación

13 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

Criterio 9: Desempeño

• Rapidez de respuesta

• Disponibilidad de acceso

• Seguridad percibida

14 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

Criterio 10: Sociabilidad

• Uso de “syndication”: RSS / Atom

• Canales ‘tradicionales’ de interacción con el usuario: e-mail, formularios, chat

• Sinergía con contribuciones del usuario• Capitalización del CGU

(Contenido Generado por el Usuario)– Noticias ciudadanas, testimonios, viralidad– Interacción y feedback como ¨espejo¨

15 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

Criterio 10: Sociabilidad

• ¨Ventanillas sociales¨ de– Contenido: Gadgets, Widgets, webservices– Tecnología: APIs, webservices

• Botonespara compartir contenido – Web: “Share this”, digg, delicious, twitter, FB, ¨Me gusta¨, +1

– Móvil: email, bluetooth, video, audio, twitter, facebook

16 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

Criterio 11: Accesibilidad

• Interoperabilidad– Accesible a diferentes dispositivos

• Multiplataforma– Accesible a diferentes navegadores

• Accesible para discapacitados– Auditivos– Visuales– Motores– Mentales – Cognitivos (dislexia, movimiento etc.)

17 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

Criterio 12: Encontrabilidad

• Permeabilidad a los buscadores– Separación diseño y contenido (CSS)

• Buena estructura de títulos

• Meta Tags HTML:– Palabras-clave y Descripción