diseño centrado en el usuario - up 25 ago 2009

Presentación bajo licencia Creative Commons Atribución 2.5 Argentinahttp://creativecommons.org/licenses/by/2.5/ar

icogramaMEMBER

Diseño Centradoen el UsuarioSantiago Bustelo • icograma.com

icograma diseño centrado en el usuario •

Diseño Centrado en el Usuario:un enfoque opuesto a...

• Diseño autoreferencial

• Diseño centrado en la tecnología

• Diseño centrado en stakeholders

• Diseño centrado en la competencia

2

icograma diseño centrado en el usuario • 3

Nivel de detalle

Caso macro:- Estructura general- Navegación

Caso micro:- Elementos de interfaz

dis

eño

cen

trad

o e

n e

l u

suar

io

todas las pantallas

pixel


Caso macro:

Estructura y navegación dedirectorio de proveedores


Estructura del sitio: Modelo original

Home » rubrosDiálogo con el usuario: pregunta

Aberturas

Aislaciones

Baños y Cocinas

Cerramientos

Climatización y ventilación

Construcciones

Decoración

Electricidad y electrónica

Equipamientos

Especialidades

Información

Maderas

Materiales

Metales

Movilidad y transporte

Máquinas, equipos y herramientas

Revestimientos

Sanitarios y gas

Seguridad e incendio

Servicios

Terminaciones

5



Home » rubros » subrubrosDiálogo con el usuario: acoso

6

Aaronico Electrónica S.L.Abab ArgentinaAbaco SRLAbad e hijosAbalorios S.A.

Abanderado SRLAbanicos DigitalesAbaratar S.A.ABASI y CIAAbasto Materiales

Abaz e HijosAbecedario S.A.Abeja S.P.A.AberraduxAbaciscus S.A.

Abactor S.R.L.Abacus SRLAbarnare y CíanAbatamentuxAbatare S.A.

Home » Revestimientos



Home » rubros »subrubros » sub-subrubrosDiálogo con el usuario: interrogatorio

Bordes cerámicos

Ceramicas

Cerámicas esmaltadas

Cerámicas rojas

Cerámicas rústicas

Escalones y zócalos cerámicos

Limpieza y protección de cerámicos

Porcellanatos para pisos y revestimientos

7

Home » Revestimientos » Cerámicas



Home » rubros » subrubros » sub-subrubros » resultadosDiálogo con el usuario: desprecio

Aaronico Electrónica S.L.Abab ArgentinaAbaco SRLAbad e hijosAbalorios S.A.

Abanderado SRLAbanicos DigitalesAbaratar S.A.ABASI y CIAAbasto Materiales

Abaz e HijosAbecedario S.A.Abeja S.P.A.AberraduxAbaciscus S.A.

Abactor S.R.L.Abacus SRLAbarnare y CíanAbatamentuxAbatare S.A.

1 2 3 4 5 6 7 8 9 10 próxima »

Home » Revestimientos » Cerámicas » Cerámicas esmaltadas

8


¿Cómo se llegó a esto?

Modelos mentales enfrentados

Quien hace el sitio

Conoce el contenido

Conoce a fondo el modelo del sitio

Quiere diferenciar el sitio de otros

Foco en estructura

Usuario

No conoce el contenido

Conoce parcialmente otros sitios

Quiere aplicar experiencia previa

Foco en contenido

9


Optimización

10

Ley de Pareto (80 / 20)

Priorizar y anticipar por relevancia: Menos pasos en la operación.


home

Modelo original: Cuantificación

11

Accesos

Pasos 5x100% = 1000

rubros

subrubros

sub-subrubros

items

item


home

Modelo optimizado: Cuantificación

12

Accesos

Operación

Pasos 42 3x xx30% 20%50%

100 90+ + 80 = 270

itemitemitem

facetado+items facetado+items items


Caso micro:

Formulario de contacto


Formulario de contacto: Modelo original

14

Nombre: Apellido:

Email: Repetiremail:

Teléfono:

Mensaje:

Verificación:

¿Cómo llegó al sitio?

ENVIAR

opción 1 opción 1

Quiero recibir información de promociones He leído y acepto la política de privacidad

Tipo de mensaje:

K98LQ1


¿Cómo se llegó a esto?

Modelos mentales enfrentados

Formulario de contacto vs. link “mailto:”

Para la empresa

Dirección no es tomada para spam

Se pueden obtener datos adicionales

El usuario puede poner mal su mail

Para el usuario

Funciona con webmail

Puede enviar desde PC ajena

No se puede guardar borrador

No queda registro en “enviados”

15


Importancia de la cuantificación

Creencia: “Preguntar es gratis” - “Si no quieren se lo saltean”

- No se percibe costo de agregar preguntasno relevantes a la tarea para el usuario

- No se evalúa beneficio de tener el dato vs.obtener datos espurios, o abandono del usuario

16


Cuantificación de la operación:KLM-GOMS

Key 0,2 seg. Tecla / mouse click & release

Hover 0,4 seg. Paso mouse teclado

Point 1,1 seg. Apuntar con el mouse

Mental 1,35 seg. Preparación mental nueva tarea

Response ? Respuesta del sistema

17

Cada operación del usuario tiene un costo.

Preguntar no es gratis.


Cuantificación de la operación:Formulario de contacto

Obligatorio (opcional)

Nombre 7.55 ( 2.70 )

Apellido 4.50 ( 2.70 )

Email 6.90 8.40

Repetir email 6.90 6.90

Código de área 3.50 ( 2.70 )

Teléfono 4.50 ( 2.70 )

Cómo llegó al sitio 14.00 ( 2.70 )

Tipo de mensaje 13.40 ( 2.70 )

Mensaje 32.40 32.40

Quiero recibir promociones 4.40 4.40

Política de privacidad 2.65 2.65

Verificación 20.05 20.05

Enviar 3.05 3.05

122.25 seg. 94.05 seg.

18


Formulario de contacto optimizado

19

Nombre y apellido:

Email:

Mensaje:

ENVIAR MENSAJE

recibir en mi email copia del mensaje enviado

7.60 seg.

6.90 seg.2.70 seg.

32.40 seg.

3.05 seg.

52.65 seg.


Preguntas en segunda pantalla

20

¡Gracias!Su mensaje ha sido enviado.

ENVIAR

Su opinión es muy importante para nosotros.Si no es molestia, le agradeceremos unos instantes más de su tiempo:

¿Cómo supo de nosotros?

¿Desea recibir promociones y ofertas por e-mail?

opción 1

No, gracias Sí, deseo recibir ofertas por e-mail


Entregables

Cómo logramos que estas decisioneslleguen al producto final


Función de los entregables

• Proceso de Diseño: solucionar problemas

• Entregables: comunicar esas soluciones ...de forma clara

...de manera económica en un proceso iterativo

22


Entregables: documentación de...

Investigación y objetivos

• Brief de proyecto

• Personas

• Escenarios

23

Decisiones de diseño

• Matriz de acciones

• Casos de uso

• Descripción de pantallas

• Wireframes

• Prototipos

• Mockups

• Plantillas

Más información: D. Keith Robinson, Critical Web App Design Deliverables

Validación, mantenimiento

• Revisión experta

• Reporte de usabilidad

• Guías de estilo


Casos de uso

• Cómo un usuario interactuará con el sistema paso a paso

• Cómo funciona el sistema y cómo está organizado

• Contemplar todos los objetivos del usuario

• Contemplar errores y desvíos

• Foco en tareas y acciones

24


Wireframes

• Entregable clave: “planos” del diseño

• Comunican decisiones de diseño e interfaz

• Fundamental para proceso de diseño, maquetación y desarrollo

• Baja fidelidad alta fidelidad

• Primeras iteraciones: descripción escrita de las pantallas

• Ultimas iteraciones: pantallas cliqueables, HTML

25


Producto final

Centrado en el usuario, como resultadode un proceso que lo toma en cuentadesde el primer momento

¡Muchas gracias!Santiago Bustelo • icograma.com

icogramaMEMBER