Diseño de Interfaces
Pamela Rodríguez Domínguez
[Link]@[Link]
@thepam
Temas
1Conceptos básicos y la relevancia del
diseño
2 Fundamentos e investigación
3Matrices de interacción
4 Lineamientos de diseño de
interfaces
5Diseño de la navegación
Temas
6Estrategias de contenido
7 Estudios de usabilidad
8Rediseño express
9 Sesión crítica
10 Notas finales
1
Conceptos básicos y la
relevancia del diseño
Introducción
• Diseño de interfaces
– Lo que consideramos estético
– Lo que queremos que el usuario vea
– Las tecnologías que conocemos
• Flash
• AJAX
Introducción
¿Nuestra opinión
• Diseño de interfaces personal?
– Lo que consideramos estético ¿O lo que
el usuario
– Lo que queremos que el usuario vea
quiere
ver?
– Las tecnologías que conocemos
¿Son
• Flash siempre lo
¿O las que se
que se necesitan de acuerdo
• AJAX requiere? a la interacción?
Aplicación
“
Es donde se cruzan las
necesidades del usuario
con las necesidades del
”
negocio y la tecnología
Errores comunes
• Diseñar con enfoque en la tecnología
– Desarrolladores
• Diseñar con enfoque en el negocio
– Empresarios
• Diseñar con enfoque en el diseño
– Diseñadores
¡Hay que terminar
con el egocentrismo!
Diseñar para el usuario
“
Se trata de darles
atención especial en las
etapas del proceso de
diseño a las
necesidades, los gustos
y las limitaciones de los
”
usuarios finales de
determinado producto
Diseñar para el usuario
“ El verdadero buen
diseño es invisible
”
Experiencia del usuario
“ Involucra saber cómo
se siente el usuario al
utilizar un producto
(aplicación o sitio
”
web)
Experiencia del usuario
“ No se trata de la
aplicación, si no de la
experiencia que esta
”
genera
Usabilidad
“ Medida en que le es posible al
usuario el utilizar un
determinado producto para
cumplir una meta específica de
manera efectiva, eficiente y
satisfactoria dentro de un
”
contexto previamente
establecido
Usabilidad
“ Atributo de calidad que
determina qué tan
sencillas son de utilizar las
”
interfaces de usuario
Una interfaz usable cumple con:
• Facilidad de aprendizaje - Uso intuitivo,
entendimiento del funcionamiento sin
necesidad de un manual.
• Eficiencia - El flujo de acciones debe ser
corto y veloz, entregando los resultados
esperados.
• Sin requisición de memoria - El usuario
no debe necesitar de su capacidad de
memorización.
Una interfaz usable cumple con:
• Índice de error – Recuperación en caso
de errores, generar los menos posibles,
y alternativas de corrección para el
usuario.
• Experiencia satisfactoria - El usuario
debe sentirse „victorioso‟ tras realizar
una tarea con la aplicación.
Accesibilidad
“ Capacidad de acceso a un
contenido independientemente
de la discapacidad del usuario
o de la tecnología que utilice
”
Estándares Web
“ Especificaciones técnicas que
se siguen al llevar a cabo un
desarrollo para cuidar
aspectos de accesibilidad,
”
interoperabilidad y
usabilidad
¿Porqué son importantes estos
conceptos?
Accesibilidad a todos los
usuarios
• Usuarios con discapacidades como
ceguera.
• Distintos sistemas operativos y
distintos navegadores
• Distintas resoluciones de pantalla
• Dispositivos móviles
Respuestas positivas
• Confianza en tu negocio o marca.
• Bajo índice de abandono o cancelación
de procesos de registro o de compras.
• Alto índice de búsquedas exitosas.
• Aumento en compras o registros.
• Mayor aprovechamiento del tiempo.
– Tanto en sitios como en aplicaciones
Análisis de un Caso Real
Problema de Twitter
• Los usuarios no comprendían la
utilidad de Twitter en su totalidad
• Alto índice de:
– Registros no completados
– Abandono de cuentas recién creadas.
Proceso Anterior de Registro
Proceso Anterior de Registro
Proceso Anterior de Registro
Deficiencias de las interfaces
• No le aportan nada al usuario
• Derivan en un „pueblo fantasma‟
• “¿Qué estás haciendo?”
Solución de Twitter
• Análisis de sus usuarios
– Verdadero uso o funcionalidad de Twitter
• Rediseño del proceso
• Rediseño de las interfaces
Proceso Nuevo de Registro
Proceso Nuevo de Registro
Proceso Nuevo de Registro
Proceso Nuevo de Registro
Resultados del Caso Twitter
• Previene los „pueblos fantasmas‟
• La nueva pregunta “¿Qué pasa?” va más
acorde al uso que las personas dan al
Twitter.
• Incremento de registros en un 29%
• Usuarios más involucrados
2 Fundamentos e
Investigación
Elementos de la experiencia del
usuario
Elementos de la experiencia del
usuario
Plano de Estrategia
• Objetivos del sistema
– Lo que el negocio busca obtener
• Necesidades del usuario
– Lo que el mercado meta espera obtener o
ver en el sitio o aplicación
• Tras segmentar el mercado, se lleva a cabo la
creación de PERSONAS
Plano de Estrategia
Plano de Alcance
• Especificaciones funcionales
– ¿Qué debe desarrollarse?
• Funcionalidades y otros aspectos técnicos
• Uso de CMS
• Requerimientos de contenido
– Texto
– Imágenes
– Audio y video
– Gráficas
Plano de Alcance
• Al definir especificaciones funcionales:
– Sé positivo
1. La aplicación no va a permitir que el usuario
compre productos complementarios sin antes
haber comprado el kit introductorio.
2. La aplicación va a redirigir al usuario a la página
de compra del kit introductorio si el usuario trata
de hacer la compra previa de artículos
complementarios.
Plano de Alcance
• Al definir especificaciones funcionales:
– Sé específico
1. El sitio será accesible para personas
discapacitadas.
2. El sitio va a cumplir con los estándares
establecidos en la Sección 508 del Acta de
Rehabilitación.
Plano de Alcance
• Al definir especificaciones funcionales:
– Evita lenguaje subjetivo
1. El sitio va a tener un estilo actual y atractivo.
2. El sitio se va a alinear al manual de identidad
actualizado de la empresa, con los nuevos colores
y lineamientos establecidos para el nuevo
mercado.
Plano de Estructura
• Arquitectura de Información
– Define qué contenido (en páginas o
funcionalidades específicas) va a tener el
sitio web, y cómo se va a llegar a él.
¿Es esto lo que Si
estoy buscando? Listo
No
Busca entre los enlaces
disponibles
Clic en el primer Clic en el enlace
enlace que que mejor
represente lo Muchos enlaces Pocos enlaces represente lo
que busco que busco
Arquitectura de Información
Arquitectura de Información
INICIO
Acerca de Prendas Carrito de Garantía Contacto
Compras de
Entrega
Equipo Cultura Trabajos Dama Caballero Niños
Dirección de
envío
Información
de pago
Administración Soporte Servicio al
Cliente
Arquitectura de Información
Equipo
Acerca de Cultura Administración
Trabajos Soporte
Servicio al cliente
Dama
Prendas Caballero
Niños
INICIO Carrito de Dirección Información
compras de envío de pago
Garantía de
entrega
Contacto
Arquitectura de Información
Arquitectura de Información
Arquitectura de Información
Arquitectura de Información
Arquitectura de Información
Arquitectura de Información
Arquitectura de Información
Plano de Estructura
• Diseño de Interacción
– Define la manera en la que se llevarán a
cabo las funcionalidades dentro del sitio
web (involucrando la respuesta del
usuario)
Mental Notes
1. Define las metas específicas de tu
proyecto.
2. Traduce esas metas de
negocios a metas de
comportamiento del
usuario.
Mental Notes
3. Explora los conceptos (mental notes)
¿Cómo usar [ ] para lograr
[meta]?
Mental Notes
Escasez
Inferimos que algo tiene
un mayor valor cuando
tiene una disponibilidad
limitada o es promovido
como algo escaso.
Mental Notes
Completar una
colección
Entre más nos
acerquemos a completar
una colección de algún
elemento, más sentimos el
deseo de lograrlo.
Mental Notes
Pequeños
entretenimientos
Recordamos y respondemos
favorablemente ante los
pequeños obsequios
inesperados.
Mental Notes
Efecto
Humorístico
Los elementos humorísticos
son más fácilmente
recordados y disfrutados por
el usuario.
Mental Notes
Prueba Social
Tendemos a seguir
patrones de individuos
similares en situaciones
nuevas o poco
familiares
Mental Notes
Utilizando los conceptos
• Caso de aplicación
– ¿Cómo mejorarías un proceso en línea
que solicita a los alumnos de la
universidad el llenar un formulario de
manera anual calificando a cada uno de
sus profesores?
• El objetivo final es hacer que el mayor número
posible de alumnos complete las encuestas.
Efecto Humorístico
Completar Colección
Plano de Esqueleto
• Diseño de la Información
– Se llevan a cabo consideraciones como:
• Colores
• Imágenes
• Tipografía
• Logotipo y sus presentaciones
• Video, audio y demás representaciones
multimedia
Plano de Esqueleto
• Diseño de la navegación
– Se deciden los esquemas de navegación y
organización de información a utilizarse y
el lugar en el que se emplearán
• Navegación global
• Navegación local
• Navegación contextual
• Navegación por cortesía
• Navegación suplementaria
Plano de Esqueleto
• Diseño de la navegación
Navegación global
Navegación Local
Navegación
Contextual
Plano de Esqueleto
• Diseño de la navegación
¿Dónde estoy?
¿Qué hay por aquí cerca?
¿Qué hay
relacionado a lo
que está aquí?
Plano de Esqueleto
• Diseño de la navegación
¿A dónde puedo ir?
¿A dónde puedo ir?
¿A dónde
puedo ir?
Plano de Esqueleto
• Diseño de la navegación
Mapa del sitio Índice Guía
Categoría1 A Paso 1
Sub1, Sub2, Sub3
Categoría2 B Paso 2
Sub1, Sub2, Sub3
Categoría3 C Paso 3
Sub1, Sub2, Sub3
Plano de Esqueleto
• Diseño de interfaces
– Prototipos o wireframes de la visión de lo
que será la interfaz final
• Variaciones de calidad
• A mano o con herramientas de prototipeo
especializadas
Wireframes
Wireframes
• Herramientas gratuitas: Balsamiq
Wireframes
• Herramientas gratuitas: Mockflow
Wireframes
• Herramientas gratuitas: Pencil Project
Plano de Superficie
• Diseño Visual
– Presentación de propuesta final de la
apariencia del sitio o la aplicación
– Conjunción de todo lo documentado a
través de las capas inferiores
3 Matrices de Interacción
Momento Interesante
“
”
Eventos
•
•
•
•
•
•
•
•
•
Eventos
•
•
•
•
•
•
Actores
•
•
•
•
•
•
Momentos Interesantes
Momentos Interesantes
Momentos Interesantes
Momentos Interesantes
Momentos Interesantes
Momentos Interesantes
Momentos Interesantes
Momentos Interesantes
•
•
•
•
•
Momentos Interesantes
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
Momentos Interesantes
•
•
4 Lineamientos de Diseño
de Interfaces
Principios de Diseño
•
•
•
•
•
Proximidad
Principio de Proximidad
“
”
•
•
•
Alineación
Principio de Alineación
“
”
Principio de Alineación
“
”
Repetición
Principio de Repetición
“
”
Contraste
Principio de Contraste
“
”
Equilibrio
Principio de Equilibrio
“
”
Otras Consideraciones
•
•
•
•
•
•
•
Tipografía
•
Tipografía Tipografía
Tipografía
Tipografía
•
–
–
–
•
–
–
–
•
–
–
–
Monoespaciada
Proporcional
Serif
Sans-Serif
Times
Arial
Georgia
Verdana
Trebuchet
63 57
Arial Narrow Copperplate Lucida Sans
Arial Rounded MT Gothic Light Lucida Sans
Bold Corbel Typewriter
Baskerville Old Face Curlz MT Lucida Sans Unicode
Bauhaus 93 Edwardian Script ITC Mistral
Bell MT Engravers MT Modern No. 20
Book Antiqua Footlight MT Light MS Reference Sans
Bookman Old Style Franklin Gothic Book Serif
Bradley Hand ITC Franklin Gothic Medium Onyx
Britannic Bold Garamond Palatino Linotype
Brush Script MT Gill Sans MT Papyrus
Calibri Gill Sans Ultra Perpetua
Calisto MT Bold Perpetua Titling
Cambria Gloucester MT Extra Condensed MT
Candara Goudy Old Style Playbill
Century Gothic Haettenschweiler Rockwell
Century Schoolbook Harrington Rockwell Extra
Colonna MT Imprint MT Shadow Bold
Consolas Lucida Bright STENCIL
Constantia Lucida Calligraphy Tahoma
Cooper Black Lucida Fax Tw Cent MT
Copperplate Lucida Wide Latin
Gothic Bold Handwritting
Eligiendo la tipografía y sus propiedades ideales
Eligiendo la tipografía y sus propiedades ideales
Eligiendo la tipografía y sus propiedades ideales
•
–
•
•
•
•
•
•
•
Color
•
•
Imágenes
Imágenes
“
”
Imágenes
“
”
¿Cómo reacciona el usuario antes
una foto?
•
•
•
Imágenes
Tiempo por imagen
18%
Reseñas, texto…
Imagen
82%
¿Cómo reacciona el usuario antes
una foto?
•
•
Formatos de Imagen
•
•
•
GIF – Graphics Interchange Format
• •
• •
•
GIF – 32 bits (imagen 1024 x 768)
GIF – 64 bits (imagen 1024 x 768)
GIF – 128 bits (imagen 1024 x 768)
GIF – 256 bits (imagen 1024 x 768)
GIF – 256 bits (imagen 1024 x 768)
GIF – 256 bits (imagen 1024 x 768)
Usos del GIF
•
JPG – Joint Photographic Experts Group
• •
• •
•
JPG – Low 0%
JPG – Medium 50%
JPG – High 100%
JPG – Low 0%
JPG – Medium 50%
JPG – High 100%
Usos del JPG
PNG – Portable Network Graphics
• •
•
•
•
•
PNG – 8 Bits (imagen 1024 x 768)
PNG – 8 Bits (imagen 1024 x 768)
PNG – 64 Bits (imagen 1024 x 768)
Usos del PNG
Transparencia PNG vs GIF
Resolución y Peso PNG vs JPG
Resumen
Permite Permite
Límite Tipo de Adecuado
Uso anima- transpa-
de color imágenes para web
ción rencia
Iconografía y
GIF gráficos con 256 LossLess
pocos colores
Fotografías e
imágenes con
16
JPG muchos colores Lossy
millones
y
detalle.
Iconografía y
PNG- gráficos con
256 LossLess
8 pocos
colores.
Fotografías e
imágenes con
PNG- 16
muchos colores Lossy
24 millones
y
detalle.
Iconografía
•
•
•
Iconografía
Iconografía
Iconografía
Iconografía
Iconografía
Iconografía
Iconografía
Animación
Animación
•
•
–
•
Splash screens
•
•
Formularios
Sobre los Formularios
“
”
Formularios
“
”
Tips para formularios
Tips para formularios
Tips para formularios
Tips para formularios
Tips para formularios
Tips para formularios
Tips para formularios
Tips para formularios
Manejo de Errores
• Usar validaciones en tiempo real para datos
que tienen altos rangos de error.
• Las respuestas “abiertas” deben validarse
hasta que la persona termine de escribir.
• Mantener persistentes los mensajes de error.
• Sugerir formatos de respuesta y no ocultar el
texto de entrada del usuario.
Formularios
“
”
Formularios
Formularios
Búsqueda
Resultados de búsqueda
• ¿Búsqueda avanzada?
• Cuál fue mi búsqueda
• Cuántos resultados
• Paginación
• Cuántos resultados mostrar
• Cómo mostrarlos
Redes Sociales
Diseñando Bajo el concepto social
Diseñando Bajo el concepto social
Diseñando Bajo el concepto social
Diseñando Bajo el concepto social
•
–
–
•
Diseñando Bajo el concepto social
•
–
•
–
E-Commerce
Ver Carrito
CARRITO DE
COMPRAS
Pagar
DIRECCIÓN DE
ENVÍO Dirección
incompleta
Continuar
INFORMACIÓN DE
PAGO Información
incompleta
Finalizar
CONFIRMACIÓN
Ver Carrito
CARRITO DE Manejo correcto de la información
COMPRAS (claridad y transparencia)
Pagar
DIRECCIÓN DE
ENVÍO Dirección
incompleta Recuperación
Continuar
de errores
efectiva,
INFORMACIÓN DE formularios
PAGO concretos
Información
incompleta
Finalizar
CONFIRMACIÓN PARTE VITAL DEL PROCESO
Página de confirmación
Call to Action
Tips para un Call-To-Action Efectivo
Tips para un Call-To-Action Efectivo
Tips para un Call-To-Action Efectivo
Tips para un Call-To-Action Efectivo
Tips para un Call-To-Action Efectivo
Tips para un Call-To-Action Efectivo
Tips para un Call-To-Action Efectivo
Tips para un Call-To-Action Efectivo
Tips para un Call-To-Action Efectivo
Tips para un Call-To-Action Efectivo
Accesibilidad
Tips de Accesibilidad
•
•
•
•
•
•
•
•
•
•
¿Cómo ven mi sitio web?
•
•
Dispositivos Móviles
Dispositivos móviles
Dispositivos móviles
Dispositivos móviles
Dispositivos móviles
Dispositivos móviles
Consejos de interacción
•
–
5 Diseño de la Navegación
Navegación
“
”
Principios de Innovación
•
•
•
Mapas de Aplicaciones
•
Casos de Aplicación
•
–
Estudio sobre la experiencia del usuario
en sitios de comercio electrónico B2C
Estudio sobre la experiencia del usuario
en sitios de comercio electrónico B2C
Con-
Resul- tacto Políti-
tados cas
Resu-
men Térmi-
nos UDEM
Estudio
Sears Página
Estudio Principal Web
Sanborns Estudio Usability
Estudio Coppel
Palacio Estudio
Estudio Políti- Térmi-
de Hierro Elektra Con-
Estudio Estudio Estudio
Liverpool cas nos
tacto
Office Office Famsa
Max Resu-
Depot
men
Informacion de
Estudio tecnicas y metodos
Sears Resulta-
Estudio dos Web
Sanborns Estudio Usability
Estudio Coppel
Palacio Estudio
Estudio
de Hierro Elektra
Estudio Estudio Estudio
Liverpool
Office Office Famsa
Max Depot
Estudio sobre la experiencia del usuario
en sitios de comercio electrónico B2C
Con-
Resul- tacto Políti-
Ligas a tados cas
los Térmi-
Diseño estudios Ligas a Encues-
de nos Encues-
interac- los tas
Encues-
ción estudios tasHeat-
tas
Arquitec-
Resumen maps
tura de Resultados Resulta-
informa- de dos de
ción Inspeccio- Eye-
nes Tracking
Diseño
de
infor-
mación Encues-
Diseño Ligas a
de Diseño Resulta- Encues-
navega- de los tas
Encues-
ción inter- dos de tas
faces estudios Pruebas Gaze-
tas
plots
Tarea8
Aplica-
Encues-
ción de
tas tareas
Encues-
Encues- Tarea 5
tas
Encues-
tas Tarea 2
tas
Gráficas Tarea 3
Estudio sobre la experiencia del usuario
en sitios de comercio electrónico B2C
Con-
Resul- tacto Políti-
tados cas
Térmi-
Diseño Ligas a
de nos
interac- los
ción estudios Página de Siguiente
estudio estudio
Arquitec-
tura de Resultados
individual
informa- de
ción Inspeccio-
nes
Diseño
de
infor- Resulta-
mación dos de
Diseño Eye-
de Diseño Resulta-
de Tracking
navega- dos de
ción inter-
faces Pruebas
Aplica-
Encues-
ción de
tas tareas
Casos de Aplicación
•
–
Siste- Infraes-
Proce- mas tructu-
sos ra Editar
Gente
Gente registros
Infraes- Tu Agregar
tructu- Compa-
DNA registro
ra Bienve- rativas
Siste- nido a
mas
Tus Admi-
¿Cómo DNA Regis- nistrar
Proce- usar?
tros regis-
sos tros
Tu Cambiar
DNA registro Cerrar Encuestas
predeter- Noticias
Noticias
sesión Dashboard
minado
Aliados
Noticias
Noticias
Acerca Casos de
de Menú de Noticias Noticias
Éxito
Noticias
Noticias Noticias
Cortesía Mensajes
Términos y Noticias
Noticias
Condiciones
de uso
Políticas Mapa
de Con- del
privacidad tacto Sitio
6 Estrategias de Contenido
¿Porqué es importante el
contenido?
•
–
–
–
La Conversación Web
•
–
Tips para Crear Contenido
•
•
•
7 Estudios de Usabilidad
Tipos de Estudios
•
•
•
•
•
•
[Link]
•
•
•
•
•
•
•
•
•
•
•
•
•
[Link]
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
8 Rediseño Express
9 Sesión de Crítica
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
10 Notas Finales
Notas Finales
“
”
Notas Finales
“
”
Notas Finales
“
”
Contacto
Referencias
•
•
•
•
•
Referencias
•
•
•
•
•
•
•
