Diseo de Interfaces de Usuarios

IU de la fama o vergenza?

Diseo de Interfaces
de Usuarios
Ciclo 2016-1

Profesor:
Diaz Muante Jorge

Ciclo del diseo IU /

Diseo Centrado en el Usuario
Como se interacta con esta tacho de basura?

IU de la fama o vergenza?

Outlook Express no puede empezar porque ha fallado al esperar sobre un mutex del sistema.
El computador puede tener poca memoria o es inestable.

.. ?
Se abre empujando por uno de los lados
No es visible ni evidente

IU a la fama o la verguenza

en qu me equivoque?. Obliga a re-llamar.

Nuevo diseo del SUM

Dialogo para salir del sum

Diaz Muante Jorge

Diseo de Interfaces de Usuarios

Objetivos de hoy

Ciclo de Diseo UI

Al final de la clase debemos ser capaces de:

Conocer el ciclo de diseo IU

Ciclo Iterativo
Diseo

Diferenciar el proceso del diseo (Koberg & Bagnall)

Describir las razones del porque es importante comprender
a los usuarios del sistema.

Interfaz

Diferencias individuales

Prototipeo

Habilidades
Conocimiento
Destreza

Evaluacion

Experiencia
realiza con el sistema.

Proceso del diseo

(Koberg & Bagnall)

Proceso del diseo

(Koberg & Bagnall)

Aceptacin
Empezando
Debido a un plazo
Debido a la posible recompensa
Debido a que est obligado a

El Compromiso
El Tiempo
recursos
responsabilidad

Clave es establecer la motivacin

Proceso del diseo

(Koberg & Bagnall)

Proceso del diseo

Anlisis

Definicin

Comprender al usuario

Centrarse en el usuario

Quines son nuestros usuarios?

Cules son sus tareas?
Observe y pruebe, no adivine

Elija el nivel adecuado

Herramientas

.. Sino

Laptop, tablet, Notebook

Smartphone
Equipo de audio + video

Diaz Muante Jorge

(Koberg & Bagnall)

No en el portavasos de la bicicleta

como ayudar a los ciclistas a tomar lquidos

sin accidentes

Diseo de Interfaces de Usuarios

Proceso del diseo

(Koberg & Bagnall)

Proceso del diseo

(Koberg & Bagnall)

Ideacin

Seleccin de ideas

Tormenta de ideas
estire los msculos mentales
Reljate con simples juegos
Haz la tarea
Ideas / objetos relacionado

Defina importancia de cada idea

aborda el problema?
le gustara a los usuarios objetivos?
HW disponible ?
SW disponible ?
Cul es el costo?
cubre el mercado?

Resultado fsico
Sketch
Construya modelos
exteriorizar

Ranking de las ideas segn su criterio

Reglas IDEO
Una conversacin a la vez
Mantenerse enfocado
Fomentar ideas nuevas
Anular juicios
Pngase de como piensa los otros

Top N o las mejores

Escoja segn los recursos y la etapa del
proyecto

La cantidad ayuda

Proceso del diseo

(Koberg & Bagnall)

Proceso del diseo

Implementacin

Evaluacin

Escale de bajo nivel Alta fidelidad

Muchos tipos de evaluacin

Baja fidelidad (rpido)

sketches, modelos en papel, etc.
Mediana fidelidad
mas lento, mas caro
Flash, JavaScript, AJAX,

(Koberg & Bagnall)

Recorrido cognitivo
Pensando en voz alta
Evaluacin heurstica
Card sorting
Wizard-of-Oz
etc.

Alta fidelidad
(mas lento, mas caro)
la interfaz total

Proceso del diseo

El ciclo es largo ..

El tipo de evaluacin ser escogida

segn la etapa del proyecto

(Koberg & Bagnall)

Proceso del diseo

(Koberg & Bagnall)

El ciclo es largo ..

La evaluacin descubre los problemas en el diseo. Redisee

Diaz Muante Jorge

Diseo de Interfaces de Usuarios

Diseo centrado en el Usuario / Iterativo

Por qu el usuario?

El diseo esta basado en el usuario:

Es mas fcil pensar en un

usuario especifico ficticio

Habilidades y necesidades reales

Contexto
Trabajo
Tareas

La regla de oro del Diseo de Interfaz Conozca al

usuario

Metas de Juan:
Ir rpido
Divertirse

Un usuario especifico
tiene claridad , sus
objetivos bien
articulados

Metas de Mara:
seguridad
confortable

Qu caractersticas
debera tener tu auto?

Diseo centrado en el usuario

Metas de Pedro:
Transportar cosas grandes
ser fiable

Diseo centrado en el usuario

Inicio

Inicio

Por eso, debemos estudiar:

Diseo IU

Requirimiento

Nosotros diseamos las

IU aqui

Requirimientos
DCU + Pruebas
Especificaciones

Especificacion
Nosotros lo verificamos
aca

Diseo

Principios de usabilidad
Diseo centrado en el usuario

Diseo
Implementacion

Implementacion

no es muy tarde?

Pruebas

ISO 13407

Pruebas

Comprendiendo el usuario
1. Planear el Proceso
Centrado en el Usuario

Para disear una interfaz eficiente y eficaz es

necesario conocer lo siguiente:
quines son los usuarios?

Completado
2. Especificar el
contexto de uso

cules son sus tareas?

cul es el ambiente en donde ellos trabajan?

5. Evaluar diseo vs
requerimientos del
usuario

3. Especificar los
requerimientos
organizacionales y del
usuario

4. Producir soluciones
de diseo

Diaz Muante Jorge

Personas representan una clase o tipo de usuario,

pero deben utilizarse como una individual

Los tipos de usuarios estn en un rango no en un
promedio

Las personas tienen motivaciones / metas

Diseo de Interfaces de Usuarios

por qu estudiar al usuario?

quines son los usuarios?

Porque los usuarios son quienes deciden usar el sistema, NO

el diseador !!!

El mejor paso para aprender de los usuarios es

estudiarlos en su campo

Cuanto mas conocemos al usuario, mejor sera nuestro

diseo.

Si el usuario no participa en el diseo, es muy probable que
falle

Estudiamos al usuario para contestar:
qu caracteristicas individuales afectan su conducta?
qu conocimientos y experiencias tienen?
qu valores tienen en su trabajo? (motivacion,
capacitacin)

Visite a los usuarios y observe como trabajan

Pero: quines son los usuarios?

Las personas que compran software para que otros lo use,
NO son los usuarios.
Los supervisores no son los usuarios.
Expertos en sw pueden ser usuarios, pero no son
representativos en forma completa.

qu clases de herramientas usan?

Identificando al usuario

Caractersticas personales

Meta: Identificar quien interactua con la interfaz

directamente o indirectamente

Conocimiento y experiencia

Hacer:
Una lista preliminar de los usuarios

niveles de educacion
Nivel de lectura / Lenguaje nativo
Algunas destrezas

Crear una matrix para identificar las principales tareas a

desarrollar, y el grupo de usuarios.

Nivel de conocimiento de sistemas

Discuta las suposiciones acerca de los potenciales

usuarios.

Nivel de experiencia/facilidad en usar sistemas o

computadoras en general.

Educacion y experiencia previa

Nivel de experiencia/experto en las tareas.

Edad, genero, diferencias fsicas.

Aspectos particulares de la tarea que pueden ser muy

familiar.

Nivel en el trabajo, etc.

Diferencias individuales

Caractersticas personales

Diseadores IU pueden considerar una variedad de

posibles diferencias entre los usuarios.

Estilo de aprendizaje

Caractersticas personales
Habilidades fsicas
Suposiciones culturales
conducta y motivacion en el trabajo.
Experiencia
Educacion
Capacitacion

Diaz Muante Jorge

Algunos prefieren que les enseen, otros solos.

Tipos de asistencia
capacitacin a distancia
Documentacin, ayudas en lnea
Tarjetas de referencias
Soporte
Wizards

Preferencia en usar algunas herramientas

Raton vs. raton/teclado vs. teclado

Diseo de Interfaces de Usuarios

Diferencias fsicas

Limitaciones fsicas pueden trabar al interactuar con

la interfaz
discapacitados fsicos
Distinguir los colores
Cuidado en usar los colores como simbolos.

Pobre visin
Problemas en distinguir pequeos objetos o leer algunos fonts.

No solamente personas con necesidades especiales

De hecho para cada necesidad especial hay

situaciones que las personas sin necesidades
especiales se pueden encontrar que pueden
necesitar los mismo requisitos de interfaz

Por ejemplo ---

Diferencias culturales

Que es la usabilidad universal?

Nos basaremos en la definicin de diseo

universal.

Diseo universal es el proceso de disear productos
que sean usables por el rango mas amplio de
personas, funcionando en el rango mas amplio de
situaciones y que es comercialmente practicable

Sin visin

- ciegos

-personas con ojos ocupados

-(e.g., conduciendo o en navegacin telefnica)
- en oscuridad.

Poca visin

- personas con
limitaciones
visuales

-personas con un visualizador pequeo

--en un entorno de humos

Operable sin
poder oir

- personas
sordas

- entornos ruidosos
- oidos ocupados
- silencio forzado (bibliotecas,etc..)

Oido
limitado

- personas
duras de oido

- gente en entorno ruidoso

Operable con - personas con

manualidad
limitaciones
limitada

- personas con vestidos especiales

- o que van en un vehiculo que se balancea

Operable con - Personas con

cognitividad
cognitividad
limitada
limitada

- personas distraidas
- con pnico
- o bajo la influencia del alcohol

Operable sin
lectura

- Personas que no conocen ese lenguaje,

- visitantes,
- personas que han dejado los lentes de lectura

- personas con
problemas
cognitivos

qu camisa te pondrias?

Especialmente importante cuando el producto es vendido

en cualquier pas.

Problema: Puede que una palabra no signifique lo mismo
de un lenguaje a otro
una palabra que en Per tenga un significado distinto
en otro pas?
...
Puede usar palabras comunes en Ingles (OK, Cancel)

Diaz Muante Jorge

Diseo de Interfaces de Usuarios

Usuario y sus tareas.

Controles del tiempo

Necesitamos conocer QUE y COMO ellos realizan

las cosas en el trabajo.

Impacto en el diseo
Estilos de control mecanico como pueden afectar para
definir la nueva interfaz en la computadora.
Cuando los usuarios tienen un nuevo producto, ellos van a
descubrir nuevas alternativas si el producto no les permiten
adecuarse a sus necesidades.

Clasificacin en los usuarios

10 0

1
2

7
6

45

hr

min

Clasificacin del usuario

Tipico esquema de clasificacin

Novato
Intermitente
Experto/Frecuente

La clasificacin nos permite generalizar a los

usuarios

Intermitentes

Novatos tienen ciertas caractersticas comunes, los

expertos lo mismo ....

No es posible disear en forma individual

El mito de la persona promedio

Novatos
Experiencia

Tipos de usuarios

Guias para novatos

Novatos (desconocen las tareas e interfaces)

Necesitan mucha retroalimentacin y termino

Mucha dificultad
Menos experiencia
Menos familiarizados
Menos probable en tener un modelo mental

Procesamiento mental es lento, laborioso

Conocimiento es declarativo vs. Por procedimiento
Necesita mas andamiaje (ayuda)

Expertos/
Frecuente

Termino: retroalimentacin para indicar que una tarea

particular o procedimiento esta completo.

Todas las iniciativas la toma la computadora
Novatos no conocen lo que pueden hacer.
Computadora puede ofrecer tareas y esperar respuesta a
sus preguntas

Cada paso requiere ser resumido
Restringir el vocabulario y nmero de acciones
Mas probable de ser recordado, menos probable de
cometer errores.

Diaz Muante Jorge

Diseo de Interfaces de Usuarios

Guias para novatos ...

Los procedimientos de ingresos debe ser consistente con las
espectativas del usuario.
Usuario forma espectativas acerca de la conducta del
sistema.
Es importante para el usuario desarrollar un modelo mental
que empate como el sistema trabaja.

Ninguna capacitacin debe ser necesaria.
Ingresar-usar el sistema
No conocimimiento en la cabeza: toda la informacin
necesita ser mostrada en la pantalla.

Guias para novatos ...

Guias para los intermitentes

Los mensajes del sistema deben ser claros e

inequivocos.

Estos usuarios pueden mantener conocimiento de

sus tareas y uso general de una computadora.

Un mensaje claro para un experto no necesariamente lo es

para un principiante.
Debe ser especifico
Donde esta el problema (si existe)
Especificamente, cual es el problema
Como puede corregirlo (si es posible)

Necesita:
Estructuras consistentes
Uso no frecuente de ciertas facilidades

Buena facilidad de ayuda

Buena documentacion
pueden necesitar ejemplos de cmo las tareas se realizan.

Guias para los expertos.

Guias para los expertos ...

Organiza los conocimientos diferente a los novatos.

Expertos prefieren estructuras abreviadas para los

comandos (ejm. Atajos con el teclado, macros).

Procedimientos de bajo nivel en lugar de alto nivel.

Experto tienen un modelo similar del sistema, en cambio en
los novatos pueden tener una variedad de modelos
mentales.

Usa CTRL-X en lugar del menu

Nota: requerimientos para expertos son la

contradiccin de los novatos.
Expertos no necesitan mucha visilidad, retroalimentacin,
tiempo breves, etc.

Diaz Muante Jorge

Diseo de Interfaces de Usuarios

Ejemplo

Ejemplo

Resumen

Diseo centrado al usuario es diferente a los

mtodos tradicionales

Conozca al usuario e involucrese por completo en el
diseo

Diaz Muante Jorge