taller ux: diseño visual - ixda mendoza

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

The UX Umbrella by Dan Willis

Fuente: What's the difference between a UX Designer and a UI Developer by Ben Melbourne

No se vayan

Este bloque fue presentado por

Flavia Ibañezflavia@noviggo.com | @flaviaza

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 - sveggiani@gmail.com

ANALIA BASUALDO - MARITE IMPELLIZZERI@anagraphics - analiabasualdo@gmail.com / mariteimpellizzeri83@gmail.com

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