Taller de Prototipos #DAIEU15 - Clase 01

PROTOTIPADO

DIPLOMADO ARQUITECTURA DE INFORMACIÓN Y EXPERIENCIA DE USUARIO 2015

WIREFRAMES Y MOCKUPS

CLASE 01

INTRODUCCIÓN

PRESENTACIÓNHola, soy Rodrigo Vera, y bienvenidos

al taller de prototipos

¿Diseñadores? ¿Periodistas? ¿Ingenieros?

¿Bibliotecarios?

¿UX?

USER EXPERIENCE

Es un conjunto de factores, cuyo resultado es la creación de un producto o servicio.

No depende sólo de factores de diseño, sino también de las emociones y sentimientos que

genera una marca en los usuarios.

USER EXPERIENCE

Para hacer UX hay que entender el producto, la situación, el contexto y los hábitos de uso de un

determinado grupo de personas.

USER EXPERIENCE

https://www.youtube.com/watch?v=m9R9z7P1eME

USER EXPERIENCE

https://www.youtube.com/watch?v=m9R9z7P1eME

https://vimeo.com/19131028I<3 UX DESIGN (PARTE I)

UX DESIGN

https://vimeo.com/19131028



https://vimeo.com/21691333I<3 UX DESIGN (PARTE II)

UX DESIGN


USER EXPERIENCE

USER EXPERIENCE

USER EXPERIENCE

USER EXPERIENCE

USER EXPERIENCE

U S E R E X P E R I E N C E

( U X )

E T H O S S E R V I C I O I N T E R FA Z

USER EXPERIENCE

ETHOS: La forma común de vida o de comportamiento que adopta un grupo de individuos que pertenecen a una misma sociedad

U S E R E X P E R I E N C E

U S A B I L I D A D

D I S E Ñ O

A C C E S I B I L I D A D

M A R K E T I N G

O P T I M I Z A C I Ó N E R G O N O M Í A

H C I

O P E R A C I Ó N

USER EXPERIENCE

Henry Dreyfuss, autor del libro Designing for people (1955) popularizó la concepción del diseño como proceso a partir de sus diseños de teléfonos de la serie 500 para Bell Telephones. Este

diseñador industrial, pionero del diseño centrado en el usuario, estudió cómo se construían los teléfonos, cómo se percibían y eran utilizados por las personas. Sus conclusiones fueron aplicadas a un nuevo diseño donde se corregían aspectos como la forma, el tamaño, las proporciones o el color

http://www.nosolousabilidad.com/manual/3.htm

DISEÑO CENTRADO EN EL USUARIO

http://www.nosolousabilidad.com/manual/3.htm

USER EXPERIENCE

USER EXPERIENCE

INTERACCIÓN HUMANO COMPUTADOR (HCI)


Es la disciplina que estudia el intercambio de información mediante software entre las personas

y las computadoras.

https://es.wikipedia.org/wiki/Comunicaci%C3%B3n

https://es.wikipedia.org/wiki/Interfaz_de_usuario

https://es.wikipedia.org/wiki/Usuario_(inform%C3%A1tica)

https://es.wikipedia.org/wiki/Computadora


Se encarga del diseño, evaluación e implementación de los aparatos tecnológicos interactivos con el objetivo

de que el intercambio sea más eficiente: minimizar errores, incrementar la satisfacción, disminuir la

frustración y, en definitiva, hacer más productivas las tareas que rodean a las personas y los computadores.

Lo primero y principal es la persona, el usuarioque utiliza el sistema.


El buen diseño ayuda a la gente a hacercosas que nos importan.








El mal diseño es frustrante.


El mal diseño es frustrante e incluso cuesta vidas.


El mal diseño es frustrante e incluso cuesta vidas.


…e incluso cuesta vidas.


A veces, las mejores interfaces se convierten en invisibles para nosotros, cuando pasamos de manipular la interfaz, a realizar tareas.




7 PRINCIPIOS DEL DISEÑO UNIVERSAL


1. Igualdad de usoEl diseño debe ser fácil de usar y adecuado para todas las personas

independientemente de sus capacidades y habilidades.

1. Igualdad de usoEl diseño debe ser fácil de usar y adecuado para todas las personas

independientemente de sus capacidades y habilidades.


2. FlexibilidadEl diseño debe poder adecuarse a un amplio rango de preferencias

y habilidades individuales.


2. FlexibilidadEl diseño debe poder adecuarse a un amplio rango de preferencias

y habilidades individuales.


3. Simple e intuitivoEl diseño debe ser fácil de entender independientemente de la experiencia, los

conocimientos, las habilidades o el nivel del usuario.


3. Simple e intuitivoEl diseño debe ser fácil de entender independientemente de la experiencia, los

conocimientos, las habilidades o el nivel del usuario.


4. Información fácil de percibirEl diseño comunica de manera eficaz la información necesaria para el usuario.


4. Información fácil de percibirEl diseño comunica de manera eficaz la información necesaria para el usuario.


5. Tolerante a erroresEl diseño debe minimizar las acciones accidentales o fortuitas que

puedan tener consecuencias fatales o no deseadas.


5. Tolerante a erroresEl diseño debe minimizar las acciones accidentales o fortuitas que

puedan tener consecuencias fatales o no deseadas.


6. Escaso esfuerzoEl diseño debe poder ser usado eficazmente y con el mínimo esfuerzo posible.


6. Escaso esfuerzoEl diseño debe poder ser usado eficazmente y con el mínimo esfuerzo posible.


7. Dimensiones apropiadasLos tamaños y espacios deben ser apropiados para el alcance, manipulación y uso

por parte del usuario, independientemente de su tamaño, posición, y movilidad.


7. Dimensiones apropiadasLos tamaños y espacios deben ser apropiados para el alcance, manipulación y uso

por parte del usuario, independientemente de su tamaño, posición, y movilidad.


PROTOTIPOS

PROTOTIPO

Un prototipo es un ejemplar o primer molde en que se fabrica una figura u otra cosa.

PROTOTIPO

Un prototipo también se puede referir a cualquier tipo de máquina en pruebas, o un objeto diseñado

para una demostración de cualquier tipo.

PROTOTIPO

Un prototipo o prototipado puede ser un modelo del ciclo de vida del software, tal como el desarrollo en

espiral o el desarrollo en cascada.

TIPOS DE PROTOTIPOS

DIGITALES

WIREFRAME

WIREFRAME

WIREFLOW

WIREFRAME MOCKUP

https://www.youtube.com/watch?v=zNoBmjg-NnQ

https://www.youtube.com/watch?v=zNoBmjg-NnQ

QUÉ ES UN WIREFRAME

UN POCO DE HISTORIA

Bocetos Da Vinci

UN POCO DE HISTORIA…

Planos Da Vinci


Blueprint



Wireframes 3D

LOS WIREFRAMES SON

LOS WIREFRAMES SON…

En interfaces digitales, un wireframe es una representación esquemática de una pantalla, sin

elementos gráficos, que muestran contenido jerarquizado y comportamiento de las páginas.




RELACIÓN CON AI

El Wireframe es el paso intermedio entre Arquitectura de Información y Diseño, pasa de la “mentalidad estructural” de un

mapa de contenidos, dónde decidimos y ordenamos los contenidos de nuestro sitio web, a la emocionalidad del Diseño de Interfaz.

ESTRATEGIA AI UI DESARROLLLOWIREFRAMES

COMUNICACIÓN

Herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes.

ELEMENTOS ESENCIALES


Un Wireframe debería, al menos, contar con elementos de:

•navegación

•información

•interacción

•apoyo.

Elementos de navegación: menúes, breadcrumbs e hipervínculos.

Estas en : Inicio / Lorem Ipsum / Lorem Ipsum / detalle

TabTabTabTabTab

Nulla facilisi. Nullam quis turpis sem, ut egestas lectus.


Elementos de información: contenidos de texto, imágenes, audio y video.

Sed vestibulum, ipsum lacinia vulputate vulputate, arcu nisi iaculis risus, sed auctor quam augue id odio.

Cras hendrerit blandit nulla sed volutpat. Vestibulum sollicitudin quam sed lectus fringilla blandit.

Quisque ut enim in erat tincidunt convallis.

16:9

This is the Title of the VideoOne morning, when Gregor Samsa woke from troubled dreams, he found himself transformed... More...

0:00 / 4:59

URL

Embed


Elementos de interacción: botones, formularios, tooltips, sliders, etc.

Done or Cancel

Error message goes here. Error message goes here.Message goes here.

Message goes here.Message goes here.Message goes here.

Comentar


Elementos de apoyo: Explicaciones e instrucciones.


FUNDAMENTACIÓN Y ENTREGABLES

Tiene como objetivo explicar, de forma detallada, cada decisión de diseño dentro de cada wireframe.

Carrier 12:00 PM

f ConnectPara participar debes iniciar Sesión

Comunidad LG Mobile

ComparteComunidad LG MobileCopyright 2010 LG ELECTRONICS.TODOS LOS DERECHOS RESERVADOS

Foro ComunidadLorem Ipsum dolor sit amet, consectetur.

DescargasLorem Ipsum dolor sit amet, consectetur.

EquiposLorem Ipsum dolor sit amet, consectetur.

SmartphonesLorem Ipsum dolor sit amet, consectetur.

Código QRLorem Ipsum dolor sit amet, consectetur.

WIREFRAME = DISEÑO/

WIREFRAMES = DISEÑO/

Un Wireframe no es el aspecto final del sitio, sino una mera representación

gráfica de su contenido.




UTILIDAD

Ofrece una perspectiva basada principalmente en la arquitectura del contenido Ayudan a que el proyecto no se retrase por falta de definición Son imprescindibles para definir los comportamientos en la interacción

CARACTERÍSTICAS DE LOS WIREFRAMES

CARACTERÍSTICAS

Se utilizan en la creación de todas las interfaces digitales (web, móviles, ATM, etc.).

CARACTERÍSTICAS

Se diseñan sólo las páginas tipo (plantillas).

Home

Verduras Jugos y Bebidas Comida no Perecible Fiambres y Quesos Artículos de Aseo

Lechugas

Tomates

Cebollas

Jugos Watts

Bebidas

Coca Cola

Sprite

Fanta

Arroz

Fideos

Conservas

Jamón

Quesos

Chanco

Cabra

Gauda

Papel Higiénico

Útiles de Aseo

Útiles de Cocina

Redes Sociales Ubicación Doña Juana ContactoLogin/Registro

Sociabilizar en Redes Imprimir Comentar Agregar a

FavoritosDescarga

PDF

Funcionalidades Generales

CARACTERÍSTICAS

Pueden ser dibujados a mano o creados con alguna aplicación computacional.

CARACTERÍSTICAS

Son simples y no tienen distracciones visuales tales como color o imágenes.

CARACTERÍSTICAS

Siempre van acompañados de una explicación acerca de las zonas e interacciones.

VENTAJAS DEL PROTOTIPADO

VENTAJAS

Las correcciones son objetivas, basadas en contenidos y funcionalidad, no en diseño.

Se reducen los tiempos de trabajo y gastos involucrados en el proyecto.

VENTAJAS

Permite la comunicación fluida entre el equipo de trabajo y el cliente.

VENTAJAS

Como es una estructura simple y enfocada en los contenidos, permite al diseñador tener plena libertad al momento de diseñar la interfaz.

VENTAJAS

Permiten visualizar interacciones y flujos.

VENTAJAS

Permiten identificar problemas que puedan presentarse más adelante.

VENTAJAS

MALAS PRÁCTICAS

MALAS PRÁCTICAS

Uso de color e imágenes.

Mezcla con interfaz real.

MALAS PRÁCTICAS

Wireframes muy complejos, mezclando formas y colores.

MALAS PRÁCTICAS

Wireframes muy simples.

MALAS PRÁCTICAS

HERRAMIENTAS PARA DISEÑAR WIREFRAMES

Lápiz y papel.


1024 960 800 1024960800


Lápiz y papel.


Lápiz y papel.

Prototipos en papel: Es ideal para hacer los primeros esbozos del funcionamiento de una futura aplicación constituyéndose en un elemento de testado y debate rápido (económico) que evitará futuros y costosos errores en fases posteriores de desarrollo.



https://www.youtube.com/watch?v=GrV2SZuRPv0

https://www.youtube.com/watch?v=GrV2SZuRPv0



Herramientas digitales: Es la manera para crear wireframes detallados y de alta calidad.

OmnigraffleVisioAxureBalsamiqFireworksKeynote

Apliaciones escritorio

Apliaciones web

PrototyperHotglooiplotzBalsamiqCacooInvisionMarvelapp

http://www.omnigroup.com/products/omnigraffle/

http://office.microsoft.com/en-us/visio/

http://www.axure.com/

http://balsamiq.com/

http://www.adobe.com/products/fireworks/

http://www.apple.com/iwork/keynote/

http://www.hotgloo.com/

http://iplotz.com/

http://balsamiq.com/

http://cacoo.com/

10 CONSEJOS ESENCIALES

10 CONSEJOS ESENCIALES

• Simple sobre todas las cosas • Usa la mayor cantidad de contenido real posible • Siempre trabaja en escala de grises • Evita usar imágenes, logos e iconografía • No te limites a usar una aplicación digital, ¡dibuja! • Define muy bien la estrategia y los contenidos antes de empezar • Siempre haz wireframes antes de diseñar • Explica las zonas e interacciones • Discute los wireframes con tu equipo de trabajo • Corrige problemas detectados en wireframes, no en diseño

CÓMO CREAR UN WIREFRAME

CONSIDERACIONES

CONSIDERACIONES DEL PROYECTO

Los antecedentes del proyecto son claves para la definición y diseño de los wireframes. Es

importante tener presente las definiciones provenientes del Brief, Estrategia, Benchmark,

Investigación de Usuarios y AI.

CONSIDERACIONES DEL PROYECTO

Consideraciones del Proyecto: Brief, Estrategia, Benchmark, Investigación de Usuario y AI.

BRIEF ESTRATEGIA BENCHINVESTIGA

CIÓN USUARIOS

AI

WIREFRAMES

PASAR DE LA AI AL WF

EL PROCESO

Debemos definir que es lo mas importante que queremos representar en nuestra página.

INTERPRETACIÓN DEL MAPA DE CONTENIDO

Es importante saber leer y distinguir distintas profundidades de contenido en un mapa de contenidos para poder traspasar a una adecuada jerarquía.

INICIO

No Perecibles Fiambres y QuesosJugos y Bebidas

Nivel Auxiliar

Marca

Ubicación

Primer Nivel

Verduras Artículos de Aseo

Doña Juana Contacto

Jugos Bebidas

Segundo Nivel

Arroz Fideos Jamones Quesos Hortalizas Tubérculos Útiles de Baño Útiles de Cocina

Tercer Nivel

Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha

Preguntas Frecuentes

Es importante saber leer y distinguir distintas profundidades de contenido en un mapa de contenidos para poder traspasar a una adecuada jerarquía.

Home


Lechugas

Tomates

Cebollas

Jugos Watts

Bebidas

Coca Cola

Sprite

Fanta

Arroz

Fideos

Conservas

Jamón

Quesos

Chanco

Cabra

Gauda

Papel Higiénico

Útiles de Aseo

Útiles de Cocina



FavoritosDescarga

PDF



Comúnmente se diseñan los wireframes para las pantallas más importantes, complejas y recurrentes a lo largo de la interfaz.

Home


Lechugas

Tomates

Cebollas

Jugos Watts

Bebidas

Coca Cola

Sprite

Fanta

Arroz

Fideos

Conservas

Jamón

Quesos

Chanco

Cabra

Gauda

Papel Higiénico

Útiles de Aseo

Útiles de Cocina



FavoritosDescarga

PDF



DEFINICIÓN DE ÁREAS

La definición de áreas es el primer paso para la creación de un wireframe. Acá, se jerarquizan las áreas de contenido, tales como header, main, sidebar o footer, según su importancia.

HEADER

MAIN SIDEBAR

FOOTER

JERARQUIZACIÓN DE CONTENIDOS

Una vez definida las áreas, debemos ordenar y jerarquizar los contenidos de éstos, donde es muy importante contar con la totalidad de los contenidos para crear wireframes más reales posibles.

ALGUNOS PRINCIPIOS BÁSICOS DE DISEÑO

• Similitud entre elementos.• Realce de elementos.• Preferir siempre lo simple. • Siempre mostrar la información necesaria.• Considerar el patrón de lectura del usuario.• Facilitar la navegación al usuario.• Reducir la complejidad de las tareas.• Diseñar a prueba de errores.

CONSIDERACIONES DEL DISEÑO DE INTERACCIÓN

PARTITURAS DE INTERACCIÓN

Una vez creado el mapa de contenidos podemos representar, gráficamente, las interacciones complejas en Mapas de Interacción y Partituras de Interacción.


Acá, se pueden definir el número de páginas y elementos de la interfaz para un flujo de interacción en la misma partitura. Un ejemplo práctico,

es la definición de un flujo de formulario.


Acá, se pueden definir el número de páginas y elementos de la interfaz para un flujo de interacción en la misma partitura. Un ejemplo práctico,

es la definición de un flujo de formulario.

ACTIVIDAD

ACTIVIDAD

La señora Juana tiene un negocio de abarrotes, y resulta que le hablaron de internet y quiere que su comunidad que es en la mayoría un barrio universitario ingrese a la “página web” de su negocio para saber que productos tiene y los precios que maneja Ella nos contó que quiere que su negocio se instale en internet y le ayude a llegar a muchos mas usuarios de los que puede llegar hoy en día. En su local ella vende:

• Verduras• Jugos y Bebidas• Comida no Perecible• Fiambres y quesos• Artículos de Aseo

ACTIVIDAD

INICIO

No Perecibles Fiambres y QuesosJugos y Bebidas

Nivel Auxiliar

Marca

Ubicación

Primer Nivel

Verduras Artículos de Aseo

Doña Juana Contacto

Jugos Bebidas

Segundo Nivel

Arroz Fideos Jamones Quesos Hortalizas Tubérculos Útiles de Baño Útiles de Cocina

Tercer Nivel

Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha

Preguntas Frecuentes

ACTIVIDAD

ACTIVIDAD

• Reunirse en grupos. • Crear supuestos de entrevistas, benchmark, etc.• Discutir estrategia.• Crear un wireframe.

• Exponer supuestos• Exponer estrategia• Presentar wireframe

ACTIVIDAD PARTE 2

• Evaluar trabajos de compañeros• Comparar trabajo propio y los revisados• Listar comparativo (pseudo benchmark)• Crear en drive carpeta del grupo (con los apellidos)• Subir a drive registro propio de wireframes (fotos)• Subir a drive supuestos y comparativo (texto)

ACTIVIDAD PARTE 3

FIN CLASE