boceto wireframe mockup prototipocatedraocampo.com.ar/.../06/flujo-de-trabajo-y-ux.pdf · de una...

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....