aplicando experiencia de usuario a nuestros proyectos en drupal
TRANSCRIPT
![Page 1: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/1.jpg)
Aplicando experiencia de usuario a nuestros proyectos en Drupal
Drupal Picchu 2014
Néstor Ramírez Salas
![Page 2: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/2.jpg)
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…” :)
![Page 3: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/3.jpg)
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
![Page 4: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/4.jpg)
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.
![Page 5: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/5.jpg)
¿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.
![Page 6: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/6.jpg)
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.
![Page 7: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/7.jpg)
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
![Page 8: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/8.jpg)
2. Importancia de la Arquitectura de la Información
![Page 9: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/9.jpg)
¿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
![Page 10: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/10.jpg)
¿Qué hace un arquitecto de información?
Organiza el contenido
Diseña los sistemas de navegación
![Page 11: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/11.jpg)
¿Qué hace un arquitecto de información?
![Page 12: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/12.jpg)
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.
![Page 13: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/13.jpg)
Wireframes - simples
![Page 14: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/14.jpg)
Wireframes - complejos
![Page 15: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/15.jpg)
Prototipos
![Page 16: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/16.jpg)
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?
![Page 17: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/17.jpg)
Slider - ¿Cuántos ítems tiene?
![Page 18: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/18.jpg)
Slider - ¿Cuántos ítems tiene?
![Page 19: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/19.jpg)
Slider - ¿Cuántos ítems tiene?
![Page 20: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/20.jpg)
Slider - ¿Cuántos ítems tiene?
![Page 21: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/21.jpg)
Enlaces - ¿Cuántos links reconoces?
http://elcomercio.pe/tecnologia
![Page 22: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/22.jpg)
Enlaces - ¿Cuántos links reconoces?
https://www.myhealth.london.nhs.uk/
![Page 23: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/23.jpg)
Enlaces - ¿Cuántos links reconoces?
http://georgia.gov/
![Page 24: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/24.jpg)
Formularios - ¿Qué es esto?
![Page 25: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/25.jpg)
Formularios - ¿Qué es esto?
![Page 26: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/26.jpg)
Formularios – Mucho mejor
![Page 27: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/27.jpg)
Formularios – Mucho mejor
![Page 28: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/28.jpg)
Formularios – Mucho mejor
http://www.uptravel.com.pe/contacto.html
![Page 29: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/29.jpg)
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
![Page 30: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/30.jpg)
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.
![Page 31: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/31.jpg)
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.
![Page 32: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/32.jpg)
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
![Page 33: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/33.jpg)
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
![Page 34: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/34.jpg)
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
![Page 35: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/35.jpg)
Atrévanse a hacer cosas nuevaspero siempre pensado en el usuario
![Page 36: Aplicando experiencia de usuario a nuestros proyectos en Drupal](https://reader033.vdocuments.co/reader033/viewer/2022051520/5881d6871a28ab331a8b680b/html5/thumbnails/36.jpg)
Gracias
Néstor Ramírez SalasWeb Developer / Analista de usabilidad
nramirezsalas nramirezsalas 994 736 607