Upload
miguel-gea
View
785
Download
3
Embed Size (px)
DESCRIPTION
Seminario sobre Prototipado y el uso de herramientas de creación de bocetos
Citation preview
Diseño Centrado en usuario:
Prototipado (wireframing y mockup)
Diseño de Interfaces de Usuario
SEMINARIO
Miguel GeaDpt. Lenguajes y Sistemas Informáticosi
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
--
Importancia Comercial
- Productos más usables- Diseño pensando en “los humanos”- Producto útil / “invento del año”
Diseño Centrado Usuario
http://www.hoytecnologia.com/noticias/revista-Time
Miguel GeaDpt. Lenguajes y Sistemas Informáticosi
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
Técnicas
- Metáforas,- Estilos de interacción- Diseño (visual)- Prototipos
Diseño Centrado Usuario
http://www.hoytecnologia.com/noticias/revista-Time
Metáfora CoverFlow (en itunes y en iphone)
Diferentes formas de inserción de texto
Metáfora: “máquina del tiempo”(copias de seguridad)
Miguel GeaDpt. Lenguajes y Sistemas Informáticosi
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
Características
Multiples dispositivos Uso Prototipos
Diseño Centrado Usuario: Prototipado
http://www.hoytecnologia.com/noticias/revista-Time
Imagen: http://static.lukew.com/onedesign_04092013.pdf
http://mindofmyown.org.uk/what-is-paper-prototyping/ http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups
Miguel GeaDpt. Lenguajes y Sistemas Informáticosi
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
--
Prototipos / mockups• Un prototipo (mockup, wireframing) es un diseño a escala del producto
usado para su evaluación • Las herramientas de prototipado de interfaces de usuario permite crear
bocetos para analizar propiedades y navegación.• Favorece la comunicación entre los usuarios y diseñadores• Campo de aplicación: • Diseño de Interfaz de usuario para escritorio (S.O.)• Diseño de navegación web (wireframing) • Diseño dispositivos móviles • Herramientas:
• Justinmind (Win/Mac) http://www.justinmind.com/• Axure RP Pro (Win/Mac) http://www.axure.com/ • Balsamiq mockup (Mac) http://www.balsamiq.com/products/mockups• MS Visio (Win) http://office.microsoft.com/es-es/visio• MS Expression:SketchFlow (Win) http://www.microsoft.com/expression/• MockFlow (Online) http://mockflow.com/
Miguel GeaDpt. Lenguajes y Sistemas Informáticosi
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
--
JustinMind
• Generación de prototipos de los bocetos funcionales en HTML • Recopila la documentación de la especificación del diseño• Herramienta de prototipado rápido y creación de bocetos digitales
Miguel GeaDpt. Lenguajes y Sistemas Informáticosi
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
--
Justinmind 1. Area de trabajo
1. La barra de menú. 2. La barra de herramientas.3. Pestaña de interfaz de usuario.
4. Paleta de componentes. 5. Lienzo o área de trabajo.6. Árbol de pantallas.
7. Propiedades del elemento seleccionado. Propiedades, añadir comentarios, interacciones y requisitosrelativos al elemento.
8. Contenido de la pantalla actual. 9. Pestañas de situación. Pantallas / Bocetos abierto (editables)10. Botón de simulación.
Miguel GeaDpt. Lenguajes y Sistemas Informáticosi
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
--
Justinmind 2.Diseño
• Basado en Páginas (bocetos) web • Mapa de sitio • Widget (botones, formas básicas, contenedores) y añadir nuevos• Permite simular ventanas de escritorio (tamaños en pixels)
• Comportamiento de Widgets • Navegación entre bocetos (Links) • Cambio de propiedades (ocultar/mostrar, estado) • Generación • Prototipos (HTML + JavaScript) • Documentación (especificación –Word)
Miguel GeaDpt. Lenguajes y Sistemas Informáticosi
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
--
Justinmind 3. Controles/widgets Los controles se agrupan en colecciones y funcionalidad- Web, Sketching- Formas, entrada de datos, contenedores
Importar/exportar Widgets (de librerías)Componentes IU concreto (MacOSX, Windows, Android..)
Crear widgets personalizados Seleccionar elementos del boceto, agruparlos y añadir a “mis widgets”. Facilita la reutilización
Miguel GeaDpt. Lenguajes y Sistemas Informáticosi
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
--
Justinmind 4. Comportamiento
Acciones que se pueden definir
Basadas en el ratón / teclado
on Click (pulsar botón izqdo) on Mouse Enter (posicionarse encima)on Mouse Over on Key Pressed
Basadas en el contenido (texto) OnChange (cambio del valor del texto)
Al comenzar en nueva página OnPageLoad (acción por defecto)
condiciones
Miguel GeaDpt. Lenguajes y Sistemas Informáticosi
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
--
Justinmind 5. Simular Datos
Miguel GeaDpt. Lenguajes y Sistemas Informáticosi
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
--
Justinmind 6. Compartir y Testing: UserNote
Miguel GeaDpt. Lenguajes y Sistemas Informáticosi
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
--
Balsamiq mockup
• Sobre tecnología Adobe AIR • Orientado al diseño (bocetos)• Sin funciones de navegación• Ejemplos: http://mockupstogo.net/
Miguel GeaDpt. Lenguajes y Sistemas Informáticosi
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
--
Ejemplo: Patrones de interacción
Tarea de Identificación (login)
- Usar datos de acceso (login/password)- Facilitar registro
https://www.justinmind.com/usernote/
Miguel GeaDpt. Lenguajes y Sistemas Informáticosi
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
--
Otros recursos
• Wireframes: Revista electrónica sobre prototipos / mockups http://wireframes.linowski.ca/
• Bocetos como complemento sobre Firefox (freeware) http://www.evolus.vn/Pencil/
• Videos: http://www.youtube.com/watch?v=QSxF-pISj1w&NR=1