boceto wireframe mockup prototipocatedraocampo.com.ar/.../06/flujo-de-trabajo-y-ux.pdf · de una...
TRANSCRIPT
Boceto Wireframe Mockup Prototipo
Boceto Wireframe Mockup Prototipo
Boceto Wireframe Mockup Prototipo
Boceto Wireframe Mockup Prototipo
Boceto Wireframe Mockup Prototipo
Boceto Wireframe Mockup Prototipo
Boceto Wireframe Mockup Prototipo
Integrantes delproceso de trabajo
UX UI Front End
UX UI Front End
User ExperienceDesigner
✓ Arquitectura de la información
✓ Navegación
✓ Interacción
✓ Usabilidad
✓ Wireframe
✓ Test de usuario
UX UI Front End
User InterfaceDesigner
✓ Look & Feel
✓ Atomic Design
✓ Mockup
✓ Grillas
✓ Responsive Design
UX UI Front End
Front End
✓ Maquetado
✓ HTML5
✓ CSS3
✓ jQuery
UXEs el conjunto de factores directos o indirectos que
influyen en la interacción de una persona en una situación
específica en un contexto específico.
UX✓ Define la estrategia, el concepto y las
características de un producto o servicio
interactivo.
✓ Concreta y ordena las ideas, la estrategia y las
características en un diseño específico.
✓ Se encarga de crear experiencias satisfactorias.
Arquitecturade la Información
Disciplina encargada de estructurar, organizar y etiquetar
los elementos que conforman los entornos informacionales
para facilitar de esta manera la localización (o el acceso)
de la información contenida en ellos y mejorar así su
utilidad y su aprovechamiento por parte de los usuarios.
(Pérez-Montoro 2010)
Misión
Misión Visión
ESTRATEGIA Identifica los objetivos.
ALCANCE Identifica las necesidades de los usuarios.
ESTRUCTURA Especifica las funcionalidades y
requerimientos de la web.
ESQUELETO Especifica el diseño de los sistemas de
navegación, organización y etiquetado.
INTERFAZ Prototipa la página para pruebas de usuario.
(Garret, 2003)
Fases
Sistemas de Organización
Sistemas de Etiquetado
Sistemas de Navegación
Componentes del AI
1. Sistemas de Organización
Logran que los contenidos que alberga nuestro sitio sean
más fáciles de encontrar por los usuarios que lo navegan.
✓ Esquemas ✓ Estructuras
1. Sistemas de Organización
Esquemas
✓Exactos
✓ Alfabéticos
✓ Cronológicos
✓ Geográficos
✓Ambiguos
✓ Tema
✓ Tarea
✓ Audiencia
1. Sistemas de Organización
Estructuras
✓Jerárquica
1. Sistemas de Organización
Estructuras
✓Hipertextual
1. Sistemas de Organización
Estructuras
✓Secuencial
2. Sistemas de Etiquetado✓ Acotar el significado de las etiquetas teniendo en cuenta a los
usuarios.
✓ Diseñar el sistema de etiquetado de forma global y no etiquetas de
forma aislada.
✓ Mantener la consistencia tanto en el literal como en el formato.
✓ Usar el mismo registro: si usas “linfoma” no uses “dolor de cabeza”
sino “cefalea”.
✓ Reconocibles por ser conceptos familiares, el usuario no debe tener
que aprender su significado.
3. Sistemas de Navegación✓ Estructuras que ordenan y agrupan los contenidos
de una página web bajo categorías que forman una
clasificación.
✓ Permite identificar las relaciones entre los
contenidos de la web y entre esos contenidos y la
página que se está visitando en ese momento.
✓ Nos orienta, sabemos dónde estamos, qué hay aquí,
de dónde venimos y cómo podemos ir hacia donde
deseamos.
Test de usuario✓ Prueba de usabilidad.
✓ Demostración con hechos concretos.
✓ Observación y análisis de uso.
✓ Detección de problemas.
A testear se ha dicho....