Taller de Prototipos #DAIEU15 - Clase 01
-
Upload
rodrigo-vera -
Category
Design
-
view
81 -
download
1
Transcript of Taller de Prototipos #DAIEU15 - Clase 01
PROTOTIPADO
DIPLOMADO ARQUITECTURA DE INFORMACIÓN Y EXPERIENCIA DE USUARIO 2015
WIREFRAMES Y MOCKUPS
CLASE 01
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://vimeo.com/19131028I<3 UX DESIGN (PARTE I)
UX DESIGN
https://vimeo.com/19131028
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
INTERACCIÓN HUMANO COMPUTADOR (HCI)
Es la disciplina que estudia el intercambio de información mediante software entre las personas
y las computadoras.
INTERACCIÓN HUMANO COMPUTADOR (HCI)
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.
INTERACCIÓN HUMANO COMPUTADOR (HCI)
A veces, las mejores interfaces se convierten en invisibles para nosotros, cuando pasamos de manipular la interfaz, a realizar tareas.
INTERACCIÓN HUMANO COMPUTADOR (HCI)
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.
7 PRINCIPIOS DEL DISEÑO UNIVERSAL
2. FlexibilidadEl diseño debe poder adecuarse a un amplio rango de preferencias
y habilidades individuales.
7 PRINCIPIOS DEL DISEÑO UNIVERSAL
2. FlexibilidadEl diseño debe poder adecuarse a un amplio rango de preferencias
y habilidades individuales.
7 PRINCIPIOS DEL DISEÑO UNIVERSAL
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.
7 PRINCIPIOS DEL DISEÑO UNIVERSAL
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.
7 PRINCIPIOS DEL DISEÑO UNIVERSAL
4. Información fácil de percibirEl diseño comunica de manera eficaz la información necesaria para el usuario.
7 PRINCIPIOS DEL DISEÑO UNIVERSAL
4. Información fácil de percibirEl diseño comunica de manera eficaz la información necesaria para el usuario.
7 PRINCIPIOS DEL DISEÑO UNIVERSAL
5. Tolerante a erroresEl diseño debe minimizar las acciones accidentales o fortuitas que
puedan tener consecuencias fatales o no deseadas.
7 PRINCIPIOS DEL DISEÑO UNIVERSAL
5. Tolerante a erroresEl diseño debe minimizar las acciones accidentales o fortuitas que
puedan tener consecuencias fatales o no deseadas.
7 PRINCIPIOS DEL DISEÑO UNIVERSAL
6. Escaso esfuerzoEl diseño debe poder ser usado eficazmente y con el mínimo esfuerzo posible.
7 PRINCIPIOS DEL DISEÑO UNIVERSAL
6. Escaso esfuerzoEl diseño debe poder ser usado eficazmente y con el mínimo esfuerzo posible.
7 PRINCIPIOS DEL DISEÑO UNIVERSAL
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 PRINCIPIOS DEL DISEÑO UNIVERSAL
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 PRINCIPIOS DEL DISEÑO UNIVERSAL
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.
WIREFRAME MOCKUP
https://www.youtube.com/watch?v=zNoBmjg-NnQ
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 ESENCIALES
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 ESENCIALES
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 ESENCIALES
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.
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
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
Funcionalidades Generales
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
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.
HERRAMIENTAS PARA DISEÑAR WIREFRAMES
HERRAMIENTAS PARA DISEÑAR WIREFRAMES
https://www.youtube.com/watch?v=GrV2SZuRPv0
HERRAMIENTAS PARA DISEÑAR WIREFRAMES
Herramientas digitales: Es la manera para crear wireframes detallados y de alta calidad.
OmnigraffleVisioAxureBalsamiqFireworksKeynote
Apliaciones escritorio
Apliaciones web
PrototyperHotglooiplotzBalsamiqCacooInvisionMarvelapp
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
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
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
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
Funcionalidades Generales
INTERPRETACIÓN DEL MAPA DE CONTENIDO
Comúnmente se diseñan los wireframes para las pantallas más importantes, complejas y recurrentes a lo largo de la interfaz.
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
Funcionalidades Generales
INTERPRETACIÓN DEL MAPA DE CONTENIDO
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.
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.
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.
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.
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
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.
• 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