Hoy nos toca un resumen de uno de los UX Labs que se ofrecieron este año en el UX Spain 2013 en Valladolid ofrecida por Belén Barros Pena (@belenpena) y Bernard Tyers (@bernardtyers). El laboratorio se llamaba: «Para móvil? Ningún problema!» y la verdad es que la presentación fue increíble y con un montón de ejemplos, pero intentaré que más o menos se entienda.
Para situarnos, Belén hace diseño de interacción en el Centro de Software Libre de Intel en Londres y Bernard trabaja como diseñador de interacción en LiveBookings mientras acaba su Máster en Interacción Persona-Ordenador en City University London.
En 2012 hubo 6.700.000.000 suscripciones a servicios móviles, y 4.3000.000.000 de usuarios únicos con 5.200.000.000 móviles en uso. Según “The anual mbile industry numbers and stats blogs” el 9% son Iphones, un 13% otros smartphones y un 78% no son smartphones.
Ninguna otra tecnología humana se ha extendido a esta velovidad.
Y es que era en 1979 cuando NTT en Japón lanzaba el primer servicio de tecnología móvil del mundo.
El teléfono móvil es además un canibal de otros aparatos. Sustituye a las cámaras de fotos, a relojes, despertadores, mp3, periódicos…
Es que es una industria ULTRA fragmentada en hardware. Tenemos varios sistemas operativos usados a día de hoy: IOS, Android, Blackberry, Windows Phone, Webos…
Imagen extraída de la presentación: SO usados en móviles
Pero sigue saliendo nuevos: FF OS, Sailfish, Tizen, Ubuntu… Estos 4 últimos son Open source.
Imagen extraída de la presentación: Nuevos SO para móviles Open Source
Metiéndonos de cara al diseño, hay 3 cosas que funcionan bien para diseñar software para pcs/mac y que también sirven para móviles:
- Patrones
- Prototipos
- Texteo UX
Patrones
Son una solución general y repetible a un problema de usabilidad que aparece en situaciones de uso. Las apps organizan su funcionalidad en cajas/iconos.
Imagen extraída de la presentación: Apps en los diferentes SO
Todas las apps están hechas de 2 cosas:
- Contenido (osea la información)
- Funciones (lo que haces)
El contenido en las Apps se divide en pantallas de contenido ordenadas jerarquicamente.
Estructura de una app
Existen PANTALLAS DE CONTENIDO y PANTALLAS DE INPUT.
Estás ultimas es donde se le pide información al usuario que la app requiere para las funciones, por ejemplo cuando creamos un nuevo mensaje.
Funciones
Viven en las pantallas de contenido. Por ejemplo en un servidor de correo: borrar, archivar, crear un nuevo email…
Algunas funciones se repiten en todas las pantallas en el mismo sitio, son las FUNCIONES GLOBALES.
En cambio hay otras llamadas FUNCIONES DE PANTALLA que son propias de la pantalla en la que estamos.
También existen las FUNCIONES DE ELEMENTO, aquellas que se aplican a algún elemento en concreto. Por ejemplo cuando seleccionas un email y lo borras.
Imagen extraída de la presentación: Pantallas de input, pantallas de contenido y su relación en base a funciones
Las funciones conectan las pantallas de contenido con las pantallas de input.
Las diferentes apps tienen en común, que se basan en cajas que poseen funciones y contenido todo organizado jeraquicamente. Todos los sistemas operativos tienen esto en común, la diferencia es como lo representan.
Pantallas de contenido
Algunas presentan mucha información en un espacio muy pequeño. Hay 2 patrones para ello:
- listas
- cuadrículas
Presentación en cuadrícula y en lista de los elementos en SO Android
Al ser la navegación jerarquica, significa que hay niveles. Estos en su mayor parte, para navegar entre los mismo niveles disponemos de pestañas (Android, Symbian, IOS…)
Pestañas en un SO Android
Las funciones globales y de pantalla se suelen encontrar en la parte inferior de la aplicación, donde muchas lanzan menús desplegables.
Y si no caben , las encontramos arriba a la derecha.
Funciones de elemento
Aprietas en algo y aparece un menú contextual que te da las opciones propias de ese elemento, normalmente es apretando y aguantando pulsado unos segundos.
Funciones propias de elemento en el SO Android dentro de un menú desplegable
Botón de retroceder
Lo encontramos en varios lugares diferentes: arriba a la izquierda, abajo a la izquierda, abajo a la derecha….
Otros dispositivos lo tiene como un botón físico que existe permanentemente en vez de uno en la pantalla táctil.
Para probar como funciona el botón de volver atrás, se realiza el test de cambiar de app. El botón de atrás en software retrocede entre apps (osea entre pantallas de la misma app) no entre diferentes apps.
Es decir, el ámbito del botón de retroceder en la propia app.
Retroceder en un SO Android
Los sistemas operativos que tienen un botón físico, navegan entre apps, es decir el botón de retroceder navega entre la historia de tu actividad.
Como realizar bien una app
- Aprendete el sistema operativo de memoria, sus normas de diseño, lo que te dictan como funciones generales…
- Plantea la inteligencia y los diagramas de flujo
- Realiza wireframes y posteriormente el diseño
- Se implacable. Hazte la pregunta ¿necesito esto? Sino, fuera.
- Experimenta
Testeando
Disponemos de varias formas de realizar test de usabilidad. La primera, para realizar prototipos más reales podemos usar la etiqueta <map> de HTML sobre las imágenes. Es decir, conectamos imágenes con tecnología, por ejemplo con Omnigraffle Pro.(http://www.omnigroup.com/products/omnigraffle/)
Las ventajas:
- Son fáciles de hacer y muy rápidas
- Son universales ya que funcionan en todos los navegadores
- Dan el pego (parece que está programado de verdad en vez de ser una imagen)
Los problemas:
- Son estáticos (no hay transiciones ni hovers)
- No puedes rellenar formularios
Ojo:
Si estás testando en un móvil hay que crear las imágenes a la resolución correcta, y añadir la etiqueta “viewport meta tag” en el head. Sin esa etiqueta el navegador piensa que tiene que desplegarlo todo.(Ojo que con android es otra etiqueta).
Por ejemplo si vas a probar una HTC Desire, tienens que hacer las imágenes a 480x800px y a una resolución de 217ppi. En cambio para un motorola, son 540 x 960px a 256ppi.
La segunda manera de testear son construir con tecnología web: html, css, js…
Las ventajas:
- Permite interactuar
- Son universales
- Sirven para cualquier navegador
Los inconvenientes:
- No so tan fáciles de hacer ya que hay que entender la plataforma
- Para ordenador: Bootsrap, Foundation…
Los prototipos web van genial para móviles. Framework para tecnologías móviles: Jquery mobile, que tiene una guía de patrones de botones.
Hay que realizar un prototipo para cada tarea a realizar.
Test de usabilidad
Los vídeos de usuarios que muestran problemas hacen ver al cliente que si software tiene problemas. Es decir, grabamos para convencer.
Imagen extraída de la presentación: Como debe ser un test de usabilidad para móviles
Lo complicado de realizar un test de usabilidad de una app, es que hay que grabar las acciones y las reacciones, tanto del prototipo como del usuario.
Es decir, el testeo de usabilidad de una web en un ordenador es igual que el de un testeo móvil, solo que este último tiene más problemas.
1. Qué móvil es
La usabilidad del móvil, es decir que modelo es, afecta a los resultados del test de usabilidad. El usuario tiene que usar el móvil que use de normal.
Imagen extraída de la presentación: Tasa de éxito en un experimento de usabilidad en móviles
2. Contexto
Realizar la prueba en el laboratorio o una prueba de campo. ¿Qué es mejor? Hay que realizar estudios que lo comparen. Además la gente muchas veces no está sentada cuando usa el móvil , sino que se está moviendo.
3. Conexión
¿Wifi o 3G? Los test NO hay que hacerlos con wifi, y hay que pagar al usuario los costes de conexión. Además, la conexión de internet no siempre es buena en la vida real al usar un móvil.
A continuación Elena y Bernard nos enseñaron a realizar por 80€ un test de usabilidad en un móvil mostrándonos en directo con una de las participantes al laboratorio, lo rápido y «relativamente sencillo» que era. Para ello se requerían varias cámaras (una que enfocase a la cara de la persona, y otra al móvil), además de ir grabando lo que comenta el usuario al realizar la acción, en este caso creo recordar que fue buscar una casa para vacaciones en Mallorca con una serie de condicionantes en una conocida web.
Fuente de las fotos que no son del UX Lab: http://developer.android.com/design/patterns/navigation-drawer.html