Laboratorio digital - HD

Presentación del tema: "Laboratorio digital - HD"— Transcripción de la presentación:

1 Laboratorio digital - HD
Diseño de interfases Laboratorio digital - HD

2 Diseño CENTRADO EN EL USUARIO
. Según Chris Bank “una interfaz gráfica require jerarquía visual, y esta jerarquía debe desprenderse de los requerimientos del usuario.” (2014, pág. 21).

3 Diseño CENTRADO EN EL USUARIO

4 PARA QUIÉN DISEÑAMOS? PERSONA / IDENTIKITS
identikits denominados personas, estas son “representaciones ficticias de la base de usuarios objetivo” (pág. 22). esta representación ficticia colabora para prevenir y anticipar comportamientos que el usuario real tendría en el proyecto. SUGERENCIAS datos demográficos psicológicos Perfil laboral Frases que dijo/ diría

5 User scenarios / escenarios del usuario
traza el recorrido de cada persona desde la primera interacción hasta que realiza una meta.” (Bank, 2014, pág. 25). ser lo más realista posible pensar esto en base a la información recolectada para definir la persona dónde se visualiza, cuáles son las motivaciones, cuál su objetivo del uso de la interfaz

6 User scenarios / top task analisis
“darle a usuarios cualificados una lista al azar de tareas fáciles para realizar y pedirles que seleccionen las mejores cinco. ”ser lo más realista posible pensar esto en base a la información recolectada para definir la persona dónde se visualiza, cuáles son las motivaciones, cuál su objetivo del uso de la interfaz

7 User scenarios / top task analisis
CUÁLES SON LAS 5 ACTIVIDADES?

8 User scenarios / top task analisis
Esto mostrará claramente las prioridades del usuario. ¿Coinciden con la arquitectura y jerarquización de la página?

9 Mapa de calor “gráfico en el que se resaltan mediante un código de colores zonas concretas de una web en base a criterios como el número de clics, o las áreas por las que pasa con más frecuencia el puntero.” (Merino, 2014)

10 Mapa de calor Heatmap por scroll Heatmap por click:
Heatmap por movimiento de ratón: 

11 Mapa de calor Heatmap por scroll: utilizado en páginas extensas, permite saber dónde los usuarios dejan de leer (es decir, dejan de hacer scroll o desplazarse verticalmente por la misma). Heatmap por click: este gráfico muestra donde los usuarios hacen click, y puede indicar que los usuarios estén haciendo click en lugares erróneos pero que parecen clickeables, en lugares que le llaman la atención, etc. Heatmap por movimiento de ratón: indica las zonas por las que pasa el puntero del ratón, destacando aquellas en las que pasa más tiempo. El autor hace referencia a lo útil de este heatmap ya que, según la Carnegie Mellon University, hay una correlación del 88% entre el movimiento del ratón y el del ojo.

12 wireframe El boceto del sitio, una vez ‘digitalizado’, lleva a la realización de un wireframe, es decir, “representación estática en baja calidad de un diseño” (Other Wise, 2013) . Figuran los principales grupos de contenido, estructuras y columnas, etc. mostrar la distribución de la información y contenido sobre el espacio.

13 wireframe

14 Desarrollo gráfico del sitio
El desarrollo gráfico del sitio se puede ver en una evolución del estilo visual en tres etapas. moodboard, style tile brand style guide.

15 moodboard es la “versión más abstracta de un estilo visual. Permite una exploración conceptual”. (UxPin, 2015, pág. 10). muestra el look and feel del sitio, su tono comunicacional.

16 Style tile “guía de estilo transicional más específico que un moodboard, pero que carece de lo intricado de la marca” Puede mantener un estilo de collage, pero con elementos más específicos (texturas, colores, tipografías, tratamiento de fuentes, tamaños, botones). Es lo más cercano a los elementos que tendrá el sitio, pero sin la parte estructural

17 Style tile

18 Brand style guide guía de estilos de marca o manual de marca
“muestra las reglas y estándares de la marca” incluye la estandarización de fuentes, tamaños, colores, iconografía, tono de marca, retícula, etc.

19 Brand style guide