Aplicando experiencia de usuario a nuestros proyectos en Drupal

Drupal Picchu 2014

Néstor Ramírez Salas

Hoy vamos a hablar sobre UX (Experiencia de Usuario) y cómo podemos aplicar estas buenas prácticas a nuestros proyectos en Drupal.

¿Quién determina si un proyecto es exitoso?

Para mí lo es cuando el cliente dice algo como “…esto es lo que yo quería…” :)

El menú del día

1. ¿Qué es Experiencia de Usuario

2. Importancia de la Arquitectura de Información

3. Importancia de los Wireframes y Prototipos antes del desarrollo

4. Criterios sobre el uso de algunos elementos web

5. Test de los 5 segundos

6. Reglas heurísticas de usabilidad de Jakob Nielsen

7. Pruebas de usuario y muchas preguntas

1. ¿Qué es Experiencia de Usuario?

Es el conjunto de ideas, sensaciones y valoraciones del usuario como resultado de la interacción con un sitio web.

Es un conjunto de ideas positivas o negativas.

En otras palabras… “Es lo que un usuario puede expresar de un sitio web”. Los comentarios, opiniones, recomendaciones.

¿Cómo sé si en mi sitio web se necesita aplicar UX?

Te vas a dar cuenta cuando tu sitio:

Es difícil de navegar.

No funciona.

Tiene contenido duplicado y/o desordenado.

Cuando los usuarios reportan quejas.

Estas son buenas razones para plantear un re-diseño

del sitio, pero esta vez pensando en el usuario.

Antes de aplicar UX tienes que saber un par de cosas

a) Tus objetivos:

Claros

Medibles.

Observables.

Realistas.

b) Reglas para el usuario:

No me hagas pensar.

El diseñador no es el usuario.

Prototipo mata argumento.

c) No existe el usuario promedio, hay público objetivo.

d) Tú debes aprender del usuario, no al revés.

Un sitio diseñado y pensado en el usuario se reconoce porque es:

1. Útil

2. Usable

3. Deseable

4. Encontrable

5. Accesible

6. Creíble

7. Valioso

2. Importancia de la Arquitectura de la Información

¿Qué es y para qué es importante?

Es el arte de estructurar y organizar los sistemas de información.

Y es importante para ayudar a las personas (usuarios) a lograr sus objetivos.

Registro en el sitio

Inscripción a un curso

Encontrar lo que están buscando

¿Qué hace un arquitecto de información?

Organiza el contenido

Diseña los sistemas de navegación

¿Qué hace un arquitecto de información?

3. Importancia de los Wireframes y Prototipos antes del desarrollo

Tenemos una visión clara del contenido.

Evitamos tiempos muertos.

Nos damos cuenta de algunos errores y podemos corregirlos.

El cliente puede interactuar el diseño y ver si es realmente lo que quiere.

Nos sirve como garantía para evitar cambios futuros que pueden retrasar el proyecto.

Wireframes - simples

Wireframes - complejos

Prototipos

4. Criterios sobre el uso de algunos elementos web

Un sitio sobrecargado, distrae al usuario.

Slider:

¿Qué es? ¿Cuál es su propósito?

Enlaces:

¿Qué es? ¿Cuál es su propósito?

Formularios:

¿Qué es? ¿Cuál es su propósito?

Slider - ¿Cuántos ítems tiene?

Slider - ¿Cuántos ítems tiene?

Slider - ¿Cuántos ítems tiene?

Slider - ¿Cuántos ítems tiene?

Enlaces - ¿Cuántos links reconoces?

http://elcomercio.pe/tecnologia

Enlaces - ¿Cuántos links reconoces?

https://www.myhealth.london.nhs.uk/

Enlaces - ¿Cuántos links reconoces?

http://georgia.gov/

Formularios - ¿Qué es esto?

Formularios - ¿Qué es esto?

Formularios – Mucho mejor

Formularios – Mucho mejor

Formularios – Mucho mejor

http://www.uptravel.com.pe/contacto.html

5. Test de los 5 segundos

El tiempo es oro. No hagas esperar al usuario.

Cache de drupal

Páginas

Bloques

Vistas

Configuración de

Boost, Memcache, Varnish

Técnica de sprites para imágenes e iconos

6. Reglas heurísticas de usabilidadde Jakob Nielsen

1. Visibilidad del estado del sistema: que está sucediendo, loading, downloading, etc.

2. Coincidencia entre el sistema y el mundo real: ico home.

3. Control y libertad, salidas de emergencia.

4. Consistencia y estándares: sigue las convenciones de la plataforma.

5. Prevención de errores, diséñelos cuidadosamente.

6. Reglas heurísticas de usabilidadde Jakob Nielsen

6. Reconocimiento mas que el recuerdo.

7. Flexibilidad y eficiencia de uso.

8. Diseño estético y minimalista.

9. Ayude a los usuarios a reconocer, diagnosticar y recuperarse de los errores: mensajes.

10. Ayuda y documentación.

7. Pruebas de usuario

Son importantes para verificar si el sitio va tener éxito o no.

Dice “imprimir” y no lo hace

http://prensa.bbva.com/accesibilidad.html

http://prensa.bbva.com/actualidad/notas-de-prensa/bbva-frances-ofrece-beneficios-de-verano-en-mar-del-plata-y-pinamar__9882-22-c-106754__.html

7. Pruebas de usuario

Dice “enviar” y no lo hace

http://prensa.bbva.com/actualidad/notas-de-prensa/enviar_amigo.html?url=http%3A%2F%2Fprensa.bbva.com%2Factualidad%2Fnotas-de-prensa%2Fbbva-frances-ofrece-beneficios-de-verano-en-mar-del-plata-y-pinamar__9882-22-c-106754__.html

7. Pruebas de usuario

Buscar en Google:

Page not found

Page not title

Ejemplo de Checklist de usabilidad

http://www.guiadigital.gob.cl/articulo/usabilidad-0

Modelo de para Prueba de usabilidad:

Prueba Usabilidad.docx

Atrévanse a hacer cosas nuevaspero siempre pensado en el usuario

Gracias

Néstor Ramírez SalasWeb Developer / Analista de usabilidad

ramirezsalasnestor@gmail.com

nramirezsalas nramirezsalas 994 736 607