taller ux: diseño visual - ixda mendoza
DESCRIPTION
We provide a talk about general aspects of UX and Visual Design as IxDA Mendoza local group. It presents a user experience throughout a gov application a well know for the audience we talked for. Then we used the metaphor of super heroes of UX with an old TV character called "chapulín colorado" Then some fundamental Viusal Design concept were presented by Analía Basualdo, Marite Impellizzeri and Sebastian Veggiani. In parallel we did a re design of our example alive while we were showing "the 10 super powers of an effective visual design" We concluded saying that everyone involved in the project is responsible for a good or a bad UX since every decision taken cause an impact in some way.TRANSCRIPT
SALVEMOS AL USUARIOUser Experience para diseñadores y desarrolladores
Anix adventures
En esta edición:
¡Me compré un Tutúuuuuu!!
cualquier semejanza con la realidad es pura coincidencia
© Adogslifephoto | Dreamstime.com - Yorkshire Terrier Dog Wearing Pink Tutu Photo
FIRST
1 HORA después...(de veras de veritas)
RIIIING!
... El horario de atención es
Lunes a Viernes de 9 a 18hs ...
Domingo, 20hs...
¡Calma Anix!
*&%#
%$#!!
*&%#%$#!!
*&%#%$#!!
De cómo EL MINISTERIO DE
SEGURIDADconsumió UNA HORA
de vida de Anix
?
Anix
Anix
08/09/2014
CUPO COMPLETO
Anix
09/09/2014
CUPO COMPLETO
Anix
10/09/2014
CUPO COMPLETO
Turno disponible:MALARGUE¨
Anix
#%*&*Vivo en capital!
Anix :: Refrescó el navegador:: ReInició la búsqueda
:: Probó todos los botones
y encontró turno en
ALVEAR?
?
Basu
Anix
28111101
01 01 1234
¿Puedo cambiar mi nombre?
Alvear Alvear
?
AlvearAlvear
¿Y el tercer paso?¿No saben todo esto ya?
?
¿Donar?
Alvear Alvear
RIIIING!
... El horario de atención es
Lunes a Viernes de 9 a 18hs ...
Domingo, 20hs...
¡Calma Anix!
*&%#
%$#!!
*&%#%$#!!
*&%#%$#!!
OH!
¿Y ahora QUIEN podrá ayudarme?
Y ahora ?!
UX
uxmeme.tumblr.com/
¿¿UX que??CALMA, CALMA,
QUE NO PANDA EL CUNICO
Diseño de experiencia de usuariosEs el proceso de aumentar la satisfacción y lealtad del cliente mediante la mejora de la usabilidad, facilidad de uso y el placer proporcionado en la interacción entre el
cliente y el producto.
Modelo Causa Efecto de la Experiencia del Usuario
USUARIO
Condiciones físicas, psicológicas, aprendizaje y experiencias, etc
MICRO ENTORNO
Condiciones del entorno inmediato a la situación de uso
MACRO ENTORNO
Cultura- tecnología disponibledemografía - política - economía
PRODUCTO
Marca
PROPUESTA DE VALOR
DEL NEGOCIO
Objetivos del negocio
EJECUCIÓN DEL PRODUCTO
Equipo, Procesos
UXpercepción positiva o
negativa
Facetas de UXux honeycomb de Peter Morville
UX es un proceso que previene, detecta y resuelve problemas
Claves1. Foco temprano y continuo en el usuario y sus tareas
Fuente: La Fábula del Diseñador Centrado en el Usuario
Claves2. Medición empírica del comportamiento del usuario
Fuente: La Fábula del Diseñador Centrado en el Usuario
Claves3. Diseño Iterativo
Fuente: La Fábula del Diseñador Centrado en el Usuario
Fuente: What's the difference between a UX Designer and a UI Developer by Ben Melbourne
No se pierdan el próximo bloqueen 15’
Taller UX: Diseño Visual
a cargo de
Analía BasualdoMarité Impellizzeri
y la colaboración de
Sebastián Veggiani
IxDA es una asociación creada para difundir la disciplina del Diseño de Interacción, que conforma (junto a usabilidad,
arquitectura de la información y accesibilidad, entre otras) el ecosistema del Diseño de Experiencias del Usuario.
Queremos mejorar la educación y divulgación de UX en español. Queremos llegar a un nuevo estándar profesional.
Y queremos construirlo colaborativamente.
0. Introducción
1. Prototipado rápido
2. Heurísticas
3. Evaluaciones de Usabilidad
4. Diseño Visual
5. Accesibilidad
6. Diseño de Interacción
7. Arquitectura de la Información
10 Superpoderespara un
diseño visual eficaz
No pensar en la solución sino en el USUARIO
Problema - Mensaje
1
¡Mis antenitas de vinil, están
detectando la presencia del enemigo!
Planteo del Problema
El sitio de turnos del Ministerio de Seguridad fue creado para facilitar el trámite a la comunidad.
El servicio no está resolviendo esa necesidad, lo que causa frustración y una opinión negativa
sobre el Ministerio. Cómo podemos mejorar el servicio para que las personas puedan reservar su turno con éxito?
2
No sos vos ¡Soy yo!
Comunicar Visualmente
Mensaje visual
1. Usuario (novia)
2. Mensaje - premisas (él quiere dejarla)
3. Estrategia (cómo decirlo)
Premisas
● Que el usuario comprenda el objetivo principal del sitio.
● Orden y jerarquía en la información.
● Legibilidad.
● Dar importancia al Ministerio de Seguridad para reforzar identidad y pertinencia.
● Que connote: seriedad, formalidad, simpleza, seguridad.
Ojos que no ven… que cien volando
Búsqueda de Antecedentes
3
4
La arquitectura invisible Grilla y Composición
Grilla constructiva
1. Retícula, modulación invisible
2. Disposición natural y segura
3. Jerarquía visual
4. Consistencia visual
BalanceGrillas
5
¡Que empiece la fiesta! llegaron los...
Elementos compositivos
Composición
1. Balance
2. Jerarquía
3. Patrón
4. Ritmo
5. Espacio
6. Proporción
7. Énfasis
8. Movimiento
9. Contraste
10. Unidad
Balance
Herencia
Patrón
Patrón
Ritmo
PatrónRitmo
Espacio
RitmoEspacio
Proporción
RitmoProporción
Enfasis
Movimiento
Movimiento
Contraste
Contraste
Unidad
Unidad
6
Cosa ‘e mandinga
Psicología y Color
La importancia del Color
1. Es una de las razones principales por la que se adquiere un producto.
2. Crean estados de ánimo.
3. Determinan las primeras impresiones de un usuario.
4. Tienen significado.
Agua
Paz
masculinidad
calma
serenidad
frío
seriedad
refrescante
amigable
seguridad
confianza
empresa productiva
Azul
estabilidad
7
No es solo lo que dice sino cómo lo dice
Tipografía
La palabra escrita
1. Medio para transmitir un mensaje
2. Configuración visual
3. Ojo! todo comunica
Display
Sans Serif Comic
RETRO
Handwriting
Script
Fantasy
Egipcia
Serif
Stencil
Bold
Itálica
Condensada
Normal
Light
8
Cuando dicen que vale más que mil palabras...
Imágenes e Iconos
Imagen icónica”Es representación de la apariencia
visual de un objeto real”
1. Representativo
2. Simbólico
3. Abstracto
9
Coherencia y Consistencia Patrones y guías de estilos
Guías de estilo
Guías de estilo
1. Diseño colaborativo.
2. Colección viviente de los productos que enfrenta el usuario.
3. Crean eficiencia.
4. Desarrollo más ágil.
10
No se trata sólo de una cara bonita Usabilidad y Diseño Visual
Usabilidad y diseño visual1. Los proyectos con buen diseño tienen clientes más satisfechos e incrementan la lealtad.
2. La estética comunica credibilidad. Tiene tres componentes: integridad, armonía y resplandor.
3. El buen diseño crea grandes experiencias.
4. Recordamos las malas y buenas experiencias, no las comunes. Los detalles importan.
¡Así es como quedó
cuando aplicamos
los superpoderes!
Seguir aprendiendolinks y libros de interés
1. http://hellohappy.org/beautiful-web-type/
2. http://www.lukew.com/ff/entry.asp?1915
3. https://hackdesign.org/lessons
4. http://tympanus.net/codrops/category/articles/
5. Participar de Ixda Mendoza!
Y aún hay más!
Este bloque fue presentado por
SEBASTIAN VEGGIANI@efedoce - [email protected]
ANALIA BASUALDO - MARITE IMPELLIZZERI@anagraphics - [email protected] / [email protected]
Moraleja
UX también es branding
Sin un diseño visual bien APLICADO la marca no será elegida, recordada o
reconocida
El diseño visual facilita una buena experiencia
Sin un diseño visual bien planteado el producto no resolverá una necesidad
Una buena experiencia depende de TODOS los
que intervienen
Fuente: What's the difference between a UX Designer and a UI Developer by Ben Melbourne
+ Márketing+ Gerencia+ Dueños+ etc
Y de que TODOS conozcan un poco del
mundo del otro
GRACIAS!
IxDA Mendoza: Diego, Matías, Analía, Franco, Marité, Flavia, Eugenio, Silvana, Sebastián
www.ixdamza.com.ar - www.facebook.com/ixdamza