DISEÑO DE INTERFASES

LABORATORIO DIGITAL - HD
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).
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
DISEÑO CENTRADO EN EL USUARIO

• ¿QUIÉ ES EL USUA
DISEÑO CENTRADO EN EL USUARIO
(RESPONDER AHORA EN 20 MINUTOS)
• A) PRESENTACIÓN
• NOMBRE, PROFESIÓN, EDAD, HISTORIA
DE VIDA.

• B) INDAGAR
• ¿CUÁLES SON SUS VALORES?
1. FILOSOFIA DE VIDA,
2. QUÉ LO ALEGRA/ SATISFACE/ ENORGULLECE?
3. QUÉ LO ENOJA/ FRUSTRA?

• ¿CUÁES SON SUS ASPIRACIONES?

• TIPO DE PERSONA QUE QUIERE SER
• CUÁLES SON SUS SUEÑOS/ OBJETIVOS?
• TIPO DE MARCAS CON LAS QUE EMPATIZA
• ¿CUÁLES SON SUS INTERESES?
• ¿CUÁLES SON SUS NECESIDADES?
• ¿CÓMO UTILIZA/ ORGANIZA SU TIEMPO?
• (RUTINA, TIEMPO LIBRE, RITUALES; ETC.)
• ¿QUÉ MANEJO TIENE DE OTRAS APPS SIMILARES?
• ¿QUÉ ESPERA DE ESTA APP?
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
USER SCENARIOS / ESCENARIOS DEL USUARIO
(RESPONDER EN 5 MINUTOS)

• PENSAR ESTO EN BASE A LA INFORMACIÓN RECOLECTADA PARA DEFINIR

LA PERSONA
• A) ¿DÓNDE SE UTILIZARÁ LA APP?/ EN QUÉ CIRCUNSTANCIA?
• B) CUÁLES SON LAS MOTIVACIONES DEL USUARIO? (QUÉ PROBLEMA
RESUELVE)
• C) ¿CÓMO HARÁS PARA QUE SIGA UTILIZANDO LA APP LUEGO DE QUE
RESUELVA ESE PROBLEMA PARTICULAR? (RECORDÁ QUE TODOS TENEMOS
ESPACIO LIMITADO EN NUESTRO TELÉFONO).
USER SCENARIOS / TOP TASK ANALISIS

• ESTO MOSTRARÁ CLARAMENTE LAS PRIORIDADES DEL

USUARIO.
• ¿COINCIDEN CON LA ARQUITECTURA Y JERARQUIZACIÓN DE
LA PÁGINA?
USER SCENARIOS / TOP TASK ANALISIS

CUÁLES SON LAS 5 ACTIVIDADES?

USER SCENARIOS / TOP TASK ANÁLISIS
10 MINUTOS:
• HAZ UNA LISTA DE LAS TAREAS/FUNCIONES QUE REALIZARÁ
TU APP: DE 5 A 10 FUNCIONES
• ORDENALAS POR PRIORIDAD (PARA EL USO DEL USUARIO)
• ¿COINCIDEN CON LA BOTONERA QUE TENÍAS PENSADA?
USER SCENARIOS / TOP TASK ANALISIS

CUÁLES SON LAS 5 ACTIVIDADES?

MAPA DE CALOR
• “GRÁFICO EN EL QUE SE RESALTAN MEDIANTE UN CÓDIGO
DE COLORES ZONAS CONCRETAS DE UNA WEB/APP 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)
MAPA DE CALOR (EN CASO DE LA WEB)

• HEATMAP POR SCROLL
• HEATMAP POR CLICK: 
• HEATMAP POR
MOVIMIENTO DE RATÓN: 
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.
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.
WIREFRAME
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.
MOODBOARD (CLASE QUE VIENE)

• 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.
STYLE TILE
• “GUÍA DE (CLASE
ESTILO QUE VIENE)
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
STYLE TILE
BRAND STYLE GUIDE
AHORA: PRESENTÁ TU ISOLOGO (NAMING INCLUÍDO)
CLASE QUE VIENE)… DEBE COINCIDIR CON EL
ISOLOGOTIPO QUE YA DISEÑASTE PARA HOY
• 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.
BRAND STYLE GUIDE