El Observatorio de Internet Móvil: Lineas Maestras de Diseño para la Web Movil » OIM

En respuesta a las numerosas peticiones recibidas pidiendo una versión en español de la Best Practice - Design Guide de Volantis nos hemos lanzado a realizar la siguiente traducción, más o menos libre, de la misma. Confiamos sea de utilidad.

Visión general

Abraham Lincoln dijo "Dame ocho horas para talar un árbol y me pasaré las primeras seis afilando el hacha".

Esta guía de buenas prácticas trata sobre la implementación del entorno de Volantis para proporcionar renderización de dispositivo conforme a una guía de estilo dada. Se debe emplear como ayuda tanto desde una perspectiva de planificación de proyecto como de una perspectiva de implementación de la solución.

El objetivo de este documento es proporcionar las pautas que ayuden a:
  • Planificar el desarrollo de las políticas de diseño desde el comienzo para minimizar la revisión de aplicaciones y políticas XDIME
  • Identificar las estructuras de página (layouts) y estilos (themes) que vamos a necesitar
  • Definir una convención de nombres coherente -- nombres de clases de estilo y contenedores -- a lo largo de las políticas de diseño (layouts, themes) para reducir la confusión
  • Definir el interfaz XDIME y construir una aplicación de referencia que demuestre todos los aspectos
  • Construir la librería de políticas para que la presentación de la aplicación de referencia sea conforme a la guía de estilo
  • Crear una aplicación de referencia para entregar a los desarrolladores XDIME como guía de referencia

Requerimientos

Guía de Estilo

Antes de empezar a implementar la solución de Volantis necesitas tener la guía de estilo definida. Ésta es la manifestación del aspecto del servicio en los diferentes dispositivos o familias de dispositivos y definirá el criterio de éxito de la solución. A menudo, esto se concentra en una familia particular de dispositivos, como los dispositivos de gama alta, y requerirá pararse a pensar en este punto cómo deberá ser el aspecto del servicio también para los dispositivos menos potentes.

Dispositivos Objetivo

También debes asegurarte de definir los terminales objetivo. Por ejemplo, a menudo los dispositivos objetivo son todos los terminales desde las PDAs hasta los móviles WAP menos potentes. Algunos pueden necesitar otros canales como USSD, IVR, Celltik o PML.

Mapas del Sitio

También debes tratar de obtener los mapas del sitio y flujos de aplicaciones de algunos servicios. A veces éstos están incluidos dentro de la definición de la guía de estilo. Otras veces sin embargo, éstos no están disponibles al comienzo del proyecto ya que pueden no estar ni siquiera planteados aún -- aunque si éste fuera el caso deberías hacerte con un borrador al menos. De los mapas del sitio y los flujos de aplicaciones se pueden crear los casos de uso, los cuales permitirán formar el contexto para la guía de estilo y te darán una perspectiva mejor de cómo resultará el servicio y te permitirá un mayor control efectivo sobre la calidad.

Otros Requerimientos

Además debes asegurarte que el resto de requerimientos quedan perfectamente definidos, por ejemplo:
  1. ¿Cúal es el formato de entrada: es XDIME u otro lenguaje de marcas (markup)?
  2. ¿Cuales son las geografías objetivo?
  3. ¿Qué operadores y canales se van a utilizar?

Diseño

Interfaz Independiente del Dispositivo

Se recomienda un interfaz definido para permitir:
  1. Separación de aspectos - mejora la facilidad de probar la presentación independientemente de la lógica de la aplicación
  2. Informar a los desarrolladores de la salida adecuada
  3. Publicar diseños del interfaz de referencia a desarrolladores externos simplificando el desarrollo de sus servicios
Se recomienda que sea, y típicamente es, un interfaz XDIME 2. En el contexto de esta guía se asume que el interfaz es XDIME 2. Sin embargo, en ocasiones podrían utilizarse otras interfaces independientes del dispositivo. Las especificaciones técnicas deben describir el uso adecuado de XDIME 2 para que los proveedores de aplicaciones XDIME 2 no tengan ninguna duda sobre como generar su storyboard de acuerdo con la guía de estilo. Estas especificaciones incluirían:
  1. La nombres de las políticas XDIME (Layouts y Themes)
  2. Nombres de clase
  3. Todo el código XDIME 2 para conseguir todos los componentes de la guía de estilo

Estructura del Sitio

  • La estructura del sitio debe ser ancha y poco profunda.
  • Idealmente, los usuarios deberían poder acceder al contenido en menos de 3 clics.
  • Se deben evitar las páginas de inicio.
  • Los nombres de categorías no deben ser ambiguos - cuando se navega por un sitio, los usuarios no deben tener ninguna confusión entre las distintas secciones del sitio.

Formato de Página

Las estructuras de página se deben mantener lo más simple posible. Algunos dispositivos de gama alta soportan construcciones html más complejas tales como tablas, pero deben ser utilizadas con precaución sólo para determinados dispositivos. Las estructuras complejas pueden crear una navegación confusa. La página se puede dividir en tres secciones:
  • Encabezamiento
  • Cuerpo
  • Pie
Encabezamiento
  • Todas las páginas deben tener un encabezamiento.
  • El encabezamiento debe contener un título corto para el contenido de la página. Normalmente suele coincidir con el texto utilizado para enlazar la página.
  • El uso de imágenes (banners) en el encabezamiento es generalmente aceptable.
Cuerpo: Texto
  • Negrita, cursiva y el escalado de fuentes no son soportados por los dispositivos de gama baja.
  • El uso de mayúsculas puede ser utilizado para proporcionar énfasis, pero debe usarse con moderación.
  • Eliminar espacios en blanco ya que éstos pueden confundir al usuario. Puede hacerles creer que se ha llegado (prematuramente) al final de la página.
  • El uso de diferentes fuentes debe ser utilizado con precaución. Sólo los dispositivos de gama alta soportan distintas fuentes.
  • En general, trata de alinear los títulos y el texto a la izquierda para que cuando la página se presente en una pantalla muy estrecha sólo se trunque el fondo, no el texto.
Cuerpo: Enlaces
  • Pon los enlaces más populares en la parte superior de la página.
  • Limita la longitud del texto del enlace para permitir que se vea en todos los dispositivos. Los enlaces nunca deben sobrepasar dos líneas.
  • Se puede asociar iconos con los enlaces. Los iconos deben ser pequeños y discretos y deben utilizarse para reforzar los valores de marca del sitio.
  • Utiliza los enlaces para llevar a tus usuarios a contenido en el mismo contexto. Por ejemplo, si una historia está relacionada con un determinado equipo deportivo, añade un enlace a un salvapantallas de ese equipo.
  • Utiliza atajos de teclado mediante la asignación de teclas a enlaces y etiquétalos convenientemente con su número correspondiente.
Cuerpo: Gráficos
  • Utiliza imágenes para:
    • Proporcionar un anticipo de un contenido descargable
    • Ampliar información sobre el tema principal del contenido
  • Los gráficos deben ser relevantes para el contenido. Imágenes no relacionadas con el contenido tan sólo añaden peso a la página y degradan la experiencia de usuario.
  • Algunos dispositivos permiten al usuario bloquear gráficos para ahorrar ancho de banda - es importante comprobar que tu sitio queda bien cuando no se ven las imágenes.
Pie de Página
  • Todas las páginas deben incluir un pie con fines de facilitar la navegación. Éste debe contener enlaces a:
    • La última página visitada
    • La página principal de la sección o categoría a la que pertenece la página
    • Página principal del sitio
  • Evita el uso de gráficos en el pie de página, aunque los iconos asociados a enlaces suele ser aceptable para los dispositivos de gama alta.

Componentes de la Guía de Estilo

Trata de descomponer la guía de estilo en una lista de componentes de estilo. Estos componentes constituyen los elementos básicos para construir tu sitio. Una típica lista de componentes de estilo incluiría:
  1. Título de Página
  2. Encabezamiento - ¿Depende el encabezamiento del contexto de página?
  3. Barra de navegación
  4. Secuencia de navegación (breadcrumbs)
  5. Promoción (teaser)
  6. Artículo
  7. Lista
    1. Menus
    2. Resultados de búsqueda
    3. Enlaces
    4. Promociones (teaser list)
  8. Componentes de formulario - los formularios a menudo se pueden descomponer en varios sub-componentes
    1. Formulario de búsqueda
  9. Pie de página - ¿Depende el pie de página del contexto?
Se deben especificar el conjunto de políticas XDIME (Layouts y Themes) para cada componente de estilo.

Cada uno de estos componentes pueden también tener variaciones. Determina si se pueden capturar estas variaciones mediante una implementación genérica. Por ejemplo, si en ocasiones un elemento promocional incluye una pequeña foto a la izquierda del texto, mientras que en otras incluye una foto grande encima del texto, o utiliza un color de fondo diferente. Todos ellos corresponden al mismo concepto fundamental y por ello deben ser el mismo componente de estilo - las variaciones dependientes del dispositivo o de la propia aplicación se pueden configurar en la librería de políticas XDIME.

Intenta minimizar el número de componentes de la guía de estilo y reutiliza tanto como te sea posible. Por ejemplo, si dos componentes fueran idénticos excepto en que uno contienen un elemento adicional, entonces se deberían tratar como idénticos - cuando el elemento adicional no se necesite simplemente no aparecerá.

Guías Visuales (Wireframes)

El primer paso en el diseño de un sitio web consiste en identificar los componentes de la guía de estilo descritos en el apartado anterior y producir una guía visual para el sitio.

El ejemplo (abajo) muestra la página principal de un sitio y su apariencia en un PC y en un móvil.



Si nos fijamos en el diseño para PC, podemos comprobar que consiste realmente en un encabezamiento y un cuerpo con un formato a dos columnas. Cada una de estas áreas también contienen su propia estructura, por ejemplo la columna 1 ocupa el 30% del ancho de página e incluye un conjunto de menús organizados en bloques. La columna 2 a su vez, ocupa el 70% del ancho de la página y tiene una estructura algo más compleja con 4 filas, donde las tres primeras se dividen a su vez en dos columnas, cada una de las cuales ocupa el 50% del contenedor.



Si te fijas bien, hay un conjunto adicional de enlaces en la parte superior de la página en el formato PC que incluye enlaces a "Tools", "Login", "Register", "About" y "Help". En el diseño para móviles, éstos aparecen en la zona del pie de página. Los elementos deben aparecer en su propio Formato (Layout), el cual se incluye en el encabezamiento en el caso de PCs y en el pie de página para móviles. Las directivas "Contenedor destino" (target container) y "Formato destino" (target layout) en los Temas (Themes) se pueden utilizar para controlar esto en diferentes familias de dispositivos.


Una vez que se haya completado el análisis de la guía visual, los Formatos (Layouts) pertinentes pueden ser creados.

Los nombres de los Formatos y de los contenedores (panes) que incluye deben reflejar su propósito. Siguiendo con el ejemplo, debería existir un Formato denominado "encabezamiento" que incluyera tres contenedores llamados "logo", banner" y "búsqueda". Notar que en este ejemplo, el formato PC no incluye el contenedor "banner" -- en este caso el banner (una imagen promocional de un juego) sólo se muestra en el encabezamiento para móviles.

Utiliza Regiones dentro de los Formatos para facilitar la reutilización y la anidación de Formatos dentro de Formatos. Esta práctica minimiza el número de Formatos únicos que requieren ser creados y mantenidos.

Utiliza también fragmentación para dividir grandes páginas de contenido en páginas más pequeñas. Muchos dispositivos tienen limitaciones en cuanto al tamaño máximo de página que pueden manejar y el desplazamiento a través de pantallas llenas de contenido puede resultar bastante molesto para el usuario.

Por último, intenta evitar los desplazamientos horizontales. Si es absolutamente necesario --por ejemplo para presentar una tabla de datos muy ancha-- entonces asegúrate de que la página no requiere también desplazamiento vertical. Mientras que el desplazamiento vertical es generalmente aceptable para los usuarios, el desplazamiento en dos direcciones es extremadamente confuso y dificulta la visión.

Temas y Estilos

Una vez que se han creado las guías visuales, se debe proceder al análisis de los componentes de la guía de estilo. Éste debe identificar las diferentes clases de estilo necesarias para situar el código XDIME 2 en los Formatos y Contenedores pertinentes para conseguir el efecto deseado.

Exactamente igual que con las hojas de estilo CSS, se utilizan clases de estilo diferentes para controlar distintos aspectos de diseño de la guía de estilo deseada. Por ejemplo, un estilo puede fijar el color de fondo de una página, o bien definir la fuente de texto estándar o cómo se muestran los enlaces.

En XDIME 2, los Temas y las clases de estilo se utilizan también para situar contenido en contenedores específicos y para especificar qué Formatos se anidan en Regiones.

El elemento <div> se utiliza primordialmente para hacer referencia a una clase concreta, p.ej <div class="logo">

Uso de Gráficos

Esta sección describe algunas directrices para el uso de gráficos en contenido para móviles.

Banners

En el caso de las imágenes de marca, p.ej. un banner en la parte superior de una página, existen dos opciones:
  1. Una imágen maesta que luegos se transcodifica
  2. Múltiples imágenes estáticas que ofrezcan una buena cobertura de dispositivos
La primera opción se utiliza generalmente para fotos no realicionadas con la imagen marca.

La segunda opción es normalmente el planteamiento preferido para los gráficos de marca, ya que garantiza la calidad de la imagen en el dispositivo. En tiempo de ejecución se selecciona la imagen que mejor se adapta al dispositivo.

Este planteamiento también permite el uso de imágenes con distinta relación de aspecto, lo cual hace posible un mejor uso de la pantalla disponible, sin comprometer la calidad de los logos o la legibilidad del texto incluido en las imagen.

Otra técnica. que se emplea típicamente junto con la opción 2, consiste en hacer que la imagen del banner se difumine de izquierda a derecha. Si el dispositivo muestra un pequeño fondo a la derecha de la imagen aparecerá totalmente integrado.

Para asegurarnos una buena cobertura de dispositivos se necesitan los siguientes requisitos para las imágenes de banner:
  • Ficheros PNG, GIF y JPG de anchuras (en píxeles) 88, 96, 101,110, 118, 121, 123, 128, 138, 148, 160, 166, 168, 174, 178, 193, 198, 218, 228, 240, 320, 400 y 500.
  • Mantén el tamaño tan pequeño como sea posible, idealmente deben ser menores a 1KB.
  • Mantén la altura de las imágenes tan pequeña como sea posible para evitar ocupar demasiado espacio físico de la pantalla del móvil.
  • Siempre que sea posible proporciona algunas versiones WBMP que sean menores a 100 píxeles. Esto es opcional pero recomendable para soportar los dispositivos de gama más baja.
  • Para imágenes GIF y PNG mantén el espacio de colores tan bajo como sea posible para ahorrar peso.
  • Nunca utilices transparencias con imágnes PNG --no está soportado en la mayoría de dispositivos.
  • Asegurate de que los colores y las imagenes tengan un elevado contraste -- los móviles se utilizan a menudo en entornos de mucha claridad donde las páginas de alto contrate son más fáciles de leer.
Iconos

Para los iconos mostrados junto a los elementos de una lista en un índice se recomiendan las siguientes especificaciones:
  • Archivos GIF transparentes de 13x13 y 20x20 pixeles
  • Archivo PNG transparente de 13x13 y 20x20 píxeles

Dispositivos

Familias

Para crear los Formatos y Temas necesarios debes descomponer el universo de dispostivos objetivo en familias, donde cada familia cubre un conjunto de dispositivos similares. Ejemplos de familias pueden ser:
  • PDAs
  • Gama alta - buena pantalla en color y un elevado grado de conformidad con el estándar CSS
  • Gama intermedia - pantalla en color pero con un ancho limitado o con un grado de conformidad CSS bajo
  • Gama baja - pantalla monocroma o muy bajo grado de conformidad CSS
  • Pantalla ancha
  • PCs
La siguiente tabla es un buen punto de arranque para definir los grupos necesarios:

Grupo1234567
ColorB/NColorColorColorColorColorColor
Tamaño
pantalla
96x65
101x80
120x120
96x65
101x80
120x120
120x160
128x96
128x128
128x160
130x130
128x96
128x128
128x160
130x130
132x176
176x208
176x220
240x160
240x320
640x200

800x600
(y mayor)
CSSNoNoNo/pobreBuenoBuenoPobreBueno

Las agrupaciones definidas más arriba pueden ser refinadas de acuerdo a las necesidades concretas de la guía de estilo.

Por ejemplo, la guía de estilo puede especificar que la experiencia en los dispositivos con capacidad de reproducir música o vídeo deberá distinguirse de la experiencia en el resto de dispositivos.

Notar que esta división se utiliza para determinar el número de Formatos y Temas necesarios y no para definir como se trata cada dispositivo de acuerdo a sus capacidades de contenido. Pueden existir dos dispositivos dentro del grupo 4 en el que uno soporta vídeo y el otro no --el diseño general será el mismo pero uno verá menús y contenido relacionado con el vídeo mientras que el otro no.

Dispositivos Referencia

Se deben definir uno o dos dispositivos referencia para cada familia. Un dispositivo referencia es aquel que es crítico para el éxito del proyecto y además captura la esencia de la familia a la que pertenece. El conjunto de dispositivos referencia debe cubrir el espectro completo de los dispositivos objetivo y a la vez permitir un control de calidad enfocado.

Dispositivos Objetivo

Los dispositivos objetivo son todos aquellos a los cuales hay que llegar. Volantis está diseñado para adaptar contenido para cualquier dispositivo (tanto si está en este conjunto como si no). El fin de esta lista es asegurarse que entendemos correctamente nuestra audiencia y ofrecer una experiencia de gran calidad en estos dispositivos. No tiene mucho sentido probar en un teléfono japonés si la solución sólo está destinada a la audiencia europea. Esta lista de dispositivos objetivo puede crecer en fases posteriores a la implementación al tiempo que el proyecto se extiende a otras regiones o nuevos dispositivos salen al mercado.

Librería de Políticas de Diseño

El resultado final del análisi completo de la guía de estilo debe ser una Librería de Políticas de Diseño la cual documenta:
  • Todas las clases de estilo que pueden ser utilizadas dentro del código XDIME 2
  • Qué estilo se aplica por cada clase de estilo
  • Qué Formatos y Contenedores se referencian por cada clase de estilo
Se recomienda que las distintas políticas se documenten para servir como una guía rápida de referencia para los desarrolladores XDIME.

Reglas de estilo:

Categoría dispositivo
Selector estiloTipoPropiedadValor
MasterBodyBackgroundColor#ccc



Image/welcome/stars_bg.mimg



Repeatrepeat


FontFamilyArial



Sizesmall






.supersmallFontFamilyArial


FontSizex-small

Reglas de estilo asociadas a Formatos:

Dispositivo
Selector estiloContenedor Destino
TipoFormato Destino
Master.logologoPane

.bannerbannerPane

.searchsearchPane

#tools-menutools-regionRegion tools

Nota: la anotación estándar CSS se utiliza para definir los selectores de estilo p.ej.

PrefijoSeleccionado porDescripción
ninguno
elementoEl estilo se aplica a todos los elementos coincidentes
.claseEl estilo sólo se aplica a los elementos cuyo atributo "clase" coincide con el especificado
#idEl estilo sólo se aplica a los elementos cuyo atributo "id" coincide con el especificado

Etiquetas:


Hay 0 comentario(s) a esta entrada:


Búsquedas


Llévatelo al Móvil

QR Code temporalmente no disponible