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