Videoaplicaciones

 

GUÍA DE DISEÑO

INTRODUCCIÓN

El presente documento es una breve guía que contiene una serie de recomendaciones sobre el formato visual más adecuado para las páginas web que compongan una videoaplicación PIMobile.

CONSIDERACIONES GENERALES

La usabilidad trata de la efectividad (capacidad de completar tareas), la eficiencia (esfuerzo necesario para completarlas) y la satisfacción percibida por el usuario durante la interacción con una máquina, sea ésta un ordenador, una radio o un teléfono móvil. Estos 3 elementos están condicionados por el perfil de los usuarios, por sus objetivos y por el contexto de uso.

La usabilidad, entendida como calidad de uso, es ahora mismo un factor clave para la aceptación de multitud de servicios. Es necesario considerar la usabilidad desde las primeras fases de diseño, y probar los prototipos, al menos en una ocasión, con usuarios representativos de la población objetivo.

El entorno en el que un usuario usa un teléfono móvil y las características del propio dispositivo son dos elementos clave a tener en cuenta en el diseño de interfaces de aplicaciones. En el caso del móvil, el entorno es cambiante, dinámico. El usuario puede estar distraído o tener prisa, por lo que la estructura de navegación tiene que ser muy simple y hay que evitar los pasos innecesarios.

Algunas personas, por ejemplo, compran las entradas de cine apresuradamente desde su móvil mientras hacen cola en el propio cine si sospechan que la sala se llenará antes de ser atendidos en la taquilla. También son frecuentes las consultas de saldo de una cuenta bancaria antes de realizar un compra (sobre todo si va a emplearse una tarjeta de débito). En ambos casos el usuario tiene mucha prisa y se encuentra en un lugar público.

Por otro lado, la tarea que está realizando el usuario puede interrumpirse por pérdida de cobertura o por una simple distracción. Por lo tanto, el diseño debería permitir recuperar el proceso en curso tras la interrupción. Las distracciones, concretamente, son mucho más habituales de lo que uno podría pensar. Es habitual usar el móvil (para otros objetivos que no sean el de llamar) mientras se está esperando en un restaurante, en un andén o incluso en un semáforo. En estas situaciones se dan interrupciones por pura lógica: el camarero trae la comida o la bebida, llega el tren, el semáforo se pone verde.

GUIA DE USABILIDAD BÁSICA PARA APLICACIONES EN TERMINALES MÓVILES

1.- Mostrar las Necesidades de Los Usuarios Rápidamente.

Los usuarios de PC y Móviles pueden tener diferentes razones para visitar el mismo sitio.

Los usuarios de móviles lo usan mas para encontrar localidades de cine o teatros, direcciones de interés o noticias. También buscan lugares de ocio, o simplemente leer algo mientras viajan en bus, o mientras esperan un amigo.

Debemos de tratar de predecir las necesidades y aplicarlas lo más rápido posible, el usuario debe poder encontrar lo que busca de forma rápida y sencilla.

2.- No repetir la navegación en cada página.

Los sitios web diseñados para los Pc normalmente repiten la navegación en cada página.

Sin embargo, el tamaño de la pantalla en los móviles es muy importante para la navegación, desde el momento que disponemos de un espacio definido al tamaño QCIF (176x144 pixels)

En la aplicación web para el móvil visualizaremos la página home de la misma. En otras páginas se incluirán solamente links para volver a la homepage o desde el punto de donde el usuario inició la navegación. De este modo se podrá navegar desde la parte superior o inferior de la pantalla fácilmente.

3..- Simplificar al máximo la experiencia del Usuario

Permitir a los usuarios la selección de la información en vez de escribir el texto libre (o por lo menos ofrece una alternativa a este método).

Escribiendo el texto en el móvil es fácil equivocarse con tantos botones. Los usuarios de móviles tienen más probabilidades en incurrir en equivocaciones. Puede ser mas efectivo proveer páginas actualizadas en su contenido y que el usuario seleccione de una lista que se le presente antes que escribir cualquier palabra.

4.- Diseño y layouts más accesible

Asegurarse que el diseño de la aplicación presenta contenidos en el orden justo y hacerlo visualizable por los móviles.

Los layouts de los sitios diseñados para las pantallas Pc, generalmente no se ven bien en los móviles. Es por esto que frecuentemente las páginas diseñadas tienen que ser adaptadas a los usuarios de móviles. Es hora de crear sitios a medida para los terminales móviles. Los sitios que se diseñan para los móviles, tienen mejor representación de aquellos que no la poseen.

RECOMENDACIONES DE DISEÑO PARA APLICACIONES PIMOBILE

Además del tamaño de pantalla y de la gestión de los comandos del usuario(mediante opciones numéricas y no enlaces), aspectos ya analizados en la Guía de desarrollo de aplicaciones PIMobile, se deben tener en cuenta otras recomendaciones sobre todo visuales a la hora de desarrollar una videoaplicación PIMobile.

1) La imagen que muestra el teléfono móvil que accede a una aplicación PIMobile es en realidad un vídeo que se codifica utilizando un codec H.263 que es el estándar para videollamadas. Debido al poco ancho de banda y a que este codec sacrifica calidad de imagen a cambio de requerir menor potencia de cálculo (por cuestiones de costo de CPU y consumo de baterías en los teléfonos móviles), las imágenes que llegan al teléfono no son todo lo nítidas que uno desearía. Esto hace, por ejemplo, que haya que diseñar utilizando tamaños de letra adecuados y buscando contrastes de colores que faciliten la legibilidad de la imagen transformada a H.263. No siempre es fácil y se trata esencialmente de un proceso de prueba y error

2) Las videoaplicaciones PIMobile aunque en realidad son aplicaciones web y en dicho campo no es frecuente el uso de audio a lo largo de la navegación, son accedidas mediante un sistema de videoconferencia. Por ello es recomendable que las páginas web accedidas contengan asociadas locuciones, melodías o en general señales sonoras que acompañen la navegación del usuario para

a. Hacérsela más grata y atrayente, facilitando que aprecie las superiores capacidades multimedia de 3G respecto a otros sistemas como WAP, no solo en cuanto a las posibilidades visuales si no a las auditivas

b. Complementar las indicaciones o información visual, evitando agotar el reducido espacio en pantalla para comunicar mensajes que pueden simplemente ser escuchados. Por ejemplo, al mostrar una imagen con posibilidades de hacer scroll o zoom, podría al inicio reproducirse una locución que dijese ''Recuerde que puede pulsar 0 para visualizar la ayuda'' o incluso “Recuerde que puede pulsar 0 para escuchar la ayuda”

3) La presentación y sobre todo la captura de la información en pantalla debe tener en cuenta el espacio reducido de que se dispone. Por lo tanto además de buscar siempre el procedimiento más sencillo y abreviado, será necesario que determinadas secuencias complejas de captura de información (formularios) u opciones (menús) sean distribuidas en varias pantallas en secuencia.

Para experimentar acerca del tamaño de letra a emplear y el resultado en pantalla (legibilidad y cantidad de texto que admite la pantalla QCIF) puede ser útil el empleo del elemento DIV al cual hacíamos referencia en el capítulo Tamaño de pantalla de la Guía de desarrollo de aplicaciones PIMobile, como en este ejemplo disponible en http://www.pimobile.es/samples/demodiv1.htm

El resultado sería el de la imagen: como se observa, dependiendo del tamaño de letra o incluso tipo de fuente el mismo texto ocupa más o menos lugar en pantalla y se vuelve más o menos legible.

La siguiente tabla muestra aproximadamente la cantidad de texto (columnas) que es posible visualizar con según tipo de fuente y tamaño. Es fácil en base a los ejemplos anteriores y cambiando los atributos de estilo del elemento DIV o aplicando otros CSS simular y evaluar otras posibilidades. Como se observa, para un mismo texto el uso de un determinado tipo y tamaño de fuente puede hacer que el espacio en pantalla sea aprovechado de manera más o menos eficiente

Fuente/Tamaño	8px	10px	12px	14px	16px
Arial	43	28	24	21	19
Verdana	34	24	21	19	17

Como norma general, podemos pensar que en tipos de letra proporcionales, disponemos de 20 columnas de texto a tamaño 12 px, y de 12 líneas. En aplicaciones que muestren menús, listados debemos tener en cuenta estas dimensiones desde los primeros diseños que hagamos de las páginas web que compondrán la videoaplicación PIMobile.

En estas aplicaciones, al contrario de lo que ocurre con las páginas web, no es necesario usar tipografías estándar que el usuario deba tener instalada en su PC. En este caso es posible usar cualquier tipo de tipografía que creamos la más adecuada. Por ello es posible usar las llamadas small fonts, las cuales desarrollan muy bien en tamaños medianos y pequeños, por lo que su visualización en terminales móviles es superior a otras tipografías.

En cuanto al desarrollo de las interfaces gráficas de usuario, aconsejamos crear las herramientas de navegación necesarias para obtener una experiencia de usuario adecuada. Los árboles de secciones en los que se muestran los contenidos de contenidos deben ser sencillas, de no más de 3 niveles de profundidad, y permitir en cualquier momento al usuario volver a la sección inmediata superior a la que se encuentra.

La uso de los colores en dicha interface gráfica son fundamentales al definir las líneas maestras del diseño de la aplicación.y de cómo lo perciban los usuarios y la sensación que les quede después de la visualización de dicha aplicación.

A continuación se exponen una serie de conceptos en cuanto al uso de los colores en las aplicaciones web, las cuales pueden extrapolarse a las aplicaciones llamadas a ser visibles a través de terminales móviles.

Número de colores en una videoaplicación

Es arriesgado establecer una norma estricta, ya que 6 colores simultáneos en una página pueden ser demasiados si existe un gran contraste entre ellos, pero pueden conformar una combinación agradable si la relación entre los mismos es adecuada..

1. Como norma inicial puede asegurarse que siempre es mejor pocos colores mejor que muchos. Como mínimo, el riesgo de estridencias es menor.

2. Como siguiente norma se puede afirmar que 3 colores en una misma página sería lo mínimo a utilizar y, en la mayoría de casos, debiera ser suficiente. Con menos de 3, las posibilidades de que la página sea anodina y aburrida son muy grandes.

a. Color Primario: es el tono básico de la página, el que la define, y el que ocupa la gran mayoría de la misma. Sería el color del atributo "background" de la página.

b. Color Secundario: es el segundo tono predominante en la página, aunque en mucha menor medida que el primario. Normalmente debe acotar o resaltar áreas y debe ser bastante próximo en tono al primario.

c. Color Destacado: es el color que se utiliza para resaltar aspectos concretos de la página. Por definición debe contrastar mucho con los colores primario y secundario y, por tanto, debe utilizarse con moderación. Puede utilizarse el Complementario o el Complementario Escindido del color primario de la página.

El contraste en los colores y su uso en los textos

Tal y como comentamos al inicio de este documento, la búsqueda de los contrastes correctos de colores permitirá una correcta visualización y legibilidad de los textos en la imagen transformada a H.263.

Buscando una definición intuitiva, podemos simplificar y decir que el contraste entre dos colores, es la diferencia que hay entre ambos. El contraste será mayor cuanto mayor sean las diferencias entre ambos en términos de:

• Tono
• Luminancia
• Crominancia

Cuando se diseña, el elegir el contraste entre los colores que vamos a usar es muy importante porque va a influir directamente en la sensación que vamos a transmitir a los visitantes. En primer lugar será importante que exista un gran contraste entre el testo ordinario y el "background". Sin embargo habrá que tener sumo cuidado en no caer en estridencias que generalmente son tomadas como inmadurez o falta de profesionalidad.

Esta misma recomendación es aplicable cuando elegimos colores para resaltar o separar áreas de contenidos: aquí es menos necesario y abusar de él puede ser aún más perjudicial.

Si en nuestras páginas utilizamos por ejemplo un marco del área de trabajo gris y queremos utilizar un verde para áreas resaltadas, no es lo mismo elegir la combinación:

Que elegir esta otra:

En el segundo caso la gran luninosidad de ambos colores, y en especial la del verde, hace que el contraste sea demasido grande y la combinación resulte agresiva.

La Teoría del Color define muchos tipos de contraste y, aunque algunos no son especialmente aplicables, es muy interesante conocerlos para profundizar en el conocimiento del efecto de los colores.

Contraste de Tono:

1. Es interesante el contraste de tono entre colores fríos y cálidos. Los colores cálidos siempre aparecen al espectador más próximos, mientras que los colores fríos aparecen al espectador más distantes.

2. Será más conveniente utilizar colores fríos para marcos, tapices o elementos secundarios y colores calientes para menús, iconos o barras de herramientas que queramos que el usuario siempre tenga presente.

3. Para la relación texto y background normalmente no será suficiente contraste de tono ya que no garantizará legibilidad suficiente. Será necesario aplicar algún tipo de contraste adicional.

Contraste de Luminancia (o de Valor): Permite crear grandes contrastes con el mismo tono de color sólo mediante el brillo de luz:

En general este tipo de contraste, aún siendo grande, es agradable al ojo humano, con lo que usarlo suele ser trabajar sobre seguro. Como contrapartida, no arriesgar en la combinación de tonos, puede significar apostar por un diseño convencional, poco impactante.

Contraste de Saturación: El contraste de saturación con frecuencia es el más adecuado para resaltar determinados de una forma moderada, poco estridente.

Un efecto interesante se obtiene utilizando áreas con diferentes saturaciones con un fondo gris: se produce una sensación de transparencia que puede ser muy apropiada en ciertas circunstancias.

Contraste Simultáneo: Es un efecto creado por nuestro sistema visual que, dado un color predominante, tiende a requerir su color complementario.

Este efecto puede obtenerse combinando dos colores brillantes pero que no sean complementarios, o, simplemente, utilizando un color brillante sobre un background neutro (un color de la gama de los grises).

Este tipo de contraste tiene la ventaja de resaltar diferencias entre áreas de forma impactante, pero sin la agresividad que producen los complementarios. Sin embargo puede provocar tensión e inestabilidad y debe utilizarse con prudencia.

Combinación de contrastes: Es lo más frecuente, sobre todo cuando se trata de resaltar textos.

En este caso se ha utilizado un Contraste de Tono, poniendo un lienzo violeta y el texto en turquesa, que es complementario adyacente del primero, por lo que la combinación debería aportar suficiente contraste de color.

Sin embargo, vemos que para el caso de textos, no es así: la combinación no aporta suficiente contraste y leer el texto cansa la vista (sobre todo si fuera un párrafo largo). Aunque la mezcla es natural y no es desagradable, no es adecuada para textos.

En este segundo caso, al contraste de color inicial le hemos añadido Contraste de Luminancia, oscureciendo el background e iluminando el foreground. La combinación de ambos contrastes aumenta sensiblemente la legibilidad del texto.

Los colores tienen unas características naturales de luminosidad. Así el turquesa o azul mar es naturalmente más claro que el rojo violáceo. Habida cuenta que son complementarios, la mezcla funciona bien y aporta suficiente contraste.

Sin embargo, invertir las relaciones naturales entre colores no funciona. Aportando contraste de luminancia y de saturación simultáneamente conseguimos oscurecer el turquesa y aclarar el crimson pero, aunque consiguiéramos suficiente contraste para resaltar el texto (que vemos que no es el caso), la vista no se sentiría cómoda ante la mezcla.

Como acabamos de comentar usar convenientemente el contraste es especialmente importante cuando se trata de escribir texto y resaltarlo suficientemente para garantizar su legibilidad a la totalidad de nuestros usuarios.