Archivo

Archive for the ‘UX’ Category

Pies de página ajustables multi pantalla

noviembre 12, 2010 2 comentarios

Hace unos días, navegando vi una tecnica para ajustar el pie de página en diferentes pantallas, busque la liga pero no la encontré de todas maneras aqui la comparto porque es un buen tip para hacer pies de página que se ajusten a cualquier tipo de pantalla usando css,

Se crea un documento html con un div que va a ser el pie de la pagina y se le asigna la clase pie:

<div class=”pie”>
<p>
<a href=”#”>Liga 1</a>&nbsp;
<a href=”#”>Liga 2</a>&nbsp;
<a href=”#”>Liga 3</a>&nbsp;
<a href=”#”>Liga 4</a>
</p>
</div>

La clase css pie para que se ajuste a cualquier pantalla es:

.pie {

width:100%;
height:40px;
left:0px;
position:absolute;
top:100%;
margin-top:-40px;

}

Lo interesante son las ultimas 2 líneas  al establecer el top al 100%, el div se ajustará al final del documento desapareciendo, y al ajustar el margen superior negativo del mismo alto que el div se ajustrará siempre al final del documento.

Técnicas y estrategias para el diseño de sitios multi-dispositivo. (moviles)

noviembre 8, 2010 2 comentarios

Hoy en día cuando se desarrolla una aplicación web, se debe tener en cuenta que puede ser visitada desde diferentes medios.

Al diseñar un sitio multi-dispositivo, se debe considerar cuales funciones y características se van a mostrar en cada tipo de dispositivo, suponiendo que estos varían, se va a requerir alterar el formato emitido por el servidor.

Debido a que existen numerosos dispositivos y dentro de estos existen numerosas versiones (versión del OS, navegador, html, css, js), se generan numerosas combinaciones que son un dolor de cabeza para los desarrolladores Web. Hoy en día, de las principales tareas en el desarrollo de un sitio web son la detección de las capacidades del medio y la detección del medio.

La detección de medio permite la identificación  de las propiedades y características de un dispositivo, con el propósito de determinar el mejor contenido, diseño, markup o aplicación a servir hacia el dispositivo, permite a los desarrolladores identificar funciones y características como tamaño de pantalla, tipo de navegador (o versión), si soporta video y audio, nivel de soporte de CSS, HTML y JS.

Identificación de medio por Bases de datos de dispositivos.

Cuando se desarrolla sitios, tarde o temprano se necesita saber que dispositivo está usando el usuario, es inevitable, todos los dispositivos son diferentes y para ofrecer una gran experiencia móvil se necesitan conocer las capacidades específicas de cada dispositivo. Entre más refinada se necesite la segmentación de un sitio web, se necesitará hacer algo más que checar las palabras clave en las cabeceras HTTP.

Actualmente, la mejor forma para detección de dispositivos es por medio de bases de datos de dispositivos,  como DeviceAtlas o Wurfl.

Estas bases de datos pueden ayudar a conocer todas las propiedades generales del dispositivo (así como proveer ajustes más finos dentro de los grupos que se definan con capacidades específicas). Estas base de datos tienen grandes conjuntos de datos con los tamaños de pantalla.

WURFL

WURFL está basado en el concepto de familias de dispositivos. Todos los dispositivos son descendientes de un dispositivo genérico, pero pueden también descender de familias más especializadas, este mecanismo llamado ‘fall_back’, permite a los desarrolladores derivar las capacidades de un teléfono buscando las capacidades de su familia, a menos que una cierta característica sea específicamente diferente para ese teléfono. Ver post anterior sobre WURFL.

Device atlas.

Device atlas es una solución para detección de dispositivos y contiene datos de más de 6,000 dispositivos. Se utiliza por medio de un API que provee device atlas y soporta PHP, Java, .NET, Ruby y Python. Para más información visitar: http://deviceatlas.com/get-started

Identificación de propiedades de dispositivo con  media queries.

CSS-3 mejora el soporte para los CSS que son dependientes al medio, y permite seleccionar las hojas de estilo de manera más precisa utilizando los media queries.

Los media queries  se usan del lado del cliente, y son muy útiles porque  permiten que el contenido se adapte a un rango específico de dispositivos de salida sin necesidad de tener que cambiar el contenido en sí. Se pueden usar para ajustar el diseño y el estilo de una página una vez que se carga en el dispositivo.

Un media query consiste de un tipo de medio y cero o más expresiones que comprueban  las condiciones de las características particulares del medio como ancho, alto o color. Las expresiones lógicas resuelven verdaderas o falsas. Por ejemplo

<link rel=”stylesheet” media=”screen and (max-device-width: 360px)” href=”ejemplo.css” />

Esto será verdadero para tipos de medio que sean screen y que tengan como ancho máximo 360px

El resultado de la expresión es verdadero si el tipo de medio especificado en el media query cumple con el tipo de dispositivo en donde el documento está siendo visto y todas las expresiones del media query son verdaderas.

Cuando el media query es verdadero, el CSS correspondiente es aplicado siguiendo las reglas de la hoja de estilo.

Se pueden crear consultas complejas usando operadores lógicos (not, and, only), así como combinar varios media queries en una lista separada por comas, si una consulta de la lista es verdadera entonces la hoja de estilos asociada es aplicada, es el equivalente al operador “or”.

El operador not, niega el resultado de la consulta “all and (not color)” es verdadera para dispositivos monocromáticos sin importar el tipo de medio.

El operador only, esconderá las hojas de estilo para navegadores antiguos que no soporten media queries.

<link rel=”stylesheet” media=”only screen and (color)” href=”ejemplo.css” />
Esto será verdadero para tipos de medio screen y que sean de color.

Los media queries no son sensibles a las mayúsculas y los paréntesis son requeridos para las expresiones.

Un problema que tienen es que su uso es vago en dispositivos de nivel medio / bajo, por lo que se debe de utilizar Progressive enhancement (seguir leyendo) de una manera que se degrade elegantemente el sitio.

Otro problema es que los media queries solo permiten manipular el estilo y tienen poca influencia sobre lo que se descargue al dispositivo, no pueden manipular el html por lo que se debe confiar en las reglas de CSS para por ejemplo cambiar el tamaño de las imágenes para que se adapten  al dispositivo.

Estrategias para servir contenido a diferentes dispositivos.

Existen diferentes técnicas para servir contenido en pantalla, además dependiendo del medio, existen API’s que facilitan estas acciones.

Progressive enhancement (mejora progresiva).

Una técnica muy común es desarrollar primero para navegadores antiguos y móviles (con menos capacidades que los modernos o de escritorio) y usar Progressive enhancement (mejora progresiva) para servir el contenido que soporte el dispositivo. Se pueden usar media queries y javascript para lograrlo. Una buena explicación de  Progressive enhancement se puede leer en la siguiente liga. http://www.alistapart.com/articles/understandingprogressiveenhancement/

Redirección de sitio.

Otra técnica es la redirección a otro dominio (o subdominio), dependiendo del medio que se detecte se reenvía a otro URL especifico para el dispositivo. Generalmente se usa por medio de la detección del agente de usuario o alguna librería de dispositivos del lado del servidor.

Plantillas.

Otra técnica es el uso de plantillas para familias de dispositivos, se agrupan capacidades de dispositivos en familias, dependiendo de las capacidades del medio que se detecten, se identifica la familia a la que corresponde y se muestra la plantilla. Se puede utilizar media queries, javascript o alguna librería de dispositivos del lado del servidor.

Algoritmos.

Es una técnica que usa algoritmos para cambiar el contenido van adaptando el contenido de manera apropiada para cada dispositivo. Generalmente se usa javascript.

Técnicas para cuidar el  rendimiento en la detección de dispositivos.

Es importante considerar el rendimiento en las aplicaciones Web. Detectar el dispositivo o las capacidades del medio en cada página que se visite de un sitio web no se considera como buena práctica porque afecta el rendimiento de la aplicación al estar realizando la misma tarea repetitivamente, para ayudar a mejorar el rendimiento, se realiza la detección en la primer visita y en las demás accesos solo se consulta la información que se guardó.  Algunas técnicas son:

Cookies de propiedades.

Para los dispositivos que aceptan cookies, una buena técnica es crear una cookie por medio de javascript, en esta cookie se almacenan las propiedades del medio de donde se está viendo la aplicación web, como por ejemplo ancho y alto de pantalla, y además se puede almacenar sus capacidades como por ejemplo si acepta xhr, canvas, flash ó localización.
La cookie se consulta por medio de la aplicación para proveer contenido adecuado al dispositivo,  y adaptarlo. Adicionalmente se puede combinar esta información con alguna base de datos para conocer características adicionales del dispositivo en caso de que sea necesario y formatear el contenido antes de enviarlo al dispositivo.

Los pasos generales son:

  1. Crear un objeto JS donde se guarda las propiedades y características que se necesitan en la aplicación.
  2. Cifrar el objeto en una cadena JSON y guardarlo en una cookie.
  3. Para cargar los datos de la cookie se descifra la cadena JSON de nuevo en un objeto JS.

Esta técnica funciona muy bien cuando se guarda poca información.
Un problema puede ser que si el navegador de donde se consulta no acepta cookies o las tiene desactivadas no funcionará así como tampoco si tienen javascript desactivado. Esto debido a que esta técnica se basa completamente en cookies y en javascript. Una solución a este problema es combinarlo con media queries o detección del lado del servidor, para conocer si acepta javascript y cookies.

Frames / iFrames.

Esta técnica se utiliza creando dos Frames, un Frame informativo, y otro Frame que se utiliza como navegación, este frame es el que se actualiza y en donde se generan todas las peticiones. Las propiedades y características del medio se guardan en un objeto javascript en el frame informativo. Esta técnica funciona también con iframes.
Un problema de este acercamiento es que el uso de frames no es una buena práctica en algunos dispositivos, además que no son soportados (o están desactivados) por algunos navegadores.

Web Storage (Almacenamiento Web).

Para navegadores que acepten HTML5 existe una característica que se llama Web Storage que es una especificación que define una API para el almacenamiento de datos (clave-valor) en los clientes Web. Este acercamiento es muy similar al de Cookies de propiedades pero usando un objeto nativo del navegador llamado localStorage.
Una ventaja es que acepta más tamaño de almacenamiento que las cookies. La desventaja es que solo se puede usar en navegadores modernos.

Recomendaciones para el desarrollo de sitios multi-dispositivos.

La meta de una aplicación multi-dispositivos o multi-pantalla no es necesariamente que se vea idéntica en cada dispositivo, más bien que se adapte a cualquier dispositivo.

Pensando en términos de  multi-dispositivo, se debe tomar en cuenta la experiencia de usuario del dispositivo (touch, track ball, track pad, teclado, etc) y asegurarse de que los elementos clickeables sean adecuados a la forma de navegación (los botones en ambientes touch sean suficientemente grandes para pulsarse).

Pensando en términos de multi-pantalla, se debe ajustar dinámicamente a la resolución y PPI del dispositivo en el cual se está viendo, desplegando más información en pantallas grandes, y removiendo o encogiendo elementos en pantallas pequeñas.

Para que las aplicaciones funcionen en diferentes pantallas, se deben diseñar de tal manera que se dibujen a sí mismas en el momento adecuado y con las restricciones adecuadas.

Siempre se debe de programar con código bien estructurado.

Para que se cargue rápido la aplicación se debe comprimir el contenido cuando y donde sea posible.

Se debe evitar el envío de datos innecesarios.

Al agrupar dispositivos por tamaño de pantalla, se debe considerar el markup que soporta, capacidades, método de interacción y más, todo depende del tipo de sitio.

Mantener un balance entre la accesibilidad, las capacidades, experiencia de usuario, usabilidad, funcionalidad, rendimiento y ancho de banda.

Interfaces de Usuario.

Las interfaces de usuario son muy importantes porque es el medio por el cual se comunican el usuario y la aplicación o dispositivo Jef Raskin comenta “Respecto a lo que concierne al cliente, la interface es el producto”, El usuario ve e interactúa con la interfaz de usuario.

Pero, ¿Que propiedades o características debe de tener una interfaz de usuario?, según [the smashing book] toda interfaz de usuario debe de tener 8 características:

1. Ser Clara. La interfaz evita la ambigüedad haciendo todo claro a través de lenguaje, flujo, jerarquía y metáforas para elementos visuales, las interfaces claras no necesitan manuales y además ayudan a los usuarios a que tengan menos errores mientras las usan.

2. Ser Concisa. Es fácil hacer una interfaz clara etiquetando todo, pero se corre el peligro de poner muchos elementos en la pantalla al mismo tiempo, si hay muchas cosas en la pantalla, es difícil encontrar lo que se busca y la interfaz se vuelve tediosa de usar, el reto real en hacer una gran interfaz es hacerla clara y concisa al mismo tiempo.

3. Ser Familiar. Aunque alguien use una interfaz por primera vez, ciertos elementos pueden ser familiares, se pueden usar metáforas de la vida real para comunicar un significado, por ejemplo, los tabs son comúnmente usados para navegación en los sitios web y en las aplicaciones. Las personas los reconocen como elementos de navegación porque la metáfora del folder es familiar a ellos.

4. Tener buen grado de reacción. Esto significa dos cosas: primero velocidad de respuesta, una buena interfaz no se debe de sentir lenta o pausada, segundo la interfaz debe proporcionar buen nivel de retroalimentación al usuario respecto a lo que está pasando y si el input del usuario ha sido procesado exitosamente.

5. Ser Consistente. Mantener la interfaz consistente a través de las aplicaciones es importante porque permite a los usuarios reconocer patrones. Una vez que los usuarios aprenden como trabajan algunas partes de la interfaz, ellos pueden usar este conocimiento en nuevas áreas porque ellos ya conocen el funcionamiento.

6. Ser Estética. No se necesita hacer una interfaz atractiva para que realice su trabajo, pero haciendo algo que se vea bien, hará que el tiempo que los usuarios gastan usando la aplicación sea más placentero, es bueno tener usuarios felices.

7. Ser Eficiente. Tiempo es dinero y una gran interfaz debe hacer al usuario más productivo por medio de atajos y buen diseño, después de todo este es uno de los principales beneficios de la tecnología, permitir desarrollar tareas con menos tiempo y esfuerzo haciendo gran parte del trabajo por el usuario.

8. Ser Tolerante a fallas. Todos cometemos errores, y él como la interfaz los maneja será un test para la calidad. ¿Es fácil deshacer acciones?, ¿es fácil recuperar archivos borrados? una buena interfaz no debe castigar a los usuarios por sus errores, debe proveer formas para remediarlos.

Diseñar una interfaz que incorpore todas estas características es complicado ya que trabajar en una característica a veces afecta a otra, entre más elementos se agreguen a la interfaz, mas cosas los usuarios tendrán que procesar,  por otro lado no proveer suficiente ayuda y soporte puede hacer que ciertas funciones sean ambiguas, crear algo que sea simple, elegante y al mismo tiempo claro y consistente es la principal  meta para el diseñador de interfaz de usuario.

Existen muchos recursos en línea a continuación listo herramientas, videos y plantillas que pueden ayudar a realizar los prototipos de las interfaces.

Fuentes:

the smashing book

http://speckyboy.com/

A %d blogueros les gusta esto: