No tengo qué pensar. J

Transcripción

1 Usabilidad

2 QUÉ ES LO MÁS IMPORTANTE QUE DEBO HACER PARA QUE UN SITIO SEA FÁCIL DE USAR? No tengo qué pensar. J Para poder usarlo

3 QUÉ ES LO MÁS IMPORTANTE QUE DEBO HACER PARA QUE UN SITIO SEA FÁCIL DE USAR? Obvio Autoevidente Autoexplicativo

4

5 HECHOS DE LA VIDA #1 No leemos ESCANEAMOS

6 HECHOS DE LA VIDA #2 No hacemos búsquedas óptimas Por qué? ESTAMOS APURADOS NO HAY PENALIDAD POR ADIVINAR MAL ADIVINAR ES MÁS DIVERTIDO J

7

8 HECHOS DE LA VIDA #3 No nos preocupamos cómo funciona todo RESOLVEMOS Y SEGUIMOS Por qué? Si encontramos algo que funciona nos quedamos con ello

9 QUÉ ES USABILIDAD? Se refiere a la facilidad con que las personas pueden utilizar una herramienta particular o cualquier otro objeto fabricado por humanos con el fin de alcanzar un objetivo concreto. Jackob Nielsen definió la usabilidad como el atributo de calidad que mide lo fáciles que son de usar las interfaces Web.

10 BUENAS PRÁCTICAS DE USABILIDAD Organización Visual Jerárquica MUY IMPORTANTE Medianamente Importante Poco importante

11 BUENAS PRÁCTICAS DE USABILIDAD Organización Visual Jerárquica

12 BUENAS PRÁCTICAS DE USABILIDAD Uso de Convenciones Por qué usar convenciones? Realmente son útiles No necesitamos reinventar la rueda

13 BUENAS PRÁCTICAS DE USABILIDAD Uso de Convenciones Disposición de contenido

14 BUENAS PRÁCTICAS DE USABILIDAD Uso de Convenciones Navegación

15 BUENAS PRÁCTICAS DE USABILIDAD Uso de Convenciones Selección

16 BUENAS PRÁCTICAS DE USABILIDAD Delimitación de áreas

17

18 BUENAS PRÁCTICAS DE USABILIDAD Resaltado de Alternativas

19

20 BUENAS PRÁCTICAS DE USABILIDAD Eliminación del Ruido No llenarnos de contenido No usar demasiadas distracciones Destaca lo que es importante Páginas breves sin necesidad de usar scroll

21 BUENAS PRÁCTICAS DE USABILIDAD Hacer obvio lo que es clickable. La gente evita ver la publicidad. Evita que los contenidos de tu sitio sean confundidos con publicidad. Evita los títulos de enlace genéricos como "Ver más", "Seguir leyendo" o "Click aquí«no uses Flash en menús y estructuras de navegación.

22 BUENAS PRÁCTICAS DE USABILIDAD Señala con claridad los vínculos que apuntan a sitios externos. No uses texto con alineación justificada. No todo lo que se mueve llama más la atención del usuario. Evitar páginas intro o «splash». Di NO a multimedia autoejecutable.

23 TALLER

24

25

26

27

28

29 CASO 1. COMUNICACIONES. Un sistema Web para el envío de SMS con el contenido de mensajes de correo electrónico. Público: Cualquiera con una cuenta de correo. Roles: Usuario del servicio. Secciones del sitio: Registro (datos personales) Inicio de Sesión (Actualizar datos, agregar contactos, invitar a amigos).

30 CASO 2. ENTRETENIMIENTO. Página Web Promocional de un personaje para niños. Público: Niños entre 6 y 10 años. Roles: Ninguno (no necesita iniciar sesión) Secciones: Inicio Conoce a los personajes Juegos Actividades y descargas Videos Comprar Padres Política de Privavidad

31 CASO 3. EDUCACIÓN. Sistema de aulas virtuales para cursos universitarios. Público: Alumnos y docentes universitarios. Roles: Alumnos, Docentes, Administradores Secciones: Mis cursos Lecciones Ejercicios Videoconferencia Documentos Enlaces Anuncios Mi perfil Mi agenda Manual de usuario

32 CASO 4. NEGOCIOS. Restaurante de Cocina Japonesa. Público: Jóvenes y adultos. Roles: Clientes ocasionales y Clientes que quieren pedir online Secciones: Empresa Contacto Concepto Rollos Capeados Rollos Naturales Arroces Política de Privacidad Sucursales Promociones Pedir en línea

33 EJERCICIO DE EVALUACIÓN Cada uno revisará un layout de wireframe de su compañero que tienen al lado derecho. Responde las siguientes cuestiones: Pregúntate si resuelve el objetivo del sitio fácilmente. Atiende a todos los roles? Visualmente, están bien delimitadas las áreas? Hay convenciones de diseño como interfaz, botones, o elementos que creas serán familiares y si no, cómo lo resolverías tú? Indica recomendaciones de diseño. Si ves un elemento que no está claramente definido, cómo lo resolverías tú?

34 CREANDO WIREFRAMES. MEJORES PRÁCTICAS

35 CREANDO WIREFRAMES. MEJORES PRÁCTICAS Qué es un Wireframe? Sketch (No necesariamente bonito) Enfocado en la funcionalidad De hecho la estética del sitio es afectado por la usabilidad

36 CREANDO WIREFRAMES. MEJORES PRÁCTICAS Para qué Wireframes? Clarificar Nivel de detalle -> Costo

37 CREANDO WIREFRAMES. MEJORES PRÁCTICAS Quién puede bocetear wireframes? Persona encargada de tecnología Persona de UI (User Interface) Emprendedor

38 CREANDO WIREFRAMES. MEJORES PRÁCTICAS Es una gran referencia que permite a colaboradores y al mismo cliente Probar y refinar la navegación. Tener el feeling de cómo va a distribuirse el contenido. Estudiar y refinar el diseño de interfaz de usuario como formas electrónicas y elementos interactivos. Determinar requerimientos de programación o incluso de contenido.

39 CREANDO WIREFRAMES. MEJORES PRÁCTICAS Los Wireframes hacen que los cambios en el diseño sean más eficientes

40 1) ORGANIZAR LOS ELEMENTOS Escribir las secciones una por una y organizar las secciones de mayor a menor importancia. Puedes usar números una vez identificadas las áreas y etiquetarlas en el layout. Usa elementos simples como cuadros o círculos para representar áreas, luego ETIQUETA esas áreas con títulos. Podríamos identificar estos elementos como básicos: Logo, tagline CREANDO WIREFRAMES. MEJORES PRÁCTICAS Navegación primaria Navegación posiblemente secundaria Barra de búsqueda, login, etc. «Feature» áreas (blog, Twitter feed

41 CREANDO WIREFRAMES. MEJORES PRÁCTICAS 2) MANTENER NOTAS DE DISEÑO Consideraciones de diseño que tú crees otros deben conocer, como color, textura, tipo de imagen, animación. Una manera de aplicarlas son colocarlas a un lado sin que haga ruido en el diseño.

42 3) BOCETEAR SIEMPRE ES BUENO PERO Recuerda que puedes tener a la mano herramientas de boceto, hay muchas en el mercado. Balsamiq Mockup. Visio CREANDO WIREFRAMES. MEJORES PRÁCTICAS Go Mocking Bird. Online. Mockflow. Online y Offline. Pidoco. Online. Gliffy. Herramienta Gratuita Online.