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...
El menú del día
1.

¿Qué es Experiencia de Usuario

2.

Importancia de la Arquitectura de Información

3.

Importancia de ...
1. ¿Qué es Experiencia de Usuario?


Es el conjunto de ideas, sensaciones y valoraciones del
usuario como resultado de la...
¿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 ...
Antes de aplicar UX tienes que saber un
par de cosas
a) Tus objetivos:

b) Reglas para el usuario:



Claros



No me ha...
Un sitio diseñado y pensado en el
usuario se reconoce porque es:
1.

Útil

2.

Usable

3.

Deseable

4.

Encontrable

5.

...
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 ...
Y en drupal lo vemos en:
¿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...
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 ...
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

...
6. Reglas heurísticas de usabilidad
de Jakob Nielsen
1.

Visibilidad del estado del sistema: que está sucediendo,
loading,...
6. Reglas heurísticas de usabilidad
de Jakob Nielsen
6.

Reconocimiento mas que el recuerdo.

7.

Flexibilidad y eficienci...
7. Pruebas de usuario
Son importantes para verificar si el sitio va tener éxito o no.


Dice “imprimir” y no lo hace
 ht...
7. Pruebas de usuario


Dice “enviar” y no lo hace
 http://prensa.bbva.com/actualidad/notas-de-

prensa/enviar_amigo.htm...
7. Pruebas de usuario


Buscar en Google:
 Page not found
 Page not title



Ejemplo de Checklist de usabilidad
 http...
Atrévanse a hacer cosas nuevas
pero siempre pensado en el usuario
¿Un sitio web que no tiene HOME?

http://qz.com/
Gracias

Néstor Ramírez Salas
Drupal Front End Developer – Analista de usabilidad
nramirezsalas@outlook.com.pe

nramirezsa...
Upcoming SlideShare
Loading in...5
×

Aplicando experiencia de usuario a nuestros proyectos en Drupal

417

Published on

Presentación para el Drupal Picchu 2014, el primer evento internacional de la comunidad Drupal que se realizó en el Cusco. Hablamos sobre la Experiencia de Usuario para nuestros proyectos en drupal.

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
417
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
1
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Aplicando experiencia de usuario a nuestros proyectos en Drupal"

  1. 1. Aplicando experiencia de usuario a nuestros proyectos en Drupal Drupal Picchu 2014 Néstor Ramírez Salas
  2. 2. 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…” :)
  3. 3. 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
  4. 4. 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.
  5. 5. ¿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.
  6. 6. Antes de aplicar UX tienes que saber un par de cosas a) Tus objetivos: b) Reglas para el usuario:  Claros  No me hagas pensar.  Medibles.  El diseñador no es el usuario.  Observables.  Prototipo mata argumento.  Realistas. c) No existe el usuario promedio, hay público objetivo. d) Tú debes aprender del usuario, no al revés.
  7. 7. 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
  8. 8. 2. Importancia de la Arquitectura de la Información
  9. 9. ¿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
  10. 10. Y en drupal lo vemos en:
  11. 11. ¿Qué hace un arquitecto de información?  Organiza el contenido  Diseña los sistemas de navegación
  12. 12. ¿Qué hace un arquitecto de información?
  13. 13. 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.
  14. 14. Wireframes - simples
  15. 15. Wireframes - complejos
  16. 16. Prototipos
  17. 17. 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?
  18. 18. Slider - ¿Cuántos ítems tiene?
  19. 19. Slider - ¿Cuántos ítems tiene?
  20. 20. Slider - ¿Cuántos ítems tiene?
  21. 21. Slider - ¿Cuántos ítems tiene?
  22. 22. Enlaces - ¿Cuántos links reconoces? http://elcomercio.pe/tecnologia
  23. 23. Enlaces - ¿Cuántos links reconoces? https://www.myhealth.london.nhs.uk/
  24. 24. Enlaces - ¿Cuántos links reconoces? http://georgia.gov/
  25. 25. Formularios - ¿Qué es esto?
  26. 26. Formularios - ¿Qué es esto?
  27. 27. Formularios – Mucho mejor
  28. 28. Formularios – Mucho mejor
  29. 29. Formularios – Mucho mejor http://www.uptravel.com.pe/contacto.html
  30. 30. 5. Test de los 5 segundos El tiempo es oro. No hagas esperar al usuario.  Cache de drupal  Páginas  Bloques  Vistas  Módulo Boost  Técnica de sprites para imágenes e iconos
  31. 31. 6. Reglas heurísticas de usabilidad de 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.
  32. 32. 6. Reglas heurísticas de usabilidad de 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.
  33. 33. 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-ypinamar__9882-22-c-106754__.html
  34. 34. 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-ofrecebeneficios-de-verano-en-mar-del-plata-y-pinamar__9882-22-c106754__.html
  35. 35. 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
  36. 36. Atrévanse a hacer cosas nuevas pero siempre pensado en el usuario ¿Un sitio web que no tiene HOME? http://qz.com/
  37. 37. Gracias Néstor Ramírez Salas Drupal Front End Developer – Analista de usabilidad nramirezsalas@outlook.com.pe nramirezsalas nramirezsalas 994 736 607

×