Guías para el diseño de Interfaces de Usuario

(IU)

Sensibilización: ¿uso de guías de diseño de IU -Parte 2

1 Centro ISYS – Escuela de Computación. UCV NZ revisado 30/19
Contenido

1) Generalidades sobre guías de diseño de IU

2) Guías de diseño de IU: Principios,
lineamientos y estándares
3) ¿Cómo se determinan las guías de diseño?
4) Limitaciones de las guías de diseño

2
2) Guías de Diseño de IU

3
Guías de Diseño
…cuando se diseña una interfaz de un
producto interactivo es necesario
determinar cuáles guías son las más
importantes en términos del perfil del
usuario, del tipo de aplicación, y la
usabilidad del sistema …

Lista de Comprobación

4
3) ¿Cómo se determinan las guías de diseño?

 Modelos derivados de estudios en el área

cognitiva, social, educativa, etc.

 Análisis de interfaces exitosas

 Evaluaciones de usabilidad

 Estudios empíricos.

5
 ¿Cómo se determinan las guías de Diseño?

A fin de desarrollar la interfaz de usuario, transparente y

usable, el equipo multidisciplinario de diseño debe determinar:

- El tipo de usuario a quien va dirigida la aplicación

- Cuáles características generales (principios) son deseables
para el usuario

Metodología para determinar las guías

6 6
Una categorización de las guías

Aplicación de propósito general para todo tipo de

usuario.
Si las características deseables son:
a) Reducir la carga cognitiva
b) Sentir que tiene el control de la aplicación
c) Sentirse cómodo y a gusto
Se pueden clasificar las guías de
acuerdo a si inciden en esas características.
7
a) Reducir la carga cognitiva

8
Recuperación de información
Reducir la carga de memoria

¿memoria del computador

vs
memoria del usuario?

La aplicación debe registrar y recuperar

información para evitar que el usuario la
escriba varias veces

Minimizar el trabajo del usuario

9
 Selección por reconocimiento
Reducir la carga de memoria

¿reconocer o recordar?

 Es más fácil reconocer

información que
recordarla
 Es más fácil seleccionar
un ítem de una lista
desplegada, que tratar
de recordar el ítem
para escribirlo.

10
Indicadores visuales Reducir la carga de memoria
¿Feedback?

Los indicadores visuales informan al usuario

dónde está, qué está haciendo y qué puede
hacer

11
 Familiaridad Reducir la carga de memoria

¿reutilizar o partir de cero?

 Aprovechar el conocimiento previo del

usuario
 Utilizar metáforas adecuadas, y en lo posible,
las metáforas estándares.

12
Barra de
Herramientas Familiaridad: ejemplo
Reducir la carga de memoria

Área de Dibujo

13 Paleta de Colores
Familiaridad: las metáforas
Reducir la carga de memoria

 Los objetos en la interfaz

deben tener una analogía
directa con los objetos en el
ambiente del usuario
 La metáfora es adecuada si
refleja el modelo del usuario
 La metáfora debe ser
coherente en su aspecto y
consistente en su uso.

14
Claridad Reducir la carga de memoria

Proveer objetos visibles e intuitivos

Los controles del sistema deben estar

claramente visibles y sus funciones
identificables.

15
Claridad y familiaridad: ejemplo
Reducir la carga de memoria

16
b) Sentirse con el control

17
Darle control al usuarioDarle control al usuario
¿ interfaz rígida o flexible ?
 Flexibilidad en la interfaz
 Hacer sentir al usuario que puede tomar
decisiones
 Permitir que el usuario mantenga el
contexto de trabajo
 Proveer asistencia cuando
el usuario lo requiera.

18
Permitir la interrupción deDarle
sesiones
control al usuario
¿mantener o cancelar sesiones?

 El usuario decide si cancela, finaliza o

suspende una sesión
 Implica mayor complejidad: indicadores que
señalen en qué punto se encuentra, qué sigue,
almacenamiento de la información...
 El usuario planifica su tiempo.
19
Confianza:
acciones predecibles y reversibles
¿acciones predecibles o adivinar?

El usuario desea realizar

acciones, observar su resultado
y deshacerlas si no son
deseables.

Proveer Feedback a las acciones del

usuario

20
Proveer reversión de acciones
Darle control al usuario

 Restaurar el sistema
al estado anterior de
una acción errónea
(deshacer o rehacer)
 Permite al usuario
recuperarse de los
errores
 Fomenta la
exploración de la
interfaz.

21
Confianza:
mostrar progreso de las acciones
 El usuario desea visualizar el progreso de su
tarea y disfrutar la sensación de logro
 Los resultados de las acciones deben ser
reflejados inmediatamente
 Ofrecer una vista previa de los resultados de las
acciones
 Indicación acerca de una acción, de su progreso
y del resultado
Este es uno de los aspectos más sutiles de una
IU y que tiene un gran impacto en el confort del
usuario .
23
 Seguridad Darle control al usuario

¿…y si el usuario comete errores?

 Minimizar las
posibilidades de que
el usuario cometa
errores
 Utilizar diversos
tipos de ayuda para
evitar que el usuario
deba recordar.
25
Seguridad Darle control al usuario

26
Seguridad: ejemplo Darle control al usuario
Selección de la Valores para la
región actual opción seleccionada

27
Versatilidad Darle control al usuario
¿Una o varias técnicas de interacción?

 Proveer técnicas de interacción alternas

 Permitir al usuario elegir el estilo de
interacción que más le convenga, y cambiar
de uno a otro dependiendo de la aplicación
 Se debe permitir a los usuarios completar
una secuencia a través del mismo
dispositivo de interacción.
28
Versatilidad: ejemplo Darle control al usuario

29
Personalización Darle control al usuario
¿El usuario debe adaptarse a la interfaz, o viceversa?

 La interfaz debe adaptarse a las

necesidades y deseos individuales de los
usuarios

 Permitir al usuario personalizar la interfaz

 Permitir cambiar los valores por defecto y

restaurarlos.
30
Personalización: ejemplo Darle control al usuario

31
c) Sentirse cómodo y a gusto

32
Simplicidad Lograr la satisfacción del usuario
¿Simple o sofisticada?

 Menos es más....
 Mantener la interfaz simple, sencilla y
organizada
 Las funciones básicas deben aparecer
inicialmente
 Permitir al usuario personalizar la interfaz.

33
Simplicidad: ejemploLograr la satisfacción del usuario

34
Acceso Lograr la satisfacción del usuario

¿mostrar lo necesario en su momento?

 Mostrarle al usuario lo que necesita cuando

lo necesite
 Si no es necesario, evitar colocar toda la
información en una ventana, usar ventanas
secundarias para la información que no sea
relevante
Divulgación progresiva
35
 Acceso: ejemplo

36
Legibilidad y claridadLograr
textual
la satisfacción del usuario

¿los términos son adecuados?

 Usar términos dirigidos al usuario
 Evitar terminología de mal tono
 Evitar palabras que puedan tener varios
significados en diferentes contextos
 Evitar palabras coloquiales y abreviaturas
 Respetar la gramática
 Recordar que el significado de los
términos pueden variar con la cultura.
37
 Legibilidad y claridad textual
Lograr la satisfacción del usuario
¿cómo organizar del contenido?

Promover la claridad visual del texto

38
 Legibilidad y claridad textual
Lograr la satisfacción del usuario

¿y la organización del contenido?

 Presentar mensajes concisos, específicos,

breves, consistentes y constructivos
 Mantener un formato consistente de una
pantalla a otra
 Usar oraciones cortas y simples
 Destacar la información importante.

39
Legibilidad y claridad textual:
mensajes de error
...los mensajes de error deben...

 Tener un tono positivo (evitar la

condena o términos en mal tono)
 Ser comprensibles
 Facilitar corregir el error
 Ayudar al usuario en el control de la
situación
 En ciertos casos, expresarse en
múltiples niveles.
40
Legibilidad y claridad textual:
mensajes de error
Veamos un contraejemplo:

Fuente: Hall of Shame

41
Seducción Lograr la satisfacción del usuario

¿Útil o atractiva?

 Importancia del diseño visual

 La interfaz debe ser atractiva y a la vez
intuitiva y familiar para el usuario
 Diseño mínimo
 Jerarquía visual
 Apariencia.

42
Seducción: ejemplo

Lograr la
satisfacción del
usuario

43
Seducción: ejemplo

44
Consistencia: presentación

¿Los objetos (acciones) deben verse igual

siempre?

 La información y los objetos deben

presentarse de la misma manera
 Integridad y apariencia estética
 Uso consistente y apropiado del color.

45
Consistencia: comportamiento

¿Los objetos (acciones) deben comportarse

siempre igual?

 El efecto de las acciones deben

corresponderse al efecto esperado
por el usuario
 Un mismo objeto debe responder
siempre de la misma manera ante
una acción.
46
Consistencia en la Interfaz
Diferentes símbolos, diferentes
palabras, con el mismo
significado

Cerrar EXIT

Salir

47
Consistencia: técnicas de interacción

¿Las técnicas de interacción deben ser tener el

mismo efecto?

 Los resultados de una interacción deben

ser siempre los mismos
 Los mismos shorcuts deberían funcionar de
la misma manera en sistemas similares
 El uso de los dispositivos debería producir
el mismo resultado en cualquier parte del
sistema.
48
Consistencia: navegación

La seguridad, ubicación,
rapidez y alcance de
objetivos en la
navegación es una de
las cualidades más
apreciadas para la
usabilidad de
aplicaciones Web

49
Limitaciones de las guías de diseño

 Las guías pueden caer en conflicto

 Es difícil determinar cual es el problema

que resuelve una guía de diseño y el
contexto de aplicación

 Hay mucha diversidad de guías de diseño.

50
Para finalizar…
… vamos a escribir 4 principios y cinco estándares
para orientar la creación del logo aniversario:

1. _______________________________

2. _______________________________

3. _______________________________

4. _______________________________

5. _______________________________

51
Actividad

Investigar las ocho (8)

Reglas de Oro de Ben
Shneiderman,
ejemplificarlas y traerlas
para la siguiente sesión:

52
GUIAS DE DISEÑO DE IBM
1. Mantenlo simple
2. Optimice el diseño para las tareas más frecuentes o importantes.
3. Hacer que la interfaz sea accesible y visible para los usuarios
4. Utilice los valores por defecto adecuados cuando soporte tareas
complejas
5. Sea Flexible
6. Mantenga a sus usuarios informados y bajo control.
7. Las cosas que se ven iguales deben comportarse de la misma
manera, y las acciónes siempre debe producir el mismo
resultado.
8. Proporcione la capacidad de deshacer y rehacer acciones
9. Haga que su aplicación sea predecible mediante el uso de
convenciones de interfaz de usuario estándar siempre que sea
posible
10. Siempre tenga en mente a sus usuarios objetivo , cuando diseña
el
53 producto
GUIAS DE DISEÑO DE IBM (cont.)
11. Evite agregar funciones solo para que puedan marcarse en una lista
12. Diseñe su interfaz de usuario para que pueda localizarse para otras
geografías sin rediseñar la interfaz
13. Considere a las personas con discapacidad al diseñar sus aplicaciones
14. Diseñe la aplicación para que la ayuda contextual esté disponible para los
usuarios cuando la necesiten.
15. Da vida a los objetos mediante un buen diseño visual.
16. Crear interfaces de usuario que promuevan la claridad y la simplicidad
visual.
17. Diseño sustractivo: reduzca el desorden eliminando cualquier elemento
visual que no contribuya directamente a la comunicación visual

54
Software de calidad
Entre los requerimientos no funcionales, se
consideran los atributos de calidad:

 Robusto
 Confiable
 Eficiente
 Reusable
 Portable
 Mantenible
 Usable ……

57
 Calidad del

Cualidades del producto de

software

software
Adecuación Eficacia de Fiabilidad
Compatibilidad Usabilidad
Funcional desempeño -----
-----
------- ------ ------
Inteligible Madurez
Correctitud Recursos Inter-
operabilidad Aprendizaje Disponibilidad
Completitud Capacidad Operabilidad Tolerancia a fallas
Coexistencia
confiable Tiempo Estética Capacidad de
Accesibilidad recuperación
Prevención de errores

seguridad mantenibilidad portabilidad

------- ------ ------
confidencialidad reusabilidad Adaptabilidad
integridad Capacidad de ser Facilidad de instalación
modificado Capacidad de ser
Autenticidad
Capacidad de ser reemplazado
Responsabilidad probado

58