¿Qué buscamos obtener cuando invertimos en aplicaciones móviles? parece fácil la respuesta, pero la meditación relajada al aroma de un buen café es lo que determinará qué tipo de proyecto vamos a realizar, qué dimensión tendrá, qué recorrido queremos darle, qué lugar queremos que ocupe en nuestra estrategia y sobre todo, cuánto nos va a costar.

Cuando nos sentamos con un cliente para definir lo que debe ser el Retorno de la Inversión (ROI), nos encontramos con escenarios muy distintos, por lo que uno de los primeros pasos que damos es acotar las  posibilidades. Así que al estilo de “Quieres ser Millonario“, arqueamos la ceja y adelantamos cuatro criterios principales que van a servir para determinar las líneas maestras del proyecto a realizar. Por supuesto, no vale elegir los cuatro, lo lógico es elegir una opción, máximo dos:

• Promoción-Branding
• Promoción- Captación de audiencia
• Utilidad-funcionalidad-practicidad-ahorro
• Venta-transacción

1.- Promoción-Branding

Trabajando la parte de estrategia con el cliente, llegamos a la conclusión de que fundamentalmente se busca trasladar la marca a un nuevo soporte que “mola”, que es cool. Buscamos que el cliente final, cuando acceda al app del cliente piense “estos tíos están a la última, vaya app chula que han lanzado…” y además comparta sus sensaciones (marketing viral) invitando a otros usuarios a ver dicha campaña.

El Retorno de la inversión aquí se asocia al ámbito promocional, al ruido que se consiga hacer entre el público objetivo, las acciones que pueda desencadenar esta iniciativa o las veces que sirva de excusa para entablar relaciones que puedan convertirse en nuevos proyectos. Mas allá de esto, complicado valorar dicho Retorno.

2.- Promoción- Captación de audiencia

Nuestro objetivo fundamental aquí cambia. Más allá de vender marca, en este caso la inversión se realiza para captar público objetivo, atraer y convertir a ese usuario.

Aquí puede variar el criterio de conversión. El objetivo puede ser que el cliente potencial se desplace físicamente a nuestra oficina, tienda, concesionario, etc. Puede ser también que el cliente final rellene y envíe un formulario, facilite sus datos de contacto, etc., cualquier acción que permita establecer contacto, desde la perspectiva del tradicional “Permission marketing“.

El concesionario más pequeño del mundo

Este enfoque convierte a las aplicaciones que se desarrollan en un medio relativamente económico, atractivo y usable para establecer contacto con clientes potenciales.

3.- Utilidad-funcionalidad-practicidad-ahorro

El objetivo es ofrecer valor añadido fácil de ver, claramente identificable. El cliente final que utilice las apps enmarcadas en este criterio es de los que piensa “pero cuánto me ayuda la tecnología”, “con esta app hago en un momento lo que antes me costaba 2 horas”.

El enfoque es muy de productividad a bajo coste.

Pinche aquí para ver el vídeo

El Retorno de la inversión se concibe como el “pago agradecido”, que puede ser interpretado literalmente (“esta app es de pago pero merece la pena”) o indirectamente (“cuando tenga que comprar algo, se lo compraré a estos cracks”).

4.- Venta-transacción

Probablemente es el modelo más claro para medir, seguir y entender el concepto de Retorno de la Inversión, aunque arrastra también una parte promocional y de captación. En realidad, cada uno de los criterios intenta recoger lo bueno del anterior y aportar un nuevo (y principal) factor de decisión.

En este caso se traslada de una forma bastante literal la filosofía comercial del mundo off line al mundo online, y se incorporan los elementos que enriquecen la experiencia de uso.

El objetivo en las aplicaciones que se rigen por este criterio está claro, vender, vender y vender. Y la medición del ROI, pese a que se analizan muchos más factores que el cash que se mueve en la misma, es relativamente sencillo de seguir y analizar.

Tengo producto, quiero vender, pero ¿cómo?

Llegados a este punto, Carlos Sobera volvería a levantar la ceja para decirnos “pues amigo, de nuevo tienes cuatro opciones”:

a) Pago por la aplicación, descarga y ahí termina la historia

b) Descarga gratuita y pago por el contenido (números mensuales de revistas, productos complementarios a aplicaciones gratuitas, etc.)

c) Aplicación gratuita con sistema de suscripción ajeno a Apple (y no muy bien visto)

d) (NEW!) Aplicación gratuita con el flamante sistema de suscripción propio de Apple, que ya comentamos en este mismo blog (aquí y aquí),  que “navega” con bastante incertidumbre en busca de la estabilidad y consolidación.

El sistema se lanzó como una gran oportunidad para editores, que pasaban a disponer de toda la infraestructura necesaria para poner al alcance del público final sus contenidos de un modo rápido y sencillo.

El éxito del modelo está por llegar, mientras tanto podemos debatir si el sistema es bueno o no y por qué, aunque para ello necesitaríamos, como mínimo, el comodín de la llamada y del 50%, algo que a estas alturas del post, seguro que ya habríamos agotado.

El pasado Lunes, llegó a Biko un nuevo y flamante iPad.

Después de trastear con algunas aplicaciones gratuitas, hemos detectado algunas buenas (win!) y no tan buenas prácticas (fail!) en las soluciones de experiencia de usuario en esas aplicaciones. ¡Algo esencial antes de ponernos a diseñar nuestras nuevas aplicaciones!

Primeras ideas en la experiencia de usuario en el iPad

Mientras que Internet es el mundo del hipertexto, infinito, sin fronteras, el iPad es una caja cerrada, en la que las aplicaciones tienen un principio y un fin.  El usuario necesita captar esa sensación de confinamiento, de control, y necesitamos transmitir esa sensación a través de la arquitectura de información e interfaz de usuario de la aplicación.

El iPad es un gadget nuevo, sin embargo, sus usuarios harán (y hacemos) algunos supuestos, bien porque son usuarios de iPhone, bien porque han usado antes alguna otra tableta o libro electrónico, bien por su experiencia con el mundo real. Es importante tenerlo en cuenta.

En primer lugar, y debido a mi bagaje en el área de experiencia de usuario, el análisis está basado en los heurísticos de usabilidad (leer más en useit.com).

Heurísticos de usabilidad

1. Visibilidad del estado del sistema
2. Similitud entre el sistema y el mundo real
3. Control y libertad por parte del usuario
4. Consistencia y estándares
5. Prevención de errores
6. Reconocer antes que memorizar
7. Flexibilidad y eficiencia de uso
8. Diseño estético y minimalista
9. Ayudar a los usuarios a reconocer, diagnosticar, y enmendar errores
10. Ayuda y documentación

Pautas de Experiencia de Usuario para iPad

Además, hay algunas reglas, definidas por Apple en las Pautas de Experiencia de Usuario para iPad. Éstas son algunas de ellas:

[...]
Las mejores aplicaciones de iPad mejoran su contenido e interactividad consiguiendo realmente bien los tres siguientes puntos:

• Minimizan el interfaz de usuario de la aplicación, de manera que el foco está en el contenido que la gente quiere.
• Presentan el contenido de una manera hermosa, y a menudo realista.
• Aprovechan todas las capacidades del dispositivo para permitir una mejor interacción con el contenido.

[...]
La pantalla grande mitiga el deseo de los usuario de rotar el dispositivo en formato apaisado para “ver más”.
[...]

Es en base a estas pautas como hemos resumido algunos de los hallazgos.

Pero no podemos obtener conclusiones válidas sin antes testar, así que hemos realizados algunos test de guerrilla con unas cuantas applicaciones. (Las tareas eran tan sencillas como revisar las últimas noticias, leer un artículo, aumentar una imagen (zoom), enviar por email, o aumentar el tamaño del texto).

Fail! (no tan buenas prácticas en aplicaciones para iPad)

Las pautas de interfaz de usuario de Apple recomiendan simular la realidad (efectos 3D) en nuestros desarrollos para iPad: crear algo que en realidad no es.

De la misma manera que hacemos en un ordenador, creemos que no es buena idea imitar el mundo real tal cual es. No imites un periódico tal y como es, no imites el efecto real de pasar una página, como algunos lectores de PDF… (Yahoo Entertainment imita un salón o pequeños trozos de papel con un scroll dentro de cada uno de ellos…).

Listado de Yahoo Entertainment

Estilo de lector web de PDF de Congleton Chronicle

Clic estático para pasar páginas horizontalmente (en adelante: swiping).
Botones de acción liliputienses (como la barra de navegación de la applicación de Fotos de Apple o la aplicación de Marvel).
Botones de acción peligrosamente juntos (como en Google Maps).
Barra de navegación no estándar (Reuters, Editor’s Choice -NY Times-).
Leve uso de vista dividida, y de menús popover, como viene indicado en las Pautas de Experiencia de Usuario de Apple.

Google Maps too close and not big enough buttons

npr

• Mismo aspecto en formato vertical y apaisado

Editor’s Choice (New York Times)

• Falta de utilidad de zoom, tanto en imágenes como en visualización de texto (pequeño para leer, para gente de edad madura)
• Acceso a secciones en la barra de navegación inferior; barra de navegación superior sin funcionalidad (enlace a portada)
• El reproductor de video no se interrumpe cuando pasamos a otra página
• Elementos inesperados: cuando clicamos en la imagen de un articulo, descubrimos que existen más imágenes para ese artículo, ¡una presentación de diapositivas! Pero no sabíamos que había más imágenes cuando estábamos leyendo el artículo…
• El logo no enlaza con la portada

Wall Street Journal

• No hay un menú claro, no se usa una barra de navegación superior estándar
• Botones diminutos en una barra de navegación inferior
• Botones ocultos, como los de tamaño de texto
• No hay opción de clicar en la imagen para aumentar o iniciar un pase de diapositivas

The Wall Street Journal home

Reuters

• En un pase de diapositivas o zoom de imagen, puedes entrar en un bucle infinito (foto de reuters)

El bucle infinito de Reuters: clicken la imagen, entonces pincha en el artículo (botón superior derecho), y entonces clica en la imagen dentro del popup...

Win! (buenas prácticas en aplicaciones para iPad)

Ayuda al usuario a centrar su atención en el contenido, no en el diseño.
Ofrece una navegación natural. Incluso para alguien que sólo ha probado un par de veces el iPhone, hacer pinch in y pinch out* es una acción que surge con naturalidad. Lo mismo para hacer scroll o swiping. Adelante entonces, ¡úsalos en tus aplicaciones!

*pinch in (pellizcar hacia adentro, convergiendo los dedos íncides y pulgar); pinch out (pellizcar hacia fuera, convergiendo los dedos íncides y pulgar)

No tomar al pié de la letra las Pautas de Interfaz de Usuario de Apple, sino inetrpretarlas: prueba con un interfaz de usuario natural, transparente, que no requiera un aprendizaje; algo que te invite un uso natural de la aplicación. ¡Este es, en efecto, uno de los puntos clave de la usabilidad!

Publicidad incorporada, que no te lleva fuera de la aplicación (a Safari, por ejemplo).

Cambia tu rejilla cuando ajustes el tamaño del texto. El número óptimo de caracteres por línea está entre 55 y 75 caracteres (depende de la tipografía). Por lo tanto, sería bueno reducir el número de columnas cuando el tamaño de texto aumenta.

Utiliza algunos estándares de interfaz de usuario de iPhone, pero ajustados a la aplicación de iPad: como la barra de navegación superior, con los botones de volver atrás (o portada) y botones de opción.

npr

• Botón de portada
• Botones de acción claros: email, escuchar
• Hacer scroll = leer más, swiping = ver otros artículos
• Aumentar / reducir zoom (pinch in / pinch out) en la visualización de imagen, pinch out para volver al artículo
• Acceso a secciones y temas con menú popover

npr recognisable navigation options

Editor’s Choice (New York Times)

• Icono informativos en la visualización de imagen
• Botones de vuelta al artículo claros, en la visualización de imagen
• Iconos de paginación que aportan consistencia y control del usuario

Editor's Choice (New York Times) Pagination

Wall Street Journal

• Ayuda inicial sobre navegación, acciones claras
• Pinch in para aumentar zoom, pinch out para disminuir zoom o volver atrás
• Doble clic para entrar, aumentar zoom, o ajustar a pantalla completa
• Navegación sección a sección, o artículo a artículo

The Wall Street Journal navigation instructions

Test de usuario de guerrilla en iPad

¿Has probado a testar tus aplicaciones con un usuario de edad madura? ¡Es fácil! Aquí tenemos algunas conclusiones del test de guerrilla que hemos realizado con mi padre . Dos jóvenes usuarios avanzados también han participado en el test.

Primeras acciones naturales

• hacer scroll, después swiping
• pinch in para aumentar zoom, o aumentar el tamaño del texto
• pinch out para reducir zoom/ volver a la página principal (anterior)
• clicar (incluso doble clic) para abrir una aplicación, o acceder al detalle de contenido

Otras conclusiones

• botón principal del iPad como salida en cualquier cosa, cuando el botón de home/portada no es visible o claro
• aumentar y reducir zoom (pinch in y pinch out) con naturalidad para la visualización de imágenes
• navegación superior como ubicación de las principales opciones de navegación, o en todo caso, en una barra de navegación inferior
• fácil pérdida cuando los botones de volver o ir a la portada no están en la barra de navegación superior
• se esperan botones o funcionalidades similares en aplicaciones diferentes
• rápido reconocimiento del icono del sobre como funcionalidad de enviar por email, T- / T+ oA- /A+ como funcionalidad de tamaño de texto

Captura de vídeo de test de usuario en iPad

Recuerda

Está hecho para tocar con los dedos (evidente), y no todo el mundo los tiene finitos y delgados. Sé cortés, haz los botones lo suficientemente grandes para el dedo índice o pulgar de un hombre adulto. No hagas a la gente pelearse con iconos tan pequeños que puedan ser tocados a la vez sin querer.

Ubica las áreas activas donde no converjan con otras acciones (botones, enlaces, publicidad…).

Scroll vs swipe. En el iPad, ¿es hacer scroll más natural que swiping?  En contra de nuestras primeras ideas, lo es. Sin embargo, si en primera instancia el scroll no funciona, la siguiente acción natural es swipe.

Reuters utiliza ambas acciones, scroll y swipe

Menús popover: utilízalos con precaución. Recuerda que con frecuencia, asumimos que lo que no vemos, no existe.

Ten cuidado cuando apliques las funcionalidades de las aplicaciones de Apple: peligro con la funcionalidad pinch-para-expandir. “Apple rechaza una aplicación para iPad por pinch-para-expandir” argumentando que esa es una funcionalidad “asociada únicamente con las aplicaciones de Apple”.

Funcionalidad pinch para expandir

Algunas preguntas

¿Mismo tamaño de texto en vista vertical que en apaisada? ¿Iría esto en contra de las Pautas de Apple? [...] evita reformatear la información y reajustar el texto al rotar [...]
Hemos visto pocas opciones sociales en las aplicaciones. ¿Alguna razón de peso? El mundo social es ahora parte del mundo real, queremos ver esas opciones en nuestras aplicaciones.

Todas estas apreciaciones son sólo un primer acercamiento, así que continuaremos analizando y trabajando en evolucionar las aplicaciones.

iPad ‘n Roll

Read this same article in english: iPad, are there any user interface standards? First impressions based on user experience testing

Last Monday a bright brand new iPad came to Biko.

After hanging around with some free apps on the iPad, we’ve appreciate some good (win!) and not so good (fail!) practices on user experience solutions on those apps. That’s essential work before designing our new apps!

iPad user experience first ideas

While the Internet is the hypertext world, infinite, endless, the iPad is a closed box, where apps have a start and an end. The user needs to get this feeling of closure, and we need to build that appearance with the application’s information architecture and user interface structure.

iPad is a new gadget, however, users will make some assumptions, because they’re iPhone users, because they’ve used before a tablet… or even because of their real world experience. It’s important to keep this in mind.

First of all, and due to my user experience profile, the approach is based on usability heuristics (read more on useit.com).

Usability heuristics

1. Visibility of system status
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and recover from errors
10. Help and documentation

iPad User Experience Guidelines

Furthermore, there are some more rules, given by Apple’s iPad User Experience Guidelines. Here are a few of them:

[...]
The best iPad applications elevate content and interactivity by doing three things really well:

• They downplay application UI so that the focus is on the content that people want.
• They present the content in beautiful, often realistic ways.
• They take full advantage of device capabilities to enable enhanced interaction with the content.

[...]
The large screen mitigates people’s desire to rotate the device to landscape to “see more”.
[...]

So it’s regarding to those basis that we’ve summarized some findings.

But there’s no valid conclusions without testing, so we’ve made some guerrilla user testing with a few apps as well. (Tasks were as simple as browsing latest news, reading an article, zooming on an image, sending by email or zooming text).

Fail! (not so good practices on the iPad)

Apple user interface guidelines recommend simulating reality (3D effects) for our iPad developments: creating something what it is not.

The same as we do on a laptop, we think that’s it’s not a good idea to imitate real world as it is. Don’t imitate a real newspaper as it is, don’t imitate real page swiping like PDF reader… (Yahoo Entertainment imitates a living-room or small pieces of paper with scroll inside of them…).

Yahoo Entertainment list

Congleton Chronicle Web Pdf reader style

Static click for swiping pages (horizontally).
Lilliputians action buttons (like nav bar on Apple Photos or Marvel app).Dangerously too close action buttons (as seen on Google Maps).
Unstandard navigation bar (Reuters, Editor’s Choice -NY Times-).
Slight use of split view and popover menus, as defined on Apple’s UX Guidelines.

Google Maps too close and not big enough buttons

npr

• Same layout on portrait and landscape article view

Editor’s Choice (New York Times)

• Lack of zoom feature, even on image or text visualization (small to read for mature aged people)
• Section access on bottom nav, top nav with no functionality (link to home page)
• Doesn’t stops video playing when changing to another page / when page swiping
• Unexpected elements: when clicking an article image, we discover that there are more images, it’s a slideshow! But we didn’t know there where more images while reading the article…
• Logo doesn’t link to home page

Wall Street Journal

• There’s no clear menu, is not using standard top navigation bar
• Tiny option buttons on a bottom navigation bar
• Hidden option buttons, as text size buttons
• No click function on image to zoom or open slideshow

The Wall Street Journal home

Reuters

• Into an image slideshow/zoom you can get into an endless loop (foto reuters)

Reuters endless loop: click on an image, then see the article (top right button) into the popup, then click the image into the popup...

Win! (good practices on the iPad)

Help the user to focus on the content, not on the design.
Bring a natural navigation. Even for someone who has just tried a few times the iPhone, pinching in and out is a natural action. Same for scrolling and swiping. Go on then, use them in your applications!

Not taking literally Apple’s UI guidelines, but interpreting them: try with a natural user interface that doesn’t need to be learned, something that invites to a natural use of the application. That’s, indeed, one of the key points of usability!

Built-in ads that doesn’t bring you out of the app (to Safari, eg.)

Change your grid when resizing font-size. The best number of characters per line is between 55 and 75 (it depends on the Font Family). So it would be nice to decrease number of columns when the font size gets bigger.

Use some UI iPhone standards, but adjusted for the iPad app: as top navigation bars, with back and option buttons.

npr

• Home button
• Clear action buttons: mail, listen,
• Scrolling = read more, swiping more articles
• Zoom in/out on image visualization, zoom out to go back to the article
• Access to sections and top topics with popover menu

npr recognisable navigation options

Editor’s Choice (New York Times)

• Info bullets on image visualization
• Clear back to article button on image visualization
• Pagination icons to help consistency and user control

Editor's Choice (New York Times) Pagination

Wall Street Journal

• Initial navigation help, clear actions
• Pinch in to zoom in, pinch out to zoom out or to go back
• Double click to go in/ zoom in / adjust to full screen
• Section to section navigation, article to article navigation

The Wall Street Journal navigation instructions

Guerrilla iPad user testing

Have you tried to test your apps with an aged man? It’s easy! Here are some conclusions of the guerrilla testing we’ve made with my father Two young internet heavy user guys have participated aswell on the testing.

Natural first actions

• scrolling, then swiping
• pinch in to zoom in, or get text bigger
• pinch out to zoom out / get out of the main page
• clicking (even double clicking) to open an application, or go to detail

Other conclusions

• main iPad button as exit for everything, when not a home button visible
• natural zoom in/out on picture visualization
• top nav as main application options, then bottom nav
• gets easily lost when back or home buttons aren’t on a top nav
• expects same buttons / features on different apps
• quickly recognizes envelop icon as email feature, T- / T+ or A- /A+ as text size feature

iPad user testing video screenshot

Remember

It’s made to touch with your fingers (obviously), and not everybody have thin skinny ones. Be cute, make buttons big enough for a male adult index finger or thumb. Don’t make people struggle with thin icons that can be tapped various at once.

Place active areas where they don’t meet with other actions (button, link, ad…)

Scroll vs Swipe. Is scrolling on the iPad more natural than swiping? Against our first ideas, yes, it is. However, if scrolling not working, next natural action is trying to swipe.

Reuters uses both, scrolling and swiping actions

Popover menus: use carefully. Remember that usually, we assume that what we are not able to see, does not exist.

Be careful when applying Apple’s apps features: danger with pinch-to-expand feature. “Apple rejects iPad app for pinch to expand” arguing that that’s a feature “associated solely with Apple applications”.

Pinch to expand feature

Some questions

Same text size on portrait than landscape view? Would this be against Apple’s Guidelines? [...] avoid reformatting information and rewrapping text on rotation [...]
We’ve seen ust a few social options on the apps. Any strong reason? Socialize is now part of the real world, we are more likely to see those options on our apps.

All this thoughts are just a first approach, so we’ll keep on analyzing and working on our apps.

iPad ‘n Roll

Una afirmación indiscutible: la simplicidad es fundamental al plantear el diseño de cualquier interfaz de usuario. Todos los controles que coloquemos en la pantalla deben ser utiles para cada momento concreto de la aplicación, ya que cuantos más controles aparezcan más tiempo perderá el usuario averiguando como utilizar la interfaz.

Si además se trata una aplicación táctil todavía toma más fuerza esta simplicidad, ya que tenemos que permitir a los usuarios hacer las cosas con menos esfuerzo y tiempo. La interacción con el contenido debe ser satisfactoria, intuitiva y rápida. Por ejemplo, el usuario debe saber donde se encuentra en todo momento, así como poder avanzar, retroceder o volver al inicio de la aplicación.

Con todo, la usabilidad no es universal sino particular para cada contexto de uso específico. Por ello, resulta necesario determinar qué precisa nuestro usuario en su entorno concreto de trabajo.
Es entonces cuando nos centramos en el usuario y analizamos cada uno de sus requerimientos para conseguir una aplicación a su medida.

Adelantándonos a lo que espera encontrar y lo que necesita en cada contexto para lograr llevar a cabo su trabajo. También debe ver una respuesta inmediata en cuanto toque la pantalla y así reconozca que se han registrado sus instrucciones táctiles. Parece algo obvio pero dar retroalimentación inmediata al usuario, como un “presionado” de botón por ejemplo, mejorará su experiencia y más si se trata de una aplicación táctil.

Nuestro proyecto de Agrinnova combina todas estas características. Es desarrollado para una serie de ordenadores con pantallas táctiles, a modo de kioskos interactivos. El objetivo del proyecto consiste en conseguir que los agricultores riojanos utilicen la interfaz táctil, que situamos en sus hogares, para registrar sus datos sobre sus cosechas (siembra, riego, tratamientos…).

Funcionalmente, la aplicación ofrece a los agricultores información general (información meteorológica, precios de mercado), noticias del sector, un sistema de mensajería (para comunicarse con el servicio de soporte y administración), informes y trazabilidad (sobre cosechas, riego, tratamiento, siembra…), la aplicación de recogida de datos, en la cual, a través de una secuencia de formularios el usuario puede registrar toda la información sobre el estado de su trabajo en el campo.

Tratamos de adaptar la aplicación al usuario proporcionándole unos botones grandes para facilitar su uso y utilizando javascript para facilitar las entradas (calendarios y teclados emergentes por ejemplo). Por otro lado troceamos los formularios por pasos para que resultasen aun más sencillos de completar.

Con todo lo comentado, y tratando de que el cambio a esta nueva forma de trabajo resultase lo más natural posible, construimos con mucho mimo una interface que no distrajera ni saturase al usuario, sino que le facilitase en todo momento la adaptación a su nueva herramienta de trabajo.