www.iplacex.cl

Diseño UX UNIDAD Nº II

www.iplacex.cl

2

SEMANA 4

APLICANDO LA INTERFAZ GRÁFICA PERFECTA

1. ¿Qué son los Mockup?

2. Dato versus información

www.iplacex.cl

3

SEMANA 4

¿QUÉ SON LOS MOCKUP?

Podemos decir que es un prototipo hecho antes del desarrollo del trabajo. Sirve para

transformar ideas en funcionalidades y ayuda al cliente a exteriorizar y comprender lo

que necesita.

www.iplacex.cl

4

SEMANA 4

Antes de entrar en la fase de desarrollo de

una solución informática con interfaz de

usuario, conviene pasar algunas etapas

preliminares que nos ayuden a tener una

mayor certeza y validación de lo que el

cliente quiere o necesita. Estas etapas

también permiten al equipo de desarrollo

que los usuarios denominados beta-tester

o los usuarios líderes, pongan a prueba la

apariencia, estructura y funcionalidad de

las interfaces antes de entrar en la etapa de construcción y posterior liberación en el

aplicativo final.

Lo ideal es que estas preliminares permitan encontrar cualquier problema mientras se

está todavía en fase inicial y afinar así su diseño, estructura o funcionalidad, para definir

la interfaz de usuario con más claridad.

El Desarrollo o creación de un Mockup es uno de los pasos previos al desarrollo definitivo

de la interfaz de usuario y en este proceso podemos hacer uso de otros artefactos que

en ocasiones se confunden o tratan sin diferenciarlos, como lo son: Sketch, WireFrame

y Prototipo. Por lo que se hace necesario poder dar una definición de ellos y aclarar

nuestros conceptos.

www.iplacex.cl

5

SEMANA 4

Sketch

Pensemos en el Sketch como un primer boceto que realizamos para una interfaz que

necesitamos crear. Son nuestras primeras ideas reflejadas sobre una hoja de papel.

Actualmente pasamos buena parte de nuestro tiempo frente a un monitor, sin embargo,

en medio de esta era digital los mejores aliados de un diseñador de aplicaciones pueden

ser herramientas mucho más sencillas y comunes, nos referimos al lápiz y papel, una

parte del proceso creativo que otros diseñadores “no digitales” han estado utilizando

desde siempre, dibujar.

www.iplacex.cl

6

SEMANA 4

WireFrame

Wireframe es una palabra inglesa que significa “alambre” lo cual ya nos da bastantes

pistas de a qué nos estamos refiriendo. Corresponde a una ilustración bidimensional de

la interfaz de una página, ventana, formulario o una aplicación que se centra

específicamente en la asignación de espacio y priorización del contenido, las

funcionalidades disponibles, y los comportamientos deseados. Por estas razones, los

wireframes normalmente carecen de estilo tipográfico, color o aplicaciones gráficas, ya

que su principal objetivo reside en la funcionalidad, comportamiento y jerarquía de

contenidos.

En otras palabras, se centra en “qué hace la pantalla, no cómo se ve”.

www.iplacex.cl

7

SEMANA 4

Prototipos

Mientras que los wireframes son un “esbozo” y los MockUps muestran la “sensación” del

diseño, es el prototipo el que da vida a la “experiencia” detrás “de la experiencia del

usuario”.

Un prototipo es un modelo (representación, demostración o simulación) fácilmente

ampliable y modificable de un sistema planificado, probablemente incluyendo su interfaz

y su funcionalidad de entradas y salidas.

www.iplacex.cl

8

SEMANA 4

El prototipo, en nuestro contexto, es una representación de alto detalle de un proyecto

de interfaz. En ella se puede identificar y operar:

Sistemas de navegación

Paleta de colores aplicada

Iconografía

Experiencia de usuario

Servicios de ayuda, búsqueda, interacción.

Otros elementos del proyecto

La creación del prototipo debe llevarse a cabo cuando vamos a evaluar la interacción, y

sirve para definir aspectos que no quedan claramente reflejados en un boceto de papel

o un wireframe no navegable.

Habiendo establecido las diferencias detallemos un poco más el trabajo con el Mockup.

Podemos decir que generalmente es, una

composición gráfica completa que ha

utilizado el wireframe como plantilla, creado

desde el Sketch, introduciendo todos los

elementos gráficos y visuales,

convirtiéndose así en un modelo a escala de

un producto que se utiliza para demostrar y

probar un diseño.

www.iplacex.cl

9

SEMANA 4

El mockup es un medio de representación de la apariencia y muestra los fundamentos

de su funcionalidad. Los MockUp incluyen los detalles visuales, tales como colores,

tipografía, etc., y son generalmente estáticas. Al observar un mockup, se debe tener una

buena idea de cómo se verá el producto final y una idea aproximada de cómo podría

funcionar (incluso si las funciones aún no se han desarrollado).

Un prototipo está destinado a funcionar, aunque sea parcialmente, mientras que los

Mockup no funcionan. Se componen de las imágenes en pantallas estáticas, sólo se

“parecen” la interfaz de usuario real.

www.iplacex.cl

10

SEMANA 4

DATOS VERSUS INFORMACIÓN

Generalmente los términos de datos e información se usan para describir lo mismo, pero

para el profesional en tecnologías de información estos términos tienen diferentes

significados. Desde lo más formal podemos indicar que:

Dato, es un término que se refiere a hechos, eventos, transacciones, etc., que han sido

registrados. Es la entrada sin procesar de la cual se produce la información.

Información, se refiere a los datos que han sido procesados y comunicados de tal manera

que pueden ser entendidos e interpretados por el receptor.

Pero como hemos mencionado, esto es desde lo más formal. Reforzamos esto, ya que

nuestro objetivo es abordar esta diferencia desde la visualización de los datos como

información, orientados a poder diseñar una interfaz de usuario que también se haga

cargo de esto y tome este punto de vista en consideración.

www.iplacex.cl

11

SEMANA 4

Yussef Hassan, autor del Libro “Experiencia de Usuario: Principios y Métodos”, toca este

tema y a partir de sus aportes, abordaremos algunas cuestiones a considerar al momento

de pensar en el diseño de nuestras interfaces y como hacer el mejor uso de los datos,

para presentar la información que el usuario requiere, necesita o demanda como apoyo

a sus labores, con el uso de la solución informática que estamos elaborando.

Siempre que diseñamos una visualización, tenemos que pensar quién va a ser el usuario

final. La mayor parte de las veces vamos a ser nosotros mismos. Visualización de datos

www.iplacex.cl

12

SEMANA 4

es algo que vamos a tener que hacer los profesionales de casi todas las ramas, y en

cambio nos han enseñado muy poco. Nuestra experiencia más cercana puede haber

sido un profesor de estadísticas con algo de gráficos, pero no de fundamentos de la

percepción visual.

Describiremos las etapas que nos ayudarán a pensar en este concepto:

Análisis de datos

Transformación de datos

Representación gráfica

Interactividad

Análisis de datos

Vemos más de lo que creemos que estamos viendo.

Estamos viendo muchas cosas, pero estamos prestando atención sólo a unas cuantas.

Y a la vez, también creemos que estamos viendo

mucho más de lo que estamos viendo, gran parte

de lo que vemos es una construcción mental.

Hasta que no fijamos la atención en algo, no

estamos viendo nada

La utilización de elementos pictóricos es

recomendable sólo cuando ayuda a entender qué

es lo que se está representando. Cuando la forma

es mínimamente compleja ya no nos permite

hacerla distinción tan fácilmente.

www.iplacex.cl

13

SEMANA 4

Transformación de datos

Lo más cómodo es una representación es “una columna una variable”, que es más

cómodo visualmente. Hay una serie de técnicas que nos permiten abordar este proceso.

Descartar variables: No creemos que aporte realmente valor.

Filtrar: Excluir por ejemplo en base un criterio definido y acordado.

Atributos derivados: La posición geográfica específica (latitud y longitud)

Tareas perceptuales que mejor soportan cada tipo de tráfico, son las siguientes:

Comparaciones simples: Identificar diferencias cuantitativas entre pares de valores.

Ejemplo: Diagrama de barras

Tendencias o evolución: Identificar cambios, incrementos, descensos o fluctuaciones en

series de valores temporales cuantitativas. Ejemplo: Líneas.

Relaciones de Ranking: Identificar. Ejemplo: Barra horizontal.

www.iplacex.cl

14

SEMANA 4

Tareas perceptuales que mejor soportan cada tipo de tráfico, son las siguientes:

Relaciones parte-todo: Identificar relaciones proporcionales. Ejemplo: Tarta, cuando es

tan simple como sí o no.

Relaciones de distribución: Identificar las posiciones de los diferentes respecto al rango

completo.

Correlación: Identificar el grado de relación entre dos variables. -> Punto

Representación Gráfica

Todas las gráficas permiten hacer tareas, pero no todas permiten el mismo tipo de tareas.

Los diagramas de barras para lo que sirven es para ver la proporción entre dos valores.

Los diagramas de araña o radares, por sí solos son muy complicados, pero nos pueden

ser útiles al comparar, porque es más fácil identificar las formas de dos personas que se

parecen o gente que se sale de lo normal.

En los gráficos de área, hay que tener en cuenta que es el área lo que debe ser

proporcional, no el radio de un círculo, que da un área mucho más grande.

Hay que ir con cuidado con el tema de colores porque el 1% de las mujeres y 7% de los

hombres tienen problemas de visión cromática, daltonismo u otro tipo.

Si el color no aporta información, no utilizarlo. Usaremos paleta de colores poco

saturados, usaremos el saturado para destacar algo.

www.iplacex.cl

15

SEMANA 4

Interactividad

Avances en las interfaces para visualización de información han mostrado que el análisis

visual no solo se beneficia de buenos métodos de representación, sino también de

buenas interacciones con esas representaciones. Estas interfaces permiten que los

usuarios realicen las operaciones de análisis directamente sobre la representación

visual, teniendo realimentación directamente a nivel visual.

En un sistema de

visualización un conjunto de

interacciones bien definidas

puede ser usadas para

responder a una amplia

gama de necesidades. En

una primera instancia el

diseño de un conjunto de

interacciones bien definidas

requiere de conocimiento en

el dominio específico de la

aplicación, esto es natural ya

que cada disciplina y las

cuestiones particulares dentro de las mismas determinan los análisis a los que someterán

los datos.

Afortunadamente, aunque sea frecuente que distintos dominios de aplicación requieran

representaciones visuales diferentes, varios de ellos pueden compartir estados

intermedios de los datos, o requerir manipulaciones a nivel de vistas similares o incluso

necesitar de las mismas transformaciones de datos.

www.iplacex.cl

16

SEMANA 4

“La interfaz gráfica es el componente mediante el cual el usuario obtiene del sistema la

información.”

La información fluye por todas las áreas de las organizaciones, desde las cúpulas

estratégicas hacia los operarios y viceversa. Cada uno necesita distintos tipos de

información y cada uno de ellos genera o consume distintos tipos de datos.

www.iplacex.cl

17

SEMANA 4