Tema 4 estrategias de diseño

Diseño de Interfaces de Usuario

Miguel Gea ([email protected]) Dpt. Lenguajes y Sistemas Informáticoss Grado en Ingeniería Informática Universidad de Granada http://utopolis.ugr.es/diu

edición 2013

http://www.slideshare.net/mgea/tema-4-estrategias-de-diseo-2013

Introducción al DCU

“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 1988. http://www.google.com/corporate/tenthings.html

Larry Page, Sergey Brin

Google

Tema 4. Estrategias de Diseño


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

Paradigmas de interacción Tema 4. Estrategias de Diseño

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

Referencias: [Lores01]

realidad virtual

realidad aumentada

comp. ubicua

R: Realidad, C: Computador !" Persona - Computador !" Persona - Mundo real

!" Mundo real - Computador

Paradigmas de interacción Tema 4. Estrategias de Diseño

Referencias: [Lores01]

realidad!virtual!

realidad!aumentada!

Interacción: Modelo conceptual Tema 4. Estrategias de Diseño

• 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

Referencias: Susan M. Weinschenk. 2011. http://uxmag.com/articles/the-secret-to-designing-an-intuitive-user-experience

Modelo Mental (Modelo de Usuario) • AprendizajePredecir

Modelo Conceptual • AsimilableConsistenteSimple

Diseño Orientado a Objetos Tema 4. Estrategias de Diseño

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 Tema 4. Estrategias de Diseño

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

Borrar Mover Rotar

El lenguaje modal debe suministrar información de estado

Diseño de Metáforas Tema 4. Estrategias de Diseño

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


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


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 Corta y pegar objetos

Aplicación Metáfora

Diseño de Metáforas: ejemplos Tema 4. Estrategias de Diseño

Escritorio:

Papelera

Ventana (contenedor) Carpetas (almacén)

Discos (dispositivos)

Apariencia visual de las metáforas


Botones y Acciones:


Botones y Acciones:

Concepto (acción):

Metáfora (objeto real que lo realiza)

Cortar Recortar

Borrar Borrar

Nuevo Pág en blanco


Botones y Acciones:

Concepto (acción):


Adelante/ Atrás

Rebobinar/Adelantar

Compartir Dar/ofrecer


Botones y Acciones:

Concepto (acción):


Ampliar Reducir

Lupa + -

Buscar Lupa/ Prismáticos


Concepto (objeto):

Metáfora (objeto)

Elementos borrados

Papelera (contenedor)

Dispositivo almacenamiento

Buscar comportamiento

similar

Disquete

Metáforas y affordances Tema 4. Estrategias de Diseño

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"


Diálogo con pestañas: - Con sobrecarga de opciones pierde su eficacia

Referencia: http://interfacehallofshame.eu/www.iarchitect.com/tabs.htm"


Diálogo con pestañas: - Ambito de las acciones (confusion)

Referencia: http://interfacehallofshame.eu/www.iarchitect.com/tabs.htm"


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

Version 1! Version 2!

Presentación Tema 4. Estrategias de Diseño

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

Importancia: - Percepción del usuario

- Gestión de recursos

- Representación de objetos

Presentación Tema 4. Estrategias de Diseño

Composición: "   Diseño del formato de pantalla!

"   Representación de la información!

"   Realimentación !

"   Comunicación (mensajes)!! " I

Presentación: claridad visual Tema 4. Estrategias de Diseño

Aspectos de diseño:

Claridad Visual # Enfatizar la organización lógica de la información

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


Sin Agrupación Visual

ROTAR EN X ROTAR EN Y ROTAR EN Z MOVER EN X MOVER EN Y MOVER EN Z

ROTAR EN X ROTAR EN Y ROTAR EN Z MOVER EN X MOVER EN Y MOVER EN Z

Proximidad

ROTAR X Y Z

MOVER X Y Z

Proximidad y Similitud

Similitud - Tamaño - Tipo de letra - Indexación - Estilo

TEMAS APARTADOS

•  Puntos Notas

Continuidad


BOTONES: Agrupación Visual y cierta similitud


BOTONES: Agrupación Visual y

similitud

Presentación: formato pantalla Tema 4. Estrategias de Diseño

➫  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


➫  Simetría ➫  Balanceado

➫  Regularidad y acentuación

➫  Agrupamiento y alineamiento


Ubicación desestructurada


Ubicación estructurada (alineación)


Referencia: W. Galitz, The Essential Guide to User Interface Design, Wiley 2002"


Referencia: W. Galitz, The Essential Guide to User Interface Design, Wiley 2002"

Uso de controladores geométricos (layout manager)

Métrica Diseño : - Densidad general/local - Agrupaciones - Volumen información


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 Tema 4. Estrategias de Diseño

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


El lenguaje icónico Representación gráfica de un concepto

Importancia:

Rápido Reconocimiento

Internacionalización

Espacio

$ % & ' ( ) *+


El lenguaje icónico: Propiedades

- Reconocimiento- Recuerdo- Discriminación

Elementos:

- Acciones - Objetos


Reconocimiento Discriminación

Presentación: diseño de Iconos Tema 4. Estrategias de Diseño

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/"



1. Usar la metáfora apropiada



2. Considerar compatibilidad internacional (y contexto cultural)

a b c d



3. Representación abstracta simbólica Evitar texto en iconosSimplicidad en detalles con significado

Mac OSX XP

OS/2 Lisa KDE



3. Representación abstracta simbólica

b)

a)

c) d)



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

Presentación: el color Tema 4. Estrategias de Diseño

El Color

Tono

Brillo

saturación


Ameno (satisfacción del usuario)

Refuerza la organización lógica

_______________

Centra la atención

____________


El color. Principios

1 - Usar el color como técnica de codificación



2 - Uso del color conservadoramente

Referencia: http://interfacehallofshame.eu/www.iarchitect.com/color.htm



3 - Prestar atención a la combinación de colores

Referencia: http://interfacehallofshame.eu/www.iarchitect.com/color.htm



4 - Códigos de color modificables por el usuario

Diseño mediante Estilos Tema 4. Estrategias de Diseño

Estilos de interacción

- Diseño Menús - Navegación - Formularios - Diseño Web - Patrones de Interacción

Estilo Menú Tema 4. Estrategias de Diseño

Referencia: Psycology of menu selection. http://www.lap.umd.edu/poms/"

Menú con diferente apariencia


Organización:

Simple Secuencial Arbol Red

Criterio - Número de opciones - Organización semántica - Información temporal


Componentes:


Estandarización:

- Nombre de las opciones - Ubicación relativa

Favorece el aprendizaje y la retención


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


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


Técnicas: Desactivar

Evitar errores

Estilo Menú: ejemplos Tema 4. Estrategias de Diseño

Aplicar técnicas de agrupación y desactivar

Estilo Menú: ejemplos 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 Tema 4. Estrategias de Diseño

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 Tema 4. Estrategias de Diseño

Fundamentos:

1 Virtualidad Representación de la realidad manipulable

2 Transparencia Centrarse en la actividad en vez de la herramienta

3 Facilidad de uso Representación física y espacial más fácil de recordar

4 Centrado en el Ratón (mouse) Mecanismo de selección/arrastre


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


Manipulación tangible

Diseño Web Tema 4. Estrategias de Diseño

Objetivo: •  Organizar y estructurar la información de forma adecuada •  Favorecer la navegación •  Problema de sobrecarga de información

Navegacion Web: •  Donde estoy •  De dónde vengo •  Donde puedo ir •  Como puedo llegar rápidamente

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)

Diseño Interacción: Patrones

Objetivo:

Técnicas:

Recursos: User Interface design Pattern library !

Pattern library for Interaction design!

- Reutilización de elementos de interacción frecuente!

- Descripción de alto nivel de las tareas !

http://ui-patterns.com/!

http://designingwebinterfaces.com!

http://www.welie.com/!

http://www.welie.com/patterns http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns

Documentación

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 ‣  W. Galitz, The Essential Guide to User Interface Design, Wiley 2002

‣  [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

‣  Interface hall of shame. http://interfacehallofshame.eu/

‣  Patrones de interacción. http://ui-patterns.com/


Tema 4 estrategias de diseño

Education

Transcript of Tema 4 estrategias de diseño