LDCV-FADU-UNL
TALLER DE DISEﾃ前 MULTIMEDIA
Casanova Benjamﾃｭn Aﾃｱo 2013
GRILL A DE ANÁLISIS
Taller de Diseño Multimedia | Benjamín Casanova | 2013 Factores que influyen en la visualización
Visualización RELOJ DE PULSERA Aspectos intrínsecos Dispositivo
Funciones •Hora •Fecha •Cronómetro •Alarma •Calendario •Agenda •Transductor Acelerómetros Termómetro Sensores
Se establecen jerarquías visuales
Representación del tiempo Cómo indica la hora
Interfaz
Agujas + números Agujas + puntos Sólo agujas Otras
(de N°, letras, gráficos)
•Tamaño •Color •Forma •Ubicación/distribución en la superficie •Iluminación propia
Extrínsecos •Condiciones ambientales •Condiciones de iluminación •Refracción/reflexión del material •Forma de la esfera/Tamaño pantalla
Día/noche; Tipo de luz Círcular/cuadrada
Influyen en el Usuario a través de la...
Qué muestra
Características técnicas
•Análogico •Digital •Alfabético •Gráficos
•Iluminación propia •Resistencia al agua
•Mixtos
Agujas Números Palabras Puntos, círculos, barras, etc.
Hora + minutos Hora + min + seg
Accesibilidad
Por ejemplo:
•Distancia del ojo al reloj •Uso de colores/Constrastes •Formas legibles/Lecturabilidad •Posición de lectura •Nivel de brillo y contraste
El tamaño de la hora tiene que ser leído Los colores de la información y del fondo Formas claramente descifrables (sin ambigüedades) para facilitar la lectura
Por ejemplo:
Navegación
Usabilidad
•Maneras de explorar la interfaz •Navegar por sus aplicaciones y utilidades
•Facilidad de aprendizaje y uso •Visibilidad del estado del sistema •Ubicación dentro del sistema •Consistencia •Tamaño pantalla
Botón físico Tamaño del botón Retorno Juntando los dedos Tamaño pantalla Carga de batería / Nuevos mensajes Barra que muestra la ubicación del total Mismas acciones producen mismos resultados
Cualidades que el usuario percibe del producto para satisfacer sus necesidades. Demuestra fácilmente las tareas que el usuario puede lograr (dónde estoy, dónde estuve, a dónde puedo ir).
Interactividad
Personalización •Interfaz adaptable Aplicaciones
•Configuración
A las condiciones lumínicas A las acciones que se están haciendo Cambio de colores / Niveles de volumen Cambio modo representación del tiempo
Controlar acciones entrantes mediante impulsos del
Reconocimiento de voz: hablarle al reloj•
Conectividad •Sincronización con smartphone •Acceso a otros dispositivos mediante conexión inalámbrica
Gestos con los dedos sobre la pantalla• Teclado pantalla• Movimientos con antebrazo detectados por reloj•
Técnicas de salida de acciones mediante estímulos de la
Sonoros
•Alarmas de avisos
Visuales Táctiles
•Luces, colores •Mensajes •Vibraciones
Posicionales
•Acelerómetros
1. MEDICIÓN TEMPORAL Según la medición temporal existen maneras diferentes de representar el tiempo, según sea el factor que se tome como referencia. La codificación del tiempo puede venir dada por los días (la alternancia del día y la noche), años, fases lunares, observaciones astronómicas, etc., cada una de las cuales puede decodificarse en unidades convencionales. El día solar se encuentra decodificado en horas, minutos y segundos, y puede representarse de manera gráfica de varias formas.
Representación del tiempo Los elementos que constituyen la interfaz de un reloj, ya sea convencional o no, pueden ser —de acuerdo al estímulo de salida del dispositivo al usuario—: •Visuales Solo agujas Agujas+puntos •Sonoros
24 horas
11 12 00 1
102223 9 21 8
20
13
14 2 15 3 16
19 18 17
4
7 6 5
Agujas Números Pájaro fuera de su casa Arena cayendo Cada sesenta minutos emite un sonido (alarma, campanada), indicando el comienzo de una nueva hora Canto del pájaro en los relojes cucú Ruido del segundero
2 1:34 04 09:34 04
12 horas
09:34 04
11 12 1 10 9 8
2
AM PM
3 4
09:34 04
7 6 5
Nueve treinta cuatro
AM PM 15
30
45
AM PM Cucú Se distingue por el canto del pájaro, que sale cada cierto tiempo (½ hora o 1), lo que permite conocer el inicio de un nuevo ciclo de tiempo.
De arena Usado como temporizador. Generalmente están decodificados en horas o minutos. No permite una medición ilimitada del tiempo ya que no queda registro del tiempo transcurrido.
De agujas o analógico Es la manera más eficiente de representar el tiempo ya que permite imaginarse la noción del tiempo. La aguja que marca los segundos puede o no estar en la interfaz visual.
Numérico o digital Permite saber con mayor exactitud el tiempo. La inclusión de los segundos es opcional.
Alfabético La hora se representa con palabras, que han de ser decodificadas en números por la mente.
Gráficos Esta clase de representación requiere un mayor uso de recursos mentales para poder interpretar la hora.
2. INTERFACES DE REPRESENTACIÓN DEL TIEMPO Las interfaces de los relojes, en tanto se lo considera a éste como un sistema de representación visual-audiovisual del tiempo, pueden tomar diferentes vías para mostrar la hora. Representación con puntos
Representación digital
Números + números
10
11 12 1
9
Hora
8 7 6 5
2 3
10
4
8
9 7 6 5
Minutos Gráfico + números La interfaz de “Cassiopeia” utiliza una serie de LEDs multicolores en zig-zag para una forma sorprendente e intuitiva de visualizar la hora. Para saber la hora, basta con contar las luces para cada dígito. Luz azul designa la hora de un solo dígito, luz púrpura designa hora de dos dígitos, y rosa y rojo representan minutos de un solo dígito y dos, respectivamente. En términos de usabilidad este reloj tiene un grado bajo de la misma. La disposición al azar de los LEDs hace que tome demasiado tiempo para saber la hora, ya que hay que contar cada luz de cada color para conocer la hora. El tema del color de los LED puede llegar a presentar confusión entre uno u otro color. Prácticamente el dispositivo permite conocer la hora actual mediante las combinaciones de luces, sin emitir ningún otro estímulo visual o auditivo.
En este segundo caso, la pantalla digital utiliza tinta electrónica. La principal característica de esta interfaz es que permite invertir los valores negro-blanco. Esta particularidad hace que la lectura de la hora sea más adecuada en determinadas circunstancias ambientales y con determinadas condiciones lumínicas. Este alto contraste genera una gran capacidad de legibilidad. El gran tamaño de los dígitos y del gráfico permiten que la hora sea leída a una gran distancia. El hecho de que la hora se sitúe arriba y los minutos abajo, permite dividir y distinguir entre uno y otro dato. Se puede elegir entre dos diseños de hora (display numérico digital o mostrar la sólo la hora en un gráfico), pero ambos modos muestran la muestran de manera digital.
11 12 1
2 3 4
2. INTERFACES DE REPRESENTACIÓN DEL TIEMPO
Representación con gráfico El diseño en sí se compone de dos anillos, uno interior y otro exterior, que en este caso para indicar la hora están hechos con luz pulsante mediante LEDs. Aunque pueda parecer poco convencional la manera de mostrar la hora, esos dos anillos apuntan a las horas y los minutos al igual que un reloj de pulsera analógico, por lo que es fácil de leer. Al estar la luz incluida en el diseño de la representación de la hora, no es necesario incluir otro tipo de luz extra. Es decir, la luz es en sí la representación de la hora.
El reloj tiene algunas particularidades respecto a la iluminación. Hay tres tipos de usos con respecto a la luz que pueden ser elegidos. 1) Continua: los pulsos del tiempo constantemente. 2) Cada 30 segundos: se iluminan los anillos para mostrar la hora y se desvanece cada 30 segundos. 3) Cada 5 minutos: se encienden las luces del reloj para mostrar la hora y se desvanece una vez cada 5 minutos.
Para saber la hora hay que mirar la sección vacía de cada anillo (zona sin luz). En el caso de querer saber el minuto exacto, se recurre a las barras que aparecen arriba y abajo de los anillos. En el gráfico son las 09:02.
Segmentos de 5 minutos
00
55 50
Hora
10
11 12 1 10 9
45
05
8
2 3 7 6 5
15
4
40
20 35
Minutos intermedios
30
25
+1 +2 +3 +4
3. RELOJ PUL SERA INTELIGENTE (RPI): C APACIDADES EXTENDIDAS Estos dispositivos inteligentes, además de indicar la hora actual, pueden incluir características como: •Mensajes •Sensores •Llamadas •Condiciones del entorno
•Orientaciones
SMS E-mail Temperatura corporal Frecuencia cardíaca Recibir Realizar Acelerómetros Termómetro Altímetro Barómetro Brújula GPS
•Calculadora •Agenda •Cámara
Con estas nuevas aplicaciones integradas al reloj de pulsera inteligente se expanden los usos que se le puede dar al reloj, o sea, lo que el usuario puede hacer a través del dispositivo. Esta clase de relojes traen incorporados sensores de diferentes tipos, de acuerdo a la función que vayan a desempeñar. La interfaz es la que por medio de sus estímulos de salida (sean visuales o auditivos) hace de mediación entre los datos obtenidos por los sensores y el usuario. También, un reloj inteligente puede servir como interfaz para un sistema remoto, como en el caso de los relojes que utilizan la tecnología celular o Wi-Fi. Esto significa que el procesamiento de los datos lo realiza un dispositivo que cuenta con mayor capacidad de procesamiento de datos y luego son arrojados al reloj para ser mostrados.
Visualización de las aplicaciones en re RPI
Cuenta atrás Una señal acústica avisa cuando está por finalizar el tiempo.
Cronógrafo
Frecuencia cardíaca Un monitor de la frecuencia cardíaca, configurable para máximos y mínimos. Emite una alarma cuando se está cerca de los límites establecidos.
Mensajes Leer mensajes que han sido recibidos en el smartphone.
Brújula De manera electrónica proporciona una brújula para orientarse.
3 .1. R P I : I N T E R FA Z G R Á F I C A Además de mostrar la hora en pantalla completa, puede suceder que se pase a otra pantalla tipo “escritorio”, la cual no sólo posee la hora sino que está acompañada de otros íconos pertenecientes a aplicaciones y utilidades. En estos casos, la organización de los elementos en la superficie es un aspecto a considerar para el buen desempeño con la interfaz. Organización y jerarquías Distribución y ubicación en la pantalla de algunas de las funciones que posee el reloj pulsera inteligente. La complejidad visual puede alterar la manera en que el usuario percibe a la interfaz.
Minimalismo La carga o esfuerzo requerida para lograr una tarea tiene una influencia en el grado de satisfacción por parte del usuario. El esfuerzo incluye al de tipo físico y mental. •La carga mental o cognitiva se refiere al esfuerzo de memoria percepción, resolución de problemas. •La carga física o cinemática al número de pasos, cantidad de movimientos, distancia de elementos, tareas repetitivas, etc. La reducción de la carga cinemática es un factor decisivo para la experiencia de uso, ya que el movilizar contenido y funciones a interfaces muy pequeñas conlleva dar al usuario lo mínimo indispensable para que logre los que desea.
En positivo
En color
En negativo
Por lo tanto, los elementos de interacción como los accesos directos o atajos y distancias de los botones deben ser adecuados para el uso con una mano o, más específicamente, de un par de dedos para interactuar con la interfaz. Entonces, para mejorar la eficacia en el aprendizaje del usuario frente a una nueva interface se podría ir mostrando la información de manera gradual y progresivamente, reduciendo así la probabilidad de errores en su interacción. Es decir, mostrando únicamente la información necesaria o requerida en un momento dado, lo que repercute en pantallas limpias, reduciendo la complejidad sin caer en la confusión.
5
1
1
5
5
1 Ver en teléf. Contestar Llamar
Colores Los empleo de los colores también permite jerarquizar la información dispuesta en la pantalla, por lo que la elección que se haga de los mismos ayuda al reconocimiento de ciertos elementos.
Opciones ocultas Botón semioculto indica que hay opciones dentro de la sección en la que se está. De este modo mantiene una pantalla limpia reduciendo el grado de complejidad visual.
Ubicación y navegación La barra permite saber cuánto falta para llegar al final de la sección en que se está actualmente; la navegación está visible: indica el progreso que se va completando. Además de la barra, se puede indica con números la cantidad precisa de pantallas que quedan aún por delante.
4. PROPUES TAS DE INTERFACES VISUALES Para el desarrollo de las propuestas de interfaces visuales para la representación de la hora actual, se trató de tener en cuenta algunos aspectos de usabilidad y accesibilidad. Personalización de la interfaz •Cambio de color de figura-fondo. •Cambio tipo de representación de la hora. •Desaparecen elementos que se ocupan. •Disposición de las aplicaciones en el campo. Que se pueda elegir a cuál se le da más prioridad en determinadas circunstancias. •Interfaz adaptativa.
Aspectos a considerar •Ruido visual, distracciones en la pantalla. •Colores o ByN. •Tamaño de la pantalla. •Conectividad con el smartphone. •Tamaño de los elementos (íconos, letras). •Distancia de lectura.
AM MARTES MAY 21
AM MARTES MAY 21 Proximidad El dispositivo podría reconocer la distancia a la que se encuentra de los ojos y adecuar la interfaz visual (el tamaño de los dígitos y letras y los colores) según lo cerca o lejos que estén los ojos. Se puede configurar de acuerdo a si el usuario tiene algún tipo de problemas en la visión.
Valores por defecto Cuanto más cerca del ojo se encuentre el reloj, se reduce el tamaño de los números y letras.
Y a la inversa: cuanto más lejos del ojo se encuentre el reloj, se agranda el tamaño de los números y letras y cambia de color.
Posición Dependiendo la posición del brazo y antebrazo y, por lo tanto, del reloj, el dispositivo podría entrar en estado de hibernación.
4. PROPUES TAS DE INTERFACES VISUALES A continuación, se proponen diferentes interfaces visuales para la representación de la hora actual (y de la fecha). Propuesta 1: “Tabla” La interfaz visual muestra la hora actual (hora + minutos) y la fecha (día + mes). Se compone de una cuadrícula de 60 celdas, numeradas del 1 al 60. Los mismos número son utilizado tanto para proporcionar la hora (24 horas) como para indicar la fecha.
En el caso de que la hora y los minutos y el día y mes coincidan en un mismo cuadrado, este mismo se dividirá en 4 triángulos, mostrando la hora y los minutos en mayor tamaño que la fecha, y sin ningún número dentro de cada triángulo.
Propuesta 2: “Horizonte” Esta interfaz sirve para saber cuánto tiempo de luz solar queda todavía en el día solar. Partiendo de la división vertical de 24 franjas (horas) y horizontal de dos secciones (una para el día y otra para la noche), se pasa posteriormente a realizar la interfaz del reloj para visualizar cuánto tiempo falta para el amanecer o atardecer. El nivel del horizonte (día-noche) sube o baja, según la fecha del año en que se esté. Sol
Referencias de color
5’
35’
10’
40’
Día
15’
45’
Mes
20’
50’
Hora
25’
55’
Minutos
30’
60’
Hora: 17:39 Fecha: 13/06
Cada uno de los sectores de color corresponde a un dato distinto: día, mes, hora y minuto.
Hora: 09:09 Fecha: 09/09
La elección de cada color se vuelve esencial para reconocer si se trata, en primer lugar, del tiempo o de la fecha, y, en segundo lugar, para identificar en ambas categorías si es la hora o minutos, o el día o mes, respectivamente. Es necesario aprenderse qué color corresponde a cada dato. Una vez aprendida la equivalencia de cada uno de los cuatro números con su color, el procesamiento mental es menor.
Equinoccio
Día Noche
Horas
Oeste
Este
Fecha
En la interfaz visual, el cambio de día a noche se realiza mediante una circunferencia compuesta de dos arcos de distintos colores por la que orbita el sol. Se completa una vuelta cada 24 horas. La posición espacial de la hora y la fecha sube o baja de acuerdo a la línea “día-noche”.
4. PROPUES TAS DE INTERFACES VISUALES Propuesta 3: “Engranajes” Esta interfaz visual también visualiza la hora actual (hora + minutos) y la fecha (día + mes), en vertical y horizontal, respectivamente. El mecanismo de funcionamiento consiste en que cada círculo gire a medida que su unidad de tiempo avanza. Los dos círculos horizontales (hora y minutos) están ligados entre sí, del mismo modo que los verticales (día y mes) lo hacen a su modo.
Hora
Vertical: hora actual Día
AM PM
Hora: 02:30 AM Fecha: 17/06
Mes
Propuesta 4: “Concéntricos” La esfera del reloj pulsera para la representación de la hora se lleva a cabo mediante cuadrados concéntricos, 12 en total, 1 para cada hora, dividiéndose el día en AM y PM. Comenzando desde el centro, las horas se expanden hacia los cuadrados exteriores. El color rosado muestra el avance de los minutos pertenecientes al cuadrado en que están. Una vez completado los 60 minutos, el cuadrado cambia a rojo, que indica que ya se completó la hora. El ciclo comienza nuevamente en el siguiente cuadrado externo. Al llegar a las 12, el ciclo del tiempo vuelve a comenzar desde el centro, indicando si es AM o PM..
Hora: 07:10 PM
Horas Minutos
AM PM
Horizontal: fecha
Esfera del reloj
Minutos alrededor del cuadrado
Al girar con los dedos (en movimiento circular) uno de los cuatro círculos, el círculo opuesto (en la vertical u horizontal) gira también, pero a una velocidad diferente al primero, manteniendo así la correlación entre ambos.
Los círculos están en continuo movimiento, haciendo visible el transcurso de la hora y de la fecha.
Esta interfaz permite tener noción de las horas transcurridas y de las que quedan, en una sola pantalla.
4. PROPUES TAS DE INTERFACES VISUALES Propuesta 5: “Expansión-Contracción” Los números para representar la hora tienen una grilla de base, compuesta de siete líneas, las cuales se transforman —se inflan o desinflan— hasta llegar a una forma circular o un círculo aplastado o comprimido. El reloj está destinado a personas con deficiencias en la visión, ya sea para ver de cerca o de lejos. Sin importar cuál sea el caso, es configurable por el usuario. Según la distancia del reloj al ojo, los dígitos modifican su grosor, pero sin cambiar de tamaño:
Propuesta 6: “Brújula” La característica principal que tiene la interfaz visual es modificar el ángulo de rotación de la hora, para que siempre permanezca lo más alineada al ojo del usuario, como si éste fuese el norte magnético que atrae los dígitos de la hora hacia su rostro. Según la posición del brazo, los números de la hora se mueven, modificando el ángulo sobre el plano de la superficie del reloj: •Antebrazo paralelo a los ojos: en este caso la rotación es poco visible.
Estructura para la creación de los números 1 2
•Antebrazo inclinado: a medida que se abre el antebrazo, los números comienzan a girar. •Cerca del ojo: las delgadas líneas de la grilla se expanden un poco, formando unas elipses.
1 •Antebrazo extendido: al alcanzar posiciones extremas, los números giran unos 90° respecto a su posición original.
•Lejos del ojo: cada forma que compone el número se expande, pudiendo llegar a formar un círculo. Puede ser que suceda a la inversa, que los números se expandan al estar cerca y se contraigan al estar lejos del observador.
2 Hora: 14:30
4. PROPUES TAS DE INTERFACES VISUALES Propuesta 7: “Agujas fijas” La interfaz visual de este reloj es similar, en su modo de lectura, a la de un reloj de agujas. •En el círculo central se anclan los sectores (barras) que indican la hora: cada anillo representa 1 hora. •En el círculo externo se anclan las barras de los minutos: cada anillo contiene 5 minutos. Para uno u otro caso, se va sumando a cada barra una porción de tiempo a medida que cambia el ángulo de giro y avanza hacia el exterior (horas) o al interior (minutos).
El tiempo se mide en valores discretos, quedando las doce posiciones siempre inamovibles, por lo que no es posible conocer los minutos intermedios. El cambio de una a otra hora y de un determinado minuto a otro se observa mediante el “salto” de un sector de color a otro vacío (zonas blancas).
Propuesta 8: “Barras” La representación de la hora actual en esta interfaz se propone en forma de barras verticales, una para cada unidad de medida (hora, minuto y segundo) y en orden decreciente hacia la derecha. Se trata de una representación de 24 horas, en la cual se ve a un tiempo las horas correspondiente a AM y PM.
Hora Izquierda
min
seg
Derecha
60 min 55
5 10
50
9
45
1h
3
15
6 40
20 35
Hora: 17:50
25 30
hora min
Fecha
Hora: 21:45 Hora: 16:35:15 Fecha: 17/06 En la mitad izquierda de la interfaz, cuando la hora y los minutos coinciden en el mismo ángulo, se empiezan a superponer ambas mediciones del tiempo. En este caso la hora es la que tiene prioridad de visualización. En el ejemplo, la hora 21 comparte con los 45 minutos parte una misma barra.
Hora: 18:00
La barra de los segundos se desplaza hacia la parte superior, estando en movimiento permanente. Se divide en 60 unidades. Al llegar a 60 se añade 1 minuto a la barra de minutos. De la misma manera es el mecanismo de los minutos a las horas.
Una vez completada la columna AM, la hora continúa en la columna PM, hasta completarse y volver a empezar en AM nuevamente.