:::: MENU ::::

Áreas de alcance en dispositivos móviles y tablets

Así como en la web existen los ‘heatmaps’ o mapas de calor (ejemplos de estudio con Eye Tracking), para móviles y tablets también hay áreas calientes donde en estas zonas es mas fácil acceder y por ende hay una mayor interacción dependiendo de la posición, el uso, tamaño del dispositivo y lo mas importante el contexto en que los usuarios lo usan.

Gran parte de la información de este post (móviles) se ha extraído de un estudio realizado por Steven Hoober (@shoobe01) en donde investiga la forma en que la gente interactúa con sus dispositivos móviles en donde se observaron a 1.333 personas, durante 2 meses.

En dispositivos móviles

En las figuras a continuación se ilustran las áreas y alcances de interacción (dedos<->pantalla), cada color indica el áreas que el usuario puede alcanzar con el dedo para lograr la interacción con la pantalla. verde indica que puede llegar fácilmente; amarilla indica que requiere un mínimo esfuerzo, y rojo es un área que requiere cambiar el modo en que están sosteniendo un dispositivo (imagen 1 y 2 una mano). Estas áreas son aproximadas y varían para los distintos tipos de usuarios, la forma en que wl usuario está sosteniendo el teléfono y el tamaño de este.

Una mano

El 49% de los usuarios observados utilizaban sus móvil con una sola mano.

HoldPhones_Figure-1 copia

Para el caso de los zurdos estos hacen lo contrario.

Dos manos

Sosteniendo

El 36% de los usuarios observados utilizan la posición Cradling (acunado) de dos formas distintas: con el pulgar o indice.

HoldPhones_Figure-3

 Usando

El 15% de los usuarios observados de teléfonos móviles usaban sus dispositivos con las dos manos y en dos posiciones.

HoldPhones_Figure-4

Quienes usan el dispositivo de forma horizontal en su mayoría son para hacer ingreso de datos (ej: chat  y email) y jugar.

 

En tablets

En primer lugar, cuando sostenemos un Tablet lo hacemos sujetando cerca de los extremos superiores, y por ende los pulgares se ubican en el tercio superior de la pantalla, cerca de las esquinas. En segundo lugar, las tablets de mas pulgadas o más grandes hacen que sea difícil de llegar al centro. Entonces el control primario de la aplicación (menús, accesos, opciones, acciones, filtros u similares) debiese estar en estas zonas. En tercer lugar, considerar que hay posiciones y formas de interactuar con un tablet o móvil que son especificas al realizar una tarea.

Instapaper y Twitter para iPad son un buen ejemplo de esto:

ipad-instapaper

ipad-twitter

 

 

Fuentes y mucha más información en:

This Is Why the iPhone’s Screen Will Always Be 3.5 Inches

Diseñando sitios amigables para el iPhone

10 recomendaciones para diseñar una web para un iPad

Designing For Touch

How Do Users Really Hold Mobile Devices? 


Uso de grillas en Diseño Web

grillas everywhere

Muchas cosas usan grillas, no las vemos, pero están ahí, sosteniendo el diseño, estas son usadas por diseñadores de interiores, industriales, urbanistas, arquitectos, diseñadores de impresión, web, moda, etc… Las grillas en el diseño web proporcionan organización visual, continuidad, relación de piezas entre si, estética, control del proyecto y comodidad para el usuario. Por otra parte, también nos a ayuda en la producción ya que no se comienza de cero, reduciendo tiempos en el desarrollo. Existen frameworks de grillas como Bootstrap960 Grid System y Blueprint.

Un acercamiento

Uso de grillas en Diseño Web

Márgenes
Los márgenes definen el límite del contenido del sitio, estos pueden no ser iguales en todo el sitio (pero normalmente son consistentes entre las páginas).

Rejas
Las rejas dividen el espacio interior de la página en partes uniformes, es el espacio en “blanco” entre las grillas. Estás pueden ser organizadas de forma horizontal, vertical o ambas.

Grillas
Este es el lugar donde se coloca el contenido ya sean textos y/o imágenes. Estos determinan la ubicación y el tamaño, pero debemos saber que si tenemos una grafica que se sale de una grilla, no significa que no se pueda hacer (mas adelante lo menciono).

¿Si diseño mis sitios con grillas, se va a ver igual? que FOME.

¡No! esta es una pregunta que tenemos por desconocimiento de esta técnica, en este layout tenemos las grillas, esto es sólo una parte del diseño en general, estas no son para rellenar con algo, sino para ayudar a la organización de los espacios. Si tenemos esta parte resuelta tendremos tiempo para centrarnos en otras cosas como el color, texturas, tipografías, etc.. (Ver ejemplo: cada diseño tiene una estructura de grillas similar (3 columnas), donde la comunicación y el diseño visual son distintos.

flourish

knowledgepharmacy

Cabrillo Coastal

Salirse de la grilla.

Otro ejemplo para demostrar lo mencionado anteriormente (salirse de la grilla, siempre y cuando la comunicación lo amerite).

Highrise

La página de tarifas de Highrise es un buen ejemplo. El plan “Plus” es el plan más popular y conveniente, por lo que para llamar la atención le han dado más importancia aumentándolo de tamaño con respecto a los otros.

Consideraciones

Una vez que tengamos lista nuestras grillas, nosotros como diseñadores somos quienes tomamos la decisión de cómo salir de esta cuando esto lo amerite. Esto en ningún caso significa que estamos usando malas prácticas. Los elementos pueden cruzar desde una columna a otra columna, hasta las podemos extender del inicio al final de la grillas.  ”Personalmente creo que esta técnica no es necesaria para proyectos chicos.”

 

Relacionado:

Descargar grilla para IPhone 3/4/4S Grid PSD (PSD)


Flujo de trabajo para sitios responsivos

Hace un par de meses surfeando por la web di con el blog Viljami Salminen, un diseñador web y desarrollador de Finlandia, en donde en uno de sus artículos nos explica como evoluciona y transforma su antigua metodología de trabajo utilizada para sitios responsivos. El objetivo de esta es adelantarse a posibles fallas o complicaciones que pudiese tener un desarrollo no probado de forma real en la marcha, y hace una comparación de la actual metodología con la anterior llamada flujo de cascada.

printing_machineoldway

Metodología de cascada

Este es el modelo antiguo Viljami menciona que no tiene mucho sentido cuando se utiliza con un diseño responsivo. E incluso afirma que tampoco era muy óptimo para llevar a cabo otros desarrollos web.

 

El nuevo proceso de trabajo

Este proceso es el que utilizamos ahora al diseñar un sitio responsivo (el cual se ilustra mas abajo). Se ha utilizado el artículo de Mark Boulton sobre el flujo de trabajo y la presentación de Stephen Hay como fuentes. El nuevo proceso es aún más ágil que el modelo de cascada y a continuación se explica este con detalle.

Resumen: Comienza desde el contenido hacia fuera. Después de que los primeros borradores de contenido están hechos, se convierten en prototipos HTML, se prueban en un navegador móvil y se experimenta cómo funciona el orden de los contenidos. Luego se hacen los bocetos y diseño visual, antes y después de los prototipos. Después de los primeros bocetos se pasa al prototipo HTML y se empieza a añadir un poco de CSS para ver cómo funciona realmente el desarrollo. Todo el proceso ocurre en iteraciones que suelen darse como algo parecido a esto: dibujo → prototipo → diseño → prueba → discutir hasta que funcione a la perfección. El orden puede no ser tan lineal, pero se requiere simplificar el flujo del diagrama.

workflow

Investigación (Discover)

La primera etapa se trata de recopilar toda la información para realizar el trabajo de investigación. El objetivo es obtener una mejor comprensión del negocio, observar e investigar a la competencia, los objetivos de negocios y de los usuarios, etc…

En esta etapa es donde hacemos preguntas como: “¿Por qué la gente visitara el sitio?”, “¿Cuál es el objetivo principal que se está tratando de lograr?”,”¿Quiénes son sus principales competidores?”… y así sucesivamente. Puedes obtener ideas sobre qué preguntar navegando a través de estudios de diseño:

Planificación (Plan)

La planificación se basa en el conocimiento que se adquiere durante la primera etapa. En esta etapa, por lo general se comienza a refinar el concepto y pasamos a trabajar en los objetivos de usuario y la arquitectura de la información. Se trabaja en el establecimiento y elementos de contenido, que se clasifican según su nivel de importancia. A partir de esto podremos hacer wireframe en HTML de las vistas.

Diseño del texto (Text design)

“Diseño de texto” significa que aquí creamos los contenidos del sitio. Esta es una de las etapas más importantes en todo el proceso, sin embargo es probablemente también el paso más subestimado. En mi opinión, no tiene mucho sentido avanzar si no tenemos el contenido a mano. El contenido es la motivación por la que los usuarios van al sitio y todo los procesos deben partir con esto.

La mayoría de las veces hacemos este paso en HTML sin estilos, ya que entonces se puede ver inmediatamente cómo aparece el contenido en una disposición de una columna y si el orden es correcto. Esto es básicamente la forma en que el sitio se muestra a los usuarios que utilizan lectores de pantalla.

Hay que tener cuenta que no tiene que ser necesariamente la versión final, ya que podemos refinarlo durante la creación del prototipo.

markdown

Bocetos (Sketch)

Bocetar ideas es algo que siembre debemos hacer, es un paso importante antes de saltar al navegador. Probamos los bocetos con los diseños de texto HTML que se realizaron en el paso anterior (añadiendo unas pocas reglas de CSS sobre ellos).

Al pasar un momento boceteando ahorraras horas en el computador y no sólo va a ahorrar horas, también puedes permitirte un poco de tranquilidad. Cuando sea que ese monstruo maligno llamado “bloqueo de diseñador” aparezca, inevitablemente deja un camino de dudas autodestructivas a su paso. Lo reto a comenzar a emplear el boceto como parte de su proceso y verá una dramática disminución en la cantidad de veces que golpea ese muro virtual de la nada.

— Tara Roskell

 

Prototipos (Prototype)

Hacer prototipos al comienzo en HTML/CSS es necesario, ya que es la única manera para ver realmente cómo responderá el diseño a diferentes tamaños de pantallas. Esto también nos permite mostrar el sitio real mucho antes de la entrega final al cliente y mejorar de inmediato los problemas que el proyecto pueda tener.

No se trabaja con “gráficos de punto de referencia” antes de la creación de prototipos reales o del diseño. Es bueno estar y ser consciente en los diferentes puntos de referencia donde este funcione y donde no, para diferentes tamaños de pantalla; y probablemente sea buena idea hacer que el cliente tenga el conocimiento de cómo se verá su producto, dejamos el contenido real en el navegador para ser los jueces a la hora de tomar decisiones.

A continuación se muestra un diagrama de referencia de un dispositivo basado en el Diseño Pragmático Receptivo de Stephanie Rieger y en el Diagrama de Dispositivos Simples de Metal Toad:

breakpoints

Diseño visual (Visual Design)

Aquí entro yo, este paso ocurre en iteraciones antes y después de crear prototipos. Yo utilizo Photoshop para hacer los diseños, pero en tipografías me estoy inclinando cada vez más hacia el diseño en el navegador. La tipografía es algo que es especialmente difícil de conseguir que funcione en otro sitio aparte del navegador.

Lo más importante es usar una herramienta que no restrinja la creatividad. Puede ser el navegador, Photoshop, Fireworks, InDesign o cualquier otro que te sientas cómodo y manejes sin complicaciones.

 

Pruebas (Test)

Simpre debemos hacer las pruebas necesarias como parte de nuestro proceso, evitaremos tener mayores problemas en el futuro. Basta con mirar el Diagrama de Punto de Referencia de dispositivo de Viljami en donde añade todas las peculiaridades de los navegadores, y recién acá comenzaremos a entender por qué es más dificil construir sitios responsivos sin ponerlos a prueba con una serie de dispositivos reales.

En las pruebas también se deben incluir pruebas de usuarios, ya que es la forma más fácil de ver como funciona realmente el prototipo en términos de usabilidad.

Generalmente hacemos pruebas con los dispositivos que ya tenemos, pero a veces hay necesidad de probar con los nuevos dispositivos donde ir una tienda y hacer unas pruebas de campo no cuesta nada “por ahora”.

devices

Discutir (Discuss)

Discuta con el cliente durante todas las iteraciones ¡queremos feedback siempre!. Presente los prototipos HTML reales al cliente y muéstrele cómo funcionan en realidad. Y evite “la gran revelación” como dijo Mark Boulton.

 

Iteración

Dibujo → prototipo → diseño → prueba → discutir hasta que funcione a la perfección.

 

Conclusión

No hay flujos de trabajo perfecto. Lo que funciona para uno, puede que no funcione para todos, para este flujo en aprticular es sólo el comienzo de una transición. Lo que se ha descrito aquí funciona mejor en el diseño de sitios web responsivos (grandes o pequeños), pero puede que se necesite algunos ajustes para funcionar con el diseño de aplicaciones web que es algo diferente (dependiendo, por supuesto, dequé tipo de aplicación sea).

 

Fuentes

 

28 May 2012: This article has been translated from Official publication English.

Update 12 Jun 2012: This post has been translated to Russian.

Update 8 Aug 2012: Added Japanese translation.



Páginas:123