* Nuestra experiencia se basa con niños entre 2 y 5 años.

La “splash screen”

Si trabajáis con niños pequeños (2-5 años) sabéis que el concepto de paciencia es algo poco habitual en ellos, sobre todo cuando tratan con dispositivos digitales.

Una splash screen que tarde más de 10 segundos, genera comentarios como “no funciona”, frustrando y poniendo a prueba el limitado “aguante” de un niño que accede por primera vez a la app.

Splash screen de "The fantastic Flying books of Mr. Morris Lessmore"

Pese a ser una maravillosa app para un público infantil, el fantástico libro de Mr. Morris Lessmore tarda entre 24 y 28 segundos para cargarse… a favor cuenta con una tranquilizadora música que amansa a los peques mientras que sus padres les quitan el iPad para que se acabe de cargar la app.

Es evidente que una splash screen es inevitable en una app dado que se está cargando todo el contenido, pero hay que considerar y ofrecer alternativas a este proceso de carga para que los niños mientras esperan, también se diviertan: ¿un puzle por ejemplo? ¿Una animación para distraerlos?

La pantalla de inicio

Como norma general, la pantalla de inicio de la app es totalmente inútil para un niño de entre 1 y 3 años (a partir de 4 la cosa cambia) dado que no sabe leer ni tampoco tiene un criterio definido para elegir la opción que más le conviene.

En nuestros tests hemos probado que si un niño quiere volver a comenzar el juego, cuento o la actividad, por norma general no hará tap en el botón para volver a la página de inicio de la app y reanudar el juego. Lo que la mayoría de niños suele hacer, es clicar sobre el botón de inicio del iPad o del  iPhone, salir de la app, volver a buscarla y abrirla de nuevo.

Esto significa que, una app destinada a niños de entre 1 y 3 años, debe de estar preparada para comenzar inmediatamente una vez que se ha abierto, sin pantallas intermedias, ni home.

"Kids Song Machine" para iPhone

Kids Song Machine es un claro ejemplo de cómo comenzar una app de forma sencilla y directa a la acción.

Si la app está destinada a niños a partir de 3.5 años y tiene distintas opciones, se puede introducir una simple y sencilla pantalla de inicio.

Hay que utilizar muy pocos botones: 3 ó 4 como máximo; el área para hacer tap ha de ser grandiosa y la hay que extrapolar la sensación de clicar (físicamente) sobre un botón, por lo que no debe de haber ninguna duda para un niño sobre dónde hacer tap.

Página de inicio de "Alpha Writer, by Montessorium"

Alpha Writer, by Montessorium solo tiene dos áreas para clicar en su página de inicio, con unos dibujos claros e significativos para niños a partir de 4 ó 5 años.

Los settings

No recomendamos incluir un botón de ajustes (settings) en la propia app, los niños suelen hacer tap en esta área por accidente.

Si la aplicación tiene ajustes que se requieran configurarse de forma asidua, se puede diseñar unos settings sencillos, donde si el niño los cambia fortuitamente, no afecte al juego en general o bien no altere de forma grave el comportamiento de la app.

La app “Wheels on the Bus” incluye en todas sus pantallas un botón para poder cambiar el idioma de la canción o bien para que el niño pueda grabar su propia voz. Este tipo de ajustes (aunque los niños constantemente lo tocan) no afecta ni condiciona el funcionamiento de la app, y es un buen ejemplo de ajuste no intrusivo.

Settings de "Wheels on the bus"

Desde nuestra perspectiva, los settings es un tema de padres, no de niños, por lo que recomendamos incluirlos en los “ajustes” del propio dispositivo. Ahí en la sección de “Aplicaciones” instaladas se puede configurar lo que la app necesita para cada niño. Reducimos el ruido y la posibilidad de error.

La interacción para niños

Piensa en grande. Piensa en enorme.

Mira un tractor de un niño. Es enorme. Mira los legos para peques, no hay ni una pieza pequeña. Entre los 18 meses y los 3 años la motricidad fina se está desarrollando, por lo que las “tallas extras”, sobre todo cuando se trata de diseñar para niños es ineludible.

Los niños, suelen fijar la atención en los objetos grandes, sobre todos si son evidentes, simples y reconocibles.

A de Abeja, detalle de la sección Conoce de "ABCKit" para iPad

Como anécdota, mi hijo de 2 años y medio, suele llamar a nuestra app ABCKit, “A-Abeja” dado que el 1er elemento que él siempre elige y ve, es la 1era letra del alfabeto de la sección Conoce.

Tareas fáciles

Pensar y desarrollar tareas fáciles que los niños puedan ejecutar es el eje del éxito de una app.

Los estímulos visuales y auditivos que un pequeño necesita para interactuar con la app han de ser obvios en la gran mayoría de casos, aunque el descubrimiento de algunas funcionalidades incita al juego y despierta la curiosidad de los más avanzados.

"Toy Story" para iPad

La app de Toy Story para iPad, mediante pequeños gestos como un brillo en medio del dibujo, da pistas a los niños para que puedan hacer tap sobre la imagen y descubrir una nueva acción, como la voz de algunos de sus personajes o bien un mini-clip de la película.

Y aunque no hay ningún secreto en definir qué es fácil, la interacción de un dispositivo táctil en el caso de niños, ha de simplificarse y en muchos casos reinterpretarse. Al momento de desarrollar una interface, no se pueden seguir al pie de la letra todos los patrones marcados por guías como la Touch Gesture Reference Guide, y os pongo un ejemplo:

Cuando un niño está sosteniendo un iPad con las dos manos y sus dedos están tocando alguna de las esquinas y con el otro intenta hacer tap para activar alguna acción en la pantalla (mover un objeto, pasar página, etc) en la gran mayoría de casos la app hace caso omiso de esta última acción. La app está interpretando el gesto de coger el iPad como un tap prolongado, por lo que no ejecuta la acción que se le está pidiendo con la mano “activa”.

La probabilidad de que un niño, sin querer, esté tocando la pantalla la mayoría del tiempo para sostenerla, o simplemente para colocar sus manos, es alta, por lo que las aplicaciones para niños tendrían que ser mucho más indulgentes con este tipo de gestos para que puedan funcionar bien.

Estimula y recompensa

Los niños disfrutan con la validación y la alabanza: los comentarios positivos los llenan de autoestima y les proporcionan estímulos para hacerles saber que están haciendo algo bien.

Las apps para niños en las que hay un juego o un reto, tienen que ofrecer una retroalimentación positiva para hacerles saber que están ganando pequeñas batallas. Un aplauso, una frase o simplemente una cara feliz ponen contento a cualquier niño que haya “superado” la prueba.

"ABC Alphabet Phonics" para iPad

En la app de ABC Alphabet Phonics, cada vez que el niño toca sobre la letra correcta, se van escuchando diferentes frases como “muy bien”, o “lo haces genial”.

Los niños suelen aburrirse muy rápido de una aplicación, al menos de que haya movimiento que realmente les divierta, o bien estén tratando de superar un reto (un juego), pasarán de una app a otra sin ningún problema:

• Los pequeños de entre 2 y 3 años difícilmente pueden seguir un juego, necesitan que algo pase, esperan de la app que les guíe y que al tocar ocurra algo, pero no tienen la estimulación de la competición.
• Los de entre 4 y 5 años les gusta el reto, son dedicados y tienen mucha paciencia si el estímulo es alto (completar las cartas, completar la letra, esperar a un “muy bien” o “great”), se sienten retados con el juego y esto les gusta.
• A partir de 6 años buscan el perfeccionismo, para ellos el concepto de divertido consiste en ganar, su estímulo no sólo es “conseguirlo”, buscan hacerlo a la primera, sin errores y hacerlo mejor que “el de al lado” ser el número 1.

Una "F" perfecta, es lo que buscan los niños. "ABCKit" para iPad

En nuestros tests con ABCKit, los niños a partir de los 5 años y medio que trazaban las letras, lo intentaban una y otra vez si no les gustaba como quedaba.

¿Educativo o lúdico?

Hace un par de días hice una pregunta sobre apps para niños en Twitter, la gente, automáticamente me comenzó a preguntar si necesitaba apps educativas o lúdicas.

Desde mi punto de vista, creo que una app para niños, no excluye una cosa de la otra.

Está demostrado que el aprendizaje de los niños tiene que ser divertido, si no, deja de ser aprendizaje (entendido este como la capacidad perceptiva del niño) para ser simplemente enseñanza.

Un proceso simple y sencillo si además es lúdico, permite entender, recordar y aprender mejor la experiencia y disfrutar de ella.

¿Y vosotros? ¿Cuál es vuestra experiencia diseñando para niños?

Animaos, ¡dejadme un comentario!

- – - – - – -

English version of this post on UX Magazine – “Designing apps for kids”

Que levante la mano el que en más de una ocasión ha tenido conversaciones parecidas a esta:
- ¿Y quién se encarga de los contenidos?
- Ah… no te preocupes… (y cualquiera de estas respuestas)

1. Tenemos un becario
2. Ya lo resolveremos más adelante
3. Haremos un copy-paste con algo menos de contenido

Lo que nuestros clientes no saben y tendríamos que dejarles claro, es que el contenido, -como cualquier otro aspecto bien cuidado en la definición de una web o una aplicación- necesita de una estrategia.

Y la primera parte de una buena estrategia de contenido está relacionada con el mensaje principal que se transmite en la web.

Kristina Halvorson (@halvorson), comenta que el mensaje de una web está dividido en dos, el mensaje primario y secundario.

• El mensaje primario de una web es quién eres, lo que ofreces y lo que tu cliente obtendrá a cambio. Debe memorable y fácilmente reconocible.

• El mensaje secundario se deriva del anterior mensaje; y tiene que apoyar al mensaje primario, ofreciendo información sobre los productos o servicios, sobre el cómo comprar / vender o porqué hacerlo.

• Cuando el usuario accede a una web, el mensaje primario se tendría que comprender en los 10 primeros segundos; y el secundario en los siguientes 2 minutos.

Veamos un ejemplo de Fiverr, una comunidad donde los usuarios venden servicios por un precio máximo de 5 dlls.

Ahora descifremos lo que el mensaje primario nos está diciendo:

El mensaje es claro: explica qué es Fiverr (una comunidad de personas), los servicios que ofrecen (compartir servicios por un precio) y lo que los usuarios pueden esperar (un servicio a cambio de 5 dlls).

Tal vez podrá parecer que este tipo de mensajes primarios funcionan muy bien para webs que ofrecen un servicio nuevo o diferencial, sólo que no es así. Servicios consolidados como facebook, flickr, Blogger o Linkedin**, o servicios más locales como Sin Delantal también apuestan por un mensaje directo de lo que se puede hacer en sus webs.

Mensaje primario de Facebook

Mensaje primario de Flickr

Mensaje primario de Blogger

Y es que… ¿quién no agradece un mensaje claro, sencillo y útil?

———————–

Recursos interesantes sobre Storytelling

• Libro “Content Strategy for the web” de Kristina Halvorson: http://www.contentstrategy.com
• Libro “The elementes of Content Strategy” de Erin Kissane: http://www.abookapart.com/products/the-elements-of-content-strategy
• Artículos en A List apart: http://www.alistapart.com/topics/topic/content-strategy/

** Se agradecen ejemplos similares de webs españolas

El resumen de notas, ideas y comentarios sobre el taller:

Las historias conectan al narrador con la audiencia

• Nuestro trabajo como narradores es el de asegurarnos que nuestros usuarios entiendan la historia que queremos comunicar: cada historia se visualiza de forma totalmente distinta en la mente quienes la escuchan.
• El narrador y la audiencia, conjuntamente, dan forma a la historia que han escuchado y han creado.
• “Las buenas historia, evocan emociones. Y nosotros como humanos, recordamos mejor las emociones”.

Storytelling y UX

Las historias son una manera eficaz de recopilar, analizar y compartir información cualitativa en el la investigación de usuarios. De hecho, en UX, el storytelling se practica a diario, sólo que no lo llamamos “historias”.

En UX, las historias se puede utilizar con distintos propósitos:

• Conocer a los usuarios
• Detallar sus necesidades
• Como herramienta de brainstorming
• Para explicar historias de éxito
• En un test de usabilidad explicando el escenario

Pero…

¿Cómo comenzamos a crear una historia?

1. Escuchando

Toda historia comienza por eschuchar y reinterpretarla.

Tenemos que conviertirnos en oyentes activos:

• Hay que demostrar interés por lo que la otra persona está explicando
• Mantente en silencio. Dale tiempo a quien narra de pensar, así como de hablar.
• Utiliza gestos verbales y no verbales para “tomar tu turno”
• Muestra sincera atención por lo estás escuchando

2. Promoviendo la explicación de una historia

En ocasiones los usuarios -bien por timidez, o falta de confianza-, no saben cómo explicar una historia, así que tenemos que buscar las preguntas adecuadas que le permitan al futuro narrador explicar su historia, que al fin y al cabo es la mejor forma de conocerle.

Para romer el hielo, preguntas como las siguientes fomentan la narración de una historia:

• ¿Alguna ves has hecho “x ó y”?
• ¿Con qué frecuencia hiciste ” x ó y”?
• ¿Qué hizo decidirte a hacer ” x ó y”?
• ¿Dónde hiciste ” x ó y”?

3. Atención a los pequeños fragmentos de historias

Si estamos empleando el storytelling para hacer investigación sobre usuarios en un contexto determinado, es importante prestar atención a los pequeños fragmentos de la misma historia que coincidan entre distintos narradores:

• hay que buscar historias que coincidan entre más de un narrador,
• donde intervengan activamente las emociones,
• historias que te den datos sobre los usuarios, e
  
• historias que te sorprendan o contradigan un acción.
  

Las historias nos ayudan a sentir empatía y vivir la experiencia de otra persona. Las historias, apelan nuestras emociones y nos empujan a la acción.

@balchenn

Y recuerda…

Las historias, en UX, hacen TU trabajo más rico y persuasivo.

Las hisotrias ayudan a atraer, persuadir y convencer.

Las hisotrias son siempre sobre personas, situaciones, emociones y contextos; su uso fomenta aquello que los diseñadores de interacción siempre estamos buscando: soluciones centradas en el usuario.

Y sobre todo, la próxima vez que cuentes una historia, acuérdate de la emoción que sentías antes de la famosa frase de la abuela: “Había una vez…”

———————–

Recursos interesantes sobre Storytelling

• La presentación de workshop de Whitney en el UXLX:
  http://www.slideshare.net/StorytellingUX/storytelling-for-ux-workshop
• Libro “Storytelling for User Experience”:
  http://www.rosenfeldmedia.com/books/storytelling/
• UX Story Cards:
  http://www.wqusability.com/storycards.html
• Sketching notes from @francisrowland:
  http://www.flickr.com/photos/francisrowland/5733851828/in/set-72157626749810250/

Esta web creada “100% in-house” responde a la necesidad de ofrecer una nueva imagen, más fresca y actual, más sencilla.

Ha sido un trabajo de equipo, donde hemos compartido y disfrutado de su creación; comenzando desde la arquitectura de información, el sketching o el diseño y la maquetación.

Se han tenido que tomar decisiones drásticas y atrevidas en cuanto a la interacción y diseño de la web se refiere, pero hemos disfrutado con ello, desde el inicio.

Como resultado, podéis ver la nueva web de Arquinauta. El producto final ha salido ganando, tanto en facilidad de uso como en comunicación.

¡Esperamos que os guste! 

The most valuable of all talents is that of never using two words when one will do.  By Thomas Jefferson.

(vía mnmal.tumblr.com)

Productos sencillos y útiles para consumidores

Estas preguntas son a las que nos enfrenta Paul Buchheit con mucho éxito en su último post, “If your product is Great, doesnt need to be Good” (Si tu producto es magnífico, no necesita ser bueno), donde se analizan las razones del éxito de determinados productos.

What’s the right approach to new products? Pick three key attributes or features, get those things very, very right, and then forget about everything else.

¿Cuál es el enfoque correcto de un nuevo producto?
Escoge las tres características que mejor lo definan y desarróllalas lo mejor que puedas y, olvídate del resto.

Desde nuestro punto de vista, más cercano a la usabilidad y la experiencia de usuario, vendría a ser un menos es más, muy en consonancia con las leyes de la simplicidad, a las que tanto nos aferramos en nuestra profesión.

Una lectura obligada, con análisis de casos prácticos y experiencias personales (ipod, ipad, Gmail),  para todo aquel que quiera lanzar un producto, servicio o simplemente aplicar estos aspectos prácticos a su vida, trabajo o aficiones.

Artículo original:
http://paulbuchheit.blogspot.com/2010/02/if-your-product-is-great-it-doesnt-need.html

Básicamente es que los usuarios sepan lo que tienen que hacer. Que puedan navegar y saber qué hacer en cada momento, sin sentir que necesitan aprender cómo funciona la web, de una forma implícita o explícita. Es obvio.

It’s basically, they (the user) will just know what to do. They can walk up to it and know what to do right away, and they don’t feel they would need any training, whether explicit or implicit. It’s obvious.

No hay mucho más que añadir a las palabras de Jared Spoon, salvo que la obviedad muchas veces es difícil de percibir.
En el vídeo nos muestran mediante ejemplos de webs, aplicaciones y dispositivos, los factores que contribuyen y afectan a la creación de un diseño intuitivo.

Post original…
http://interactiondesign.sva.edu/blog/entry/video_jared_spool_what_makes_design_intuitive

En su momento, nos encargamos de la realización de talleres para definir concretamente cómo tendría que ser esta web, que contenidos se tendrían que potenciar y que funcionalidades deseaban que aparecieran.
El resultado se transformó en un árbol de contenidos rico y dinámico que dio paso a unos wireframes modulares que se pueden ver ahora por toda la web.

Estamos orgullosos de haber participado en este proyecto, sobre todo de trabajar con el equipo de comunicación y de tecnología de la UB, que nos han ayudado a poder entender mejor la naturaleza de la universidad y a poder crear una solución para todos los perfiles.

¡Mucho éxito UB!

Más sobre este proyecto

A medida que íbamos avanzando y la lista se completaba con las novedades de las últimas semanas (Adobe Catalyst y FlairBuilder) veíamos que, por una parte, iba a acabar siendo algo que ya ha hecho Adaptive Path o Wireframes Magazine y, por otra, nos distanciábamos de un elemento fundamental en nuestra filosofía y metodología: el concepto.

Diseño de interacción, wireframe, blueprint, esquema, modelo, prototipo, boceto… no importa cómo se le llame, qué técnica se utilice ni la apariencia del documento resultante, al final, lo importante es el concepto, la idea. Lo realmente importante no es la herramienta empleada ni la aparatosidad del documento resultante, sino la solución propuesta y su validez para las siguientes fases del proyecto, tanto si se trata del cliente para la toma de decisiones, como si es la base para diseñadores, maquetadores y programadores. Cada momento, cada proyecto, cada cliente tiene sus requerimientos y es ahí donde aparece de nuevo la necesidad de saber qué herramienta es mejor emplear para proporcionar el entregable adecuado: no siempre lo mejor es Axure, ni Visio, ni Balsamiq, ni un boceto a mano… unas veces será una cosa, otras veces otra, en muchas ocasiones varias soluciones combinadas.

Sí, esa es en definitiva la repuesta que damos habitualmente a quien nos pregunta “… ¿Y con qué herramienta trabajáis?”. Con la cabeza: trabajamos con la cabeza. Citándonos a nosotros mismos, “Yo no soy un Mac. Tampoco soy un PC. Soy el tipo que piensa tras las teclas”.

PS: Bueno, por si acaso alguien aún necesita una lista de herramientas, aquí la tiene:

Adobe Catalyst
Altia Design y Altia PhotoProto
Axure
Balsamiq Mockups
Concept Draw
Denim
Easy Prototype
FlairBuilder
Gliffy
Gui Design Studio
Inkkit
Inspiration
iPlotz
iRise
Jumpchart
Microsoft Visio
Mindomo
Mockup Screens
Napkin Look & Feel
OmniGraffle
Papel y lápiz/Sketching
Pencil Project
Petra
Protoshare
RapidRabb.it
Serena Composer
Smart Draw

Para no alargarla excesivamente, hemos excluido aplicaciones de diseño o producción genéricas (entre muchas otras Adobe Illustrator, Fireworks o Dreamweaver, Microsoft Expression Blend y Design, Visual JS, etc.) que, aunque pueden ser utilizadas para confeccionar árboles de contenidos, wireframes y prototipos de baja fidelidad, al final nos obligarían a incluir en la relación hasta una caja de palillos o una baraja de naipes.

Vols llegir aquest post en català?

Hay quien dice que no sabe dibujar, que no sabe plasmar ideas gráficamente. Al contrario de las creencias populares, creo que todos sabemos hacerlo; unos con más soltura, otros con menos, pero poder todos podemos.

Creo necesario aclarar que en el sketching no se trata de realizar un dibujo o trazo bonito o artístico, sino de transmitir ideas de forma rápida y sencilla, de forma que cualquier persona con sólo visualizar la imagen pueda comprender y asumir su contenido.

El sketching nos aporta velocidad y frescura a la hora de plasmar ideas de forma rápida, una inmediatez generalmente difícil de obtener con un software, más lento de ejecución y que hace que ideas frescas puedan ser olvidadas o transformadas por nuestra mente.

No existen restricciones, por lo que cada uno decide la profundidad de los bocetos a realizar, el detalle o el tipo de dibujo, pero se ha de tener en cuenta que lo importante en estos casos es el concepto, la idea a transmitir, no la calidad o el arte final del mismo.

Además, si algo falla o no agrada, podemos modificarlo de forma rápida y sencilla. Basta con coger otra hoja y comenzar de nuevo, o bien tapar los errores, apartados o partes que no nos convencen. Para modificarlo o crear uno nuevo, podemos basarnos en el boceto anterior, evitando los errores cometidos para no volver a tropezar con la misma piedra.

Al plasmar las ideas de forma inmediata, podemos reflexionar y aclarar conceptos, obteniendo una robustez que de otro modo difícilmente conseguiríamos, mejorando considerablemente el flujo de trabajo, tanto personal como del proyecto y equipo.

Una vez plasmadas estas ideas, podemos acudir al cliente para enseñarle los primeros pasos y trazos, y observar su reacción, para ver si el camino que hemos tomado es correcto y se adapta a sus necesidades.

Respecto a las herramientas utilizadas, con un papel y un bolígrafo es suficiente. Recientemente, Leah Buley de Adaptative Path, comenta en un artículo cuáles son sus herramientas para el sketching; un estuche con un lápiz, un bolígrafo y un par de rotuladores (para dar sombras), por lo que cualquiera puede practicarlo y aprovecharse de sus ventajas.

Vols llegir aquest post en català?