Tema 4 estrategias de diseño

Tema 4:
Estrategias de Diseño
DISEÑO DE INTERFACES DE USUARIO
edición 2015
!
!
Miguel Gea (mgea@ugr.es)
Dpt. Lenguajes y Sistemas Informáticos
Grado en Ingeniería Informática
Universidad de Granada
http://utopolis.ugr.es/diu
http://www.slideshare.net/mgea/
10 nov, 2015

Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
El personaje: Google
2
“Céntrate en el usuario y todo lo demás
llegará”
“..Google es la única empresa abocada a desarrollar el
motor de búsqueda perfecto, algo que comprende
exactamente lo que el usuario quiere decir y le entrega
exactamente lo que está buscando"
Con ese fin en mente, Google insiste en continuar
innovando y se niega a aceptar las limitaciones de los
modelos existentes.
Crearon la empresa Google en 1998.
http://www.google.com/corporate/tenthings.html
Larry Page,
Sergey Brin
(Google)

Indice
Paradigmas de interacción
Diseño orientado a objetos
Metáforas
Capa de presentación
Diseño mediante estilos
Documentación
3

4
Modelos de los que se deriva el sistema de interacción
y establece las características de la comunicación
1 Modelo de escritorio.
2 Realidad Virtual: Sistema (generado por
ordenador) que produce una apariencia de realidad en
la que el usuario tiene la sensación de estar presente.
3 Realidad Aumentada: Sistema que define una
visión directa o indirecta de un entorno físico del
mundo real, cuyos elementos se combinan con
elementos virtuales para la creación de una realidad
mixta a tiempo real.
4 Computación Ubicua: integración de los sistemas
informáticos en el entorno de la persona, de forma
que los ordenadores no se perciban como objetos
diferenciados. [Rekimoto95] [Lores01]
realidad virtual
realidad
comp. ubicua
R: Realidad, C: Computador
!" Persona - Computador
!" Persona - Mundo real
!" Mundo real - Computador

5
Referencias: [Lores01]
realidad
virtual
realidad
aumentada

6
Milgram-Virtuality Continuum
[Milgram94]
[Azuma01]

Interacción: Modelo conceptual
7
La interacción es una actividad cognitiva
• El usuario debe recordar una serie de órdenes
• Realizar unas acciones para conseguir una finalidad
• Conocimiento mediante aprendizaje
Modelo Mental (Modelo de Usuario)
• Aprendizaje
• Predecir
Modelo Conceptual
• Asimilable
• Consistente
• Simple
[Weinch11]

Diseño Orientado a Objetos
8
Modelo basado en:
• Objetos y Acciones
• Objetos intrínsecos y de Control
Referencias: http://www.cs.umd.edu/class/fall2002/cmsc838s/tichi/oai.html
OBJETO
Acción
Acción
INTRINSECOS CONTROL
LIBRO
Mod_ISBN
Mod_TÍTULO
REGLA
Ocultar
Poner_Escala

Diseño Orientado a Objetos
9
Acciones: Lenguaje de órdenes
• Acciones de grupo (insertar, ordenar, eliminar...)
• Seleccionar, Crear/Eliminar, Mover/Copiar, Modificar
Modos: estado que habilita un conjunto de tareas de
interacción al usuario
• Acción-Objeto
• Objeto-Acción
(puede ser como ventana modal)
Borrar
Mover
Rotar
El lenguaje modal debe suministrar información de estado

Ejemplo: Things
10
Objetos: Registro, Papelera, Buzón, proyectos, tareas
Objetos control: Visualización, ventana
Acciones: Editar, Guardar, (ver)hoy, Nueva (new)..

Diseño de Metáforas
11
Propósito:
• Descripción del modelo conceptual
• Establecer similitud entre dos elementos distintos
(uno de ellos comprensible por el usuario)
Partes del modelo conceptual
MODELO DEL SISTEMA
MODELO DE TAREAS
METÁFORAS

12
Diseño
• Identificación tareas usuario
• Generación de la metáfora
• Evaluación de la metáfora
• expresividad
• representatividad
• adaptabilidad a usuarios
• extensibilidad

13
Procesador Textos
Selección de metáforas para tipo de aplicaciones
Máquina escribir ¿?
Sistema Operativo Escritorio
Bases de Datos Tablas de Datos
Web (HTML) Navegación
Maquetación/Imprenta Corta y pegar objetos
Aplicación Metáfora
Blog Bitácora

Diseño de Metáforas: ejemplos
14
Escritorio:
Papelera
Ventana (contenedor)
Carpetas (almacén)
Discos
(dispositivos)
Apariencia visual de las metáforas

Diseño de Metáforas: ejemplos
15
Botones y Acciones:

Diseño de Metáforas: ejemplos acciones
16
Concepto
(acción):
Metáfora
(objeto real que lo realiza)
Cortar Recortar
Borrar
Borrar
Nuevo
Pág en blanco

17
Concepto
(acción):
Metáfora
Adelante/
Atrás
Rebobinar/Adelantar
Compartir Dar/ofrecer

18
Concepto
(acción):
Metáfora
Ampliar
Reducir
Lupa + -
Buscar Lupa/ Prismáticos

Diseño de Metáforas: ejemplos objetos
19
Concepto
(objeto):
Metáfora
(objeto)
Elementos
borrados
Papelera
(contenedor)
Dispositivo
almacenamiento
Buscar
comportamiento
similar
Disquete

Metáforas y affordances
20
Diálogo con pestañas:
- Intuitivo (y fácil de usar)
Version 1 Version 2
Referencia:Joel Spolsky.Affordances and Metaphors. http://www.joelonsoftware.com/uibook/chapters/fog0000000060.html

21
- Con sobrecarga de opciones pierde su eficacia
Referencia: http://interfacehallofshame.eu/www.iarchitect.com/tabs.htm

22
- Ambito de las acciones (confusion)
Referencia: http://interfacehallofshame.eu/www.iarchitect.com/tabs.htm

23
Vista en álbum (cover flow):
- Ver imagen del álbum que contiene “música”
Version 2

Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 24
!
!
Diseño para dispositivos: layout

Mobile Device Screen Sizes Resource Guide
Diseño para dispositivos: layout

Importancia:
- Percepción del usuario
- Gestión de recursos
- Representación de objetos
Layout
26
simbología, codificación
tamaño de pantalla, uso del ratón
impresión general del sistema
Objetivo:
- Organizar la información de E/S y su apariencia
[Tidwell06]

Composición:
• Diseño del formato de pantalla
• Representación de la información
• Realimentación
• Comunicación (mensajes)
Layout
27
! " I

Características
- jerarquía visual (Densidad, tamaño, color, posición,
regularidad)
- Flujo visual (continuidad de la narración)
Layout - diseño de páginas
28
[Tidwell06]

Layout. Principios de claridad visual
29
Aspectos de diseño:
• Claridad Visual (agrupación y alineación)
# Enfatizar la organización lógica de la información
(Reglas de Gestalt)
• Codigos visuales
# Distinción visual entre elementos de distinta naturaleza
• Consistencia visual
# Organización de los elementos de distinta naturaleza
• Formato de pantalla
# Gestión y organización del espacio disponible
Similitud
Proximidad
Clausura
Continuidad

Principios de Gestalt
30
http://webdesign.tutsplus.com/es/articles/the-gestalt-principle-design-theory-for-web-designers--webdesign-1756

Layout: claridad visual
31
Principios de Gestalt:
- Análisis de cómo organiza el observador los estímulos visuales
➫ Clausura
➫ Continuidad
➫ Similitud
# Objetos similares se perciben como un único estímulo
# Percepción del área/forma (cierre) que engloba a los objetos
# Discriminación de objetos diferentes según continuidad natural
➫ Proximidad
# Objetos próximos se perciben como un único estímulo

Layout.: claridad visual
32
[Tidwell06, Capt4]

Layout: claridad visual
33
BOTONES: Agrupación Visual y similitud

Layout: Formato y Consistencia visual
34
➫ Simetría
Conocido desde la antigüedad como una propiedad de los objetos en relación al
Universo
➫ Balanceado
➫ Regularidad
y acentuación
➫ Agrupamiento y
alineamiento

35
➫ Simetría➫ Balanceado
➫ Regularidad
y acentuación
➫ Agrupamiento y
alineamiento

36
Ubicación desestructurada
[Galitz02]

Ubicación estructurada (alineación)
[Galitz02]

[Galitz02]

Uso de controladores geométricos (layout manager)
Métrica Diseño :
- Densidad general/local
- Agrupaciones
- Volumen información
[Galitz02]

Proporción: Relación entre elementos
1:1 1:2
a
b
= =
b
a+b
1.618...
La sección Áurea

(-) Alineación
(-) Claridad visual: agrupar para reducir complejidad
(-) Enfatizar etiquetas de campos de edición
Ejemplos:

(+) Formato 1:1
(+) Agrupación
(+) Simetría
Ejemplos:

(+) Agrupación
(+) Balanceado
(+) Continuidad
Ejemplos:

2
Ejemplos: Tamaños de despliegue
(-) Tamaño submenú
frente a tamaño de
pantalla (Windows
XP)

Presentación: códigos visuales
45
Diseño de la Información:
Preparación de la información para mostrarla de
forma comprensible, y que pueda ser utilizada por
los humanos de forma eficiente y efectiva,
utilizando los medios más naturales para su
adquisición.
Técnicas:
- Comunicación visual
- Representación espacial de conceptos
- Simbología y codificación

46
El lenguaje icónico
Representación gráfica de un concepto
Importancia:
- Rápido Reconocimiento
- Internacionalización
- Espacio
$ % & ' ( ) *

47
El lenguaje icónico: Propiedades
- Reconocimiento
- Recuerdo
- Discriminación
Elementos del lenguaje:
- Acciones
- Objetos

48
Reconocimiento Discriminación

Presentación: diseño de Iconos
49
Diseño iconos. Principios
1. Usar la metáfora apropiada
2. Considerar compatibilidad internacional
3. Representación abstracta simbólica
4. Consistencia visual en familia de iconos
Referencia: http://www.nerv.es/blog/10-errores-comunes-en-el-diseno-de-iconos/

50
1. Usar la metáfora apropiada

51
2. Considerar compatibilidad internacional
(y contexto cultural)
a b c d

52
Evitar texto en iconos
Simplicidad en detalles con significado
Mac OSX
XP
OS/2
Lisa KDE

53
b)
a)
c)
d)

54
4. Consistencia visual en familia de iconos
Usar un foco de luz consistente
Optimizar la resolución
Color
2D /3D

55

Presentación: el color
56
El Color
Tono
Brillo
saturación

57
Objetivos
Ameno (satisfacción del
usuario)
Refuerza la
organización lógica
_______________
Centra la
atención
____________

58
El color. Principios
1 - Usar el color como técnica de codificación

59
2 - Uso del color conservadoramente
Referencia: http://interfacehallofshame.eu/www.iarchitect.com/color.htm

60
3 - Prestar atención a la combinación de colores
Referencia: http://interfacehallofshame.eu/www.iarchitect.com/color.htm

61
Tema 4. Estrategias de Diseño
4 - Códigos de color modificables por el usuario

Diseño mediante Estilos
62
Estilos de interacción
- Diseño Menús
- Navegación
- Formularios
- Diseño Web
- Patrones de Interacción
The Essential Guide to
User Interface Design
Second Edition
An Introduction to GUI Design
Principles and Techniques
Wilbert O. Galitz
John Wiley & Sons, Inc.
NEW YORK • CHICHESTER • WEINHEIM • BRISBANE • SINGAPORE • TORONTO
Wiley Computer Publishing

Estilo Menú
63Referencia: Psycology of menu selection. http://www.lap.umd.edu/poms/
Menú con diferente apariencia

Estilo Menú
64
Organización:
Simple Secuencial Arbol Red
Criterio
- Número de opciones
- Organización semántica
- Información temporal

Estilo Menú
65
Componentes:

Estilo Menú
66
Estandarización:
- Nombre de las opciones
- Ubicación relativa
Favorece el aprendizaje y la retención

Estilo Menú
67
Interacción guiada por acciones
Interacción guiada por objetos
Archivo Mantenimiento Movimientos Informes Ayuda
Películas
Socios
Proveedores
Auxiliares
Alquilar
Devolver
Reservar
Pedidos
P. Alquiladas
Socios
Por demanda
Archivo Películas Socios Proveedores Auxiliares

Estilo Menú
68
Elementos
Botones (simples, radio, check) objetos
Menús (barra principal, pulldown y anidados)
Consideraciones
No sobrecargar los menús (7± 2)
Nombre significativo de los botones
Minimizar el espacio (uso de lenguaje icónico)
Aplicar agrupamiento:
Similitud
Por importancia
Alfabético
Más frecuentes
Favorece tiempo de respuesta, aprendizaje y retención en usuario

Estilo Menú
69
Técnicas: Desactivar
Evitar errores

Estilo Menú
70
Aplicar técnicas de agrupación y desactivar

Estilo Menú: ejemplos
71
Tema 4. Estrategias de Diseño
15 ítem /
5 bloques /
2 anidados
9 ítem
Sobrecarga de items: aplicar técnicas de agrupación y desactivar

Estilo Formularios
72
Uso
Introducción masiva de datos relativos a un concepto del dominio de la
aplicación (cliente, propiedad)
Método eficaz
Técnicas
Agrupación y alineación : legibilidad
Uso adecuado de controles
Disposición de Acciones

Estilo Manipulación Directa
73
Principios:
1 Virtualidad
Representación de la realidad manipulable
Representación familiar de objetos y acciones
2 Transparencia
Centrarse en la actividad en vez de la herramienta
Iconos reconocibles
3 Facilidad de uso
Representación física y espacial más fácil de recordar
Realimentación visual (selección, acciones, etc.)
4 Centrado en el Ratón (mouse)
Mecanismo de selección/arrastre

Estilo Manipulación Directa
74
Manipulación tangible

Diseño Web
75
1 Objetivo
• Organizar y estructurar la información de forma adecuada
• Favorecer la navegación
• Problema de sobrecarga de información
2 Organización Web
• Dividir en contenido en fragmentos lógico
• Organizacion jerárquica (en base a importancia)
• Establecer relaciones entre fragmentos de contenido
• Balancear el diseño (p.e. dos niveles de profundidad)
3 Navegacion Web:
• Donde estoy
• De dónde vengo
• Donde puedo ir
• Como puedo llegar rápidamente

Diseño Interacción: Patrones
76
Objetivo:
- Reutilización de elementos de interacción frecuente
Técnicas:
- Descripción de alto nivel de las tareas
Recursos
- User Interface design Pattern library http://ui-patterns.com/
- http://designingwebinterfaces.com
- Pattern library for Interaction design www.welie.com

Documentación
77
Documentación
Usuario
Comprar
Aprender
Usar
Medio
Papel On-line
Características Versión demo
(tour guiado)
Cursos Tutorial
Manual de Usuario Ayuda en línea
• Hipertexto
• Multimedia
• Sensible al
contexto
• Consulta (buscador)
• Manual
• Plantillas
• Folletos
• Libro
• Guía rápida consulta
Herramientas:

Referencias
[Azuma01] Azuma, R., Baillot, Y., Behringer, R., Feiner, S., Julier, S. & MacIntyre, B. Recent advances in
augmented reality. IEEE Computer Graphics and Applications 2001, Vol. 21, No. 6, pp. 34–47
Online: http://www.cc.gatech.edu/~blair/papers/ARsurveyCGA.pdf
[Galitz02] Galitz, W.: The Essential Guide to User Interface Design, Wiley 2002
[Levin14] M. Levin: Designing Multi-Device Experiences, O’Reilly Media 2014
[LOWD13] T. Lowdermilk, User-Centered Design. O'Reilly Media, Inc. 2013 (online UGR: http://sl.ugr.es/
06NR)
[Lores01] Metáforas, estilos y paradigmas. En J. Lorés (ed.) Interacción Persona-Ordenador: libro digital.
ISBN: 84-607-2255-4, AIPO-2001 http://www.aipo.es/libro/pdf/03Metafo.pdf
[Pyle13] B. Pyle, “Mobile Device Screen Sizes Resource Guide,” Jacobs & Clevenger, May 2013,
http://bit.ly/IT06W5.
[Rekimoto95] Rekimoto, The World through the Computer: Computer Augmented Interaction with Real
World Environments. 1995 http://www.sonycsl.co.jp/person/rekimoto/uist95/uist95.html
[Tidwel06] Tidwell, J.: Designing Interfaces: Patterns for Effective Interaction Design. O'Reilly, 2006
[Weinch11] Susan M. Weinschenk. 2011. http://uxmag.com/articles/the-secret-to-designing-an-intuitive-
user-experience
Patrones de interacción. http://ui-patterns.com/

Tema 4 estrategias de diseño

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Tema 4 estrategias de diseño

Ähnlich wie Tema 4 estrategias de diseño (20)

Mehr von Miguel Gea

Mehr von Miguel Gea (19)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Tema 4 estrategias de diseño