Es difícil comenzar a diseñar appscuando la información sobre eltema está en inglés, dispersa, o esdifícil de entender. «Diseñando appspara móviles» es la guía definitiva—en español— que necesitas paraaprender a diseñar apps útiles,atractivas y fáciles de usar. Losautores comparten desde suexperiencia personal los secretosque han aprendido diseñando appspara empresas como Yahoo, Zara oTelefónica.

Para Android, iOS y Windows

Phone.

¿Cuáles son las diferencias entrecada uno? ¿Cómo trasladar una appde un sistema operativo a otro? Ellibro responde estas y otraspreguntas con ejemplos ycomparativas visuales entre cadauno de estos sistemas operativosmóviles.

El proceso de diseño completo.

Desde la idea inicial de la app hastala publicación en las tiendas, ellibro cuenta el proceso completo enun lenguaje simple, fácil deentender y apoyado con numerosos

ejemplos. Sin una línea de código.

Entrevistas a profesionalesreconocidos.

Los autores entrevistaron arenombrados diseñadores ydesarrolladores como LorenBrichter, Irene Pereyra, ErikSpiekermann y Dustin Mierau, quecomparten los secretos que hanaprendido trabajando en algunas delas empresas más grandes delmundo.

Para diseñadores ydesarrolladores.

¿No sabes cómo preparar tu diseñopara el programador? ¿Sabes comoprogramar pero no cómo hacer quetu app sea atractiva y fácil de usar?Tanto diseñadores comodesarrolladores aprenderán coneste libro todo lo que necesitanpara poder trabajar juntos yconseguir una app exitosa.

Javier Cuello & JoséVittone

Diseñando appspara móviles

ePub r1.0XcUiDi 03.03.15

Título original: Diseñando apps paramóvilesJavier Cuello & José Vittone, 2013Ilustraciones de capítulos: ©TugaMOVILFotografías de los autores: Comitè-Fotogràfic

Editor digital: XcUiDiePub base r1.2

Este libro se ha maquetado siguiendo losestándares de calidad dewww.epublibre.org. La página, y suseditores, no obtienen ningún tipo debeneficio económico por ello. Si hallegado a tu poder desde otra web debessaber que seguramente sus propietarios síobtengan ingresos publicitarios mediantearchivos como este·

Adelante caminante.

Presentación

Diseñar aplicaciones no es una tareafácil, especialmente si no has trabajadoantes con ellas o si vienes del mundoweb, un contexto radicalmente diferenteal que ahora nos enfrentamos.

Aunque parecen un fenómenoreciente, la realidad es que lasaplicaciones hace tiempo que están entrenosotros. Últimamente, no solo se hanvuelto más populares y atractivas paralos usuarios, sino también para losdiseñadores y desarrolladores que estánsacando provecho de las posibilidadesque ofrecen las nuevas pantallas de

teléfono de mayor calidad. En una appeste avance tecnológico se traduce enmejores experiencias, apoyadas en eldiseño visual que ahora tiene másimportancia y responsabilidad.

Para los diseñadores es todo undesafío empezar a diseñar para móviles,pero también, es una buena oportunidadpara meterse en este ámbito donde losclientes demandan cada vez más ymejores productos.

Por supuesto, tampoco nos hemosolvidado de los programadores, pues elmercado exige aplicaciones de calidadque puedan destacarse de las demás y nobasta solo con que se vean bien. Deben,además, funcionar y ser fáciles de usar.

Tanto diseñadores comodesarrolladores deberían entoncestrabajar codo a codo, para lograraplicaciones que cuiden todos y cadauno de los detalles. Después de todo, laprimera impresión es la que cuenta.

Por eso, en los capítulos de estelibro, vamos a desarrollar variosconceptos que te servirán para producirproyectos de calidad.

¿Por qué este libro?

Somos conscientes de que hay pocomaterial en español sobre diseño deaplicaciones y el que hay, está dispersopor la red, fragmentado o es difícil deencontrar. Cuando nos estábamosiniciando en este trabajo, varias vecesquisimos buscar algo y terminamos conuna fea sensación de desconcierto al noencontrarlo: el ligero mareo mental desentirse perdido en un inmenso mar deinformación.

Nuestros comienzos en el diseño deapps no fueron nada fáciles. Todo eramuy diferente y no teníamos a nadie que

nos explicara, ni un lugar dondedespejar nuestras dudas. Ya han pasadounos pocos —pero valiosos— añosdesde entonces y lo que hemosaprendido, casi a la fuerza y sobre lamarcha, nos ha servido mucho…¡muchísimo!

Queremos compartir esto contigopara que no tengas que pasar años antesde aprenderlo. Aun así, te animamos aser curioso y a investigar también por tucuenta. Toma este libro como un puntode partida que te llevará por nuevosrumbos, desde donde puedas construir yrecorrer tu propio camino.

Sobre todas las cosas: ¡haz!,¡prueba!, ¡equivócate! Empieza a

diseñar lo antes posible, aun cuandosean pequeños proyectos personales.Observa cómo lo hacen los demás. Si notienes un teléfono, busca uno yexplóralo. Investiga y juega con él hastaque sientas que ya lo conoces, que notiene secretos para ti. También asíaprenderás.

Cómo estáestructurado

En los siguientes capítulos te guiaremosa través del proceso de diseño de unaaplicación, desde la idea inicial hasta lapublicación en las diferentes tiendas,pasando por el diseño de interacción yde interfaz. Y en cada uno de ellosencontrarás enlaces relacionados paraque puedas expandir tus conocimientossobre algunos conceptos o temasespecíficos.

Este libro no abarca solo el diseñovisual. Quisimos ir un poco más allá,

tocando temas de mercado, pruebas conusuarios o promoción de la app.Creemos firmemente en un diseñadorque está presente en todo el proceso dedesarrollo, que se involucra ycompromete en cada una de las etapaspara asegurar un producto de calidad.

Aunque hablamos del diseño deaplicaciones de manera global, en variasoportunidades establecemos paralelosentre los sistemas operativos paramóviles más comunes: Android, iOS yWindows Phone. Claramente, hemoselegido las dos primeras plataformasporque hoy en día son las másimportantes; la última, si bien no es tansignificativa en cantidad de usuarios —

todavía— ha roto un poco los esquemasa nivel de diseño presentando unapropuesta que se separa de las demás.

Adicionalmente, tambiéndescubrirás entrevistas con algunosprofesionales reconocidos del mundodel diseño, como Loren Brichter, DustinMierau, Irene Pereyra o ErikSpiekermann, entre otros. Los hemoscontactado especialmente para que noscuenten su visión sobre el mundo de lasapps, enriqueciendo enormemente loscontenidos.

Al final del libro encontrarás unglosario con términos comunes de esteentorno, en caso de que necesitesfamiliarizarte con ellos. Siéntete libre

de consultarlo cada vez que no entiendasalgo, queremos asegurarnos de quecomprendas el significado de lo que teestamos contando.

Acerca de los autores.

No creas que somos soberbiosponiéndonos aquí adelante, en lasprimeras páginas, ¡ni mucho menos!Simplemente, queremos ser buenosanfitriones y antes de dejarte pasear porlos contenidos, queremos que sepasquienes somos.

Javier «Simón» Cuello

Nació en Mendoza, Argentina. Unapequeña ciudad al oeste del país y al piede las montañas, conocida por susárboles, acequias y la calidad de susvinos. «Simón» tuvo la suerte de quererser diseñador gráfico desde muypequeño y, a medida que fue creciendo,a su formación visual le fue sumando unparticular interés por lo interactivo y lasnuevas tecnologías.

Sus últimos años en Barcelona sonsimplemente la confirmación de esto. Hatrabajado en diseño de aplicacionesmóviles desde las primeras versiones deiOS y Android, para clientes como Zaray Yahoo!

Además de diseñar, a «Simón» le

encanta viajar y trabajar en equipospequeños. Mientras no esté cumpliendosu sueño de recorrer el mundo y diseñaral mismo tiempo, lo encontraráspensando ideas para algún proyectoindependiente.

Si quieres conocer más a «Simón»,deberías seguirlo en Twitter:@millonestarde.

José Vittone

José es también originario de Argentina,pero del interior de la provincia deBuenos Aires. Actualmente vive enBarcelona, donde hace unos cuatro añosconoció a «Simón» cuando erancompañeros de Máster en Elisava.

Trabajó en Usolab y allí aprendió loque en realidad significa la usabilidad yel diseño centrado en el usuario. Desdehace ocho años diseña interfaces,participando tanto en laconceptualización como en laproducción de los proyectos. Durante elúltimo tiempo, ha estado haciendomalabares con varias aplicacionesmóviles para múltiples plataformas.

Le apasiona el cuidado de los

pequeños detalles que hacen grandesdiferencias, tiene una curiosidad innatapara investigar cómo funcionan lascosas y siempre está al día con lasnuevas tecnologías.

José publica regularmente enTwitter, no te pierdas sus comentarios ysíguelo en: @josevittone.

Acerca de las ilustraciones

La prensa usada por TugaMOVIL, en plenoproceso de trabajo.

En cada capítulo vas a encontrar una

presentación de los contenidosacompañada de una imagen. Estosdibujos son obra de TugaMOVIL, unpequeño estudio polaco-chileno quetrabaja desde Barcelona y a quienestenemos la fortuna de contar entrenuestros amigos cercanos. Presta muchaatención a estas ilustraciones creadaspor Maga y Seba que te acompañarán enel viaje que estamos a punto decomenzar.

¡Ahí vamos!

Capítulo 1.

Las aplicaciones.

Aunque no parezca, las aplicacionesllevan tiempo entre nosotros. Antesde empezar a diseñarlas, queremosque las conozcas: ¿Cuáles son sustipos y características? ¿Quédiferencias hay entre ellas y conuna web móvil?

¿Qué son lasaplicaciones?

Las aplicaciones —también llamadasapps— están presentes en los teléfonosdesde hace tiempo; de hecho, ya estabanincluidas en los sistemas operativos deNokia o Blackberry años atrás. Losmóviles de esa época, contaban conpantallas reducidas y muchas veces notáctiles, y son los que ahora llamamosfeature phones, en contraposición a lossmartphones, más actuales.

En esencia, una aplicación no dejade ser un software. Para entender un

poco mejor el concepto, podemos decirque las aplicaciones son para losmóviles lo que los programas son paralos ordenadores de escritorio.

Figura 1.1. En la AppStore hay casi un millónde apps disponibles.

Actualmente encontramosaplicaciones de todo tipo, forma y color,pero en los primeros teléfonos, estabanenfocadas en mejorar la productividadpersonal: se trataba de alarmas,

calendarios, calculadoras y clientes decorreo.

Hubo un cambio grande con elingreso de iPhone al mercado, ya quecon él se generaron nuevos modelos denegocio que hicieron de las aplicacionesalgo rentable, tanto para desarrolladorescomo para los mercados deaplicaciones, como App Store, GooglePlay y Windows Phone Store.

Al mismo tiempo, tambiénmejoraron las herramientas de las quedisponían diseñadores y programadorespara desarrollar apps, facilitando latarea de producir una aplicación ylanzarla al mercado, incluso por cuentapropia.

Diferencias entreaplicaciones y web

móviles.

Las aplicaciones comparten la pantalladel teléfono con las webs móviles, peromientras las primeras tienen que serdescargadas e instaladas antes de usar, auna web puede accederse simplementeusando Internet y un navegador; sinembargo, no todas pueden versecorrectamente desde una pantallageneralmente más pequeña que la de unordenador de escritorio.

Las que se adaptan especialmente a

un dispositivo móvil se llaman «webresponsivas» y son ejemplo del diseñolíquido, ya que se puede pensar en ellascomo un contenido que toma la formadel contenedor, mostrando lainformación según sea necesario. Así,columnas enteras, bloques de texto ygráficos de una web, puedenacomodarse en el espacio de una maneradiferente —o incluso desaparecer— deacuerdo a si se entra desde un teléfono,una tableta o un ordenador.

Figura 1.2. El diseño «responsivo» se adaptadependiendo del dispositivo dónde es

visualizado.

Quienes cuentan ya con una «webresponsiva» pueden plantearse lanecesidad de diseñar una aplicación,pero la respuesta a si esto es o no

necesario, depende de entender tanto losobjetivos de negocio, como lascaracterísticas que diferencian lasaplicaciones de las webs.

Por ejemplo, las aplicacionespueden verse aun cuando se está sinconexión a Internet, además, puedenacceder a ciertas características dehardware del teléfono —como lossensores—, capacidades queactualmente están fuera del alcance delas webs. Por lo anterior, puede decirseque una aplicación ofrece una mejorexperiencia de uso, evitando tiempos deespera excesivos y logrando unanavegación más fluida entre loscontenidos.

No siempre hay que elegir entre unau otra. Webs y aplicaciones no soncompetidoras, más bien, puedencomplementarse entre ellas; porejemplo, una web puede ser útil comocanal de información para motivar ladescarga de la aplicación.

Primero el móvil.

Es posible que cuando llegue la hora dediseñar una aplicación ya exista unaweb como antecedente. En esos casos,la app tiene que tomar las funciones ycontenidos que se han pensando para laweb y adaptarlos para que tengansentido, de acuerdo al tamaño depantalla y a la forma de interacción deun móvil.

En otros casos, el diseño comienzadesde cero, cuando todavía no hay niweb ni aplicación, y hay que decidirsepor cual de ellas empezar. Aquí esdonde adquiere más trascendencia el

concepto de mobile first, que implicaplantear el proceso de diseño teniendoen cuenta el móvil en primer lugar.

La ventaja de esta forma de trabajares que el pensar en el móvil como puntode partida, obliga a concentrarse en loesencial de un producto y a hacer focosolo en lo que tiene sentido para estedispositivo.

Una vez que la aplicación estádiseñada, puede preguntarse cuál es lamejor forma de llevar lo hecho para elteléfono a una pantalla de ordenador o aotros dispositivos, extendiendo yescalando el contenido y repensando ladiagramación. Todos los dispositivostienen usos diferentes, y en el momento

de adaptar el diseño, hay que tener encuenta las características particulares decada uno de ellos.

Mobile first es una propuesta detrabajo que ha surgido recientemente;una tendencia emergente que aún estápor consolidarse. Actualmente, es solouna manera de afrontar el proceso dediseño y como tal, puede evaluarse lacomodidad que se tiene trabajando deesta forma antes de empezar[1].

El proceso de diseñoy desarrollo de una

app.

El proceso de diseño y desarrollo deuna aplicación, abarca desde laconcepción de la idea hasta el análisisposterior a su publicación en las tiendas.Durante las diferentes etapas,diseñadores y desarrolladores trabajan—la mayor parte del tiempo— demanera simultánea y coordinada.

Hemos resumido las fases de esteproceso solo desde la perspectiva deldiseño y desarrollo, es decir, sin tener

en cuenta los roles de coordinación, laparticipación del cliente, ni losaccionistas de la empresa.

Cada una de las etapas —excepto lade desarrollo— se explica másextensamente en los capítulos siguientes,detallando procesos y metodologíaspara ir avanzando entre ellas.

Figura 1.3. El proceso de diseño abarcadiferentes etapas donde diseñador y

desarrollador trabajan simultáneamente, con

más o menos carga de trabajo dependiendo delmomento.

1. Conceptualización

El resultado de esta etapa es una idea deaplicación, que tiene en cuenta lasnecesidades y problemas de losusuarios. La idea responde a unainvestigación preliminar y a la posteriorcomprobación de la viabilidad delconcepto.

IdeaciónInvestigación

Formalización de la idea

2. Definición

En este paso del proceso se describecon detalle a los usuarios para quienesse diseñará la aplicación, usandometodologías como «Personas» y«Viajes del usuario». También aquí sesientan las bases de la funcionalidad, locual determinará el alcance del proyectoy la complejidad de diseño yprogramación de la app.

Definición de usuariosDefinición funcional

3. Diseño

En la etapa de diseño se llevan a unplano tangible los conceptos ydefiniciones anteriores, primero enforma de wireframes, que permiten crearlos primeros prototipos para serprobados con usuarios, yposteriormente, en un diseño visualacabado que será provisto aldesarrollador, en forma de archivos

separados y pantallas modelo, para laprogramación del código.

WireframesPrototiposTest con usuariosDiseño visual

4. Desarrollo

El programador se encarga de dar vida alos diseños y crear la estructura sobre lacual se apoyará el funcionamiento de laaplicación. Una vez que existe la

versión inicial, dedica gran parte deltiempo a corregir errores funcionalespara asegurar el correcto desempeño dela app y la prepara para su aprobaciónen las tiendas.

Programación del códigoCorrección de bugs

5. Publicación

La aplicación es finalmente puesta adisposición de los usuarios en lastiendas. Luego de este paso

trascendental se realiza un seguimiento através de analíticas, estadísticas ycomentarios de usuarios, para evaluar elcomportamiento y desempeño de la app,corregir errores, realizar mejoras yactualizarla en futuras versiones.

LanzamientoSeguimientoActualización

Tipos de aplicacionessegún su desarrollo.

A nivel de programación, existen variasformas de desarrollar una aplicación.Cada una de ellas tiene diferentescaracterísticas y limitaciones,especialmente desde el punto de vistatécnico.

Aunque a primera vista esto noparezca incumbencia del diseñador, larealidad es que el tipo de aplicación quese elija, condicionará el diseño visual yla interacción.

Aplicaciones nativas

Las aplicaciones nativas son aquellasque han sido desarrolladas con elsoftware que ofrece cada sistemaoperativo a los programadores, llamadogenéricamente Software DevelopmentKit o SDK. Así, Android, iOS yWindows Phone tienen uno diferente ylas aplicaciones nativas se diseñan yprograman específicamente para cadaplataforma, en el lenguaje utilizado porel SDK.

Este tipo de apps se descarga e

instala desde las tiendas de aplicaciones—con ciertas excepciones en el caso deAndroid, que veremos en el capítulo«Lanzando la app»— sacando buenpartido de las diferentes herramientas depromoción y marketing de cada una deellas.

Las aplicaciones nativas seactualizan frecuentemente y en esoscasos, el usuario debe volver adescargarlas para obtener la últimaversión, que a veces corrige errores oañade mejoras.

Una característica generalmentemenospreciada de las apps nativas, esque pueden hacer uso de lasnotificaciones del sistema operativo

para mostrar avisos importantes alusuario, aun cuando no se esté usando laaplicación, como los mensajes deWhatsapp, por ejemplo.

Figura 1.4. Las aplicaciones nativas permitenaprovechar el sistema de notificaciones.

Además, no requieren Internet parafuncionar, por lo que ofrecen unaexperiencia de uso más fluida y estánrealmente integradas al teléfono, lo cualles permite utilizar todas lascaracterísticas de hardware delterminal, como la cámara y los sensores(GPS, acelerómetro, giróscopo, entreotros).

A nivel de diseño, esta clase deaplicaciones tiene una interfaz basada enlas guías de cada sistema operativo,logrando mayor coherencia yconsistencia con el resto de aplicaciones

y con el propio SO. Esto favorece lausabilidad y beneficia directamente alusuario que encuentra interfacesfamiliares.

Aplicaciones web

La base de programación de lasaplicaciones web —también llamadaswebapps— es el HTML, conjuntamentecon Javascript y CSS, herramientas yaconocidas para los programadores web.

En este caso no se usa un SDK, locual permite programar de formaindependiente al sistema operativo en el

cual se usará la aplicación. Por eso,estas aplicaciones pueden ser fácilmenteusadas en diferentes plataformas sinmayores inconvenientes y sin necesidadde desarrollar un código diferente paracada caso particular.

Las aplicaciones web no necesitandescargarse e instalarse, ya que sevisualizan usando el navegador delteléfono como un sitio web normal. Poresta misma razón, no se distribuyen enuna tienda de aplicaciones, sino que secomercializan y promocionan de formaindependiente.

Al tratarse de aplicaciones quefuncionan sobre la web, no es necesarioque el usuario reciba actualizaciones, ya

que siempre va a estar viendo la últimaversión. Pero, a diferencia de las appsnativas, necesitan una conexión aInternet para funcionar correctamente.

Figura 1.5. Facebook cuenta tanto con unawebapp como con una app nativa.

Adicionalmente, tienen algunas

restricciones e inconvenientes enfactores importantes como gestión dememoria y no permiten aprovechar almáximo la potencia de los diferentescomponentes de hardware del teléfono.

Las aplicaciones web suelen teneruna interfaz más genérica eindependiente de la apariencia delsistema operativo, por lo que laexperiencia de identificación del usuariocon los elementos de navegación einteracción, suele ser menor que en elcaso de las nativas.

Aplicaciones híbridas

Este tipo de aplicaciones es una especiede combinación entre las dos anteriores.La forma de desarrollarlas es parecida ala de una aplicación web (usandoHTML, CSS y Javascript), y una vez quela aplicación está terminada, se compilao empaqueta de forma tal, que elresultado final es como si se tratara deuna aplicación nativa.

Esto permite casi con un mismocódigo obtener diferentes aplicaciones,por ejemplo, para Android y iOS, ydistribuirlas en cada una de sus tiendas.

A diferencia de las aplicacionesweb, estas permiten acceder, usandolibrerías, a las capacidades del teléfono,tal como lo haría una app nativa[2].

Figura 1.6. Netflix tiene una aplicaciónhíbrida que se ve prácticamente igual en iOS y

en Android.

Las aplicaciones híbridas, tambiéntienen un diseño visual que no se

identifica en gran medida con el delsistema operativo. Sin embargo, hayformas de usar controles y botonesnativos de cada plataforma paraapegarse más a la estética propia decada una.

Existen algunas herramientas paradesarrollar este tipo de aplicaciones.Apache Cordova[3] es una de las máspopulares, pero hay otras, comoIcenium[4], que tienen la mismafinalidad.

¿Cuál deberías usar?

Dadas las características de cada una delas aplicaciones, decidirse por una uotra estará determinado por unos pocosfactores fundamentales y por la forma enque afectan finalmente la experiencia deuso. Cuando la disponibilidad de la appsin Internet, la posibilidad de usarnotificaciones y el acceso a los recursosde hardware del teléfono seanimportantes, una aplicación nativa serála opción más indicada.

Si ninguna de estas cosas esrealmente importante para la aplicación,quizás sea más fácil diseñar unaaplicación web, si es que ya se disponedel conocimiento para ello, heredadodel desarrollo de sitios web. En este

caso, el costo de desarrollo es más bajoy la forma de trabajar un poco más ágil.

Independientemente de esto, lasaplicaciones nativas son las que ofrecenuna mejor experiencia de uso y sobretodo, rendimiento. Algunas apps comoFacebook o LinkedIn, que antes eranhíbridas, han pasado a ser nativas poreste motivo. Adicionalmente, ellasresponden más a las guías de diseño decada sistema operativo.

Por lo anterior, nos enfocaremos enlas aplicaciones nativas. De aquí enadelante, y por el resto de los capítulosque quedan por venir, vamos aestudiarlas, conocerlas y a ver qué lashace diferentes.

Capítulo 2.

Entendiendo las posibilidades.

Un poco antes de desarrollar la ideade una aplicación hay que tomar unaserie de decisiones que marcarán elrumbo del proyecto. En estecapítulo te mostramos lasdiferentes opciones para sacarrédito económico de tu aplicación yel equipo y recursos quenecesitarás para seguir adelante.

Categorías deaplicaciones.

Una forma de agrupar las aplicacioneses de acuerdo al tipo de contenido queofrecen al usuario. La categoría a la quese pertenezca condicionará, a nivel dediseño, con qué nivel de detalle contarála interfaz y también influirá en lasposibilidades de monetización de laaplicación.

Puede parecer injusto etiquetar lasapps, porque difícilmente suelenpertenecer a una sola categoría. Incluso,muchas veces pueden estar en más de

una por igual, pero siendo rigurosos encuanto al objetivo principal de lasaplicaciones, las hemos dividido de lasiguiente forma:

Entretenimiento

Este es el lugar donde viven las apps dejuegos y aquellas que de una forma uotra, proponen diversión para el usuario.Gráficos, animaciones y efectos desonido intentan mantener la atenciónconstante e ininterrumpida en lo que estásucediendo en la pantalla.

Figura 2.1. Angry Birds es uno de los juegospara móviles más populares del momento.

Generalmente, presentan un diseñono tan apegado a los lineamientos de suplataforma. Un ejemplo es AngryBirds[1], que propone gráficos similaresentre los diferentes sistemas operativos.

En cuanto al modelo de negocio, sonflexibles porque pueden descargarse

pagando por versiones completas uofrecer otras posibilidades de compra:por ítems, por niveles, etc.

Sociales

Las aplicaciones sociales son aquellasque se orientan principalmente a lacomunicación entre personas,construcción de redes de contactos einteracción entre usuarios. Es por todosconocido el caso de Facebook, peroaquí también se encuentran otras comoPath[2], Twitter[3] e Instagram[4].

Figura 2.2. Path es una red social que solopermite 150 amigos como contactos.

Suelen ser gratuitas y su modelo denegocio radica en la información

personal que se obtiene de los usuarioso en las compras dentro de la app, porejemplo, los stickers en el caso de Path.

Utilitarias y productividad

Más asociadas con el sectorempresarial, las aplicaciones utilitariasproporcionan herramientas parasolucionar problemas bastanteespecíficos y se basan en la ejecuciónde tareas concretas, cortas y rápidas. Eneste caso se privilegia la eficienciasobre todo lo demás.

En este apartado comúnmente

encontramos las listas de tareas (Clear[5]

y Flow[6]) o aquellas apps orientadas aequipos de trabajo (Basecamp[7] yEvernote[8]), donde los usuarios dan másvalor a aquellas herramientas quepermitan simplificar sus tareas diarias.

Figura 2.3. Clear revolucionó las apps detareas con su estilo particular.

En esta categoría el modelo denegocio es variable. Si la aplicación seencuentra solo disponible para móvil, lonormal es que se pague por la descarga,como en el caso de Clear. En cambio,aquellas que están asociadas a unservicio en la nube por el cual ya sepaga, como Basecamp, se descargan deforma gratuita.

Educativas e informativas

Las aplicaciones educativas y deinformación se usan como transmisoresde conocimiento y noticias. En estasapps se privilegia el acceso alcontenido, por este motivo, lalegibilidad, facilidad de navegación yherramientas de búsqueda sonfundamentales.

Figura 2.4. Articles es una buena alternativa ala app de Wikipedia, aunque es de pago.

Algunas de ellas, como Articles[9],se pagan; mientras que otras, comoWikipedia, son gratuitas.

Creación

Estas aplicaciones ponen el foco en lacreatividad del usuario y en ofrecerleherramientas para potenciarla. Porejemplo, aquellas que permiten editarvídeos, retocar fotografías, producirsonidos o escribir.

Figura 2.5. Paper para iPad es una app decreación que se basa en la metáfora del bloc de

dibujo.

Aunque suelen ser pagas, algunasofrecen versiones gratuitas —no tancompletas— o añaden componentes ofunciones extra que deben pagarseindividualmente. Un ejemplo de este

tipo de aplicaciones es Paper[10].

Aplicaciones gratis,de pago… o un poco

de las dos.

Sobre este tema hay y habrá muchodebate. Las apps son un tipo de productorelativamente nuevo y, si bien muchasveces responden a modelos de negocioya usados para otro tipo de software, enalgunos casos hay incertidumbre sobrecuál es la mejor forma de obtener dinerocon ellas o cuál puede ser la gananciaprevista.

Aún así, puede ser que el objetivode la app no sea conseguir dinero, sino

servir como canal de comunicación conlos usuarios o como una forma deextender el alcance de marca. Decualquier forma, se trata de una decisiónpersonal —en el caso de losdesarrolladores independientes— o queresponde a objetivos globales —paralas marcas—.

Claramente, cada uno de losmodelos —gratuito o de pago— tienepros y contras. Aquí los explicamospara ayudarte a tomar una decisión másinformada, aun cuando las dosalternativas se mezclan entre sí.

Apps gratuitas

Sin dudas el mayor beneficio que sepuede obtener de una aplicación gratuitaes el alcance o la cantidad de usuariospotenciales a los que puede llegar, yaque no hay ninguna barrera de entradapara que un usuario descargue laaplicación y empiece a probarla.

Este primer paso es fundamentalpara el conocimiento de la aplicación:quien la descargue no tiene nada queperder. Esto disminuye en cierta formalas expectativas sobre el producto —

nadie espera que algo gratis seanecesariamente genial— y puede servirpara ciertos casos en los que el productoaún tiene camino de desarrollo pordelante hasta su maduración. En estecaso, su colocación gratuita en elmercado, permite usar ciertosindicadores del comportamiento de losusuarios —cómo usan la app o qué tanfrecuentemente, por ejemplo— paramejorar futuras versiones.

Un inconveniente a tener en cuentacon las aplicaciones gratuitas es que,debido a la gran competencia, es másdifícil obtener visibilidad en losrankings de mejores aplicaciones de lasdiferentes tiendas. Además, requieren

una cantidad total de descargas mayorque la necesaria en las aplicaciones depago para llegar a los primeros puestos.

Una aplicación gratuita tambiénpuede servir como ventana parapromocionar una versión paga de ellamisma u otras aplicaciones del mismodesarrollador.

Finalmente, que una app sea gratuita,no quiere decir que no se pueda obtenerningún dinero con ella, como se verámás adelante.

Apps de pago

Las aplicaciones de pago tienen lascosas más difíciles a la hora de serexitosas porque requieren un grannúmero de descargas para ser rentables;además, poner un precio a la descargasuele ser una barrera difícil de sortearpara el usuario que no se quierearriesgar a pagar por algo que aun noconoce. Salvo casos puntuales, comoCut the rope[11], muchas de ellas noconsiguen tener un alcance masivo.

Figura 2.6. Cute the Rope y Whatsapp son dosapps que a pesar de ser de pago han conseguido

muchísimas descargas.

Que un usuario esté dispuesto a

pagar o no por una app, depende devarias cosas. Una de ellas tiene que vercon las alternativas gratuitas que puedaencontrar. Si dos aplicaciones sonsimilares —a nivel de funcionalidad ydiseño—, pero una de ellas es paga y laotra no, obviamente es más probable quese descargue la aplicación gratuita.

La tienda donde se encuentre la apptambién determina las posibilidades decobrar por ella. Por ejemplo, un usuariode iPhone está más acostumbrado apagar por una aplicación que alguienque usa Android o Windows Phone;pero, quizás por esta misma razón,demanda más calidad para colmar susexpectativas. Esto sucedió durante un

tiempo con Whatsapp, que dependiendode la tienda donde se descargara, habíaque pagar o no por ella, aun cuando lasprestaciones y características de laaplicación eran prácticamente idénticasen cada caso.

Independientemente de la plataformadonde se encuentre, el usuario paga porel valor, por algo que la app le aporte—que las demás no— y que justifique suprecio, un precio que muchas veces, estácondicionado por el mercado y por lacompetencia.

Un parámetro importante que suelentener en cuenta los usuarios antes depagar por una app es su valoración porparte de otros usuarios. Cuantas más y

más altas valoraciones tenga, muchomejor. Es más probable que un usuariopague por una app con 100calificaciones y una media de 4.5estrellas, que por una que no tenganinguna valoración o que solo tengavaloraciones negativas.

Freemium

El modelo freemium es una combinaciónde los dos anteriores. Su nombre vienede mezclar las palabras inglesas free ypremium, y consiste en descargar laaplicación de forma gratuita,

permitiendo al usuario un uso básico ylimitado, con la posibilidad de recibirfunciones más avanzadas, que se liberanprevio pago.

En cierta forma, puede decirse queeste modelo tiene lo mejor de ambosmundos: la app puede llegar a unnúmero mayor de personas al sergratuita, pero también permite ofrecerservicios avanzados a los usuarios querealmente la encuentran útil o quierensacarle el máximo provecho.

La dificultad reside en determinarqué partes de la aplicación ofrecer deforma gratuita y por cuáles esconveniente hacer pagar al usuario. Porejemplo, brindar demasiadas funciones

gratuitas hará que poca gente quieraadquirir las pagas, pues la versióngratuita les resultará suficiente. Por otrolado, si la mayoría de funciones son depago, los usuarios pueden encontrar laaplicación poco práctica y dejarán deusarla.

Un claro ejemplo de este tipo dedistribución, son aquellos juegos quedejan avanzar ciertos niveles, pero parallegar hasta el final hay que pagar por laversión completa.

Monetización.

Los modelos de monetización sondiferentes caminos para obtener dinero através de las aplicaciones. No debenverse de forma individual y separada, yaque suelen depender de si la app esgratis, paga o freemium, y también de lacategoría de la aplicación.

Compras dentro de la app (In-app purchase)

Algunas apps permiten pagar pequeñas

cantidades de dinero por la compra deítems separados que mejoran lasprestaciones básicas; por ejemplo,algunas aplicaciones de fotografíavenden filtros de fotos avanzados. Estambién el caso de las apps que ofrecencontenidos premium o suscripciones.Esta forma de monetización está másasociada a la distribución freemium.

Figura 2.7. Line es una app que usa lascompras in-app para vender pegatinas.

Pagar por la versióncompleta

En este caso, las aplicaciones sedesarrollan en dos versiones: unagratuita con funciones básicas, quepermite al usuario probarla con algunaslimitaciones o publicidad y una paga,que ofrece más posibilidades para quienesté convencido de la compra luego dehaber probado la versión gratuita.

Este modelo está usándose cada vezmenos por los inconvenientes quepresenta tener dos aplicacionesseparadas. Por un lado, los usuarios quequieren la versión premium tienen quedescargar una nueva aplicación, con ladificultad que esto ocasiona, pues anivel de desarrollo no siempre es fáciltrasladar la configuración que hadefinido el usuario de una versión a laotra.

Además, las valoraciones de losusuarios y la posición dentro de losrankings de las tiendas de aplicacionesson independientes para cada una de lasversiones.

Figura 2.8. Fruit Ninja es una app que tieneuna versión gratis y otra de pago.

No obstante, estos inconvenientespueden evitarse ofreciendo la versiónpremium como una compra dentro de laapp.

Publicidad

La publicidad puede usarse enaplicaciones gratuitas como herramientapara obtener rédito económico. Suelepresentarse en forma de pequeñosavisos que pueden ser pulsados por elusuario para acceder a otras webs odescargar otras aplicaciones. En estemodelo la ganancia depende de lacantidad de gente que entre a losanuncios.

Como principales inconvenientes sepueden nombrar la intrusión a laprivacidad del usuario y que lavisualización de avisos afecta laexperiencia general.

Cada sistema operativo tiene supropio sistema de publicidad y en cada

uno de ellos las condiciones serándiferentes. Google ofrece un programade publicidad para las aplicaciones enAndroid llamado Google AdMob[12];por su parte, para iOS se encuentraiAd[13] y para Windows Phone,Microsoft Advertising[14].

Figura 2.9. Cada sistema operativo tiene

diferentes programas de publicidad para susapps.

Al considerar la opción de incluirpublicidad, es muy importante pensar enqué plataformas se quiere distribuir laaplicación. Los avisos pueden versecomo algo normal en Android, ya quemuchos de sus usuarios prefieren veranuncios a pagar por una app, peropueden ser un problema en aplicacionespara iOS donde los usuarios tienen uncomportamiento diferente frente a lapublicidad.

Para qué plataformadesarrollar.

Antes de decidir si diseñar para una ovarias plataformas, se debe tener encuenta todo aquello que afectará eldesarrollo, desde los recursos y lacomplejidad, hasta el tipo de usuario alque se quiere orientar.

Actualmente los sistemas operativoscon mayor penetración en el mercadoson Android y iOS, en ese orden[15].Entre ellos se reparten la mayor partedel pastel, mientras el tercer puesto estáun poco más disputado, con una

participación activa de Windows Phonepara ganarse ese lugar.

Mayor alcance oexclusividad

Diseñar para un sistema operativopopular como Android supone conseguirun alcance y una cantidad de usuariospotenciales mayor. Sin embargo, lasdiferentes resoluciones de pantalla yversiones del sistema operativodisponibles hacen más compleja laexperiencia de diseñar para Android,pagando así —en cierta medida— el

precio de estar disponible para máspersonas.

Por otro lado, diseñar para iOSsignifica concentrarse en un mercadomenor y a la vez, más exclusivo. Appleno tiene la misma cantidad de usuariosque los móviles con Android —ni cerca— pero aun así, tiene la ventaja de sermás consistente en las resoluciones depantalla y en las versiones del sistemaoperativo (es más fácil actualizarse).Por lo cual, estos factores no suponen ungran impedimento a la hora de diseñar.

Por su parte, Windows Phone correcon franca desventaja frente a estos dosgigantes, pero su crecimiento de la manode Nokia y HTC le ha dado algo de

fuerza. Si bien, por su número deusuarios, ahora está fuera de la pelea,representa un mercado que a futuropuede llegar a crecer.

Entonces, si realmente se quierediseñar una aplicación «para todo elmundo», está fuera de discusión que porlo menos debería estar disponible paraAndroid y iOS.

Personalidad de losusuarios

Cada sistema operativo tiene usuarioscon características —geográficas,

demográficas, psicográficas yconductuales— que los diferencian.Aunque a primera vista parezca algo sinimportancia, conocer el tipo de usuarioda algunas pistas acerca de quien usarála aplicación y, sobre todo, qué esperade ella.

En general, puede decirse que losusuarios de iOS dan mayor valor a laexperiencia de usuario, se interesan porlos detalles y tienen un perfilsocioeconómico más alto que losconsumidores de otras plataformas. Poresta misma razón, están más habituadosa pagar por las aplicaciones[16]. Alguienque usa iOS es amante de laconsistencia, de ver cada cosa en su

lugar y prefiere no encontrarse condemasiadas sorpresas. Esto se debe engran parte a que Apple es un sistemamás cerrado y restrictivo a la hora deaprobar las aplicaciones, estableciendoreglas de diseño que aseguran ciertacalidad y regularidad en sus apps.

Android por su parte, es un sistemaoperativo de código abierto, libre paralos aportes de usuarios y compañías quemuchas veces le dan su toque personal.Esto define a un usuario más dispuesto aideas nuevas, a aplicaciones que rompenparadigmas y que presentan alternativaspara diferenciarse, lo cual a vecessignifica toparse con aplicaciones unpoco caóticas, más allá de los últimos

esfuerzos de Google por establecer conmayor claridad sus lineamientosgenerales de diseño. De la misma forma,al encontrarse en una mayor cantidad determinales con variedad de preciosdiferentes, Android tiene un alcance másmasivo.

Finalmente, Windows Phone es unsistema operativo que está atrayendo alos usuarios amantes de la simplicidadque transmite su interfaz plana ydespojada de lujos. Se asocia más conla practicidad sobre la estética y poresto, parece centrarse en usuarios queprefieren una buena experiencia a travésde una navegación simple.

Trabajar solo o enequipo.

Afrontar un proyecto es un camino quepuede tornarse bastante largo,dependiendo de la complejidad deldesarrollo y del alcance que tenga laapp. Producir una aplicación requiere deal menos dos personas: diseñador ydesarrollador.

El diseñador será el encargado dedefinir, entre otras cosas, la estructurageneral de las pantallas y sus elementosde interacción, el diseño de la interfaz yla preparación de los archivos para

enviarlos al desarrollador, quien a suvez, se encargará de que la aplicacióndeje de ser un conjunto de imágenes enpantalla, programando su funcionalidad.

Entre los dos pueden definiraspectos generales de funcionamiento, elalcance del proyecto y la experiencia deuso que se quiere conseguir con laaplicación. De hecho, trabajar enconjunto permite complementar losconocimientos de cada uno sobre el áreadel otro. Por ejemplo, un diseñadorpuede plantear una interfaz determinada,pero el desarrollador tiene que estaratento a este diseño para indicar lacomplejidad del desarrollo. Por otraparte, un desarrollador debe proponer la

funcionalidad siguiendo los consejos deusabilidad del diseñador. De estamanera, trabajando en tándem, puedeobtenerse una aplicación de calidad.

Los equipos pequeños permiten unaforma de trabajo ágil: siempre es másfácil y rápido ponerse acuerdo con unapersona que con dos o tres, pero dealguna forma limitan la calidad delproyecto y la complejidad a la que sepuede aspirar.

El anterior es el grupo mínimofundamental, pero si hablamos deideales o de un Dream Team, el equipopuede hacerse bastante más grande,incluyendo un líder de proyecto que seocupe de la coordinación general,

especialistas en arquitectura deinformación y en usabilidad,diseñadores visuales, desarrolladoresexpertos en una plataforma, ilustradores,e incluso, redactores y personal de QA—control de calidad— que asegurenalcanzar la calidad deseada de laaplicación.

El inconveniente de un equipo másgrande es que implica un mayor esfuerzode coordinación entre las partes y unagran cantidad de gestión que semultiplica por cada participante. Nosiempre más es mejor, por lo que,cuando se incluyen más personas en elgrupo, es necesario definir con detalle elpapel de cada una dentro del proyecto,

para que sea realmente de ayuda y notodo lo contrario.

Productos de excelente calidad,como iA Writer de InformationArchitects, fueron desarrollados porempresas con relativamente pocosempleados. Estas mismas personas aveces ni siquiera comparten oficina. Losproyectos con formatos digitales puedenser llevados a cabo por equiposdistribuidos en diferentes partes delmundo, con herramientas de gestión deproyectos, como Basecamp, y, porsupuesto, una buena comunicación.

Recursos.

Antes de empezar, a la hora de decidirpara cuál plataforma se va a desarrollar,es importante saber con qué senecesitará contar para llegar al ansiadodía de publicación de la app, sobre todopara irse preparando y calcular lainversión necesaria. Y esto se refieretanto a personas y conocimientos, comoa equipos.

Si un diseñador lleva adelante elproyecto y necesita buscar a undesarrollador que complemente lasociedad, a veces no sabe exactamente aquién buscar y qué perfil debe tener este

compañero. Hay que tener en cuenta quelas diferentes plataformas requierenconocimientos de programacióndiferentes.

Android

Las aplicaciones de Android seprograman en Java haciendo uso delibrerías propias de Android, por loque, a nivel de programación, undesarrollador con conocimientos sólidosde Java estándar no debería tenerdemasiados problemas para empezar aser parte de la vida del mundo androide.

Para programar aplicaciones paraeste sistema operativo es indistinto tenerun Mac o un PC —con Windows o conLinux—. Se puede descargar el softwareAndroid Studio y todo el materialnecesario para desarrollar una appdesde la web de desarrolladores deAndroid[17].

En el momento del desarrollo,Android Studio permite usar lossimuladores de diferentes dispositivos,o conseguir una prueba defuncionamiento más real conectando elterminal al ordenador.

iOS

Un programador que quiera empezar ahacer magia desarrollando para iPhone eiPad debe tener una base deprogramación orientada a objetos, algoque le permitirá luego una transiciónmás transparente a Objective-C, ellenguaje de programación que se usa enestos casos[18].

A nivel de hardware y software paradesarrollar aplicaciones para iOS, senecesita un ordenador Mac con el Kit deDesarrollo de Software —SDK— que

en este caso es Xcode, el softwareoficial de Apple para desarrollo paraiPhone e iPad, de descarga gratuita.

El código se puede probardirectamente en el simulador —unarepresentación del teléfono que permitever como se comporta el código—dentro del ordenador, algo que sirvepara la mayoría de los casos pero tieneciertas limitaciones y no escompletamente fidedigno, pues suelecomportarse más rápido de lo querealmente lo hace en el teléfono.

Idealmente, para hacer una pruebamás real de desarrollo, hay que probarel código en un iPhone conectado alMac. Para esto es necesario pagar una

licencia de desarrollador[19], algo que,de todas formas, hará falta más adelantepara publicar la aplicación en la tienda.Este costo asciende a 99 dólaresanuales.

Windows Phone

Un programador que haya estadotrabajando en C# va tener un buencomienzo, ya que este es el lenguaje deprogramación que, junto con laslibrerías propias de Windows Phone,hacen una aplicación posible.

Quien no sea muy fanático de

Windows no va a tener otra opción queusar, por lo menos, Windows 7 en suordenador para desarrollar. El consueloes que puede instalarse tanto en un PCcomo en la máquina virtual de un Mac.Y hablando de software, también hacefalta tener Microsoft Visual Studio. Laversión gratuita es suficiente paradesarrollar apps, pero está claro quepagando una versión completa se tieneacceso a muchas más comodidades.

El simulador de Windows Phone esrelativamente bueno, porque la app sepuede probar directamente desde elordenador. Para tener una simulaciónmás real, es posible conectar el teléfonoal ordenador con Windows, si se tiene

una licencia de desarrollo que cuesta 99dólares anuales[20].

Capítulo 3

Irene Pereyra: UX con magiaen Fi

Debemos confesar que somos fansde Fantasy Interactive. Un lugar donde amuchos diseñadores les gustaríatrabajar[1], un espacio para dejar volarla creatividad y rodearse de un granequipo en alguna de sus oficinasalrededor del mundo.

La primera vez que supimos de ellosfue cuando su portafolio de trabajoscayó en nuestras manos, la mayoría deellos, experiencias interactivas paraclientes como Microsoft[2], Google[3] oUSA Today[4]. Los casos de éxito dealgunos de estos clientes están tan bienpresentados y explicados en la web deFi, con tanta atención a los detalles, que

parecen proyectos en sí mismos. Estediseño cuidado se nota en cada una delas cosas que hacen, incluso en losiconos que usan en sus aplicaciones ywebs[5].

A veces, muchos de nosotrosbuscamos una perfección que no llegaporque no existe y, al final, nos deja sin

sentirnos del todo satisfechos con eltrabajo realizado. Pero entonces,¿cuándo parar?, ¿cuándo se termina unproyecto? Irene Pereyra, DirectoraGlobal de UX y Estrategia en Fi, seprestó para respondernos estas y otrascuestiones.

Hay un momento en cadaproyecto cuando finalmentellega la claridad y dices¡ajá! Todo lo que conduce aello simplemente no sesiente del todo bien y tucerebro continúaprocesando a través devarias iteraciones y formas

de mejorar y simplificar.Hacer diseño de UX es unpoco como desenrollar unovillo de lana muy grande:no sabes cuánto tiempo tellevará, pero una vez quellegas al final, lasatisfacción es inmensa. Sercapaz de dejar de iterarporque «está listo» es mimomento favorito de cadaproyecto.

Figura 3.1. Los wireframes, aun cuando seanen papel, son fundamentales antes de comenzar

el diseño visual.

Esa claridad de la que habla Irene,es algo a lo que se llega siguiendo lasetapas de un proceso de diseño, que nocomienza necesariamente con el diseñovisual. Como comentamos en otros

capítulos, la idea de una soluciónrequiere ser bajada a la realidad —usando wireframes por ejemplo— antesde empezar a diseñar los detalles de unainterfaz. Esto no es algo que muchosdiseñadores suelen hacer. Entonces,¿qué tan importante es?

Bosquejar y conceptualizares tremendamenteimportante, ya sea que lohagas en papel o en formade wireframe en elordenador, realmente noimporta —¡idealmentedeberías hacer ambos!—.No pasar directamente al

diseño te permite enfocarteen cosas como lafuncionalidad, lainteracción de la estructurageneral y el viaje quequieres que el usuario hagacuando navega a través detu experiencia interactiva.Omitir este paso esextremadamente peligrosoporque te puede llevar aconcentrarte solo en losdetalles de diseño que,aunque son importantes,deberían considerarse enuna etapa posterior delproceso, una vez que la

estructura de interacción hasido determinada.

La iteración es lo mejordurante esta etapa de«blanco y negro / servilletade papel» porque aún noestás comprometido conningún tratamiento visual yes mucho más fácil moverserápidamente a través dediferentes conceptos e ideasen micro-iteraciones.

Figura 3.2. Irene participa activamente enetapas tempranas de los proyectos.

Irene ve el diseño visual como elresultado o la consecuencia de unaplanificación inicial de la experienciade usuario:

Al final, conseguir unabuena UX se trata deresolver lo que es apropiadopara cada experiencia yfactor de forma, y la capa

de diseño que se aplica aesto, debería mejorar laexperiencia interactivageneral, sin importar si esskeuomorphic o plano.

Estas etapas iniciales sonimportantes para el proyecto si se lograuna continuidad con el resto delproceso, que suponga la misma pasiónpor mantener la calidad. Y esto no esalgo que se consigue fácilmente enproyectos en los que participan grandesequipos, con profesionales de distintosperfiles y además… el cliente.

¿Cómo se manejan como equipo y al

mismo tiempo involucran al clientedurante el proceso?

Tenemos una aproximacióninterdisciplinaria a losproyectos, lo cual significaque todos los participantesestán involucrados desde elcomienzo con diferentesniveles de intensidad. Comotendemos a movernosbastante rápido por lasdiferentes fases, es útil tenerlas opiniones de losdesarrolladores ydiseñadores justo alempezar el proyecto, pues

tiende a aliviar potencialesproblemas que puedanpresentarse en el camino.

En lo referido a involucraral cliente, además de loscheck-ins, reuniones yscrums normales, tambiénpublicamos nuestroprogreso diario en formatoPDF en Basecamp convídeos explicativos. Nosencanta hacerlo para que elcliente pueda ver lapresentación en su tiempolibre. Los clientes sonpersonas ocupadas y no

siempre tienen tiempo paraleer todas las anotaciones;la posibilidad de ver elavance del trabajo cuandoles resulta más conveniente,ha demostrado serextremadamente efectivopara obtenerretroalimentación.

Quizás no se piense en estoinicialmente, pero los clientes con losque trabajan también son, en ciertaforma, elegidos por Fi, ya que al ser unaempresa reconocida, muchas grandescompañías buscan sus servicios.

Han trabajado en proyectos paraalgunas de las marcas más grandes delmundo. ¿Alguna vez han dicho «no» aalguna de ellas? ¿Qué los motiva paracomenzar un proyecto nuevo?

Sí, hemos dicho «no» aalgunas de ellas, ¡incluso aalgunas marcas grandes conlas que quisiera trabajar lamayoría de compañías! Laclave para un proyectoexitoso radica en trespuntos principales y, desdeuna perspectiva creativa,estas son las cosas queconsideramos antes de

tomar un proyecto nuevo:

1. ¿Está el cliente alineadocon nuestra forma depensar y está listo ypreparado para serinnovador?

2. ¿Se trata de algo querealmente no hayamoshecho antes? Si larespuesta es «sí», esgenial, porque nospermite empezar elproyecto sin nocionespreconcebidas o«equipaje».

3. Finalmente, ¿elpresupuesto y el tiempopermiten experimentar yfallar? Nunca, en toda micarrera, di en el blancode inmediato y es muyimportante saber quetienes el tiemponecesario para ir en ladirección equivocada porun ratito, antes deencontrar el rumbo denuevo.

Lo que realmente me motivapara comenzar un proyecto

nuevo es «lo grandesconocido». Me encantasumergirme en cosas que mehagan sentir nerviosa einsegura y me gusta que aveces las fechas límite tefuerzan a ser creativo enformas que nunca habíasimaginado.

Capítulo 4.

Explorando ideas.

La cantidad de aplicacionesdisponible en el mercado suponeuna gran competencia, pero tambiénes un desafío y una oportunidad parasobresalir: ofrece algo quediferencie a tu aplicación y quetenga valor para el usuario. Una ideacomprobada es el primer paso paraconseguirlo.

Un mar deaplicaciones.

En la vida cotidiana, es fácil encontrarsecon situaciones que requieren unaresolución inmediata, y al no hallarla,escuchamos frases como «deberíaexistir una aplicación para esto». Estaforma de pensar, ha hecho que lasdiferentes tiendas estén saturadas deaplicaciones sin valor que norepresentan una utilidad real para elusuario. Se podría decir que hay appspara hacer casi cualquier cosa.

Este escenario es quizás más

evidente en la tienda de Google, algomenos restrictiva a la hora de aprobaraplicaciones que se parecen entre sí:encontramos muchísimas apps decalculadoras o linternas que no aportannada nuevo.

Figura 4.1. Con diferentes propuestas, haymuchas aplicaciones de linternas.

Sin duda, no se trata de un panoramaalentador para el diseñador que va alanzar su producto y representa undesafío para incorporar a la oferta unaapp que realmente se destaque ydiferencie de las demás, ya sea por suutilidad real o por su experiencia deuso.

Puede que una appno sea la respuesta.

Hay que considerar que una aplicaciónno necesariamente es la respuesta a cadacircunstancia. Involucrarpermanentemente la tecnología a vecesfuerza la forma de resolver unasituación, añadiendo agentesinnecesarios en medio del proceso.

Por ejemplo, resulta inútil unaaplicación para abrir la puerta delcoche, cuando el hecho de sacar elteléfono del bolsillo, buscar laaplicación y la función adecuada para

esta tarea, genera un camino más largo eincómodo para el usuario quesimplemente usar sus llaves. Hacer algousando una aplicación debería ser másfácil que hacerlo sin ella. El uso de lasapps como respuesta a una situación sejustifica cuando simplifica un proceso ymejora la experiencia para el usuario.

Valor paradiferenciarse.

Para diferenciarse de las demás, unaaplicación tiene que aportar algosignificativo y de valor para el usuario.El camino para empezar a conseguirlose basa en tres pilares, queprobablemente otras aplicaciones no hantenido en cuenta, y eso ya puedesignificar una diferencia.

1. Tener un objetivo

El objetivo es el motor de una app, loque conduce todo. Prácticamentecualquier cosa que se incluya en unaaplicación tiene que, en cierta medida,responder a él. Está directamente ligadoa las necesidades del usuario y a laforma como la aplicación ayuda aresolverlas.

Las necesidades pueden estarrelacionadas con el entretenimiento, lainformación, la interacción social o bienresolver un problema específico, comobuscar el mejor camino para llegar acasa cuando se está perdido. En lamedida en que la aplicación respondamejor a ellas, será más valiosa para elusuario.

2. Pensar en el usuario

Las personas como centro de atenciónson la columna vertebral del llamado«diseño centrado en el usuario», quetiene en cuenta sus emociones,motivaciones y necesidades, a la hora deproponer soluciones.

La información que se obtiene alconocer al usuario permite tomardecisiones de diseño que ayuden a crearaplicaciones intuitivas y, porconsiguiente, más fáciles de usar.

3. Determinar el contexto

El contexto de uso es el lugar donde seusará la aplicación: ubica al usuario enun espacio físico determinado que afectay condiciona la forma que tiene deinteractuar con la pantalla. El contextotambién tiene en cuenta factores como elambiente general del lugar, las personasallí presentes y las acciones puntualesque en él se realizan.

Figura 4.2. El contexto de uso tiene en cuentadónde están los usuarios al interactuar con la

app.

Por ejemplo, no es lo mismo diseñaruna app para una persona que estarácorriendo o haciendo ejercicio en elgimnasio, que para alguien que estarásentado esperando el próximo bus o encasa enviando mensajes a sus amigos.

El nacimiento de laidea.

Las ideas cambian el mundo. Para undiseñador, una idea es una propuestahacia los usuarios con base en suinterpretación de cómo podrían resolversus necesidades. Las ideas no tienen queser necesariamente originales o únicas,pero sí tienen que ser mejores que lasdemás.

Posiblemente, al principio nisiquiera se tenga una idea. ¿Qué hacerentonces? Investigar. Y aunque estapalabra asuste un poco, puede ser tan

simple como mirar alrededor: observarel entorno, las personas que nos rodeany las dificultades que encuentran en suvida cotidiana o las que encontramosnosotros mismos.

Qué hacer si ya existe algoparecido

Con una idea en la mano, o mejor dichoen la cabeza, el siguiente paso lógico escomprobar si esa idea ya existe, si fuedesarrollada por otros anteriormente yde qué manera. Es lo que generalmentese conoce como Benchmarking.

Al investigar un poco por Internet oen las tiendas de apps, suele hallarsealguna aplicación parecida a primeravista, con la consecuente desilusión queesto ocasiona. Encontrarse en unasituación como esta no quiere decir quedeba abandonarse todo, dejar elproyecto de lado y volver a comenzar elproceso de pensar en algo.

Simplemente, se pueden analizar yvalorar las alternativas existentes paraentender cómo pueden ser mejoradas,complementadas u ofrecer algo queagregue valor a sus propuestas. En estecaso, el camino para hacer la diferenciapuede ser especializarse en algunafuncionalidad, trabajar en la simplicidad

o en otros aspectos que, en definitiva,mejoren la experiencia de uso y lautilidad real de la app.

Más aún, toda esta investigaciónnecesaria para mejorar la idea inicialpuede ser un diferencial. Puede ayudar adarse cuenta de algunas cosas que laeventual competencia no tuvo enconsideración, convirtiéndose en algoque esta haya pasado por alto.

Figura 4.3. Mailbox es un cliente de correoque generó mucha expectativa por su forma de

gestionar el correo como tareas para hacer.

Esto fue lo que sucedió con Mailbox

App, un cliente de correo[1]. En elmomento de su lanzamiento ya habíaotras alternativas en el mercado, comoGmail; sin embargo, aprovecharon laoportunidad de ofrecer un producto quecambiara el concepto de correo quetenían sus competidores y asíconsiguieron ser reconocidos.

Cómo saber si la ideafuncionará

El siguiente paso después de tener unaidea es realizar algunas comprobacionespara saber si realmente puede funcionar

o si debe corregirse.La forma de hacer esto es sondear

con algunos usuarios que puedan dar suvisión del concepto planteado. Es unproceso que no necesariamente tiene queser costoso o largo, y que puede llevarsea cabo simplemente observando a laspersonas que nos rodean y tomando notade sus costumbres y dificultades,evaluando cómo la idea propuestapodría ayudarlos. Otra forma másdirecta es comentar la idea con amigos opersonas del entorno, para capturarrápidamente sus primeras impresiones.

Lo anterior no quiere decir que lainvestigación despeje todas las dudas ogenere la totalidad de respuestas

buscadas, pero sí sirve para tener unavalidación preliminar de la idea.Siempre es mejor basarse eninformación real que en merassuposiciones sin comprobar.

Capítulo 5.

Definiendo la propuesta.

Es hora de empezar a diseñar, almenos wireframes. Para ello,primero hace falta entender yestudiar un poco más a los usuarios,saber qué necesitan y cómo eldiseño puede responder a susnecesidades.

Investigación delusuario.

Conocer a los usuarios permite diseñaruna aplicación que tenga en cuenta susmotivaciones, necesidades y problemas,como eje a partir del cual construir unapropuesta. Este conocimiento no se basaen suposiciones y teorías, sino enestudios que ayuden a determinar elperfil de los usuarios de la aplicación.«Personas» y «Viaje del usuario», entreotras, son algunas de las metodologíasutilizadas para conseguirlo.

Las Personas

El concepto de «Personas» fue acuñadopor Cooper, una compañía de diseño yestrategia ubicada en San Francisco[1], yes una herramienta de gran utilidad quese usa constantemente en el diseño deinteracción actual. Su función es definirmodelos o arquetipos de usuarios paralos cuales diseñar, teniendo en cuentasus necesidades y objetivos.

Para crear las Personas hace faltauna investigación real que nos aleje demeras conjeturas, analizando muchos

usuarios posibles y determinando cuálesson los patrones de comportamiento ypensamiento que tienen en común entreellos, evitando caer en suscaracterísticas individuales, centrándosesolo en aquello que comparten.

El resultado final de estainvestigación es una representaciónvisual donde se modela al usuario apartir de los datos obtenidos: la Personatendrá una cara, un nombre, una historia,ambiciones y objetivos.

Figura 5.1. Las Personas permiten extraerpatrones comunes a muchos usuarios.

Pueden determinarse diferentes tipos

de Personas para una aplicación, peropara que este ejercicio tenga unautilidad real no deberían ser más de tres.Idealmente, el proyecto deberíaenfocarse en una sola Persona primaria.

El viaje del usuario

Las Personas vistas individualmentepueden servir para conocer un modelode usuario, pero también hace faltasaber cómo se comporta y siente esemodelo, cuando tiene un objetivo quecumplir en un contexto de usodeterminado[2].

Aquí es donde interviene el userjourney o «Viaje del usuario», unaforma de contar visualmente y deprincipio a fin, el proceso que lleva acabo una Persona desde que tiene unanecesidad hasta que la satisface usandola aplicación.

Nada mejor que un ejemplo paraentender de qué se trata todo esto:alguien que está perdido y necesitaorientación, puede usar el móvil parasaber cómo llegar a casa. Para crear unViaje de usuario a partir de estasituación, hay que considerar desde elmomento en que está perdido, cuandoaún no ha abierto la app, hasta quecumple su objetivo de orientarse,

pasando por cada una de las accionesque lleva a cabo usando la aplicación.

Este proceso se puede visualizargráficamente de una forma lineal,separando las etapas entre sí ydetectando en ellas las emociones delusuario, pero también, las dificultadesque encuentra en cada paso y lasacciones concretas que realiza paraseguir adelante, por ejemplo, buscar. Deesta manera, se puede detectar en quépuntos debe enfocarse el diseño pararesolver problemas de interacción ylograr una app más usable.

Figura 5.2. El viaje del usuario se representagráficamente para diferenciar sus etapas y la

relación entre ellas.

El Viaje del usuario sirve también

para sentar las bases preliminares de laorganización de la información y ladefinición de las funciones, sin pensaren una estructura rígida o jerárquica.

Definición funcional.

Todas las acciones e interacciones quehacen falta para que un usuario consigasu objetivo, se traducen en funciones quedebe tener la aplicación. Siguiendo elViaje del usuario, se puede detectarcuáles son las necesidades que tiene encada etapa y cuáles herramientasrequiere para poder avanzar a lasiguiente.

Continuando con el ejemplo de laaplicación para encontrar el camino acasa, serían entonces funcionesfundamentales: determinar la ubicaciónactual, buscar la dirección de destino y

seleccionar entre las distintas opcionesde transporte. Cada una de estasacciones es realmente importante porqueayuda al propósito de la aplicación.

Adicionalmente, pueden agregarsecasi infinidad de funcionescomplementarias. Por ejemplo, una deellas podría ser guardar la ubicación dedestino para poder utilizarla después.Cada vez que se añada una nuevafunción que complemente el objetivoprincipal, hay que ser conscientes delvalor que representa para el usuario y desu utilidad real, teniendo en cuenta laPersona y el contexto de uso. No hay queolvidar nunca lo que se espera de unmóvil en cada caso particular, en nuestro

ejemplo, la capacidad de resolverrápidamente tareas puntuales.

Cada función que se agregarepresenta, además, mayor tiempo dedesarrollo y complejidad, de ahí laimportancia de decidir con cuidado encada caso si merece o no ser incluida enla aplicación, para no terminar con unproducto saturado de funciones quenadie usa y que arruinan la experienciade usuario. Siempre es preferible hacerpocas cosas, pero hacerlas bien.

Figura 5.3. Instagram es actualmente una delas apps más populares para tomar fotos y

vídeos.

Para poner un ejemplo del mundoreal, Instagram[3], la popular aplicaciónde fotografías, llegó a ser lo que esahora después de recortar una serie defunciones innecesarias, lo que lepermitió concentrarse en el corazón delproducto. Además, las funcionescomplementarias que añadió, como losfiltros de fotos, representaron un valorreal para el usuario y fue lo que lepermitió diferenciarse de las demás.

Proponer una visión

Puede pasar muchas veces, sobre todocuando el producto ya está en marcha,que los usuarios pidan funciones queconsideran deberían incorporarse. Estopuede ser un arma de doble filo, porquealgo que sirva para un usuario particularno necesariamente sea útil para losdemás[4]. En este caso, establecer unbalance entre las opiniones de losusuarios y la propuesta de la aplicaciónserá fundamental.

Arquitectura deinformación.

La arquitectura de información es unaforma de organizar el contenido yfunciones de toda la aplicación, deforma que puedan ser encontradosrápidamente por el usuario. En sentidoglobal, la arquitectura de informaciónconsidera la relación entre loscontenidos de diferentes pantallas y anivel particular, la organización decontenidos dentro de la misma pantalla.

Luego de haber definido el Viaje deusuario y las funciones de la app, un

diagrama de arquitectura utiliza estainformación para determinar cuáles sonlas pantallas necesarias en cada etapa deese viaje y qué funciones debería tenercada una de ellas. Además, aspectos denegocio y requisitos tecnológicostambién pueden tenerse en cuenta paraesta definición.

Una de las formas de visualizar laarquitectura consiste en representar cadapantalla con un rectángulo —enaplicaciones generalmente más verticalque horizontal— donde las conexionesentre los rectángulos indican la forma denavegar de una pantalla a otra y a travésde qué acción.

Figura 5.4. Un diagrama de arquitectura deinformación permite visualizar rápidamente los

vínculos entre contenidos.

Este diagrama sirve para estudiar lacomplejidad de la aplicación de unvistazo, analizar los diferentes nivelesde profundidad, visualizar y entender larelación entre contenidos de una maneramás organizada. Además, lo que sedefina en esta etapa tendrá unaincidencia directa en el tipo denavegación que se elija posteriormente.

Wireframes

Un wireframe —cuadro de alambre,según su traducción— es unarepresentación muy simplificada de unapantalla individual, que permite teneruna idea inicial de la organización delos elementos que contendrá,identificando y separando aquellosinformativos de los interactivos.

Haciendo una comparación, para unaaplicación, el wireframe es como elplano arquitectónico para una casa. Eneste plano se pueden ver los espacios yelementos funcionales de una formaclara y simplificada.

Figura 5.5. Los wireframes son fundamentalespara entender cómo puede estar estructurada

cada pantalla de una app.

Tal como los planos de una casa, loswireframes están dibujados de formalineal y del mismo color, lo que permiteabstraerse de las tentaciones estéticas y

centrarse en la estructura o esqueleto deuna pantalla. Elementos tales comotexturas, sombras y volúmenes se dejande lado en esta etapa.

¿Para qué sirve unwireframe?

No siempre se hacen wireframes. Esnormal que un diseñador se salte estepaso para pasar directamente al diseñovisual de la interfaz. Sin embargo, esuna mala práctica que puede traerconsecuencias después. Usarlos es másque recomendable porque sirve, entre

otras cosas:

1. Como herramienta personal deexploración. Permite al diseñadorevaluar diferentes alternativas denavegación e interacción, de unaforma ágil y rápida, sin invertirdemasiado tiempo en un diseñoacabado que después no funcione.

2. Como herramienta para comunicarideas abstractas. En etapastempranas del proyecto, esnecesario transmitir la idea generalde la aplicación a otras personas,centrándose en la funcionalidad,objetiva y racional, evitando

distracciones por la subjetividadde elementos estéticos. De estamanera, se puede tener un primeracercamiento a la app para trabajaren equipo.

3. Como un mecanismo para realizarlas primeras evaluaciones deinterfaz. Es posible detectarproblemas de interacción yusabilidad, al sondear con usuarioso personas ajenas al proyecto,antes de haber diseñado odesarrollado aún una app funcional.

Hacer wireframes en etapastempranas supone un ahorro de costes y

tiempo, permitiendo evaluar aspectoscomo navegación e interacción parasentar unas bases sólidas que despuésden paso al diseño visual.

Formas de diseñarwireframes

Papel

Figura 5.6. Se pueden hacer wireframes enpapel de una manera muy ágil.

Es la forma más básica y accesible. Setrata simplemente de tomar una hoja depapel y dibujar las pantallas ycomponentes de interacción con unbolígrafo. Generalmente todos loswireframes empiezan en papel y se vandesarrollando y haciendo cada vez máscomplejos con otras herramientas, antes

de diseñar la interfaz en software deordenador.

Stencils

Figura 5.7. Las plantillas metálicas también sepueden usar cuando se quiere mantener la

frescura del papel, obteniendo formas mejordefinidas que a mano alzada.

Este sería el paso siguiente y algo más«profesional» que un wireframedibujado a mano alzada, manteniendo laesencia del trabajo en papel. Losstencils son láminas de metal con lasque se pueden dibujar los elementos deinteracción directamente en el papel,con una estructura más formal, limpia yuniforme.

Plantillas

Figura 5.8. Existen plantillas —en este casode Android— que se pueden aprovechar para

diseñar wireframes en el ordenador.

Esta manera de crear un prototipo,consiste en utilizar archivos digitales deplantillas que contengan los elementosbásicos de interacción y de interfaz —botones, listas y cabeceras—, paraconstruir en el ordenador, utilizandoprogramas de diseño como Photoshop,pantallas básicas a partir de estoscomponentes. Dependiendo del sistemaoperativo, se puede echar mano dediferentes recursos, siendo aquellos deiOS los más difundidos, seguidos decerca por los de Android. Por otro lado,al día de hoy no existen demasiadasplantillas para Windows Phone.

Figura 5.9. Omnigraffle es un software deescritorio que permite usar plantillas

importadas como librerías.

Adicionalmente, también haysoftware de escritorio con librerías deplantillas para hacer wireframes. Entrelos más conocidos se encuentranBalsamiq[5], Omnigraffle[6] y Axure[7],

pero existen muchas otras opciones. Sise quiere diseñar wireframes usando elnavegador y manteniendo las propuestas«en la nube», UXPin[8], permite trabajarde forma colaborativa con otrosintegrantes del equipo.

Eligiendo la formaadecuada

En realidad, no existe una mejor o peorforma de hacer wireframes. Lasalternativas que ofrecemos son las másconocidas. Generalmente cuando seempieza a trabajar en diferentes

proyectos, se elige la que sea másadecuada de acuerdo a la complejidaddel trabajo a realizar. Es también unacuestión personal, de sintonía y decomodidad con la herramienta.

Hay diseñadores que se manejanmuy bien dibujando en papel antes depasar al ordenador y por el contrario,otras personas se sienten más a gustotrabajando directamente en el ordenador,llevando luego esas plantillas a losprogramas de diseño donde acabarán dedarles forma.

Es recomendable probar diferentesopciones, hasta que se encuentre aquellaque brinde comodidad, permita trabajarde una forma ágil y representar

adecuadamente las ideas para lasdiferentes pantallas de la app.

Prototipos.

Los prototipos son representaciones dela aplicación que sirven para probarlainternamente o mediante test conusuarios, que permiten detectar erroresde usabilidad en etapas tempranas dedesarrollo. Generalmente, se trata demaquetas con una interacción suficientepara poder navegar entre las diferentespantallas[9].

Pueden estar basados en wireframeso en diseños visuales, y su fidelidadpuede ser mayor o menor, dependiendode cuanto se corresponda su aparienciay comportamiento con la versión final

esperada de la aplicación.

De qué pantallas hacer losprototipos

No es necesario hacer un prototipo quecontenga todas las pantallas posibles deuna aplicación. Los prototipos estándestinados a pruebas, por lo tanto, debendesarrollarse solo aquellas pantallasnecesarias para completar de principio afin la tarea que se quiere probar. Porejemplo, si se quiere sondear un registrode usuario, el prototipo deberíacontemplar las pantallas necesarias

desde el ingreso de datos hasta elmensaje de éxito final.

Formatos de prototipos

Existen diferentes maneras de hacer unprototipo de aplicación: desde un dibujoen papel, pasando por el uso desoftware de diseño tradicional, hastaaquellos programas destinadosexclusivamente al desarrollo deprototipos. La forma que se elijadepende de la rapidez con que se quieracrearlo y la fidelidad respecto alresultado final esperado.

De acuerdo al formato de salida quese pueda obtener de un prototipo —paracompartirlo posteriormente con otrosmiembros del equipo, clientes oaccionistas— las formas de hacerprototipos pueden clasificarse en:

Documentos navegables

Los prototipos pueden presentarse enforma de documentos que se han usadotoda la vida para presentacionescomerciales o distribución deinformación, añadiendo la interacciónnecesaria para navegar de una parte del

documento a otro.Por ejemplo, un PDF basado en

archivos de diseño o fotografías de unboceto de la aplicación puede servirpara representar el funcionamientobásico. Balsamiq es una herramienta quesirve para este fin.

Lo mismo sucede con archivos depresentaciones como los usados endocumentos de Microsoft PowerPoint,Apple Keynote u OpenOffice.Keynotopia[10] permite crear, a partir deplantillas, documentos compatibles conestos software a los que se les añadeuna capa de interacción para simular elcomportamiento de la app.

Para poder abrirse, este tipo de

documentos tiene que ser primerodescargado y las transiciones yanimaciones entre páginas suelen seralgo básicas.

Versiones web

Muchos software de prototipos —deescritorio o en la nube— permiten crearrepresentaciones de la app en forma desitios web —y que por lo tanto necesitanconexión a Internet y un navegador—basados en HTML5 y CSS3 paraconseguir interacciones y animacionesque se asemejan en gran medida a las de

la aplicación.Algunos de estos programas

permiten incluso crear un ícono delanzamiento en la pantalla de inicio delteléfono, para conseguir una experienciade simulación lo más cercana posible ala realidad.

Entre las herramientas que permitencrear prototipos de esta manera se puedenombrar a Codiqa[11], FluidUI[12],Framer[13] o Flinto[14], entre otros.

Otros formatos

Alternativamente, existe software

específico para desarrollar prototipos.Uno con el cual se pueden conseguirresultados muy parecidos a los de unaaplicación nativa es Briefs[15].Utilizando este programa de escritoriopuede crearse una simulación deaplicación, que necesita un visorespecial —una aplicación gratuita— enel teléfono de destino para poderabrirse.

Por otro lado, si se quiere hacer unprototipo muy rápidamente y con elpropio teléfono, se puede usar Pop[16],una aplicación que permite usar lacámara del móvil para fotografiarwireframes en papel y dotarlos deinteracción para navegar entre las

diferentes pantallas. Sin dudas, unaopción que puede sacarnos de apurospara realizar comprobaciones rápidas.

Capítulo 6

Dustin Barker: La bancaelectrónica hecha Simple

Si pensamos en aplicaciones querealmente deben ser complicadas dediseñar y desarrollar, una de lasprimeras cosas que se nos viene a lacabeza es la banca electrónica. Las appsde este tipo tienen un montón defunciones posibles —pagos,transferencias, etc.— y además, no hayque olvidar el tema de la seguridad.

Simple[1], a secas, es un sistema degestión de dinero basado enteramente enuna plataforma digital —no es un bancofísico— que resuelve lo que podría sermuy complejo a través de unaexperiencia… sí, simple.

Por tratarse de un servicio que seutiliza enteramente en Internet, suaplicación tiene una importancia

trascendental. Dustin Barker es elDirector de Ingeniería Móvil en Simple,el encargado de desarrollar una app que,además de una experiencia de usoestelar, ofrezca al usuario una confianzatal, que no lo haga dudar ni por unsegundo de la seguridad de laplataforma.

¿Cómo hacen para que sus usuarios sesientan seguros y confiados al usar laapp de Simple?

Como los mecanismos queusamos para proteger lainformación de los usuariosno están a la vista, la

sensación de seguridadtiene que venir de lasinteracciones. Aunquevamos «más allá» paraproteger nuestrasaplicaciones móviles,muchas veces son losdetalles que no tienen nadaque ver con la seguridad,los que hacen que losusuarios se sientantranquilos.

Brindamos confianza através de la calidad. Unaaplicación que responda ysea estable es fundamental,

ya que, una alta calidadexterior le da una base a losusuarios para asumir lomismo del interior de la app—y por lo tanto— mayorseguridad.

Adicionalmente, pasamosmucho tiempo diseñandootros mecanismos deseguridad que los usuariossí pueden ver. Funcionescomo la «autenticaciónmultifactor» que usamospara enviar pagos, sonesenciales no solo paraproteger la interacción, sino

también para construir laconfianza de nuestrosclientes mientras usanSimple.

Figura 6.1. En Simple desarrollan en paralelolas aplicaciones para Android y iPhone.

Dustin fue también ideólogo de la

forma de trabajo mobile first, queprivilegia el diseño de la app paramóviles antes de hacer la web deescritorio; una metodología que, aunqueúltimamente está en auge, aún nomuestra claras ventajas respecto alproceso tradicional.

Si miras hacia atrás, ¿cuáles crees quehan sido los beneficios másimportantes de esta manera detrabajar?

Nuestro enfoque en móvilesnos da ciertas limitacionespara trabajar y nos ayuda atomar decisiones.

Parámetros como el tamañode la pantalla, la duraciónde la batería y la conexión aInternet nos obligan areducir las funciones a loesencial.

Las aplicaciones paramóviles se usan en contextoscon distracciones —comoesperando en una cola odurante una conversación—, entonces, usamos esteconocimiento para tomardecisiones acerca de cómohacer cada interacción taneficiente e informativa como

sea posible.

Cuando pensamos acerca deuna función, no noslimitamos solo a pensar enaquello que se encuentraentre la pantalla y elusuario, sino también endónde se encontrará, quépodrá estar haciendomientras interactúa con laapp y cuáles son susnecesidades en diferentescontextos. Estasconsideraciones nos ayudana descubrir detalles acercade una función que de otra

forma podrían pasarse poralto.

Y después de la aplicación paraiPhone, ¿qué viene? Una versión paraAndroid, claro. Dustin también noscuenta lo que aprendió de la experienciade desarrollar primero para iOS ylanzar, unos meses después, la versiónpara Android, dirigida a un tipo deusuario diferente:

Uno de nuestros objetivosprincipales al desarrollarSimple para iPhone erahacer todas las

interacciones tan intuitivascomo fuera posible. Paraconseguirlo, nos apoyamosen el lenguaje que sabíamosque resultaría familiar paranuestros usuarios. Paralograr la misma meta enAndroid, claramente nopodíamos usar el mismolenguaje que en iOS.Tuvimos que empezar desdecero, así que re-imaginamosSimple usando soloarquitectura Android y elresultado fue una aplicaciónconsistente con nuestramarca, que ofrece una

experiencia única paraestos usuarios.

Figura 6.2. En este tipo de aplicaciones,

ganarse la confianza del usuario esfundamental.

En las primeras versionesde Simple para Android,aprendimos a refinar y asimplificar cada función.También aprendimos cuálesaspectos de la app eranparticularmentecomplicados o propensos alerror. Si bien el diseño paraAndroid fue completamentenuevo, pudimos empezar aconstruir a partir de Simplepara iPhone.

Desde el lanzamiento de laapp para Android, lasdecisiones de ingeniería quehemos tomado también hansido llevadas a la versiónpara iOS. Por ejemplo,sabíamos que la lista decategorías en versionesanteriores de la app paraiPhone estaba lejos de serla ideal. Cuando estrenamosun diseño para esa lista enla primera versión paraAndroid —una vez quevimos que tenía éxito— lotrasladamos a la aplicaciónpara iOS y nuestros

usuarios quedaronencantados con el resultado.

Ahora estamos en un puntodonde podemos dejar quenuestras experiencias enambas plataformas seenriquezcan mutuamente ypodemos probar diferentescosas para explorar quéfunciona mejor en cada una.

Además de la aplicaciones paramóvil, también está la web. En unservicio de gestión de dinero algunasoperaciones pueden ser difíciles de

resolver desde la pantalla de un teléfonoy es mejor dejarlas para los ordenadoresde escritorio, en la comodidad delhogar.

¿Cómo hacen para decidir cuálesfunciones tienen sentido en el móvil ycuáles no?

Las funciones de Simplepueden ser divididas enaquellas para analizar lasfinanzas —reportes odeclaraciones— y las quesirven para controlarlas —enviar un pago, transferirdinero, depositar un cheque,

etc.—; en estas últimas seenfoca nuestra app paramóviles, pues son lasfunciones que nuestrosclientes necesitan fuera decasa. Pueden leer un recibo,tomar el teléfono, abrirSimple y enviar un pago ensegundos y en pocos pasos.Las funciones para analizarlas finanzas podrían tenerun lugar en la aplicacióneventualmente, pero aúnestamos buscando formas deoptimizar estasinteracciones.

Las aplicaciones de Simple son unagran inspiración para diseñadores ydesarrolladores que sueñan con unproducto con una apariencia visualpulida, sin descuidar aspectosfuncionales, ni de negocio. Contrario alo que pueda parecer al principio, estono es una quimera. Dustin revela suproceso de trabajo para conseguir unproducto visualmente atractivo quefunciona estupendamente:

La clave de Simple ha sidoevolucionar continuamenteel diseño a medida que seimplementan las funciones.Nunca dejamos de diseñar

la interfaz y no vacilamos sitenemos que revisar lasdecisiones, aun cuando elproceso de construir unafunción está muy avanzado.

Cada función empieza conuna etapa de diseño,durante la cual losingenieros ofrecencomentarios —técnicos yestéticos— a losdiseñadores. Una vez quetenemos una visión sólida,empezamos a desarrollar,sabiendo que la fase dediseño aún no está

terminada. A medida quedesarrollamos, descubrimoscómo «se siente» el diseñoen una pantalla táctil y estoconduce a nuevas ideasacerca de cómo deberíaverse y comportarse lafunción. Para tenerfeedback constante,enviamos cada noche unaversión a cada empleado.

Siempre estamos buscandoformas de mejorar cadafunción y nunca damosninguna función porterminada. Esto solo es

posible porque nuestrosingenieros y diseñadorestrabajan en conjunto ycolaboran constantemente.

Aunque Simple está solo disponible enEstados Unidos, puedes ver su web paraconocer más sobre ellos:www.simple.com

Capítulo 7.

Interacción y patrones.

Todos los sistemas operativosproponen diferentes formas deinteractuar con los elementos enpantalla. Conocer la diferenciaentre ellas y utilizar elementosfamiliares para el usuario, aseguraque se sienta cómodo y segurousando la aplicación.

Principios deexperiencia de

usuario.

Cada sistema operativo tiene su propiaidentidad que es reflejada en laapariencia y comportamiento de cadauno de los elementos que componen suinterfaz. En ellos imprime supersonalidad, lo que hace que laexperiencia sea diferente a las demás.

Sin embargo, todos compartenalgunos puntos de vista fundamentalesque se manifiestan en el diseño de susinterfaces. Los siguientes conceptos son

considerados componentes clave delsistema operativo y de las aplicacionesque en él habitan.

Simplicidad

La simplicidad visual está directamenterelacionada con la usabilidad. Sersimple implica en cierta medida sermínimo, contar con pocos elementos,pero sobre todo, que aquellos presentesen la interfaz tengan una función biendefinida que contribuya a cumplir elobjetivo de la app y ayude al usuario.

Los móviles no son dispositivos

para mostrar mucha información enpantalla. Por esta misma razón, lasimplicidad consiste también en manejarla economía visual y tener un buencriterio para determinar qué incluir yqué no en el diseño. Una gran cantidadde elementos puede abrumar al usuario,por eso, lo que está en pantalla tiene queser necesario en ese momento y en esasituación de uso.

Hacer el diseño simple es —vayaparadoja— bastante complicado, peroreporta grandes beneficios en laexperiencia de uso de la aplicación.

Consistencia

Una app tiene diferentes pantallas que lacomponen y al mismo tiempo, estádentro de un sistema operativo quepropone un determinado aspecto visual einteracción. El usuario de Android, iOSo Windows Phone ya está habituado aellos y espera que las aplicaciones secomporten de la misma manera.

La consistencia, entonces, se trata derespetar estos conocimientos ycostumbres del usuario, no solo en elinterior de la aplicación, sino también

en relación con el resto del SO. Estofavorece el uso intuitivo de la app, yaque el usuario puede prever sucomportamiento sin demasiado esfuerzo.

La relación existente entreapariencia y comportamiento tambiéntiene que ser consistente. El aspectovisual de un elemento interactivodeterminado —como un botón con unícono— puede llevar a esperar uncomportamiento específico de acuerdo ala forma en que se ve.

Por ejemplo, si se usa un botón querepresenta la acción «eliminar» en elsistema operativo, el usuario esperaráque también dentro de la app haga lomismo. Cumplir con esa expectativa

habla de consistencia.

Navegación intuitiva

Un aspecto que merece mucha atenciónen una aplicación es la forma de navegarentre contenidos, de manera que resultefácil de comprender para el usuario,evitando la sensación de desorientaciónque puede ocasionar una navegaciónconfusa.

La navegación intuitiva está tambiénrelacionada con la consistencia. Cadasistema operativo propone diferenteselementos para navegar por la app como

botones, pestañas y paneles. Hacer usode ellos hará que el usuario losreconozca a primera vista y, solo conestos componentes, ya sepa cómo ir deuna sección a otra.

Por otro lado, para el usuario esimportante saber y prever qué pasarádespués de pulsar un botón o cómo semostrarán las pantallas. Intuir dónde seestá dentro de los contenidos de laaplicación y conocer cómo volver haciaatrás son factores muy importantes quealivian al usuario y le ahorran esfuerzosinútiles por intentar comprender cómo irde un sitio a otro. Una navegaciónintuitiva permite, justamente, lograr unuso fluido y sin esfuerzo de la

aplicación.

Interacción y formasde sostener el móvil.

El diseño de aplicaciones para móvilestiene que tener en cuenta la forma en quelos usuarios sujetan los teléfonos.Asimismo, con cuáles dedos interactúany cómo los usan, tiene incidencia en eldiseño de la interfaz y condiciona laubicación de los elementos interactivosen la pantalla[1].

Si bien hay diferentes maneras en lasque un usuario puede tener el móvil ensus manos, una de las más habituales esque lo sostenga con una sola mano, algo

que puede ser liberador —ya que deja laotra mano disponible— pero al mismotiempo, condicionante, porque otorgamucha responsabilidad al dedo pulgarpara realizar las interacciones.

Entonces, las característicasanatómicas de la mano determinanciertas zonas de la pantalla que puedenser alcanzadas con mayor o menorcomodidad por este dedo. La «Ley delpulgar»[2], mencionada por algunosautores, se refiere a la superficie depantalla a la que este dedo tiene accesosin mayores problemas y nos da pistaspara organizar jerárquicamente loselementos en la interfaz.

Por ejemplo, los botones que se

utilizan con más frecuencia deberíansituarse en la parte inferior de lapantalla para ser alcanzados confacilidad, mientras que aquelloscontroles que no deberían tocarse porerror —como «editar» o «eliminar»—se ubican fuera de esta zona, con unacceso más restringido.

Figura 7.1. De acuerdo a la forma de sostenerel móvil, el pulgar tiene mayor o menor

dificultad en acceder a ciertas zonas.

De todas formas, tal como explicaJosh Clark[3], la ubicación de losbotones y otros controles en la zonainferior de la pantalla no se debesolamente a una cuestión de comodidad,pues ubicarlos en esta área tambiénevita que sean tapados por la mano aldesplazarse sobre el móvil. Esteconcepto ya se tenía en cuenta en otrosobjetos de uso cotidiano como iPods ocalculadoras, donde el movimiento de lamano no interfería con la lectura dedatos.

Sin embargo, cada sistema operativohace un uso diferente de los espacios enpantalla y esto también condiciona eldiseño de la aplicación. Por ejemplo,iOS sitúa las pestañas dentro de la zonade comodidad del pulgar, lo que permiteun cambio fácil entre contenidos. Por suparte, Android utiliza las pestañas en elárea superior —de más difícil acceso—para evitar conflictos con otros botones,como la flecha de «volver», ubicados enla parte inferior de la pantalla o delteléfono, algo similar a lo que sucede enWindows Phone.

En teléfonos de pantallas grandes —más de cuatro pulgadas— o pararealizar tareas de mayor precisión —

como escribir— es bastante habitualsostener el dispositivo con las dosmanos. En este caso, una mano se dedicasolamente a sujetar el teléfono, mientrasla otra —generalmente usando el dedoíndice— realiza toques y gestos conmayor libertad y precisión.

Incidencia en laorientación del

terminal.

Tener en cuenta la orientación deldispositivo al utilizar la aplicación,significa aprovechar lo mejor de cadaescenario. Generalmente, los teléfonossuelen sujetarse en forma vertical,mientras que en tabletas es habitualcambiar entre el formato vertical yhorizontal con mayor frecuencia.

En los teléfonos, el modo horizontalse usa sobre todo en aquellassituaciones que requieren mejor

aprovechamiento de la pantalla. Porejemplo, sostener el teléfono en formahorizontal permite disponer de unteclado más grande y una mayorsuperficie para pulsar las teclas,permitiendo escribir más cómodamente.

Figura 7.2. Las diferentes orientaciones sonuna oportunidad de repensar la disposición de

información que sea más útil en cada caso.

Es recomendable diseñar paraambas orientaciones, ya que de estaforma no se fuerza al usuario a usar unaúnica versión ofrecida. No obstante, encada caso, habrá que evaluar si laaplicación realmente lo requiere,considerando que diseñar la versiónhorizontal no consiste simplemente entrasladar de manera directa cadaelemento a la posición más parecida asu ubicación en vertical, sino en sacar elmáximo provecho del espaciodisponible en el modo apaisado,reubicando y acomodando los elementosgráficos e interactivos para mejorar lausabilidad.

Patrones deinteracción.

Según Martijn van Welie,«un patrón deinteracción es un resumen práctico deuna solución de diseño que se hademostrado que funciona más de unavez. Utilízalos como guía, no como unaley»[4].

Entonces, los patrones deinteracción son soluciones ya probadaspara dar respuesta a problemas comunesde diseño, que ocurren una y otra vez.Apoyarse en ellos puede agilizar ysimplificar el trabajo de diseño de una

interfaz. Su utilización asegura, además,que los usuarios encontrarán elementosfamiliares en la interfaz que los haránsentirse más cómodos y seguros al usarla aplicación.

Navegación

Una navegación simple y consistente esun componente esencial en laexperiencia de uso de la app y surge decontestar algunas preguntas básicascomo: ¿De qué manera el usuariorecorrerá la aplicación? ¿A través demenús o del contenido en sí mismo? ¿Y

si viene de una notificación? ¿Cómohará para volver atrás cuando hayaavanzado?

Pestañas

Las pestañas —o tabs— se puedenutilizar para filtrar contenidos o cambiarentre pantallas que, de acuerdo a laarquitectura de información, tienen elmismo nivel de jerarquía, indicandosiempre dónde se está y hacia dóndemás se puede ir.

Las buenas prácticas indican que esnecesario destacar siempre la pestaña

seleccionada, mantener el orden y laubicación inicial —que no cambien depantalla en pantalla— y no usarlas paraincluir otras acciones distintas a lanavegación.

Figura 7.3. Las pestañas se ubican arriba enAndroid y Windows Phone y en iOS, abajo.

Android utiliza las pestañas en lazona superior de la pantalla —justodebajo de la barra de acción— que, adiferencia de iOS, generalmente se usanpara el segundo nivel de navegación.Este SO tiene dos tipos de pestañas:fijas —se ven todas al mismo tiempo—o deslizantes —el usuario solo pude verla pestaña actual y las dos adyacentes—.En cualquiera de los casos, Googlesugiere aplicar una regla de oro: noemplear más de cinco o siete pestañas.

Por el contrario, en iOS seencuentran siempre en la parte inferior.En iPhone se puede mostrar un máximode cinco pestañas y, en caso de necesitarmás, la última de ellas se convertirá en

una pestaña «más», donde se agrupanlos apartados menos relevantes. Segúnlas guías oficiales de Apple, laspestañas deberán estar siempre visiblesdesde cualquier sitio y se recomienda suuso para organizar los contenidos de lasjerarquías más altas.

Windows Phone rompe con lametáfora visual de las pestañas con eldenominado Pivot Control, aunque sufunción sea la misma. Se ubican siempreen la zona superior de la pantalla y porsu gran tamaño juegan el doble papel detítulo y pestaña al mismo tiempo. Larecomendación es usarlos de formacomplementaria y subordinados al menúPanorama, que se ocupa de la

navegación de las jerarquías decontenido más altas dentro de laaplicación.

Listas

Según como se mire, todo contenidoestructurado dispuesto verticalmentepuede conformar una lista. Esta forma demostrar tantos ítems como sea necesariopermite al usuario tocar alguno de ellospara obtener informacióncomplementaria.

Las listas pueden mostrar tantotextos como imágenes, pero es

importante siempre jerarquizar sucontenido. Por ejemplo, en unaaplicación de correo electrónico eshabitual darle mayor importancia alnombre del remitente que al asunto delcorreo, la fecha de recepción o lasprimeras palabras del mensaje. Ordenarlos elementos dentro de una lista ayuda avisualizar el nombre del remitente —eneste caso el dato más importante— de unprimer vistazo.

Cuando contiene muchos elementospuede añadirse un sistema de índice quecomplemente la navegación a medidaque se va desplazando, de formavertical, por el contenido de la lista.

Figura 7.4. Uso de Listas en Android, iOS yWindows Phone.

En Android el uso de listas está muyextendido. Las guías de estilo de Googlerecomiendan la agrupación decontenidos relacionados —tal como seusa en la pantalla de ajustes de esesistema operativo— para una mejor

comprensión, ya que como usuarios,somos capaces de memorizar a cortoplazo solo unos pocos elementos.

iOS clasifica dos tipos de listas quese diferencian principalmente en suapariencia: listas planas o agrupadas.Las planas son filas que ocupan todo elancho disponible, mientras que lasagrupadas muestran grupos de filasasociadas manteniendo un margenlateral. Algo muy característico de laslistas en iOS es que suelen incluir unapequeña flecha a la derecha de cadaítem.

En el caso de Windows Phone, elllamado List View muestra una lista deítems que puede contener tanto imágenes

como textos y añade la posibilidad demostrar datos en formato de cuadrícula.

Galerías de imágenes

La disposición de imágenes está regidapor la retícula propuesta por cadasistema operativo. En caso de queexcedan el área disponible, se realiza unrecorte —generalmente cuadrado— delas imágenes a mostrar.

Figura 7.5. Las galerías de imágenes usan unformato reticular en Android, iOS y Windows

Phone.

Android es un caso particular, yaque al mostrar imágenes en la vista decuadrícula, cuando se considerenecesario, es posible utilizar undesplazamiento horizontal. Cuando esto

sucede es recomendable mostrar unpequeño trozo de las imágenessiguientes.

Menú tipo cajón

Este patrón, popularizado por Facebook,permite cambiar rápidamente entrepantallas de la aplicación. Pulsando unbotón se despliega de forma lateral unalista con los contenidos, oculta hasta esemomento. Otra forma de llegar a estalista es deslizando el dedo desde el ladoizquierdo de la pantalla.

Las ventajas del uso de este patrón

están claras: mejor aprovechamiento delespacio y, una vez desplegada la lista,ofrece una forma cómoda de navegar loscontenidos. Pero no todas son buenasnoticias, ya que este tipo de menú obligaa los usuarios a tocar el botón ydesplegar el panel para poder sabercuáles son las opciones disponibles enla lista.

Figura 7.6. El menú tipo cajón se ha hechomuy popular en Android, iOS y Windows

Phone, aunque por ahora solo el primero loincorpora en sus guías oficiales.

Hasta el momento, Android es elúnico que ha estandarizado su uso en lasguías oficiales, recomendándolo paralos niveles de navegación más altos de

la app o cuando las opciones de menúno tengan relación directa entre sí —enel caso contrario es mejor utilizarpestañas—.

En iOS se pueden encontrar muchasaplicaciones que lo utilizan. Un ejemplode buenas prácticas —aunque noreconocido por las guías de diseño— esPath. Esta red social ha implementadoeste tipo de navegación desde su versión2.

Por otra parte, en Windows Phone suuso aún no está muy extendido. Dehecho, la aplicación de Facebook, ahoramismo en versión beta, es una de laspocas que utiliza el menú tipo cajónpara navegar por los contenidos.

Volver

Los usuarios acostumbrados a usar laweb encontrarán aquí una formaconocida de navegar. A medida que seva avanzando en profundidad decontenidos es necesario contar con unaforma de retroceder o volver a nivelessuperiores. En el mundo móvil, con lanavegación pantalla a pantalla, el usodel botón «volver» es muy frecuente.

Figura 7.7. El botón de volver en Android seusa arriba —entonces llamado up— y abajo; eniOS, siempre arriba y en Windows Phone, es el

botón físico del terminal.

En iOS, este botón está contenido enla barra de navegación y se ubica en laesquina superior izquierda con unaetiqueta que tiene el título de la página

anterior. Aquí la navegación entrepáginas es jerárquica.

En el caso de Windows Phone, elbotón físico del teléfono —fuera de lainterfaz de la app— se encarga degestionar esta forma de navegar entre loscontenidos. De hecho, la interfaz de laaplicación no debería contemplar el usode este botón, dejándolo en manos delsistema operativo.

Android y la confusión…¿arriba o atrás?

A partir de la versión 4, Android

propone una nueva manera de navegar laestructura de información de las apps,basada en la relación jerárquica entrepantallas y para esto, ha introducido elbotón «arriba», en inglés up. En lapantalla de inicio de la app, entonces, nodebería aparecer porque no hay nivelessuperiores.

Figura 7.8. Android dispone actualmente dosformas de navegar hacia atrás, un

comportamiento que a veces se presta aconfusión.

Por su parte, el botón «volver»

(físico en algunos teléfonos eincorporado a la barra de navegaciónvirtual —en la interfaz del sistema— enotros terminales) está visible en todomomento y se utiliza para navegar haciaatrás —cronológicamente— por elhistórico de pantallas por las que hapasado el usuario. Si se pulsa este botónestando en el nivel superior de la app, elusuario terminará por salir de ella.

Estos dos botones trabajan de formacomplementaria, pero en ciertasocasiones pueden representar conflictosde navegación que hay que considerar encada caso particular, para ofrecer alusuario la mejor experiencia posible.

Windows Phone y lanavegación Panorama

Figura 7.9. Windows Phone propone unaforma de navegar entre pantallas de primer

nivel usando Panorama, desplazándosehorizontalmente.

Panorama es un patrón exclusivo de

Windows Phone que ofrece laposibilidad de navegar los contenidosde forma horizontal, como si cada unade las pantallas estuviera colocada unaal lado de la otra. El desplazamiento porestas pantallas da la sensación decontinuidad entre los contenidosapoyada, en parte, por la utilización deimágenes de fondo.

El uso de Panorama estárecomendado para el nivel superior denavegación, a modo de página de inicio.Desde allí se dan a conocer losprincipales apartados de la app, comopequeños avances del contenido que seencontrará luego con más detalle.

Este patrón se compone de una

imagen de fondo, título —generalmenteel nombre o logo de la app—, títulos desecciones y los avances de cada una deellas.

Acciones

¿Qué acciones son necesarias en estemomento? ¿Qué acciones esperaríaencontrar el usuario luego de acceder aesta pantalla? ¿Cuál de todas lasacciones es la más importante? Estasson algunas de las preguntas que hay quehacerse a la hora de definir las accionesque se encontrarán en cada pantalla de

la aplicación.La gran mayoría de acciones se

pueden realizar en determinadas páginasy solo allí tienen sentido. Sin embargo,puede haber excepciones cuando seanecesario que una acción esté siemprevisible. En este último caso, lasacciones realmente importantes debenser destacadas de una forma muyevidente. Es lo que sucede en Twittercon la acción para escribir un nuevotweet, presente en la interfaz la mayorparte del tiempo.

Hay diferentes sitios donde ubicarlas acciones de acuerdo a su jerarquía yfuncionamiento, donde las másimportantes están visibles y las menos,

ocultas. Donde sea que se encuentren, laposición tiene que ser consistente através de las distintas pantallas y conotras aplicaciones del sistemaoperativo.

Barra de acciones

En todos los sistemas, el compendio deacciones que se pueden realizar serepresenta por medio de iconos, por ellola correcta selección de estos recursosgráficos es fundamental.

Figura 7.10. La barra de acciones se ubicaarriba en Android y abajo en iOS y Windows

Phone.

En Android, los botones de acciónse encuentran en la zona superiorderecha de la interfaz; aunque puedehaber excepciones donde se ubiquen enla parte inferior de la pantalla,

separados de la navegación. Esfundamental ordenar las acciones enfunción de la frecuencia de uso. Elancho de la pantalla determinará cuantosítems se pueden mostrar: desde dos enlos móviles más pequeños, hasta cincoen tabletas.

En el caso de iOS, lo más común esque las acciones se ubiquen en la zonainferior, aunque en iPad se colocan en laparte superior derecha.

Igualmente, Windows Phone utilizasiempre la zona inferior de la pantallapara localizar las acciones que sepueden realizar y desde ladocumentación oficial insisten que solodeberían mostrarse las más comunes —

cinco como máximo—. También puedepasar que no haya nada destacable, casoen el que es conveniente usar la barraminimizada.

Desborde de acciones

Las funciones extra y de uso pocofrecuente se descubren por medio de la«revelación progresiva». Básicamente,están ocultas la mayor parte del tiempo,hasta que el usuario las reclame.

Figura 7.11. Android, iOS y Windows Phoneplantean diferentes alternativas para resolver el

desborde de acciones.

En Android, las opciones que nocaben en la barra de acción pasanautomáticamente a mostrarse comoacciones desbordadas. El camino parallegar a ellas es a través de un botón con

un ícono de tres cuadrados verticalesque las abre en formato de lista.

La propuesta de Apple consiste enagrupar acciones relacionadas, ocultasinicialmente, para luego mostrarlas enformato de lista de botones.

En Windows Phone, al igual queAndroid, las acciones extra se ubicanpor debajo de la barra de acción y seindican con puntos suspensivos que, alpulsarlos, despliegan las accionesocultas en formato de lista.

Accesos rápidos

Hay ciertas acciones que deben estarmuy a mano para que los usuariospuedan alcanzar sus objetivosrápidamente, por ejemplo, acceder a lasacciones asociadas a ítems en una lista oretícula sin tener que navegar enprofundidad para encontrarlas.

En el caso de una app de música,cuando se quiere añadir una canción a lacola de reproducción, sería un fastidiotener que entrar a la página de detallepara hacerlo. En situaciones como esta,para simplificar estas accionesrepetitivas es aconsejable utilizar losaccesos rápidos.

Figura 7.12. Formas de acceder rápidamente aacciones en Android, iOS y Windows Phone.

En versiones anteriores a Android 4,se llegaba a las acciones rápidaspulsando de forma continua un ítem, loque ocasionaba que se mostrara un menúcon las acciones posibles. Actualmente,ese gesto —mantener pulsado— está

recomendado solo para acceder al modode edición de una lista; entre tanto, elacceso rápido es posible mediante unícono triangular ubicado al pie de loselementos que tienen este tipo deacciones asociadas.

Un ejemplo bastante común deacceso rápido en el caso de iOS, escuando se quiere eliminar un ítem de unalista y se realiza un deslizamientohorizontal sobre la fila deseada. Porotro lado, las acciones relacionadas seubican in situ, sobre el mismo ítem.

En Windows Phone, en cambio, sedespliegan en formato de menúcontextual al efectuar el gesto demantener pulsado sobre un ítem.

Compartir

Probablemente sea una de las accionesmás empleadas en estos días: compartircontenidos con amigos, en Facebook, enTwitter, por mensaje de texto, como sea.Los sistemas operativos también hannotado esta necesidad y han facilitadouna implementación integrada al sistemamuy fácil de aprovechar.

Figura 7.13. La acción de compartir sedespliega arriba en Android, abajo en iOS y en

pantalla completa en Windows Phone.

Buscar

Teniendo en cuenta que uno de los usosprincipales del móvil es el consumo decontenidos, la herramienta «buscar» esuna manera esencial de llegar a ellos. Enapps que muestran grandes cantidadesde datos, la búsqueda puede ser inclusola función primaria.

La búsqueda se puede llevar a cabomediante la introducción de texto —elmétodo más habitual— o bien, por voz.Siempre que sea posible, es preferible irmostrando los resultados a medida queel usuario escribe para mejorar laexperiencia de uso. Idealmente, eltiempo de espera entre la introducciónde los datos y el resultado no deberíaser superior a uno o dos segundos.

Figura 7.14. Buscar se ubica arriba en Androidy iOS y utiliza una pantalla aparte.

Android hace que la opción parabuscar sea accesible desde la barra deacciones. Si la búsqueda es unacaracterística importante para laaplicación, como en el caso deDropbox, debería ocupar la primera

posición de esta barra. Al pulsar«buscar», la barra superior se modificapara convertirse en la de búsqueda.

En iPhone es habitual encontrar uncampo de búsqueda por encima de laslistas, tal como aparece en Contactos yotras apps. Junto con el input puedenaparecer filtros para refinar lasbúsquedas más complejas.

En Windows Phone, la búsqueda estratada como una acción más, disponibleen la barra de acciones y se lleva a caboen una página separada, donde seintroduce el texto y se listan losresultados.

Edición de listas

Es posible que el usuario necesitemodificar varios elementos de una listade forma simultánea. El flujo pararealizarlo es bastante sencillo: seseleccionan los elementos sobre los quese quiere actuar y luego se aplica laacción correspondiente.

Por ejemplo, si en una lista decorreos recibidos se quiere añadir unaetiqueta a tres de ellos, hay quemarcarlos y aplicar la acción deseada.Hasta aquí nada del otro mundo.

Ahora viene lo más interesante: lamanera de seleccionar elementos en unalista varía considerablemente de un SOa otro. ¡Que no cunda el pánico!, loexplicamos a continuación.

Figura 7.15. Tanto Android, como iOS yWindows Phone presentan diferentes

alternativas para realiza la selección múltiple

de elementos en una lista.

La selección múltiple se realiza enAndroid manteniendo pulsado unelemento. Una vez seleccionado elprimer ítem, la barra de acción cambiaindicando cuántos elementos estánseleccionados y qué acciones se puedenrealizar. Para salir de esta vista,Android propone hacerlo con el botón«check».

En iOS, la edición de listas sueleactivarse por medio de un botón«editar» colocado en la barra superior.De esta forma, la selección se hacevisible junto con las accionesrelacionadas. Para salir de esta vista sin

aplicar los cambios, en el mismo sitiopor donde se ha accedido, ahora hay un«aceptar».

En Windows Phone hay dos manerasde acceder a la selección. Puede ser através de la barra de acciones donde elusuario encuentra la opción«seleccionar» o usando un atajo queresulta muy práctico una vez aprendido:el truco está en seleccionar en el lateralizquierdo el primer ítem.

Cuadros de diálogo

Hay casos puntuales en los que hay que

interrumpir al usuario de forma temporalpara que tome una decisión o paraexplicarle mejor algo que ha sucedidoantes de continuar una tarea. Mientraslos diálogos están visibles en pantallano es posible hacer otra cosa en el restode la aplicación.

Cuando se trata de cuadros quecontienen avisos que no requieren unatoma de decisión, estos son de sololectura y tienen únicamente un botón quese ocupa de cerrarlos. Es recomendablelimitar su uso para mensajes graves otrascendentales que no puedan esperar.

En otros casos, los cuadros dediálogo se usan para informar al usuarioque debe tomar una decisión para poder

continuar y puede elegir entre dos o másopciones disponibles.

Figura 7.16. Cuadros de diálogo que requierenla toma de decisiones por parte del usuario en

Android, iOS y Windows Phone.

Android usa extensamente loscuadros de diálogo. Las solicitudes

pueden ser tan simples como «aceptar»o «cancelar», hasta diseños complejoscon un formulario dentro.

En iOS se ubican en el centro de lapantalla y son los muy vistos recuadrosazules con uno o dos botones en la zonainferior. Tan simples que solo tienen untítulo y una descripción.

En Windows Phone los cuadros dediálogo se colocan en la zona superior ypueden ocupar una porción o —en casosexcepcionales— toda la pantalla.

Notificaciones dentro de laapp

Cuestiones como: ¿Qué está haciendo laapp? ¿Cómo saber que la acción hafuncionado? ¿Ya terminó o hay que haceralgo más?, seguramente pasan por lacabeza de un usuario cuando no tieneninguna confirmación visual de que laacción que acaba de realizar ha idobien.

Para mitigar esta incertidumbre, seaconseja mostrar explícitamente cómohan ido las cosas o que sucederá enbreve con simples mensajes deconfirmación. Este tipo de mensajes sepresentan en pequeños avisos quedesaparecen luego de unos segundos.

A diferencia de los cuadros dediálogo, las notificaciones no requieren

la intervención del usuario ni tampocointerrumpen su flujo de trabajo.

Figura 7.17. Solo Android ofrecenotificaciones in-app nativas, mientras que en

iOS y Windows Phone deben serpersonalizadas.

Android incorpora las llamadas

«tostadas» —toasts en inglés—, queestán pensadas justamente para esto:avisar que algo ha pasado o pasará. Esuna pequeña «pastilla» en negro con untexto —por lo general de una línea—que se ubica en la zona inferior de lapantalla y por encima de cualquierelemento.

En contraste, en iOS y WindowsPhone no existe una solución concretasimilar a la propuesta de Android, porlo que las notificaciones dentro de laapp quedan a cargo del diseñador.

Introducción de datos

La introducción de datos en el móvilpuede ser tediosa cuando se trata decampos que requieren el uso del teclado,un elemento que ocupa gran parte de lapantalla y que dificulta la navegaciónentre los campos para introducirinformación.

Los sistemas operativos handesarrollado teclados diferentesdependiendo del tipo de dato que debaingresarse.

Figura 7.18. Diferentes tipos de tecladosusados para introducción de datos en Android,

iOS y Windows Phone.

En lugar de teclados, esrecomendable usar otras alternativascomo menús deslizantes, desplegables,checks o cualquier opción similar a unalista donde el usuario pueda elegir entre

varias opciones.Alternativamente, existen también

componentes de hardware en el teléfono—como sensores de ubicación, cámarasy micrófonos— que pueden emplearsetambién para ingresar datos en laaplicación.

Figura 7.19. El micrófono del teléfono sepuede aprovechar para introducir datos sinnecesidad de usar el teclado, como hace

Google.

Un ejemplo de esto lo encontramosen Google, que ofrece la posibilidad derealizar consultas a través de voz en subuscador u obtener la ubicación en unmapa de acuerdo a la geolocalización,sin necesidad de escribir la posicióngeográfica donde nos encontramos.

Gestos

«Tocar» es el input principal de losteléfonos móviles modernos. Todoqueda en manos del usuario que

manipula los elementos directamente enla pantalla. La acción y reacciónsuceden en el mismo sitio de manerasimilar a lo que ocurre en el mundo real.

Cuando se introdujeron las pantallasque soportaban múltiples gestos, parecíaque las interfaces táctiles se iban aenriquecer considerablemente. Larealidad es que, unos años más tarde, nose puede afirmar que los gestos máscomplejos hayan calado fuerte en losusuarios. Esto se debe, en parte, a quemientras más complicados son losgestos menos personas puedenrealizarlos[5].

Por el contrario, gestos simplescomo «tocar», «arrastrar» o «deslizar»

—que requieren solo uno o dos dedos—han sido bien asimilados por losusuarios, que los encuentran naturales yfamiliares como los que realizan fuerade las aplicaciones.

El uso de los gestos se puedeaprovechar en el diseño deaplicaciones, que debe considerarloscomo medios para realizar acciones onavegar por los contenidos. Aquítambién es importante aprovechar losconocimientos previos del usuario y serconsistentes con el sistema operativo.

Acciones básicas de la aplicacióndeberían poder llevarse a cabo mediantegestos simples para asegurarse que lamayor parte de los usuarios los pueden

realizar, dejando aquellos máscomplejos como una forma alternativade interactuar con la interfaz de la app.

Cada SO se ha esforzado en imponersus propias convenciones[6], peroafortunadamente hay gestos compartidosentre Android, iOS y Windows Phone. Acontinuación, una lista de los máscomunes y para qué se utilizan:

Android iOS WindowsPhone

Tocar: Toca la superficie con la yema deldedo

Selecciona laacción primaria

Selecciona laacción primaria

Seleccionala acciónprimaria

Arrastrar: Mueve los dedos sobre lasuperficie sin perder el contacto

Archivar oborrar alarrastrarhorizontalmenteen listas

Mostrar unbotón borrar alarrastrarhorizontalmenteen listas.Mover items enlistas

Cambiar aotraspestañas osectores deuna vistapanorama

Deslizar: Deslice rápidamente y sindetenerse la superficie con la yema del dedo

Desplazarse através delcontenido.Cambiar a

Desplazarse através delcontenido.

Desplazarsea través delcontenido.Cambiar aotraspestañas osectores de

otras pestañas. una vistapanorama.

Mantener pulsado: Toca la superficiedurante un período prolongado de tiemposin mover el dedo

Entra al modode edición enlistas

Mostrar untooltip.Aumentar elcontenido bajoel dedo

Mostrar untooltip sinseleccionarel elemento

Doble toque: Toca rápidamente lasuperficie dos veces con la yema del dedoAlternar entreacercar yalejar.Seleccionar

Alternar entreacercar y alejar

Alternarentreacercar yalejar

textoJuntar / Separar: Toca la superficie condos dedos y júntalos ó sepáralos

Aumentar oreducir el zoom

Aumentar oreducir el zoom

Aumentar oreducir elzoom

Girar: Toca la superficie con dos dedos ymuévelos en sentido horario o antihorarioGirar unaimagen o unmapa

Girar unaimagen o unmapa

Girar unaimagen o unmapa

Capítulo 8.

Diseño visual.

El diseño visual es para muchosdiseñadores la etapa más divertidadel proceso. Aquí se da vida a loswireframes con un estilo que está

marcado tanto por el diseñadorcomo por la personalidad de cada

sistema operativo.

El estilo de lasinterfaces.

La interfaz de una aplicación es como laropa que viste para salir a la calle. Estambién la capa que hay entre el usuarioy el corazón funcional de la app, el lugardonde nacen las interacciones.

En mayor medida está compuestapor botones, gráficos, iconos y fondos,que tienen una apariencia visualdiferente en cada uno de los sistemasoperativos, porque Android, iOS yWindows Phone tienen su propia formade entender el diseño.

El trabajo del diseñador consiste eninterpretar la personalidad de cadasistema operativo, aportando su propiavisión y estilo de diseño, para conseguiraplicaciones que, además de ser fácilesde usar, sean distintas a las demás ytengan coherencia visual con laplataforma que las acoge.

La belleza simple deAndroid

El diseño en Android está basado en unapulcritud brillante en la composición dela interfaz. Cada gráfico, botón y texto

está acompañado por la idea delimpieza visual pero, a la vez,deslumbra con pequeños detalles.

Figura 8.1. Android tiene un estilo de diseñosimple basado en Roboto como fuente

principal.

Roboto, la tipografía propia de estesistema operativo, es en gran parte suseña de identidad y se combina con unestilo de botones y colores biendefinido. Android se apoya en lasimplicidad, controlada pero noaburrida, que, en ocasiones, rompe otrasciende sus propios formalismos paraencantar al usuario.

iPhone, dejando atrás suamor por las metáforas

Desde sus orígenes hasta la versión 6 —última publicada oficialmente—, el

diseño de interfaces para iOS ha estadoclaramente marcado por elskeuomorphic design. Esta forma depensar el diseño traslada a las interfacesla apariencia y el comportamiento deobjetos reales. Por ejemplo, unaaplicación de una brújula que tenga ensu interfaz la clara representación delobjeto real, viéndose y comportándosetal como lo hace fuera del mundo digital.

Figura 8.2. Hasta la versión 6, el estilo de iOSse basa en metáforas visuales y tratamientos

realistas.

En este tipo de interfaces no suelenusarse tantos controles ni botones, sinoque se privilegia la manipulacióndirecta de los gráficos, representados demanera hiperrealista, aprovechando lacaracterística multitáctil del teléfono.

Los cambios en iOS7

Actualmente, la séptima versión de iOSestá en fase beta y se presume que serápublicada oficialmente en el mes deseptiembre. Aunque tiene todavía un parde meses de trabajo por delante, estaversión preliminar de iOS7 ya presenta

algunos indicios de un cambio radicalde estilo visual[1].

Concretamente, podemos decir queel skeuomorphic design, si bien no se haeliminado completamente, sí hadisminuido su presencia de formaconsiderable, quizás, influenciado porlos estilos de Windows Phone yAndroid.

Figura 8.3. Próximo a lanzarse, iOS7 rebajaconsiderablemente el estilo de diseño realista

y lo cambia por alternativas más planas ylimpias, aunque en ciertos casos todavía

basadas en el funcionamiento de objetos reales.

Esta búsqueda de limpieza visual yde privilegiar el contenido sobre elcontenedor —algo compartido por otrossistemas operativos—, en el caso deiOS7, se manifiestan en conceptosvisuales como:

No perder el contexto de vistaTeclados, pestañas y cuadros dediálogos, entre otros elementos,cuentan ahora consemitransparencias que dejan ver—con un poco de blur— elcontenido que hay debajo de ellos.Aprovechar la pantalla

En iOS7 hay una tendencia generala sacar el máximo beneficio delárea disponible. Esto se evidenciaen las tablas, formularios y listas,que no dejan espacios vacíosalrededor y van de extremo aextremo de la pantalla. Igualmente,los botones ya no tienen la formacontenedora que los encierra ysimplemente se ven como texto.Claridad visualTexturas, volúmenes, sombras ybrillos se han dejado de lado en lamayoría de componentes visualesde esta versión de iOS. Esto semanifiesta en elementos como

campos de búsqueda, pestañas,barra de acción e incluso en losiconos, ahora completamenteplanos. Sin embargo, en laspantallas preliminares de algunasaplicaciones, aún se aprecia el usode suaves texturas, pero con unnivel mucho menos intenso del quese venía usando hasta ahora.

Por otro lado, el uso de HelveticaNeue, mayormente light, coloresintensos y fondos blancos, contribuye aesta sensación de ligereza visual quepersigue la nueva versión de iOS.

A nivel de interacción las cosassiguen prácticamente iguales. Aquel

usuario acostumbrado a usar otrasversiones de iOS no encontrará muchosproblemas en adaptarse a los cambiosde la versión 7.

De todas formas, quedan todavíaalgunos meses para que se lanceoficialmente la versión terminada yseguramente podemos esperar algunoscambios para ese entonces.

El diseño plano deWindows Phone

El estilo de diseño de Windows Phonese basa en un diseño plano, despojado

de relieves, degradados y decoracionesestéticas excesivas. Esta limpieza visualtambién se aplica a los contenidos,donde solo aquellos importantespermanecen en pantalla, luciéndose ensu contexto.

Figura 8.4. El diseño de Windows Phone tienecon Metro un estilo plano, muy basado en su

retícula y tipografía, evocando la escuela suizade diseño.

La interfaz consiste en una

aproximación infográfica para susiconos, con un marcado uso de laretícula y la tipografía como uno de losprincipales recursos para dotar depersonalidad al diseño.

Interfaces nativas opersonalizadas.

Las interfaces nativas se basan enelementos —botones, listas yencabezados— que vienenpreestablecidos en cada plataforma.Tienen un aspecto ya definido en cuantoa las características básicas de suapariencia como color, tamaño o tipo defuente, que pueden ajustarse en mayor omenor medida para que se correspondancon la estética buscada.

En el momento de comenzar adiseñar es recomendable definir la

interfaz con elementos nativos. De estaforma, se consigue una buena base sobrela cual trabajar y no es necesario creartodos los elementos desde cero.

El inconveniente de las interfacesnativas es que limitan la personalidaddel diseño y, en algunos casos, esnecesario ir un paso más allá. Ensituaciones como esta, todos o algunoselementos de la interfaz pueden serpersonalizados, lo cual se logracreándolos de nuevo como imágenes.Por ejemplo, un elemento visualpersonalizado podría ser un campo deentrada de texto de un formulario que segenera como imagen, para aprovechar laposibilidad de incluir texturas, relieves

o sombras específicas, que un elementonativo no ofrece.

Figura 8.5. La app de Wunderlist incorporaelementos personalizados en su interfaz —

como el input— bien integrados.

Diseñar una interfaz personalizadatiene que planearse de antemano porquerepresenta una mayor complejidad ytiempo de desarrollo. De la mismamanera, no siempre los diseños de estetipo de interfaces se trasladan a laaplicación funcional de forma fidedigna,pues su correcta implementación quedaen manos de la pericia deldesarrollador.

¿Cuándo usar una u otrainterfaz?

En la mayoría de los casos no se trata deelegir entre una u otra, sino de alcanzarel balance adecuado combinando ambas.La situación más habitual suele serpartir de una interfaz nativa ypersonalizar solo aquellos elementosque se consideren necesarios.

El tipo de aplicación también tieneincidencia en este asunto. Por ejemplo,las aplicaciones que dan valor a losdetalles visuales y a la experiencia en

general, suelen contar con más de unelemento personalizado. Tal es el casoes Path y su forma de añadir«momentos», algo diseñado ydesarrollado a medida.

Figura 8.6. La manera de añadir «momentos»en Path ha sido desarrollada a medida para

mejorar la experiencia.

Por el contrario, hay otrasaplicaciones que dan más valor alcumplimiento de tareas y que sebenefician de tener una apariencia máslimpia que no distraiga del proceso. Unejemplo de ellas es Whatsapp, cuyoaspecto visual está completamentebasado en elementos nativos del sistemaoperativo.

Además del objetivo o del tipo deaplicación, hay otras variables paraconsiderar. Las interfaces nativas tienenun punto a favor y es que estánconstituidas por elementos que el

usuario ya conoce y a los que estáhabituado, por lo tanto, no representanun nuevo aprendizaje. Esto puede incidirfavorablemente en la usabilidad de laapp.

Por otro lado, las interfacespersonalizadas pueden ofrecer unaapariencia más acabada, pero al trabajarcon ellas hay que considerar lacompatibilidad con múltiplesdispositivos —cómo se visualiza elmismo diseño en teléfonos diferentes—y el rendimiento general —un usoexcesivo de imágenes puede hacer quela app sea más lenta—.

La identidad visual.

Una aplicación es, entre otras cosas, unapieza de comunicación. Forma parte deun sistema y es una oportunidad paraextender la identidad de una empresa oproducto.

A través de las diferentes pantallasde la app, los colores, tipografías yfondos actúan como elementos quereflejan esa identidad.

Figura 8.7. Vine combina su color corporativoen la cabecera con otros colores en los

hashtags.

Claramente, uno de los componentesde la identidad es la marca. Aunque seatentador hacer un uso extensivo yrepetido de ella, se recomienda incluirlaen lugares propicios para tal fin, comopantallas introductoras, pantallas paraingresar clave y usuario, o en la sección«Acerca de». De esta forma, se puedeasegurar una correcta exhibición de laidentidad sin afectar la navegación y laexperiencia de uso.

Iconos y pantallainicial.

Dicen que la primera impresión es laque cuenta. En el mundo de lasaplicaciones esa primera impresión estálimitada a dos componentes visuales: elícono de lanzamiento y la pantallainicial —también llamada splash— quese mostrará muchas veces al abrir laaplicación.

Estos elementos se verán antes quenada, incluso, antes de empezar a usarrealmente la aplicación. Nomenospreciar su importancia y darles la

atención que merecen, garantiza arrancarcon el pie derecho.

Ícono de lanzamiento

Hay que pensar en la aplicación comoun producto que estará en un escaparatejunto a muchos otros y el ícono delanzamiento es el packaging que loenvuelve.

En primer lugar, este ícono servirápara representar a la app en lasdiferentes tiendas de aplicaciones —junto a las pantallas y textospromocionales— como elemento de

venta para convencer al usuario dedescargarla.

Figura 8.8. Una aplicación compite conmuchas otras cuando un usuario llega a ella através de los resultados de búsqueda, en esta

caso Google Play.

Sorteado este paso, y una vezinstalada en el teléfono, la aplicación

convivirá con muchas otras que elusuario haya instalado; por eso, el íconode lanzamiento debe ser distintivo yrepresentativo de la app. Distintivo,porque tiene que separarla de las demás,incluso de aquellas que cumplanfunciones similares, y representativo,porque sus características visualestienen que comunicar claramente elobjetivo principal de la aplicación. Lasformas simples, no muy cargadas ycuidadas en sus detalles, suelen ser lasque tienen mayor efectividad.

Figura 8.9. El ícono de lanzamiento de una appdebe tener personalidad para diferenciarla de

las demás en una tienda, pero tambiénrepresentar claramente lo que hace. En elejemplo, hay iconos de diferentes apps de

tareas y una red social, ¿puedes descubrir cuáles?

El tamaño también es algo a tener encuenta. Algunas veces, el ícono se verárealmente grande, por ejemplo en lastiendas de aplicaciones, pero otras,como cuando la app está instalada, se

verá mucho más pequeño. Al diseñarlohay que considerar todas lasposibilidades, añadiendo más o menosdetalle a la imagen en función de susdimensiones.

Siendo aún más específicos, cadauno de los SO tiene diferentes requisitosque debe cumplir el ícono delanzamiento. Tanto Android[2] comoiOS[3] ofrecen detalladas guías del estilovisual y características técnicas quedebe tener esta imagen.

Figura 8.10. En Android los iconos sueletener sombras y juegan con una ligera

perspectiva.

En Android los iconos son objetosrepresentados frontalmente con unaligera perspectiva, como si fueran vistosdesde arriba. Dan sensación de volumeny profundidad, jugando contransparencias para integrarse mejor a lapantalla. Las formas son distintivas ycon medido realismo.

Figura 8.11. Iconos realistas y detalladosencerrados en formas contenedoras con

esquinas redondeadas, el sello de identidad deiOS.

La situación es diferente en iOS: losiconos tienen un carácter realista ydetallado. Las imágenes son cuadradas ysin transparencia. Además, el sistemaoperativo añade algunos efectos a laimagen original, como bordesredondeados y sombra, para elcontenedor principal. Opcionalmente, sepuede agregar brillo en la partesuperior.

Figura 8.12. Aunque hay excepciones, lasbuenas prácticas en Windows Phone indican

que los iconos de lanzamiento deben serformas simples y blancas.

Por su parte, en Windows Phonetienen un estilo bastante característico:los iconos son pictogramas. Formasextraordinariamente simples y decolores planos —sobre todo blanco—,casi sin detalles e integradasperfectamente a su contenedor. En estecaso, la transparencia es fundamental yaque las imágenes están ubicadas dentrode una forma cuadrada, que puedecambiar el color de fondo de acuerdo alas preferencias cromáticas del usuario.

Iconos interiores

Ya dentro de la aplicación, los iconosinteriores tienen un papel menos estelary más funcional que los de lanzamiento.Puede ser que pasen desapercibidos,pero su trabajo es importante ysilencioso y, como tal, digno de tener encuenta.

Su uso suele estar asociado a tresescenarios. El primero, como ayudavisual para reforzar información, porejemplo, en un cuadro de diálogo conuna alerta. En el segundo caso, los

iconos interiores actúan comocomplemento de elementos interactivos,como cuando se encuentran dentro debotones o pestañas. Finalmente, sufunción puede ser la de mejorar lautilización del espacio, en este caso, elícono resume visualmente algo que enforma de texto sería muy extenso ocomplejo de entender.

Los iconos tienen que transmitir porsí solos la acción que ejecutan y estodepende del contexto. Por ejemplo, unícono de «eliminar» puede referirse a unsolo elemento en particular o a varios,dependiendo de dónde esté ubicado y aqué elemento de la interfaz estévisualmente asociado.

Figura 8.13. De arriba hacia abajo, iconosinteriores en Android, iOS y Windows Phone.

Cuando los iconos acompañandeterminadas acciones —si no tienenetiquetas de texto que ayuden aejemplificar su función— se vuelve másimportante que sean claros yrepresentativos. Esto ocurre cuando, porlimitaciones de espacio, no puedeincluirse un ícono y texto al mismo

tiempo. Además, es una tendencia queestá empezando a verse cada vez más enlas aplicaciones.

La interpretación de iconos suponecierta subjetividad que hay que tratar deeliminar haciendo un uso correcto deellos. Por ejemplo, en cada plataformaalgunas acciones como «buscar»,«guardar» o «editar» tienen iconosasociados. El usuario ya los conoce ysabe qué significan, por lo tanto, darlesel uso que se espera de ellos ayudará aalcanzar consistencia y mejorará lausabilidad de la aplicación.

Pantalla inicial

Conocida también como splash, es laprimera pantalla que verá el usuario aliniciar la app. Su uso está siendo cadavez más limitado —y evitado—, por loque generalmente se muestrarápidamente la primera vez que se abrela aplicación. Esta pantalla sirve comopresentación del contenido mientras serealiza la carga inicial, por tanto, esnormal que se incluya un elementoindicativo de carga junto a los demáselementos gráficos.

Figura 8.14. Las pantallas iniciales en Androidcontienen poca información y solo se muestran

brevemente durante la carga inicial.

La pantalla inicial tiene un caráctertan efímero que pocas veces se ve másde un par de segundos. Debido al pocotiempo de vida que tiene, la informaciónque muestra se debería limitar al nombrey versión de la aplicación, nombre del

desarrollador y poco más, ya quedesaparecerá tan pronto como laaplicación termine de cargarse.

Figura 8.15. Las recomendación en iOS esusar una pantalla inicial que sea una

representación del contenedor de lainformación buscando una sensación de

inmediatez.

En algunos casos, este splash setrata de una representación delcontenedor de la aplicación: una imagencasi idéntica a la que verá el usuariocuando la carga haya finalizado, pero sinaquellos datos que pueden llegar acambiar como textos, etiquetas enbotones y elementos de la barra deestado, haciendo que, aparentemente, lacarga resulte más fluida[4].

En el caso de Windows Phone, elsistema operativo se encarga degestionar la pantalla de inicio que

consiste en una ampliación del ícono delanzamiento.

En cuanto a la orientación de estapantalla en teléfonos móviles, hay querecordar que suele mostrarse de formavertical, mientras que en las tabletas, esnecesario determinar la orientación quese está usando al momento de mostrar elsplash y, en función de eso, hacer uso dela versión correspondiente al modohorizontal o vertical.

Grilla o retícula deconstrucción.

La grilla o retícula —grid en inglés—es la estructura invisible sobre la cual seapoyan todos los elementos visuales. Sufunción es la de separar cada uno de loscomponentes de la interfaz en un espacioordenado, organizando los sitios quequedarán en blanco y aquellos quecontendrán formas. Una retícula biendefinida se transforma en una ayuda aldiseño que, generando orden ysimplicidad, mejora la usabilidad de laapp.

En su forma más básica consta de unmódulo base: un cuadrado de un tamañodeterminado que se usa como medida dereferencia. A su vez, este módulo puededividirse en submúltiplos paraespaciados más pequeños.

Mientras el diseño de la interfaz estáen desarrollo, la retícula se representapor medio de líneas guía. Una vezterminada la estructura, se puedepercibir por el llamado «ritmo visual»que ubica los elementos armónicamenteen el espacio.

En el diseño de interfaces paramóviles, la grilla permite establecermárgenes y determinar la ubicación delos botones, la separación de la

tipografía y el espacio interior y exteriorde los contenedores. Por supuesto, cadauno de los sistemas operativos tienediferentes retículas y por lo tanto,distintos módulos.

Android

En Android, el módulo base es de 48DPque equivale aproximadamente a nuevemilímetros, tamaño mínimorecomendado para elementosinteractivos. Basarse en este tamaño yrespetar estas dimensiones para losbotones, permite asegurar que estos

podrán ser tocados con el dedo sinproblemas, cuestión fundamental en eldiseño para móviles.

Figura 8.16. En la imagen se puede verclaramente cómo una interfaz en Android está

compuesta por un módulo base de 48DP.

Para el espaciado y separación, en

cambio, se usa un módulo de 8DP. Porejemplo, el contenido de filas tiene unaseparación —superior e inferior— de4DP, lo que hace que cuando dos filasestán una sobre otra, se sumenconformando un espacio total de 8DPentre ellas. En los márgenes laterales,los diseños suelen tener 16DP o, dichode otra forma, dos módulos de 8DPjuntos[5].

iPhone

Los diseños para iPhone también sebasan en una retícula, solo que en este

caso el tamaño del módulo base es de44px, asegurando que botones yelementos en listas puedan ser pulsadossin problemas. En ese ritmo se basanmuchas aplicaciones diseñadas paraiPhone y es el mismo que recomiendaApple.

Figura 8.17. En iOS el módulo base es de44px.

Este módulo de 44px se divide enotros de 11px que, repetidos la cantidad

de veces deseada, crean los espacios yseparación entre tablas, botones y otroselementos de la interfaz, generando unritmo vertical[6].

Windows Phone

En Windows Phone la retícula se hacemás evidente debido al uso que hace deformas cuadradas en la interfaz. Lapantalla principal del sistema operativoestá basada en los llamados azulejos otiles, que permiten apreciar claramentela distribución y tamaño de loselementos principales.

En este caso, la retícula se apoya enun módulo de 25px con separaciones de12px. Esta fórmula, repetida por toda lapantalla, crea una estructura visual sobrela cual se crean los diseños.Adicionalmente, las filas y columnaspueden agruparse de distintas maneraspara lograr diseños personalizados quehacen diferentes usos del espacio.

Figura 8.18. En Windows Phone la retícula esun pilar fundamental sobre el cual se apoyan

todos los elementos en pantalla.

Listas, gráficos, miniaturas de fotosy botones, toman como base estaretícula, logrando una apariencia estable

y dando sensación de orden, simplicidady limpieza visual, a través de todas laspantallas de una app de Windows Phone.

Tipografía.

Como en cualquier diseño, el objetivode la fuente tipográfica es conseguir queel texto se lea con claridad. Esto selogra no solo con una adecuada elecciónde la fuente, sino también gestionando sutamaño, separación entre líneas, anchode columnas y contraste visual con elfondo.

Este último punto, el contraste, esmás importante de lo que puede creersea simple vista. Un móvil es undispositivo que muchas veces se usaráfuera de casa, por ejemplo, en la calle.En algunos momentos el sol dará

directamente sobre la pantalla y si nohay un buen contraste entre tipografía yfondo, la información en pantalla seráimposible de leer.

La tipografía es un componente que,como botones y gráficos, también seasienta en una retícula que definirá suubicación y posición dentro del contextogeneral de la pantalla.

Serif o sans-serif

Generalmente el debate sobre laelección de la fuente suele concentrarsemayormente entre las tipografías que

tienen serifa y las que no. Si bien escierto que en tamaños pequeños y bajasresoluciones rinden mejor aquellasfuentes más limpias, abiertas y sans-serif, también pueden considerarse lasserif para los títulos principales, cuandocuenten con un tamaño en el que lasserifas no sean un impedimento para lalectura.

Aunque en móviles no sea habitualuna lectura de texto prolongada, lacorrecta legibilidad es una partefundamental del diseño; por esta razón,la tipografía es tan importante comocualquier otro elemento visual que seincorpore en una interfaz y su elecciónno debería descuidarse.

Legibilidad y resolución

Por ser un soporte digital, los móvilestienen características propias y algunaslimitaciones ajenas a los mediosimpresos tradicionales. La pantallainfluye bastante en el comportamiento ydesempeño tipográfico si se tiene encuenta que, en algunos casos, essumamente pequeña.

Figura 8.19. En terminales con buena calidadde pantalla los caracteres son más legibles. En

pantallas de poca densidad la eleccióntipográfica puede representar un problema

mayor.

Actualmente, muchos dispositivostienen pantallas con buena resolución, loque elimina un factor de complejidad yuna gran preocupación a la hora deelegir qué fuente se usará. Este tipo de

pantallas suele encontrarse en móvilesde alta gama, sin embargo, hay otrosteléfonos con características no taninteresantes.

En este último caso, elegir latipografía es una tarea bastante difícilque no se limita a la elección de familiay tamaño, ya que, mientras más pequeñasea la pantalla, hay más posibilidadesde que la forma en que se pintan en ellalos caracteres, sea más pobre.

Tamaños mínimos

En soportes digitales, como un móvil o

una tableta, algo que condiciona eltamaño tipográfico es la distancia a lacual se sujeta el dispositivo. Losmóviles suelen sostenerse de forma quela pantalla está más cerca del ojo dellector que en el caso de una tableta, loque permite que el tamaño de latipografía sea más pequeño.

Figura 8.20. El tamaño de pantalla y ladistancia de lectura condicionan la elección de

los tamaños de la fuente, el interlineado einterletrado.

Al mismo tiempo, en los teléfonos elespacio en pantalla es mucho menor, locual obliga a ajustar el interlineado y laseparación entre caracteres, para

aprovechar el área disponible sinperjudicar la lectura.

Los tamaños mínimos pueden variardependiendo del sistema operativo, laresolución de la pantalla y la fuente quese elija. En todo caso, cuando se trata detamaños pequeños, se aconseja elegirfuentes de formas simples y abiertas,con espaciado entre caracteres, líneas ymárgenes para dar aire visual quefacilite la lectura.

La mejor forma de asegurar unacorrecta legibilidad no es otra queponerla a prueba en el teléfono para elcual se diseña. Los diseños en pantallade ordenador suelen ser engañosos ycomprobarlos en el entorno más real

posible, permite realizar ajustes ycorrecciones hasta conseguir el tamañoadecuado.

Figura 8.21. Diferentes tamaños de fuentes enAndroid de acuerdo al uso y jerarquía de los

elementos.

En Android, el tamaño tipográfico semide en sp —scaled pixels o píxelesescalados—, una forma de modificar laescala de las fuentes de acuerdo al

tamaño de pantalla y a las preferenciasdefinidas por el usuario en suconfiguración del teléfono. Los tamañosmás comunes van desde 12sp hasta22sp.

El tamaño es variable en iOS,dependiendo de dónde está ubicado eltexto. En títulos principales y etiquetasdentro de botones importantes esaproximadamente 26px. A partir de allí,va disminuyendo en los diferenteselementos hasta llegar al tamaño máspequeño, cercano a los 13px. Sinembargo, se recomienda no usardimensiones inferiores a 20px en lostextos de lectura.

En Windows Phone, más que otras

plataformas, el diseño recae en latipografía. Una mala elección deltamaño de la fuente en una app quecuenta con pocos elementos visuales,puede llevarla a la ruina. Lasrecomendaciones son: no usar un tamañomenor a 20px para los textos máspequeños y en el caso de títulos,considerar tamaños que pueden llegar,incluso, a 70px.

Jerarquías

Como elemento visual y componente deuna interfaz, la tipografía también es

susceptible de ser jerarquizada. Suimportancia depende no solo de lafunción que cumple, sino también de lainformación que contiene y su posiciónen pantalla.

Para definir diferentes niveles deprotagonismo en un texto se puedeapelar, además del tamaño, a lasvariantes —negrita, regular o light— yal color.

Figura 8.22. Mientras que en la pantalla de laizquierda no se aprecia una jerarquía clara, a laderecha es más evidente la importancia de cadaelemento de acuerdo al tamaño de la tipografía.

Un texto con mayor jerarquía seríaaquel que se ubica como título principalde sección, por ejemplo, un título dentrode una pestaña. Por otro lado, en lainformación contenida dentro de una filaen una lista, puede haber variasjerarquías, por ejemplo, en el caso de uncorreo, podría verse el nombre de lapersona que lo envía, un resumen delcontenido y la fecha de envío; todosestos elementos tienen diferenteimportancia y definirla es el primer pasopara saber qué estilo tipográfico aplicar.

Las tipografías de cadasistema operativo

Tanto Android, como iOS y WindowsPhone, tienen sus preferenciastipográficas y su propio set de fuentes desistema. Esto no quiere decir que eldiseñador deba apegarse necesariamentea esta selección, pero elegir alguna delas opciones disponibles ayudará avincularse con la identidad de cadaplataforma.

Figura 8.23. Roboto es la fuente emblema deAndroid, pensada con variables para móviles

con buena calidad de pantalla.

En el caso de Android, la familiaDroid Sans fue una de las más utilizadasy marcó una época dentro de esaplataforma. Sin embargo, en las últimasversiones de este sistema operativo hasido reemplazada por Roboto,especialmente diseñada para móviles de

alta resolución y con variantes que vandesde una extra delgada hasta el formatoblack[7].

Figura 8.24. Helvetica Neue es un clásico deiOS a pesar de los problemas que puede

presentar en tamaños reducidos.

La fuente emblemática de iOS en losúltimos años ha sido Helvetica Neue yes normal encontrar muchas

aplicaciones que la usan. Con el pasodel tiempo se ha transformado casi enuna marca de identidad de este sistemaoperativo; no obstante, hay más de 260fuentes disponibles que pueden usarsede forma nativa[8].

Figura 8.25. Segoe UI es la fuentecaracterística en Windows Phone, en susinterfaces tiene un gran protagonismo.

Windows Phone introdujo Segoe UIcomo un sello que acompaña el estilolimpio, moderno y geométrico de suinterfaz. Aun así, cuenta con una serie defamilias tipográficas que la acompañan,sobre todo en casos que requierencaracteres especiales que no seencuentran en Segoe UI, como aquellosde idiomas extranjeros[9].

Cada uno de estos sistemasoperativos también permite incorporaren el diseño fuentes adicionales a laspredefinidas. Aunque esto sea posible,es importante recordar que variedad ycalidad son dos cosas diferentes:muchas de las fuentes que puedenencontrarse, no han sido pensadas ni

preparadas especialmente para unabuena legibilidad en pantalla.

Color.

El color es un recurso vital en el diseñode una aplicación. Su uso abarcaencabezados, textos, botones, fondos ymuchos otros elementos que conformanla interfaz. En algunas ocasiones, estáasociado a la identidad —colorcorporativo— y en otras, responde acriterios estéticos y decisiones dediseño.

Un color por sí solo, salvo en elcaso de colores reservados, no indicamucho. Como parte de un sistemacromático, el uso consistente, conscientey vinculado al contexto donde se aplica,

es lo que lo llena de significado para elusuario.

Colores reservados

Hay ciertos colores que debenemplearse de forma cuidadosa porquetienen connotaciones que no puedenobviarse. Se llaman justamente «coloresreservados» porque su uso deberíalimitarse especialmente a los nombradosa continuación:

Figura 8.26. Colores como el amarillo y rojosuelen reservarse para reforzar el significado yla importancia de algunos elementos visuales.

Rojo: Para errores y alertasimportantes. Es un color quenaturalmente indica peligro y llamala atención para centrarseinmediatamente en lo que estáocurriendo.Amarillo: Prevención. Señala quela acción que va a realizarseimplica la toma de una decisión

que ocasiona alguna consecuencia,por lo cual hay que estar alerta.Verde: Mensajes de éxito yconfirmación de que una acción seha realizado correctamente.

En textos

El color se puede usar para destacaraquellas frases o palabras que puedenser pulsadas, como enlaces. En estecaso, es importante mantener laconsistencia visual para permitir alusuario, intuitivamente y a simple vista,

saber cuáles son los elementostipográficos interactivos.

Otra función que cumple el color alser usado en textos es la de jerarquizarel contenido. La informacióncomplementaria puede ser destacada ominimizada dependiendo del color quese use; por ejemplo, aquella que revistecierta importancia podría destacarse enel texto con un color diferente. De lamisma forma, el color también puedeusarse para identificar informaciónsecundaria, usando tonos más claros sintanto protagonismo.

En fondos

En el caso del color de fondo, este debeestar en consonancia con el elegido parala tipografía, ya que es necesario uncontraste mínimo por cuestiones delegibilidad y accesibilidad.

Hay que tener en cuenta que losfondos oscuros suelen cansar la vistamás rápidamente, por lo tanto, si la appes de uso frecuente o requiere pasarcierto tiempo leyendo, es convenienterevisar la elección cromática y llevar elcolor de fondo hacia alternativas más

claras. Sin embargo, los colores oscurosen el fondo sí pueden ser una buenaalternativa cuando el contenido sea muyvisual, como fotografías o vídeos, yaque ayuda a resaltar estos elementos.

En elementos interactivos

El color puede utilizarse como respuestao feedback a acciones concretas delusuario, un uso que muchas veces no setiene en cuenta. Para ilustrar con unejemplo, los elementos seleccionados opulsados, como botones o filas, puedendestacarse con un color que indique

visualmente dónde se ha pulsado, lo cualsuele ser particularmente difícil desaber en un móvil.

En el caso de elementosdeshabilitados, generalmente el color esmás claro que cuando están en su estadonormal, incluso, puede apelarse al usode transparencias. De cualquier forma,el objetivo es indicar de una formaevidente que ese elemento no produciráningún efecto al ser pulsado.

En encabezados

Además de destacarlos como elemento

principal, cuando el color se usa enencabezados tiene que armonizarcompletamente con el fondo y los otroselementos de la pantalla. A fin decuentas, se trata de un importanteespacio que se usará, por ejemplo, paraponer los diferentes títulos de sección yotros elementos interactivos que tenganincidencia en el contenido de la pantallaque se está viendo.

Como los encabezados estánpresentes en diferentes secciones de laaplicación, debe haber una consistenciacromática a medida que se navega porlas diferentes partes de la app.

Colores por defecto de cadasistema operativo

Android y Windows Phone usan temas—themes en inglés— que afectan elcolor de sus aplicaciones y pueden serclaros u oscuros. En Windows Phone laelección entre los temas disponibles estátambién en manos del usuario, ya quepueden cambiarse en las preferenciasdel teléfono, modificando lavisualización de la interfaz a través detodo el sistema operativo.

Figura 8.27. Windows Phone deja elegir alusuario temas claros u oscuros y un color quese utiliza para resaltar aquellos elementos más

importantes.

Todos los elementos nativos de lasaplicaciones se ven afectados por estadecisión: diálogos, botones y fondos delistas se verán en consonancia con eltema elegido. Sin embargo, en Windows

Phone, respetar la elección del usuarioqueda en manos de cada aplicación,porque aun cuando este haya elegido uncolor para su tema, la app puede decidirusar una opción cromática diferente. Porejemplo, incluso si el usuario elige uncolor oscuro como tema, la aplicaciónpuede mostrar elementos en blanco siasí se ha establecido previamente.

Mantener o no la selección que haceel usuario del tema, tiene ventajas ydesventajas que deben valorarse cuandose decide el diseño de la app. Porejemplo, usar el color del tema elegidobrinda consistencia visual y comodidada través de todo el sistema operativo,además, el usuario se siente siempre

dentro del mismo contexto. No obstante,la diferenciación respecto a otras appspuede ser baja y disminuye laposibilidad de incorporar a laaplicación los colores corporativos.

Figura 8.28. Android sugiere una paleta decolores, aunque su recomendación principal es

usar el azul.

En Android, la elección del tema no

es una opción para el usuario; son losdiseñadores quienes deben decidir siaplicar temas oscuros o claros a toda laaplicación, o solo a determinadaspantallas.

En los dos casos, los colores de lostemas se combinan con otrossecundarios que tienen la función deresaltar aquellos elementos querequieren atención. En Windows Phone,este color secundario también puede serelegido por el usuario dentro de unalista de opciones en las preferencias,pero también en este caso, la app puedehaber optado por un color diferente.Mientras tanto, aunque su paletacromática propone otras opciones que

pueden ser tenidas en cuenta a la hora deplantear el diseño visual, en Android serecomienda el azul como colorsecundario.

Figura 8.29. Los colores por defecto de iOSestán basados en los negros y azules grisáceos.

Por último, el caso de iPhone esdiferente porque no usa temas. Su

propuesta de color nativa, establecidapor defecto, se basa en azules grisáceospara fondos, barras de herramientas yencabezados de secciones. El negroqueda reservado para la tipografía y losbotones, dependiendo de la función quecumplan y el fondo donde se encuentren,pueden ser blancos o grises, mientrasque los rojos se usan para acciones querepresentan cierto riesgo para el usuarioy los azules para botones de acciónprincipal. Aun así, los colores de estoselementos pueden cambiarse fácilmente.

El lenguaje: cuidandolas palabras.

En una aplicación hay infinidad delugares donde usar textos: enencabezados y títulos, botones, mensajesde error y avisos en pantallas vacías. Encada caso, las palabras son tanimportantes como el elemento gráficoque las contiene o acompaña. Lenguajetextual y visual van de la mano, unidospara lograr una experiencia de usuarioconsistente en todos los sentidos.

La incidencia de la palabraequivocada

Cómo formular una frase es algo quegeneralmente no suele considerarseimportante en un primer momento, perotiene influencia directa en la forma enque el usuario usa la aplicación y serelaciona con ella. Por ejemplo, escribirmal la etiqueta de un botón —el textoque contiene— puede llevar aconfusiones sobre el resultado de laacción que indica, provocandoincertidumbre y frustración en el usuario

que se equivoca.Situaciones como esta son

habituales. Aunque pueda parecer obvio,un mensaje debe ser comprendidofácilmente por el usuario, sin obligarlo aesforzarse para interpretarlo. Esto seconsigue, entre otras cosas, con unlenguaje simple y directo; haciendo galade la economía de palabras, donde loimportante se dice primero y loinnecesario, no se dice.

El receptor

Como cualquier mensaje, una aplicación

también tiene un receptor. Conocer quiénes, permite saber cómo hablarle. Esto esimportante para determinar la forma enque se articulan las frases y el lenguajeque se utiliza. No es lo mismo hablarle aun niño que a un adulto, como no esigual dirigirse a un usuario técnico que aun principiante tecnológico. Todoinfluye en la elección de las palabras.

En el mundo de las aplicaciones setiende a llevar a un plano muytecnológico la forma de expresarse, estohace que muchas veces se escribanmensajes cargados de tecnicismos opalabras complejas que un usuario nopreparado podría tener dificultad paraasimilar o que suenan demasiado duras.

Por ejemplo, la palabra «acceder»puede ser simplemente reemplazada por«entrar», un sinónimo mucho másameno.

Comunicando errores

La manera de comunicar los erroresmerece un párrafo aparte. De entrada,esta es una situación estresante odesagradable para el usuario, pero através de mensajes amables —que nousen tecnicismos incomprensibles o untono acusatorio— puede sobrellevarsede una forma menos traumática. Un

ejemplo de esto, es el sentido del humorpara comunicar los errores deLetterpress, que al ser una aplicación deentretenimiento aprovecha lapredisposición de sus usuarios adivertirse.

Figura 8.30. Los mensajes de error enLetterpress son tan divertidos como jugar con

esta app, quitándole dramatismo al asunto.

Textos en otros idiomas

Como comentario adicional, se puedemencionar que cuando la aplicación estádisponible en diferentes idiomas, hayque tener cuidado al incorporar lostextos traducidos para asegurase de quesigan viéndose correctamente en elespacio visual que tienen asignado.Dependiendo del idioma, algunaspalabras son —a veces mucho— más

largas que en el idioma original ypodrían verse cortadas u ocultas bajootros elementos de la interfaz.

Detalles visuales.

Es verdad que la diferencia radica enlos detalles. Ellos pueden separar unaaplicación regular de una genial. En unaprimera instancia no se presta atención aestos detalles que mejoran laexperiencia del usuario e incluso,cambian su estado de ánimo; y esnormal, al principio hay otros aspectosde diseño de los cuales hay queocuparse. Pero a medida que la interfazva llegando a su fin, es importanteconsiderarlos para no pasar por altoalgo que pueda arruinar el trabajorealizado.

Pantallas vacías

Los diseños tienen que considerar nosolo los escenarios ideales, como unalista que ya está completa o una pantallallena. Es necesario plantear también eldiseño para cuando la aplicacióncomienza a ser utilizada y aún no sedispone de cierta información. Porejemplo, cómo se vería una pantallavacía, sin ítems, cuando todavía no haynada para mostrar.

Figura 8.31. También hay que diseñar laspantallas vacías, para cuando aún no hayinformación. En este caso también se

aprovechan para explicar el funcionamiento deesta sección.

Otro escenario a tener en cuenta, esaquel relacionado con los fondos queirán detrás de aquellas listas que noalcanzan a cubrir toda la pantalla o losgráficos contenedores donde apareceránlas imágenes una vez que estén cargadas.

Gráficos efímeros

Es necesario considerar también el

diseño de aquellos elementos queaparecen por poco tiempo en la pantalla.Por ejemplo, si la conexión es lenta,puede ser que el usuario tenga que pasarmás tiempo de lo esperado viendo lapantalla de carga y en ese caso, estosdetalles visuales tienen su momento degloria.

Figura 8.32. De acuerdo a la velocidad deconexión a Internet los elementos puedentardar en aparecer en pantalla y es bueno

considerar qué se verá cuando aún no estánvisibles.

Secretos visuales

A la hora de darse pequeños lujosvisuales, se puede pensar en aquellosgráficos que están ocultos a primeravista, que no son de fácil acceso para elusuario, pero que una vez descubiertosgeneran un placer especial ayudados porla complicidad. Por ejemplo, en laaplicación de Google+ cuando searrastra y suelta la pantalla paraactualizar los contenidos, aparece unaserie de tiras de colores, un detalle novisible hasta que realizamos esta acción.

Animando la app.

Las animaciones son más difíciles dediseñar y, en ocasiones, de percibir quelos llamados detalles visuales, perotambién hacen una diferencia en laexperiencia de usuario, pues llenan devida la aplicación y hacen másagradable su uso, a la vez queacompañan una función principal o unaacción. Seguramente no sonfundamentales, porque lo mismo podríarepresentarse sin estar animado, pero sinduda influyen mucho en cómo se sienteel usuario al interactuar con loselementos en pantalla.

De acuerdo a su función o a la formade utilizarlas, las animaciones puedenservir para diferentes cosas:

1. Como feedback. Los gráficos enpantalla pueden animarse paramostrar el resultado de una acción.Tal sería el caso de un elementoque desaparece de la pantalladespués de ejecutarse una acción,mostrando hacia dónde va y qué hapasado con él.

Figura 8.33. Clear usa las animacionescomo indicador para saber qué pasa con

las tareas una vez que se completan.

2. Como transiciones. Lasanimaciones pueden ayudar a hacerlas transiciones entre pantallas másfluidas. Esto puede representar unabuena experiencia de navegacióncuando se va de un contenido haciaotro.

Figura 8.34. En Windows Phoneabundan las transiciones entre pantallas,

enriqueciendo la experiencia denavegación.

3. Como herramientas informativas.Especialmente cuando se usa la apppor primera vez, puede sernecesario mostrar algún elementoen la pantalla señalando cómo seusa o destacar la presencia de un

componente nuevo que no existía enversiones anteriores. En casoscomo estos, la animación puedeayudar para dirigir la atención, quees, de hecho, una de sus funcionesprincipales.

4. Puro «caramelo visual». A veces,una animación no cumple otrafunción más que «endulzar» el ojodel usuario. Puede ser un simpledetalle que no todos vean, pero quesin duda causará una buenaimpresión visual al ser notado.

Capítulo 9

Dustin Mierau: Path y el valorde los detalles.

Path[1] es una red social focalizada enmóviles que, a diferencia de otras,permite agregar un máximo de 150personas a tu grupo de amigos paracompartir «momentos», como si fuera undiario personal. Aunque no es tanconocida en algunos países, ya hasuperado la barrera de los diez millonesde usuarios.

Hemos usado Path desde susprimeras versiones y, desde entonces,nos ha encantado el tratamiento visual y

la importancia que le dan a los pequeñosdetalles en la interfaz. El reloj moviendosus agujas cuando te desplazas por ellistado de eventos en la pantallaprincipal, es un ejemplo de estosdetalles que arrancan una sonrisa y tehacen sentir bien al utilizar la app,mejorando notablemente la experienciade uso.

Entrevistamos a Dustin Mierau,cofundador y Jefe de Diseño de Path,para que nos explicara un poco mejor laimportancia y el papel de estoselementos.

¿Qué peso crees que tienen estostoques en el diseño general de la

interfaz?

Definitivamente requiere unbalance. Nos divertimosmucho añadiendo caprichosa nuestros productos, perosomos cuidadosos enasegurar que el productosea primero, útil; después,intuitivo y, finalmente,convincente. El reloj nosayudó a quitar el desordendel listado de eventos,permitiéndonos mostrar máshistorias en la pantalla almismo tiempo: útil. Menosinformación en modo texto

—como las fechas y horas—hizo que lo que está enpantalla se lea másintuitivamente. Y, con unreloj analógico, pudimosagregar la sensación demovimiento a través deltiempo, hacia atrás y haciaadelante, haciendo ellistado de eventos de Pathmás convincente.

Este tipo de ideas pueden parecerconceptos difíciles de transmitir al restodel equipo, especialmente en lasprimeras versiones de la app que estánmás enfocadas en lograr una buena

funcionalidad y donde estos elementosvisuales suelen dejarse «para másadelante».

Figura 9.1. El tratamiento visual de la interfazde Path cuida al milímetro cada elemento que

la compone.

¿Cómo crees que debería ser la

interacción entre diseñadores yprogramadores? ¿Encuentras difícilcomunicar tus ideas a losdesarrolladores?

No es difícil en absoluto. EnPath hay confianza entre losequipos. Las ideas máselaboradas necesitan algode convencimiento —y conrazón— pues usualmenterequieren mucho más tiempoy esfuerzo paraimplementarse. Nuestrosingenieros y diseñadoresestán aquí para desarrollargrandes productos y cómo

funciona un producto es elresultado de una grancolaboración ycomunicación entre ellos.Mientras más respeto hayaentre estos equipos, mejorfuncionará el producto.Normalmente, se puedepercibir la fricción de unequipo a través de suproducto.

Tener que decidir entre una interfazbien terminada o desarrollar una basesólida que garantice el correctofuncionamiento de la app a veces pareceuna decisión de «una u otra, pero no las

dos».

Ahora que Path se vuelve cada vezmás compleja, ¿es difícil manteneruna buena funcionalidad sin sacrificarla experiencia de usuario o viceversa?

Es verdad que Path tienemuchas más funciones hoyque hace dos años, perohemos considerado cadafunción que añadimos anuestros productos. Haymuchas cosas que no hemosagregado porque no hemosencontrado una buenaforma de incorporarlas:

tener un montón defunciones no significamucho si no puedesdescubrir cómo usarlas.

Nos esforzamos porencontrar la maneracorrecta de añadirfunciones al producto. Seagregan cuando actúan bienpor sí solas y combinadascon otras funciones de laapp, creando unaexperiencia convincente,útil e intuitiva.

Figura 9.2. Cada función que se añade a la apptiene su razón de ser y se evalúa condetenimiento para garantizar la mejor

experiencia posible.

Luego de las aplicaciones para

iPhone y Android, Path lanzó unaversión para iPad que, comparada conlas otras, es relativamente nueva y aúnestá en camino de definir supersonalidad.

La app de Path para iPad hareutilizado algunos patrones de diseñoque ya estaban presentes en iPhone,pero otros son nuevos. ¿Qué crees quees lo mejor de tener un montón más deespacio para jugar?

No es solo que tenemos másespacio para jugar, es uncaso de uso completamentediferente. Cuando usas Path

en tu iPhone o iPod Touch,posiblemente estás ocupado,en el trabajo, en un viaje,afuera, con amigos, etc.Cuando estás usando eliPad, estás en casa, en uncafé, en el trabajo yprobablemente sentado.Estás en un mejor lugarpara consumir más,posiblemente con tiempopara interactuar más y eltipo de contenido que estáslisto para crear es único.Con el iPad estás preparadopara compartir unacolección de fotos, escribir

pensamientos másprofundos, tomarte eltiempo para editar vídeos,simplemente, para ser máscreativo.

Apenas hemos empezando aexplotar lo que Path puedehacer en iPad. Creo que elequipo espera aprovechar elespacio que el dispositivoofrece para permitir anuestros usuarios ser muchomás creativos en la forma decompartir sus vidas.

Sin dudas, esta aplicación es unabuena referencia para diseñadores ydesarrolladores, que pueden encontraren ella un ejemplo de cómo lograr unproducto de calidad sin descuidarningún aspecto. Para muchosdiseñadores puede parecer difícil dealcanzar, sobre todo cuando recién estáncomenzando los proyectos y el caminohacia adelante no está del todo claro.

Finalmente, Dustin aconseja a todosaquellos que se están iniciando en elmundo de las apps y pueden estar algoperdidos por la infinidad deaplicaciones y sistemas operativosdiferentes:

Encuentra una utilidad,deshazte de todo lo que notenga sentido y hazla tuya.Absorbe tanto conocimientotécnico como puedas. Séhumilde. Sé curioso.Respeta a los ingenieros.Respeta a tus usuarios.

Visita la web de Path para conocer másde la aplicación y por qué no, paradescargarla y entender por qué anosotros nos encantó: www.path.com

Capítulo 10.

Probando con usuarios.

Los test de usabilidad son unaherramienta fundamental paracorregir y mejorar la aplicación. Sellevan a cabo con base en laobservación de los usuarios: cómointeractúan con ella y qué tan fácilles resulta usarla.

Qué son los test deusabilidad.

A medida que se diseña la aplicación, elequipo necesita comprobar si a losusuarios les resulta fácil de usar y sicumple la finalidad para la que fuepensada originalmente; por eso, hacefalta realizar pruebas con ellos.

Estos test de usabilidad se llevan acabo para obtener retroalimentación delos usuarios, de forma tal que, tras laobservación de su comportamiento alusar la app, sea posible corregir ymejorar aspectos de usabilidad[1]. Los

test se efectúan en laboratorios oespacios preparados para tal fin, dondeun usuario voluntario realiza tareasconcretas, previamente establecidas porun moderador que guía la prueba,mientras un grupo de observadoresrealiza anotaciones acerca de lo que ve.

Qué no son estos test

Los test de usabilidad no debenconfundirse con los llamados focusgroup, que tienen un objetivocompletamente diferente, ya que, enestos últimos, un grupo de personas

expresa sus opiniones acerca de losdiseños que se le muestran, sin tener encuenta si la app sirve o no para realizaruna tarea específica.

En qué etapa del proyectodeben hacerse

Es ideal que los test se realicen antes delanzar la app, incluso mejor si es antesde pasar a la programación del código.Probar en etapas tempranas y de formaasidua, puede ayudar a obtener ideasantes de la publicación, cuando aún seestá a tiempo de implementarlas, lo cual

tiene la ventaja de ahorrar tiempo ydinero al hacer cambios que puedantener impacto en el proyecto.

Aunque generalmente se piensa queesto se hace una sola vez, los testpueden llevarse adelante las veces quesea necesario, incluso, cuando la app yaha sido lanzada, para seguir obteniendoinformación de los usuarios que ayude amejorarla.

Test en móviles.

Cuando se realiza un test de usabilidaden un móvil, los usuarios nonecesariamente tienen que probar unaaplicación completamente terminada. Dehecho, como hemos comentadoanteriormente, lo más aconsejable esrealizar estos test en etapas tempranasdel proceso de diseño y desarrollo, porello, un prototipo puede ser suficientepara las pruebas[2].

Figura 10.1. No es necesario tener una appterminada para hacer pruebas con usuarios,

idealmente se deben hacer cuando se cuentecon un prototipo.

Las aplicaciones para móviles estánvinculadas a un contexto de usodeterminado, algo difícil de replicar amenos que se realice un test de campo.

Hay que tener en cuenta que probar laaplicación en una habitación puede noser el escenario más realista, peroclaramente es mejor que no realizarningún test en absoluto. En este caso,hay que intentar simular las condicionesde uso lo más cercano a la realidadposible, por ejemplo, hacer la pruebacon una conexión a Internet promedio —como la que tiene la mayoría de la gente— en lugar de una Wi-Fi que funcione agran velocidad[3].

El teléfono también debe acercarse ala realidad, lo ideal entonces seríarealizar la prueba en el móvil delusuario. Si no es posible, hay queconseguir el terminal que más se le

parezca y explicarle previamente sufuncionamiento para evitar que lascaracterísticas propias del teléfonoafecten el desarrollo del test,permitiendo extraer conclusionesespecíficas del uso de la app. Demanera similar, si la aplicación que seprueba es, por ejemplo, para Android, elusuario también debe ser usuariohabitual de este sistema operativo.

Figura 10.2. Es importante también grabar losgestos en las pruebas. Mr. Tappy ayuda a

conseguirlo.

Por último, en el caso de losmóviles es necesario considerar algoque para la web no se tenía en cuenta:los gestos de los dedos. Para esto sepueden instalar dispositivos defilmación en el teléfono que, además degrabar dónde y qué toca el usuario,también pueden registrar cuáles son losgestos que realiza para completar lasacciones[4].

Test guerrilla.

Los test guerrilla son una alternativa ágily económica a los test de usabilidadtradicionales que requieren, entre otrascosas, profesionales especializados,gran cantidad de usuarios y espacios detrabajo que incrementan los costes. Estetipo de test, con un formato más informaly menos usuarios, puede ser tambiéneficaz y es especialmente útil cuando lafecha límite para terminar el proyectoestá cerca[5].

Un test guerrilla consiste en reunir auna determinada cantidad de usuariospara probar la aplicación, con el

objetivo principal de ver cómo secomportan y obtener información quepermita corregir errores[6].

Cómo hacer un testguerrilla

Para llevar a cabo el test, hace faltadesignar a una persona del equipo queserá responsable de liderar la prueba.Para este rol, la paciencia y capacidadde escuchar atentamente a los usuariosson fundamentales para guiarlos duranteel proceso.

No obstante, es ideal que junto con

el responsable participen más miembrosdel equipo —al menos otra persona—como observadores. Su trabajo selimitará a tomar nota de los problemasde usabilidad que puedan aparecer, sintener una participación activa.

Figura 10.3. Los test de guerrilla se dividen entres etapas principales.

El desarrollo completo del test sedivide en tres etapas bien diferenciadas:preparación, ejecución y análisis.

Preparación

En esta etapa se sientan las bases deltest antes de la reunión con los usuarios.Aquí se establece el objetivo —comoprobar toda la app o solo algunas partes— y se definen las pautas necesariaspara sacar el máximo provecho.

También en esta etapa del proceso seelige a los participantes. Lo ideal escontar con un número de voluntarios queoscile entre cinco y ocho, pues con estacantidad de personas se puede detectarcasi la totalidad de problemas de

usabilidad más comunes. Incrementar elnúmero de participantes no garantiza quela cantidad de problemas encontrada seamayor.

Además de los usuarios de prueba,también hace falta definir el lugar dondese llevará a cabo el test.Preferiblemente, tiene que ser un sitiotranquilo, donde no haya interrupcionesni distracciones externas.

Durante la fase de preparación, hayque decidir cuál de las dos pruebasposibles se hará a los voluntarios. Laprimera alternativa consistesimplemente en mostrar a los usuarios laapp y ver si entienden para qué sirve ycómo funciona. En el segundo tipo de

prueba, se les asigna una tareaespecífica y se observa cómo laresuelven con la aplicación.

Con base en la decisión anterior,pueden definirse las preguntas que seharán para obtener información acercade sus acciones. Estas preguntas debenser neutrales y de acuerdo alconocimientos de los usuarios. Unarecomendación es romper el hielo conpreguntas fáciles de contestar, paraevitar intimidar a los participantesdesde el primer momento.

Una vez que se tenga lo anteriordefinido, se puede hacer una pequeñaprueba piloto entre los miembros delequipo para completar la preparación

del test, antes de realizar la prueba finalcon usuarios.

Ejecución

El test de usabilidad se realiza con unvoluntario a la vez. Antes de comenzarla prueba es necesario hacer unapequeña introducción, para explicarle enqué consistirá el test y cuánto tiempodurará. Además, durante estaexplicación, hay que invitar alvoluntario a participar activamentedurante el proceso, motivarlo a decir loque está pensando mientras realiza las

acciones y a expresar suspreocupaciones y problemas, auncuando crea que se trata de críticas. Esimportante que el participante sienta quesus opiniones son valiosas, de granutilidad para el proyecto y que deninguna forma afectarán los sentimientosdel equipo.

Durante el desarrollo del test, elmoderador tiene que estar más atento alcomportamiento del usuario que a lo quedice. Esto debe ser así, porque esnormal que a veces los participantesmientan sin intención o intentencomplacer al responsable para quedarbien.

Figura 10.4. Durante la ejecución del test, elmoderador y los observadores toman notas

sobre el comportamiento de los voluntarios.

Cuando la prueba consiste enrealizar una serie de tareas con laaplicación, el moderador debe proponeral usuario llevarlas a cabo sin

asistencia. Es importante no sesgar niinfluir en su comportamiento. Solo ensituaciones que lo requieran, es posibleuna pequeña orientación para ayudarlo aseguir; en ese caso, se le puedepreguntar qué piensa o cuál es elresultado esperado de alguna acción queacaba o está a punto de ejecutar.

El moderador puede no ser la únicapersona que haga preguntas durante eltest: es posible que el participante tengadudas y es necesario hacerle notar quese pueden responder sus inquietudes unavez acabada la prueba.

Al concluir esta etapa, esrecomendable dar a cada participanteuna pequeña recompensa por haber

formado parte de la prueba. Si bienpuede mencionarse con antelación, sesugiere dar esta retribución al final parano condicionar las respuestas de losusuarios.

Análisis

Una vez que las pruebas han finalizado,sin dejar pasar demasiado tiempo, esimportante que el moderador yobservadores se reúnan para comentarlos resultados del test y revisar las notasobtenidas durante las sesiones conusuarios.

En esta etapa se seleccionan losproblemas que serán resueltos einmediatamente se comienzan a plantearlas posibles soluciones. Cuando losproblemas se hayan corregido, puederealizarse otra prueba para verificar quelas soluciones propuestas seanrealmente efectivas o determinar si hanaparecido nuevas situacionesconflictivas.

Otras formas deobtener información.

Los test tipo guerrilla no son la únicamanera de obtener información de losusuarios. Hay caminos mucho másrápidos e incluso, algunos no requierenmás que unos pocos segundos.

Dogfooding: Comiendo tupropia comida

Una leyenda urbana cuenta que, a raíz de

un comercial de televisión de comidapara perros, un ejecutivo de Microsoftenvió un correo a sus empleadosdiciendo que debían probar su propiacomida, o mejor dicho, usar sus propiosproductos[7].

Desde entonces, el dogfooding se haconvertido en una forma fácil y rápidade probar el software de producciónpropia, ya que es tan simple como usarla aplicación en la que se ha estadotrabajando para compenetrarse con ella.

Con el tiempo, puede transformarseen una práctica habitual para detectarerrores técnicos y conceptuales quepueden resolverse inmediatamente, altener un conocimiento casi perfecto

sobre ellos. Este tipo de problemassuele ser difícil de detectar cuando seestá diseñando o programando elcódigo, pero sí es posible que algunosdetalles salten a la vista cuando se estáabstraído y se prueba la aplicación en unentorno más relajado.

Aunque es una práctica tan simpleque puede llevarse a cabo en el lugar detrabajo y con los compañeros de equipo,usar la app que se está diseñando es unaherramienta que no reemplaza el test conusuarios, pero sí sirve para probarla ydemostrar confianza en lo que unomismo hace y produce.

Test de los cinco segundos

La primera impresión sobre un diseñoaporta mucha información valiosa,principalmente sobre jerarquías decontenidos. El test de los cinco segundosconsiste en explicar al usuario unasituación concreta e inmediatamentedespués, enseñar el diseño de laaplicación por solo cinco segundos. Acontinuación, se pide al participante quediga rápidamente todo lo que recuerdade lo que ha visto.

Las reacciones del usuario luego de

este rápido vistazo ayudan a establecerqué cosas le resultan más llamativaspara determinar si coinciden con lo queel equipo había pensado inicialmente.

Existen herramientas en Internet parallevar a cabo esta prueba como la webFiveSecondTest[8].

Capítulo 11.

Preparando los archivos.

Una vez definido el diseño de lainterfaz, la siguiente etapa —quizásalgo más tediosa— consiste enseparar y preparar los archivos paraque queden listos para eldesarrollador. Hacer esto de laforma correcta favorecerá unaimplementación fiel del diseño.

Entender lasdiferencias

tecnológicas.

En el mercado hay infinidad de móvilescon características de hardware quevarían dependiendo del fabricante. Deesas posibles variaciones, las que másafectan el trabajo del diseñador sonaquellas relacionadas con la calidad dela pantalla, ya que influirán en la formade plantear el diseño de la interfaz ymás tarde, en las imágenes que seprepararán para el desarrollador.

Tamaño de pantalla

Un factor determinante en las pantallasde los dispositivos móviles es sutamaño: la distancia, medida enpulgadas, de un extremo a otro en formadiagonal.

Figura 11.1. En Android existe una inmensafragmentación debido a los numerosos tamañosde pantalla que proporciona cada fabricante en

sus teléfonos.

En este sentido, Android se trata deun sistema operativo muy fragmentadodebido a la gran cantidad de modelosque ofrecen los fabricantes, conpantallas que varían de un teléfono a

otro sin mayor coherencia; esta es unade las consecuencias de ser un sistemaoperativo abierto y disponible enmuchos terminales. Ahora bien, paraponer un poco de orden en este caos,Android ha decidido agrupar losdistintos tamaños de pantalla en cuatrocategorías principales: pequeña, normal,grande y extra grande.

En el mundo iOS las cosas están máso menos en orden: iPads, iPads mini yiPhones, tienen especificaciones depantalla sin sobresaltos, ya que todos seencuentran bajo el control de Apple,único fabricante de los terminales quellevan este sistema operativo.

Figura 11.2. Windows Phone trabaja con trestamaños de pantalla principales.

Hasta la fecha no existen muchosfabricantes que provean Windows Phoney los tamaños de pantalla se limitan atres tipos, cambiando ligeramente larelación de aspecto entre ellos: WVGA

(15:9), WXGA (15:9) y 720p (16:9).

Densidad de pantalla

Además del tamaño, otro factor a teneren cuenta es la densidad de la pantalla.Esta se refiere a la cantidad de píxelesque entran en un determinado espaciofísico y se mide en puntos por pulgada—DPI por sus siglas en inglés—, dondeun punto equivale a un píxel. Paraentender un poco mejor, la densidad depantalla puede compararse con ladensidad de población de un país —aquella que relaciona la cantidad de

habitantes por kilómetro cuadrado—; enel caso de las apps, los habitantes seríanlos píxeles y la superficie, la pantalla.Una mayor densidad de pantalla indicamayor cantidad de píxeles disponibles y,por lo tanto, mejor calidad de definiciónde imágenes y otros elementos quecomponen la interfaz.

La densidad influye en el trabajo deldiseñador porque determina lascaracterísticas del documento con el quese empezará a diseñar y la cantidad deimágenes que se deberán producir alterminar el diseño: a mayor cantidad dedensidades soportadas por un sistemaoperativo, mayor será el número deimágenes que harán falta.

Figura 11.3. Es necesario diseñar una imagenpara cada densidad en la que funcionará la

aplicación. En este caso, un ícono de buscar sediseña para todas las densidades de Android.

En Android hay cantidad dedensidades que cubren los móviles ytabletas, ofreciendo un amplio abanicode calidades de visualización. Seencuentran agrupadas en baja, media,alta o extra alta[1].

iOS solo cuenta con dos densidades:retina y no retina. La primera es más

actual y ha comenzado a utilizarse paracasi todos los dispositivos recientes, aexcepción de iPad mini. Suscaracterísticas visuales duplican lacantidad de píxeles —o puntos— porpulgada que se encuentran en losdispositivos que no cuentan con estatecnología.

Por último, Windows Phone separalas densidades en media, alta y HD,dependiendo del terminal.

Preparando eldocumento para

comenzar a diseñar.

Cuando se diseña una interfaz,claramente el primer paso es enfrentarsea un documento en blanco y aquí asaltala primera duda. ¿Qué tamaño deberíatener el espacio de trabajo?

Android recomienda empezar adiseñar con un documento preparadopara una base estándar —que surge decombinar un tamaño de pantalla normalcon una densidad media— y después, ala hora de separar las imágenes para el

desarrollador, escalarlas paradensidades mayores o menores.

Por el contrario, en iOS lo másconveniente es diseñar en retina, ladensidad mayor, y en Windows Phone,hacerlo a partir de la menor de lasdensidades disponibles, WVGA, y deallí escalar a las dos restantes.

Figura 11.4. Existen plantillas concomponentes de la interfaz que se puedenaprovechar para no tener que diseñar todo

desde cero.

Por suerte, no siempre hay quediseñar desde cero. Existen en Internet

plantillas de diseño tanto paraAndroid[2], como para iOS[3] y WindowsPhone[4], que contienen elementos deinterfaz que pueden ser aprovechadospara comenzar con una base decomponentes visuales como botones,barras y fondos. La mayoría de estosgráficos están en formato vectorial, loque facilita llevarlos a diferentestamaños.

Diseñar y probar en elmóvil

Una interfaz puede verse muy bien en lapantalla del ordenador, pero esto no esun escenario real pues no es allí dondefinalmente se verá el diseño. Esconveniente, a medida que se vatrabajando, probar constantemente en unteléfono para verificar la visualización yno esperar a tener implementada laaplicación, después del código, parallevarse sorpresas.

Acostumbrarse a hacerlo eincorporarlo de forma habitual en elproceso de diseño permitirá, entre otrascosas, asegurarse de que el tamaño delos elementos y la tipografía soncorrectos y que los contrastes sonsuficientes.

Figura 11.5. LiveView permite comprobarcómo se ve en el teléfono el diseño de la

interfaz mientras se trabaja.

Existen diferentes herramientas quepermiten probar el diseño directamentedesde el ordenador conectado al móvil.Para Android una alternativa es usarAndroid Design Preview, mientras queen iOS su equivalente es Live View. En

Windows Phone también hay unsimulador de escritorio, proporcionadopor Microsoft, útil en caso de nodisponer de un terminal de pruebas[5].

Separar las imágenes.

Una vez que el diseño está listo esnecesario separar las imágenes incluidasen la interfaz, guardando cada elementoen un archivo separado, para que eldesarrollador pueda utilizarlas ycomenzar a darle vida a la aplicación.

Una imagen para cadadensidad

Cuando se separan las imágenes hay queconsiderar las diferentes densidades

disponibles y preparar una versión paracada una de ellas.

Si se cubren todas las densidades, enAndroid deberían obtenerse cuatroimágenes distintas por cada elementográfico. Si se ha diseñado en una baseestándar, como comentamos antes, haráfalta hacer un pequeño cálculo,multiplicando anchos y altos de lasimágenes, para que se vean bien en otrasdensidades.

Para diseñar y no perderse entre lasposibilidades, Android trabaja con«píxeles independientes de densidad»,mejor conocidos como DP. Cada DPequivale a 1px en una pantalla dedensidad media y puede trasladarse a

otras densidades calculando su valorpara cada caso. Por ejemplo, si tenemosun ícono de 20DP de ancho y alto, estetendrá en una densidad media, 20px; enuna densidad baja, 15px (20DPmultiplicados por 0.75); en una densidadalta, 30px (20DP multiplicados por 1.5)y finalmente, en una densidad extra alta,40px (20DP multiplicados por 2).

Afortunadamente, no hace faltaperder la cabeza con una calculadora niser científico nuclear ya que existenherramientas en Internet para hacer estetrabajo[6].

La cuenta en iOS es mucho másfácil: simplemente hay que llevar lasimágenes diseñadas en retina a la mitad

de su tamaño. Como secreto del oficio,es importante considerar que lasmedidas de ancho y alto de los gráficosdiseñados en retina sean números pares,para que después puedan ser fácilmentedivididas por dos.

En Windows Phone las imágenes setrabajan como vectores, con el formato.svg y de esta forma, se pueden escalarpor código al tamaño necesario. Estotambién garantiza el aprovechamiento delas mismas en caso de querer hacer unaapp para Windows 8, asegurando laconsistencia visual entre las diferentesaplicaciones.

Al escalar las imágenes es necesariorevisar que estas mantengan su calidad y

que no se deformen o se vean borrosas.Para conseguirlo, a veces hace faltaajustar las imperfecciones en el nuevotamaño, hasta lograr una imagen nítida ybien definida, una técnica tambiénconocida como pixel perfect.

Botones

Para los botones no es convenientetrabajar con imágenes que contengan laforma completa del botón en su tamañofinal; más bien, tienen que estarpreparadas para poderse estirar y cubrirdiferentes anchos y altos sin deformarse.

De esta forma, puede usarse la mismaimagen para botones de diferentestamaños a través de toda la aplicación,evitando tener varias imágenes que hayaque volver a diseñar y exportar antecualquier cambio. ¡Vaya fastidio!

Figura 11.6. Draw 9-Patch permite dividir laimagen del botón en zonas y determinar como

escalará cuando se estire.

Para facilitar este trabajo y decidirel control sobre las áreas de la imagenque se quieran estirar, en Android existeuna herramienta llamada Draw 9-patch[7] que sirve para estos menesteres.El resultado final es una imagen que,luego de ser implementada, detectarácuáles zonas puede estirar y cuáles debeconservar intactas.

En iOS la idea es parecida, solo queno hace falta una herramienta externa ypuede contemplarse desde que se diseñala imagen. Por ejemplo, en un botón con

esquinas redondeadas, puede definirseun área de seguridad que no se estire yusarse el centro del botón para cubrir elalto y ancho necesarios. Estos valoresdeben acordarse con el desarrolladorporque deben ser ingresados por códigoen el momento de programar laaplicación[8].

Figura 11.7. En iOS las imágenes de botonesse pueden diseñar previendo la forma en quecrecerá el botón para no tener que generar

imágenes para cada tamaño diferente.

Es necesario recordar que losbotones no tienen solamente un estado.Por lo general se diseña el estado«normal», pero también pueden estarpresionados o deshabilitados —aquí noexiste el estado «hover» que sí tienenlos botones web— y para cada una deestas situaciones hace falta una imagencon variaciones visuales, que permitaapreciar la diferencia.

Fondos

Los fondos no necesariamente tienen queser imágenes que tengan el mismo

tamaño que la pantalla para la que sediseña. Por ejemplo, un fondo con unatextura o con patrones, puede sersolamente la imagen de un módulo deltamaño necesario que luego es repetidopor código las veces que haga falta.

En el caso de los gradientes, sepuede repetir varias veces una imagenque tenga el alto o el ancho necesario.Así, si hay un gradiente vertical, puedeexportarse una imagen que tenga el altode la pantalla por 1px de ancho yrepetirla horizontalmente hasta quecubra la totalidad del espaciodisponible.

En Windows Phone se presenta unasituación particular: los diseños que se

basan en Panorama tienen un formatosobre todo horizontal, abarcando variaspantallas[9].

Iconos de pestañas y barras

Antes de crear iconos nuevos esrecomendable revisar primero aquellosque ya vienen establecidos en cadasistema operativo.

En el caso de iOS, la fuente AppleSymbols incluye la mayoría de iconosque se usan habitualmente en lasaplicaciones para iPhone o iPad y enAndroid, se pueden consultar sus

Drawables[10]. Windows Phone tambiéntiene una serie de iconosprediseñados[11].

Cuando sea necesario crear iconospor cuenta propia, es importante seguirla línea visual del sistema operativo conel objetivo de mantener una consistenciatal, que no dé oportunidad al usuario dediferenciar entre aquellos iconos quehan sido diseñados especialmente parala app y los que no.

Figura 11.8. Dependiendo del tema de la app,

en Android los iconos tienen que diseñarseclaros u oscuros para lograr el contraste

suficiente con el fondo.

En Android, las imágenes paraiconos de menú, pestañas y barra deacciones, tienen que diseñarse con elcontraste necesario de acuerdo al tema—oscuro o claro— que se haya elegidoal desarrollar la aplicación. En estecaso, se trata de imágenes .png confondo transparente.

Los iconos para diálogos debentener el tratamiento gráfico de colores ysombras que recomienda Android en suguía[12] y los de pestañas deben incluirlos estados correspondientes a «normal»

y «seleccionado». Para mayorcomodidad, existe una plantilla ofrecidapor Android que sirve como guía yayuda a imitar el estilo visualcorrespondiente a cada caso.

Figura 11.9. iOS añade efectos predefinidos ala imagen original —blanca y con fondo

transparente— del ícono dependiendo de siestá seleccionado o no.

En iOS se aplican efectos para losiconos que se diseñan para la barra deherramientas, de navegación o de

pestañas. Todas estas imágenes se usancomo máscaras, por lo cual tienen queser blancas y con fondo transparente.También es importante no incluiraquellos tratamientos gráficos quedespués se superpongan con losaplicados por iOS, como sombras orelieves.

Los efectos visualespredeterminados de los sistemasoperativos pueden sobrescribirse si nose está conforme con ellos, siempre ycuando se provean las imágenesnecesarias para reemplazarlos.

Figura 11.10. En Windows Phone los iconostiene formas simples y planas.

En el caso de Windows Phone, lasnuevas imágenes creadas para iconostienen que seguir la estética que proponeel sistema operativo: minimalistas,formas planas, sin gradientes ni relieves.Es recomendable que estas sean blancas,ya que después tendrán color según eltema elegido por el usuario. En

consecuencia, el archivo resultante seráun .svg fácil de escalar.

Nombres de archivos.

Cuando se trabaja con muchas imágenesdiferentes, sobre todo para distintasresoluciones, es importante mantener laorganización y consistencia en la formade nombrar los archivos exportados.

Trabajar de manera ordenadarepresenta una ventaja a la hora debuscar imágenes dentro de un proyecto.Solo con el nombre debería ser posibleidentificar la función que cumple o elcontexto donde se encuentra determinadaimagen.

En Android se recomienda usarcarpetas diferentes para cada una de las

densidades. Allí se almacenarán lasimágenes manteniendo el mismo nombrepara cada una de los casos.

Como ayuda adicional a lascarpetas, las imágenes pueden sernombradas con prefijos. Por ejemplo,los iconos pueden empezar con «ic_».Incluso, pueden sumarse combinacionesde prefijos para dar más claridad acercadel tipo de imagen. Un gráfico que sellame «ic_launcher_calendar.png» nosdará un indicio bastante preciso de quées lo que hace y dónde se ubica.

Las imágenes que se exportan paraiOS también tienen una forma especialde nombrarse dependiendo de si estándestinadas para terminales con pantalla

retina o no retina. En el primer caso hayque incluir «@2x» después del nombre.Por ejemplo, tendríamos la imagen«calendar@2x.png» para retina y«calendar.png» para no retina. Si setratara de iPad, puede añadirse al finalel sufijo «~ipad» para marcar diferenciacon las imágenes para iPhone.

En Windows Phone, si se creanimágenes .svg escalables, no esnecesario tener diferentes versiones. Sinembargo, al trabajar con imágenes .png,debería añadirse al final del nombre delarchivo un sufijo que lo vincule con ladensidad del dispositivo, como«_VGA», «_WXVGA» o «_720p»,permitiendo indicar fácilmente qué

versión se utilizará para cada caso.

Comunicación con eldesarrollador.

Para asegurar una correctaimplementación, diseñador ydesarrollador deben mantener unacomunicación constante y fluida.

Es posible que surjan dudas acercadel tamaño de gráficos o de fuentes,márgenes o uso de la retícula, imágenesque faltan o simplemente, cosas que eldiseñador haya pasado por alto o nohaya considerado oportunamente. Paradespejar estas inquietudes, sobre todocuando se trabaja de forma remota, es

conveniente que el diseñador prepareuna serie de documentos visuales queayuden al desarrollador a interpretar losdiseños.

Allí se pueden mostrar determinadaspantallas de la app —preferiblementelas más complejas o aquellas que máscambian entre sí— y, a través de líneasy demarcaciones, indicar los diferentestamaños de tipografía y espacios entrelos elementos visuales.

Si a pesar de esto, aun quedanpreguntas sin resolver, lo ideal esestudiar cada situación de formaconjunta, decidiendo entre los dos lamejor solución.

Capítulo 12.

Loren Brichter: Rompiendotodos los esquemas.

En el mundo del diseño y desarrollo deapps hay pocos referentes. No sonmuchas las personas que han «pateado el

tablero» para salirse de los esquemas yproponer conceptos realmentenovedosos. Loren Brichter es una deellas: no por nada fue llamado «el SumoSacerdote del diseño de apps» por elWall Street Journal[1].

Aunque ni siquiera alcanza los 30años, Loren ya tiene una carrera dignade envidiar. Hace unos años pasó porApple, donde ayudó a diseñar elsoftware que llevó el primer iPhone, yél mismo nos cuenta su aporte a eseproyecto:

Mi trabajo fue muy abajo enla pila de software,

escribiendo el códigográfico de bajo nivel, locual permitió quemecanismos de interfaz demás alto nivel pudieranfuncionar. Fue un honorformar parte de eseproyecto.

Apple no fue la única empresagrande donde trabajó; después de supaso por la compañía de la manzana,formó parte de la plantilla de Twitter, adonde llegó impulsado por el éxito quehabía cosechado con Tweetie, unproyecto personal en el que incorporabaalgunos elementos de diseño que

llamaron la atención de la red demicroblogging.

Actualmente, Brichter trabaja desdeFiladelfia en Atebits[2], su propiaempresa, alejado del epicentro de latecnología en nuestros días, SiliconValley.

Has trabajado tanto en grandesempresas como por tu cuenta, enAtebis. ¿Qué has aprendido de estaexperiencia?

Aunque he trabajado parados compañías increíbles,Apple y Twitter, creo quedisfruto más trabajando

para mí mismo. Estorequiere un tipo dedisciplina diferente y porsupuesto, echo de menosalgunos recursos que lasgrandes empresas puedenproveer; sin embargo, ¡esemocionante trabajar enalgo sobre lo cual tienescompleta libertad!

La última aplicación de Loren sellama Letterpress, un juego en línea quepermite formar palabras usando letrasdefinidas al azar, desafiando aoponentes en cualquier lugar del mundo.La aplicación ha tenido tanto éxito, que

ha sido usada por Apple como ejemploen las promociones del iPad mini.

Figura 12.1. El estilo visual de Letterpress secaracteriza por su limpieza, resaltando los

elementos más importantes.

Esto se debe tanto a la experienciade uso, como a la sana adicción que ha

generado en los usuarios, el famosoengagement que muchas aplicacionesbuscan conseguir. Su interfaz es bastantelimpia, basada en el blanco y poniendo alos bloques de letra, auténticosprotagonistas del juego, como centro deatención.

Ciertamente, no se trata de un diseñode interfaz demasiado apegado a lapersonalidad de iOS, por lo cual lepreguntamos si piensa que este estilomás independiente y abstraído de laestética de la plataforma puede ser unatendencia que otras aplicaciones imitenen el futuro:

El mercado es relativamente

joven y estamos empezandoa ver cómo surgen algunasconvenciones, pero lainnovación aún se estáextendiendo por todoslados. Por mi parte, estoytratando de identificarbuenos patrones paraextrapolarlos; descubriendonuevas e interesantesmaneras de interactuar conlos dispositivos.

Estamos seguros de que tienes unmontón de ideas de apps en la cabeza.¿Cómo te das cuenta cuando una deellas es lo suficientemente madura

como para convertirse en unproyecto?

Sería como el arte versusporno, simplemente te dascuenta cuando lo ves. Haygrados de maduración. Hetenido algunas ideas con elpotencial para serproductos viables, peroLetterpress parecía tener unbuen conjunto de atributosque harían divertidolanzarla al mundo en esemomento.

Dos consideracionesimportantes son: ¿otraspersonas la encontrarándivertida y útil?, ¿puede serfinalizada? Es muy difícilmarcar un límite en laversión 1.0. Es importanteque la idea pueda llegarhasta ese punto.

Figura 12.2. Tweetie incorporaba variosmecanismos de interacción inventados porBrichter que luego otras apps comenzaron a

imitar.

Loren Brichter es también el creadorde «soltar para actualizar», una funciónque se ha masificado y ha llegado autilizarse en muchas aplicaciones,incluidas Facebook, Path y Pinterest,entre otras. Lo mismo sucedió con«deslizar sobre una fila» para mostrarmás opciones o los paneles laterales,que también inventó.

Como esos, hay muchos otrosmecanismos de interacción que, aunqueno han salido de la cabeza de Loren,están siendo usados constantemente; un

ejemplo son las listas de navegación alas que se llega a través del famoso«botón hamburguesa».

Desde una perspectiva dealto nivel, es divertido vercómo ideas como esa sediseminan y evolucionan enel ecosistema.Honestamente, soy un fandel panel de navegaciónapilada: convierte unconcepto abstracto en algofísico y real. Estoy segurode que veremos muchos másexperimentos siguiendo estamisma línea, diseños que

aprovechen nuestraexpectativa de realidadfísica para hacer interfacesmás intuitivas.

A todas luces, hablamos de unpersonaje muy inquieto, queconstantemente está pensando en nuevasideas y eligiendo unas pocas que seconvertirán, según refleja su historial, enproductos exitosos.

Si quieres saber más sobre Letterpress,puedes encontrar información en:www.atebits.com

Capítulo 13.

Ejemplos a seguir.

Como vale la pena aprender deaquellos que ya recorrieron elcamino, hemos seleccionado tresapps de cada sistema operativo quepara nosotros, por diferentesmotivos, han hecho las cosas bien.

Android.

500px[1]

La app de lacomunidad defotógrafos hizobien los deberes.Además deofrecer múltiplesmedios de registroy de manera clara,

ha sabidotrasladar lacualidad de«exploración» deesta plataforma.Visualmente esuna aplicaciónmuy cuidada,donde el uso decolores oscurospara los controlesayuda a realzarlas fotografías.

Figura 13.1 Pantallas de Log In y decategorías.

Figura 13.2 Pantallas de detalle de una foto yde comentarios.

Google Drive[2]

Este servicio dealmacenamiento ycolaboración dedocumentos «enla nube» secentra en susfuncionesprincipales, perotambién ofrececaracterísticas deedición dedocumentos,ideales parausuarios quecambianfrecuentemente

entre elordenador deescritorio y elmóvil, que noquieren perderesta capacidad.

Figura 13.3 Editando un documento y lista dedocumentos.

Figura 13.4 Menú tipo cajón y vista previa dearchivos.

The Guardian[3]

El diario ingléshace usoextensivo deelementos nativosy, a la vez, aplicaal pie de la letrasu identidadcorporativa,utilizando lascabeceras como elelemento másfuerte paracomunicarla. Porotro lado,establece clarasjerarquías en

textos de lectura yno se olvida deañadircaracterísticas deaccesibilidadcomo el aumentodel tamaño de lasfuentes.

Figura 13.5 Pantalla principal de noticias ydetalle de una foto.

Figura 13.6 Configuración de tamaño de textoy detalle de una noticia.

iOS.

National Parks[4]

Tanto eniPhone comoen iPad, laatención a losdetalles deesta app deNationalGeographic

esasombrosa. Alo largo delas pantallas,puedeapreciarse unuso detexturasjustificado,contransicionesque aportanvalor alconcepto. Porotro lado, lasjerarquías enla

composiciónson muyclaras, lo quefavorece lainterpretaciónde loscontenidos.

Figura 13.7 Parques vistos como fotografías ycomo ubicaciones en un mapa.

Figura 13.8 Opciones de filtrado y detalle deun parque.

Google Maps[5]

Laaplicaciónque todoslos usuariosde iPhoneesperarondurantemeses nodefraudó.Desde ellanzamiento

de esta app,Google hademostradosu intencióndeestablecersus propiasnormas allídonde va.Nos gustóporque haceun usoconscientedel espacio,en cadapantalladispone los

elementosen relacióndirecta alasnecesidadestemporales,ocultando ydestacandolo justo ynecesario.Simple yrobusta a lavez.

Figura 13.9 Pantalla principal de búsqueda yresultado con recorrido.

Figura 13.10 Detalle de resultado conopciones y pantalla de navegación.

Instapaper[6]

Una de laspionerasalrededorde la ideade «leerdespués»,la app delectura detextos deMarcoArment está

más quepulida y enella todogira entorno a sutareaprincipal:facilitar lalectura.Flexible entodomomento,es capaz deocultarcontrolesensituaciones

que no losrequieren ocambiar a«modonocturno»paraadaptarse alascondicionesde luz.

Figura 13.11 Menú principal y pantalla conopciones de lectura.

Figura 13.12 Ítems marcados como favoritosy pantalla en modo de lectura nocturna.

Windows Phone.

Spotify[7]

El serviciode músicapor Internetha sabidoadaptarse ala propuestadeWindows

Phone.Aplica suidentidadsobrepatronescomoPanorama ylos controlcomopocas. Unexcelenteequilibroentrefunciones,identidad yconsistencia

con elsistemaoperativo.

Figura 13.13 Pantalla principal con Panoramay opciones de reproducción de canción.

Figura 13.14 Canciones ordenadas como listay miniaturas de álbumes.

Twitter[8]

De unvistazopodemossaber quese trata dela app deTwitter yeso no espoco. Hansabidodominarlos puntosdecontactoentreelementos

nativos eidentidadvisual, sinperder devista lasguíaspropuestasporMicrosoft.Un claroejemplode unaaplicacióncentradaen elcontenido.

Figura 13.15 Pantalla principal y detalle de untweet.

Figura 13.16 Pantallas de perfil de un usuarioy de composición.

Tumblr[9]

La plataformademicroblogginghacomprendidoel entornomóvil y harespondidocon una appsimple yeficaz.Manteniendofuncionesconocidas porsus usuariosweb, la

aplicaciónhace foco enla exploraciónde materialvisual y lapublicación decontenidosrápidamente.

Figura 13.17 Pantalla de Escritorio y deNotas.

Figura 13.18 Exploración de contenidos yselección de tipo de entrada nueva.

Capítulo 14.

El mundo tableta.

Diseñar para tabletas implica mayorresponsabilidad para aprovechar elespacio y las circunstanciasdisponibles. Pasar una aplicacióndel móvil a su hermana mayor nodebe ser una traslación literal, sinomedida y con sentido.

Los usuarios alternan constantementeentre un dispositivo y otro. La mayoríade las veces que una persona estáusando una tableta, al mismo tiempo,está prestando atención al móvil o altelevisor.

Por esta razón, si ya se tiene una apppara móvil, el siguiente paso natural esdiseñar una versión para tablet; incluso,podría decirse que en algunos casos,esto es una prolongación obligada de laexperiencia.

Aunque a primera vista parecensimilares, en realidad se trata de dosmedios que se diferencian, no solo entamaño, sino también en los modos deuso —cómo y dónde son utilizados— y

en la relación que generan con elusuario.

En este sentido, tanto el diseñovisual como de interacción se venparticularmente afectados por lascaracterísticas de la tableta, por lo cual,comprenderlas permite sacar mejorprovecho de ellas.

Llegando a lapantalla grande.

Tener tanto espacio disponible derepente, puede desorientar al principio.Como también pasa en el caso delmóvil, el éxito del diseño de una apppara tableta radica, en gran parte, en uncorrecto aprovechamiento del espacio.

La pantalla de una tableta no se debeinterpretar solo como un área másgrande en la cual se puede volcardirectamente la interfaz de la aplicacióndiseñada para móvil. Entre los aspectosa considerar, se encuentran:

Mayor protagonismo visual

Una tableta permite apreciar mejor losdetalles gráficos y el tratamiento de unainterfaz. La pantalla del móvil limita elespacio de forma tal que loscomponentes visuales están bastantecondicionados por el área que los rodea.En cambio, en la tableta, algunos iconose ilustraciones tienen mayor espaciopara mostrarse y lucirse.

Figura 14.1. El espacio disponible en unatableta permite que los gráficos se luzcan más

en pantalla.

Lo anterior, afecta directamente lacalidad de las imágenes y el nivel dedetalle con el que se trabaja. Detallesque antes no tenían sentido en el móvil

porque no se apreciarían, en la tabletaencuentran un lugar donde serprotagonistas, dando mayor valor aldiseño de la interfaz.

Tipografía

Comparadas con el móvil, las tabletasse sostienen de una forma en que lapantalla se encuentra a mayor distanciadel ojo del usuario. Esto obliga aadaptar especialmente las fuentesutilizadas y sus características visuales,para amoldarlas a la nueva situación deuso y mantener así la legibilidad de los

textos. Entonces, mientras más alejadaesté la pantalla del usuario, más grandedebería ser la fuente y mayor elinterlineado para asegurar una correctalegibilidad.

Aprovechamiento delespacio

La forma en que se gestiona un espaciomayor no incide solamente en el aspectovisual, sino también en la navegación y,por consiguiente, en la interacción entreel usuario y la interfaz.

Mientras en el móvil el espacio

reducido obliga a realizar una mayorcantidad de pasos para llegar a lainformación, en una tableta estasecuencia se puede reducir. Ahora secuenta con un espacio más amplio quepermite, por ejemplo, incluir elequivalente a la información contenidaen dos pantallas de móvil separadas, enuna sola vista integrada.

Para sacar partido de una situacióncomo esta y para poner un ejemplo deuso, puede usarse un panel lateralizquierdo que incluya un listado deítems, cuyo contenido se mostrará en lazona derecha de la pantalla al mismotiempo. De esta forma, elemento ycontenido se relacionan en un solo

vistazo sin cambiar de contexto. En unaaplicación de correo, es posible mostrarel listado de los elementos de unabandeja de entrada y el contenido delmensaje sin necesidad de cambiar depantalla, como ocurriría en el caso de unteléfono.

Figura 14.2. Las tabletas hacen un usodiferente del espacio, lo que permite mostrar

dos pantallas en una sola. En este caso,

Dropbox muestra la lista de archivos junto conel contenido, algo que no se puede hacer en

iPhone sin tener que cambiar de pantalla.

Un mayor espacio también beneficiala navegación, ya que no se necesitantantos niveles para llegar a un contenidoespecífico. Pantallas que antes seencontraban separadas en distintaprofundidad, ahora pueden compartir elmismo nivel.

Los sistemas operativos proponendiferentes formas de aprovechar elespacio y gestionar la división entrepaneles. Independientemente de la formaque se elija, es importante relacionar elítem seleccionado con el visualizado ydisminuir la interrupción provocada al

usar una navegación entre pantallasdiferentes. Esto se consigue llevando elcontenido principal hacia una zonacentral, apoyándose en el uso dediálogos o elementos flotantes paraacciones secundarias.

Estas vistas divididas debenconsiderarse tanto en formato horizontalcomo vertical y debe preverse cómo seadaptarán estos paneles a los cambiosde orientación. Es importante consideraresto último, teniendo en cuenta que enuna tableta el cambio de orientación esmucho más frecuente que en un móvil.En iPad, por ejemplo, elementos que seencuentran en la columna izquierda enformato horizontal, pueden ser

accesibles desde un menú desplegablecuando la tableta está en posiciónvertical.

Los gestos

A veces en un móvil resulta incómodorealizar aquellos gestos que incluyenmás de dos dedos a la vez, por el pocoespacio disponible y la distancia que lossepara al realizar los movimientos. Enuna tableta los gestos pueden realizarsede forma más fácil.

Por este motivo, aquí hay máslibertad a la hora de manipular

directamente los elementos gráficos dela interfaz —sin necesidad de basarsetanto en botones y controles— parallevar adelante algunas acciones. Porejemplo, rotar una fotografía que antespodía ser algo dificultoso, ahora puedeapoyarse en el uso de dos o tres dedos yconseguirse más fácilmente.

Contexto de uso.

El dispositivo que utilizamos en generalestá afectado por nuestro contexto:dónde estamos, qué queremos hacer ycuánto tiempo tenemos para ello.

Una tableta suele estar másrelacionada con el ámbito hogareño. Esnormal usarla entonces cuando se estárecostado en el sofá o en la cama. Poresto, el usuario tiende a estar másrelajado y posiblemente con más tiempodisponible que cuando usa el móvil.

Figura 14.3. El contexto de uso de las tabletasestá más asociado al hogar, donde los usuariosestán más relajados y con algo más de tiempo

disponible comparado con los móviles.

Como dato estadístico, podemosmencionar que los usuarios de tabletainvierten casi el doble de tiempo en

Internet que los usuarios de teléfono,especialmente para mantenerseinformados y entretenidos[1].

Este contexto es una diferencia demayor importancia porque afecta larelación del usuario con la tableta y laforma que tiene de interactuar con ella y,en consecuencia, de usar lasaplicaciones.

La interacción

Una tableta es un objeto de tamañomayor que un móvil y por consiguiente,es más pesado y difícil de transportar.

Así, el usuario necesita un punto deapoyo que le permita soportar el peso dela tablet.

De acuerdo a esta forma desostenerla, tanto en formato horizontalcomo vertical, las zonas a las que elusuario puede llegar más cómodamenteson las esquinas ubicadas en la zonainferior de la pantalla. Aquí deberíanestar las acciones más frecuentes y fuerade esta zona de comodidad serecomienda situar los controles de lasacciones más críticas o que ocasionanmayor impacto, para hacerlas másdifíciles de acceder, disminuyendo elriesgo de ser pulsadas porequivocación.

Figura 14.4. Debido al tamaño y a la manerade sostener la tableta, las zonas inferiores de la

pantalla son más fáciles de acceder,aumentando la complejidad en las zonas

superiores.

Por otro lado, también deberíanreducirse los elementos interactivoslocalizados en el centro superior de la

pantalla. Ubicarlos en esta área requiereque la mano y parte del brazo se crucensobre la pantalla, tapando parte delcontenido. Si esto pasara, podría noverse claramente el elemento que se estápulsando y el resultado de la acción.

La funcionalidad

Que un usuario esté en casa tranquilo yque la tableta sea un dispositivo no tanpersonal como el móvil —ya que secomparte más fácilmente—, obligatambién a repensar aquellas tareas quepueden llevarse a cabo con la

aplicación.En un móvil, para un usuario que

muchas veces está en movimiento y máscentrado en ejecutar tareas rápidas,algunas funciones no tienen razón de ser.En el caso de una tableta, la situación esdistinta en cuanto al tiempo y a lacomodidad, por eso, algunascaracterísticas funcionales que se habíandejado postergadas ahora encuentran surazón de ser.

En este caso, es posible ampliar ymejorar la experiencia de uso sin perderel foco de atención de aquellas tareasque contribuyen al objetivo de laaplicación. Como comentamos antes, setrata de dar sentido y no de «incluir por

incluir».

Figura 14.5. Spotify es un ejemplo deaplicación muy bien resuelta en su versión paraiPad, aprovechando las características de este

medio a conciencia.

Un ejemplo de una app que potencie

la experiencia, podría ser aquella dondese visualicen documentos, pero paraeditarlos haya que hacer uso deformularios. Mientras en un móvil estatarea puede ser bastante difícil, en unatableta el ingreso de datos y texto puedeejecutarse más fácilmente.

Contenido de la app

Las tabletas son el blanco preferido dealgunas aplicaciones que por su tipo decontenido necesitan un contexto de usomás relajado y tranquilo, como cuandoel usuario está en casa.

Figura 14.6. Flipboard en su versión para iPadse asemeja a una revista y refuerza este

concepto con las transiciones entre pantallas.

Este es el caso de apps querequieren la lectura de textos largoscomo periódicos y revistas. Un ejemplode esto es Flipboard en su versión para

iPad[2], una aplicación que realmentesaca partido de la experiencia alasemejarse a una revista, trasladando elconcepto tanto a la cantidad deinformación, como al diseño visual y alas animaciones.

Capítulo 15.

Erik Spiekermann: El Maestrode la tipografía.

Este señor alemán es una eminencia, side tipografía se habla. En su extensacarrera ha diseñado gran cantidad de

fuentes tipográficas, entre las quepodemos destacar ITC Officina y FFMeta; esta última, llamada por algunosdiseñadores, «la Helvetica de los 90».

Meta, basada en formas másredondas que Helvetica, ha sido usadaen infinidad de diseños alrededor delmundo. Firefox no fue la excepción y laeligió como parte de su identidadcorporativa. Erik ha trabajandoconjuntamente con ellos para crearFeura, una tipografía basada en Meta,más simple y ancha para hacerla máslegible en pantalla, ideal para elrecientemente estrenado sistemaoperativo de Firefox para móviles,Firefox OS.

Spiekermann explica que losentornos digitales no suponen unacondición nueva para la tipografía, sinoque pueden compararse con escenariosparticulares que existen tiempo atrás:

Mala resolución, tipografíapequeña, montones deinformación, lectoresapurados y ambientescambiantes… estas no soncondiciones nuevas y losdiseñadores de informaciónhan estado lidiando conellas desde siempre. En loque concierne a latipografía, la pantalla es

solamente papel de malacalidad.

Figura 15.1. Meta se ha convertido en unclásico moderno, usada en todo el mundo.

Sin embargo, no es una tarea simpleelegir la tipografía para una app, auncuando se trate de buscar aquellas quemejor desempeño tienen en papel

impreso de dudosa reputación.Afortunadamente, Erik viene al rescate ynos dice lo que deberíamos tener encuenta a la hora de la eleccióntipográfica:

Considera las fuentestipográficas que fuerondiseñadas para información.Si no hay problemas deespacio —y generalmentelos hay— usa aquellas quefuncionan para guíastelefónicas o formularios.Todas mis fuentes lo hacen,por ejemplo, FF Info, FFUnit, FF Meta, ITC

Officina; también BellGothic, Bell Centennial,Lucida —aún sigue siendola mejor de Apple— más unmontón de nuevas y robustastipografías como FF Tisa,FF Yoga, FF Suhmo. Bajocontraste para las fuentesserif, formas abiertas —nocomo Helvetica, pero sícomo Frutiger— y algo decontraste para las fuentessans-serif.

Si lo dice Spiekermann, con años deexperiencia en el diseño tipográfico, esmejor escucharlo.

Actualmente, Erik forma parte deEdenspiekermann[1], una agencia decomunicación y diseño con oficinas enAmsterdam, Berlín, Stuttgart y SanFrancisco.

Capítulo 16.

Lanzando la app.

El momento estelar de unaaplicación llega cuando finalmentees publicada en la tienda y paralograrlo, hay que cumplir una seriede pasos y requisitos. Después dellanzamiento, la historia continúa,escuchando a los usuarios ymejorando la app.

Publicación de la appen las tiendas

oficiales.

Una aplicación se publica después de laetapa de pruebas, cuando ya se tieneseguridad acerca de su correctofuncionamiento, estabilidad, desempeñoy se considera libre de errores, tanto deusabilidad como de diseño.

El proceso de publicación en cadauna de las tiendas es una tarearelativamente fácil y está biendocumentada. Antes de comenzar, esimportante prepararse y disponer de

todos los recursos de diseño requeridosy hay que asegurarse de que laaplicación cumpla con las políticas depublicación de las tiendas para evitarque sea rechazada o bloqueada.

Una aplicación puede tardar variosdías en ser aprobada, sobre todo cuandoes la primera vez que se envía. Hay quetener en cuenta este tiempo,especialmente si se quiere hacercoincidir su salida al mercado conalguna fecha especial del año, comoNavidad.

También cabe recordar que lapublicación no es gratuita. Tanto enGoogle Play, como en App Store y enWindows Phone Store, hay que asumir

un costo para iniciar el proceso quevaría en cada uno de los casos.

En Google Play es necesario pagar25 dólares por única vez al momento decrear la cuenta para la publicación. Enel caso de App Store el pago es mayor,asciende a 99 dólares que, además,deberán pagarse anualmente; estasituación es idéntica a la que se presentapara desarrolladores de WindowsPhone.

Crear la cuenta para publicación yrealizar el pago correspondiente,permite acceder a una serie deherramientas de gestión y estadísticassobre la cantidad de descargas de la appy su monetización.

Imágenes y elementospromocionales

Cuando se publica una aplicación, nosolo debe subirse el archivo de la app,sino también aquellos elementos que laacompañarán en la página promocionalde la tienda y que, en la mayoría de loscasos, se trata de capturas de pantalla,textos descriptivos, iconos eimágenes[1].

La importancia de preparar bienestos recursos radica en que seránvisibles al público y servirán como

herramientas de promoción ycomunicación, lo cual puede serdeterminante para la descarga de laaplicación. Textos e imágenes debencuidar hasta el último detalle y cumplircon los requerimientos de cada una delas tiendas en cuanto a formato,dimensiones y resoluciones[2].

Figura 16.1. Elementos visuales como iconosy capturas de pantalla son esenciales paraconvencer al usuario de descargar la app

cuando la encuentra en la tienda. En la imagen,la aplicación de Vine.

En el caso particular de las capturasde pantalla, es conveniente elegir lasmás representativas y atractivas de laaplicación. Si una pantalla no dice algosignificativo de la app, larecomendación es no incluirla. Seaconseja darle importancia a la elecciónde estos elementos ya que, junto al íconode la app, son gráficos fundamentalespara convencer al usuario: muchos deellos tomarán la decisión de descargarlapor lo que vean aquí.

Cuando el contenido de las pantallasincluya nombres de personas o lugares,fotos o títulos, es aconsejablereemplazarlos por datos que simulen lomejor posible una situación real, paraque estas no luzcan como pantallascreadas durante los test de la aplicación.

Aunque pueda parecer un detallemenor, también es bueno tener en cuentaque la barra de estado superior delteléfono operativo debería estar lo máslimpia posible de iconos que distraiganla atención del contenido principal —por ejemplo correos sin leer— aunquepara ello haga falta retocar ligeramentela imagen y hacerla más presentable.

El proceso de aprobación

Subir una aplicación no garantiza queesta sea publicada, ya que debesometerse a un proceso de aprobaciónque es diferente en cada tienda.

Como excepción a la regla, elproceso en Google Play es más abierto ytolerante[3] con una ventaja evidente: lamayoría de las aplicaciones sonpublicadas, a menos que incumplanclaramente alguna de las políticas de latienda, caso en el cual pueden serretiradas y en última instancia, si la

situación lo requiere, puede sersuspendida la cuenta del desarrollador.Por supuesto, esta facilidad parapublicar significa que puedenencontrarse muchas aplicaciones dedudosa utilidad entre todas lasalternativas que ofrece la tienda.

Por el contrario, en App Store laaprobación es especialmente rigurosa,con una política pensada para garantizarcierto estándar de calidad en lapublicación de aplicaciones, pero queen algunos casos puede rozar laexageración.

La guía completa de causas derechazo está disponible al entrar a lacuenta de desarrollador. Solo por

nombrar algunas, podemos mencionaraquellas que hacen referencia alcontenido no original o similares a otrasexistentes, aplicaciones que no esténterminadas —por ejemplo si están enforma de demostración o prueba— o querepresenten una ofensa para personas,religiones o incluyan contenidoinapropiado para niños.

En el caso de Windows Phone, laaplicación también debe pasar unproceso de certificación en el cual severifica que cumpla las normas de latienda. Los aspectos más importantes atener en cuenta para que una app seaaprobada son la apariencia general —que no deje lugar a dudas sobre a qué

sistema operativo pertenece, nocontenga adornos ni elementosinnecesarios y haga buen uso de losbotones de sistema— y la calidad delcontenido[4].

Publicación odistribución fuera de

las tiendas.

La opción de distribuir las aplicacionesa través de las tiendas oficiales es, sinduda, la más recomendable, ya que estesistema está apoyado en un mecanismoque se ocupa, entre otras cosas, deproveer los recursos necesarios paragestionar los pagos por descarga ydentro de la aplicación, así comotambién la publicidad. Sin embargo, noes el único camino.

Las alternativas a GooglePlay

Android tiene varias opciones si sequiere evitar —o complementar— lapublicación en Google Play, ya que estano es la única forma. Existen otrastiendas que también ofrecen descargasde aplicaciones para este sistemaoperativo, como la tienda de apps deAmazon[5] o Samsung[6].

Alternativamente, se puede proponerla descarga directamente desde un sitioweb. Con un enlace al archivo de la

aplicación, cualquier persona puededescargar e instalar una app en suteléfono sin problemas. El únicorequisito es que el usuario debe tenerhabilitada en la configuración del móvilla opción de instalar aplicaciones deterceros[7].

Otra forma de distribuir unaaplicación en Android es a través delcorreo electrónico. Por tratarseúnicamente de un archivo, puedeenviarse fácilmente por este medio paraque las personas la instalen. Si estastienen la configuración lista para instalaraplicaciones, el botón «Instalar ahora»aparecerá en el mismo correo.

Esta opción es recomendable para

usuarios de prueba y de confianza, ycuando se quiera mantener ciertaindependencia de las tiendas, con laslimitaciones que ello implica.Claramente, el mayor inconveniente quepresenta es que deja vía libre a lapiratería y distribución no autorizada, yaque cualquier persona que cuente con elarchivo puede enviarlo a un tercero, sincontar con el consentimiento parahacerlo.

iOS y Windows Phone, solopara pruebas

En el caso de iOS y Windows Phone[8]

la distribución independiente no es tanlibre y masiva. Antes de ser incluida enApp Store o en Windows Phone Store,la aplicación puede enviarse a usuariosindividuales, pero previamente debenser autorizadas, una por una, las cuentasde las personas que vayan a usar la appen su teléfono.

Esta forma de distribuir laaplicación no tiene otro fin más queponerla a circular dentro de una empresao hacerla llegar a un grupo selecto ylimitado de usuarios, que puedaprobarla y dejar comentarios antes deque la aplicación salga públicamente almercado. Esta práctica es recomendable

especialmente para garantizar un buenfuncionamiento en diferentes terminalesy versiones de sistemas operativos.

Después dellanzamiento.

El trabajo en una aplicación no terminauna vez que esta ha sido lanzada y estápublicada en las tiendas. De hecho, ahícomienza una etapa más emocionanteporque el producto está en manos deusuarios reales. La app se ha puesto sutraje y finalmente está en la calle[9].

Esto significa que quienes la usenempezarán a compartir su experiencia eimpresiones que, junto con lasestadísticas de uso y descargas[10],servirán como referencia para mejorar

la aplicación y corregir aquellas fallasde diseño o funcionalidad que, a pesarde los esfuerzos anteriores, se pasaronpor alto.

Este tipo de mejoras conducirá aaumentar la calidad de la aplicación, loque a su vez, se traducirá en un mayornúmero de descargas y más comentariospositivos. Los usuarios son quienescorren la voz de la aplicación y es mejormantenerlos contentos. De la mismaforma, las opiniones de la prensa ymedios especializados pueden derivaren más descargas.

Comentarios de losusuarios

Una buena forma de retroalimentaciónson las opiniones de los usuarios. Y estono se refiere solamente a loscomentarios —casi siempre positivos—del círculo de amigos, sino a aquellosque provienen de personas que no tienennada que ver con nuestro entorno.

Una vez subida a la tienda, cadaaplicación recibe valoraciones yreseñas. Aunque no todas son de granayuda, es importante prestar atención a

estos comentarios para identificar entreellos los que sean de verdadera utilidad.

Nadie mejor que los usuarios que yahan descargado la aplicación para —queriendo o no— hacer pruebas conella. Reportes de fallos funcionales,opiniones sobre diseño o usabilidad,entre otras cosas, pueden encontrarseentre los comentarios de usuarios;seguirlos, es una buena herramienta paramejorar constantemente la app.

Analíticas de uso

Tal como suele hacerse en la web,

también es posible recopilar datosestadísticos sobre el uso de laaplicación, a través de herramientasanalíticas pensadas especialmente paramóviles.

Las analíticas permiten estudiar elcomportamiento de los usuarios al usarla aplicación, como patrones denavegación e interacción, entre otros. Deesta forma, puede saberse, por ejemplo,cuáles fueron las pantallas más visitadasy cómo llegaron a ellas. También esposible conocer con cuáles botones yotros elementos interactúan más losusuarios. Otra información que puedeser de utilidad y se obtiene por medio deanalíticas es el tiempo de retención, es

decir, la cantidad de tiempo que pasanlos usuarios dentro de la app.

Sin embargo, de toda la informaciónque puede obtenerse sobre el uso de laaplicación, es importante centrar lasanalíticas en aquellos indicadores clave—Key Performance Indicator o KPI—que tengan sentido para el tipo de appque se ha desarrollado. Como vimosanteriormente, existen diferentes clasesde aplicaciones y cada una de ellasrequiere métricas distintas. Por ejemplo,para un juego puede ser importanteestudiar el tiempo de retención y lacantidad de veces que el usuario vuelvea abrirlo. Pero en el caso de una redsocial, sería más interesante analizar

cuántos contenidos nuevos se publican ocuántas veces son compartidos.

Figura 16.2. Usar analíticas permite obtenerinformación sobre el comportamiento de los

usuarios y el desempeño de la app, para poderlamejorar y corregir errores.

Obtener la información correcta

conlleva a hacer un uso más eficiente delos datos. Un estudio a conciencia de lasanalíticas, se traducirá en una serie demejoras que podrán estar disponibles enfuturas versiones o actualizaciones de laapp, refinándola y mejorándola cada vezmás.

Una vez que se tiene el panoramamás o menos claro, puede empezarse ausar analíticas de forma inmediata,incluso, mucho antes de que laaplicación salga al mercado. Esto esespecialmente útil cuando existenversiones alfa o beta de la app que sedistribuyen antes de estar oficialmentedisponible en las tiendas. Igualmente,integrar las analíticas con anticipación

es una buena forma de enterarse si sehan instalado correctamente, verificandoque los primeros datos obtenidos tenganel aspecto deseado. Es altamenterecomendable que en el momento dehacerla pública, la aplicación ya tengalas analíticas preparadas para obtenerinformación desde el minuto cero.

En el mercado existen diferentesherramientas que permiten gestionaranalíticas. Algunos ejemplos son GoogleAnalytics[11], Mixpanel[12], Flurry[13] oLocalytics[14]. Con característicasdiferentes, elegir una u otra, dependeráde ciertos parámetros como lainformación que permiten obtener, sucosto o la cantidad de usuarios que

tendrá la aplicación.

Promoción.

Para conseguir el mayor número dedescargas posibles es necesariopromocionar la aplicación, para que lospotenciales usuarios se enteren de suexistencia y la conozcan. Las diferentestiendas se ocupan en parte de esta tarea;sin embargo, no se les puede dejar todoel trabajo de promoción a ellas o a losbuscadores que deben encontrar la app.Existen otras formas de hacerlo porcuenta propia: a través de campañas demarketing, anuncios en Internet o reseñasde la app en blogs especializados.

Una forma muy eficaz de

promocionar una aplicación es pormedio de un sitio web que, contrario alas webs corporativas o de otro tipo deproductos, no tiene porqué serdemasiado complejo ni contar conmuchos niveles de navegación.

Es indispensable contar con unaestructura mínima pero bien trabajada.La landing page es la página donde«aterrizarán» aquellos internautas quehayan dado con la dirección web de laaplicación. En esta página es necesarioresponder algunas preguntas inicialesque pueda tener el visitante ocasional:¿Qué hace la aplicación? ¿Es gratis?¿Para qué teléfonos está disponible? Lagráfica y el mensaje utilizados deben

ayudar a despejar estas dudas en elmenor tiempo posible.

Figura 16.3. Rise tiene una landing page quehace muy bien su trabajo, presentando la

información esencial, enlace a la tienda y untratamiento visual atractivo.

En el caso de Android, que permitela descarga independiente de la tienda,otra función del sitio web es servircomo canal de distribución, proveyendoenlaces para obtener la appdirectamente.

No obstante, la mejor opción es usarla página inicial como puente para llegara la tienda donde se encuentra laaplicación. Cada una de las tiendasofrece diferentes elementospromocionales con su identidad paraincluir en la web, como botones dedescarga entre otros[15].

Las actualizaciones.

Las observaciones que se obtienen através de los comentarios y estadísticasde uso, se transforman en una serie demejoras que pueden implementarse en laaplicación. Es entonces cuando deja deexistir solo la versión inicial y se tieneuna app mejorada, lista para sustituir ala anterior. Esto es posible a través delas actualizaciones[16].

Cuando lo que se ha corregido en laapp son fallos realmente graves, queimpiden el uso futuro de la aplicación,puede realizarse lo que conocemoscomo «actualización forzosa». Como el

nombre lo indica, es aquella que obligaa los usuarios a descargar la últimaversión. El riesgo de este tipo deactualizaciones es que puede hacer quealgunos usuarios dejen de usar laaplicación porque no quierenactualizarla y tampoco pueden usar laversión que tienen instalada. En otroscasos, la descarga de las actualizacionessuele ser opcional y puede realizarsecuando el usuario lo prefiera.

Las actualizaciones generalmenteresponden a un ciclo de desarrollo, quedura una determinada cantidad de días,al cabo del cual se liberan. De estaforma, se va trabajando en la prueba eimplementación de cambios futuros que

resultarán en una nueva versión de laaplicación. La ventaja de esta forma detrabajar es que se realiza una mejoraconstante de la app y los usuarios sabenque pueden esperar una versiónmejorada cada cierto tiempo.

Es importante recalcar que subir unanueva versión de la aplicación a latienda de Apple o de Microsoft obliga asometerla nuevamente a la revisión delcumplimiento de las políticas por partede estas tiendas. En el caso de GooglePlay, como hemos comentado, elproceso es más simple y directo.

Capítulo 17.

Firefox OS y Ubuntu parateléfonos: Los nuevos

jugadores.

Si bien a lo largo del libro nos hemosconcentrado solamente en Android, iOSy Windows Phone, la realidad es queexisten más competidores entre lossistemas operativos para móviles[1].

Tal es el caso de Firefox OS[2] yUbuntu[3] para teléfonos, tan solo dos delos representantes de un nuevo grupo dejugadores —que también incluye a Tizeny Sailfish— que quiere abrirse caminoentre los gigantes. Casualmente, ambostienen una filosofía de código abierto yapuestan por el HTML como base de suestructura.

Lo anterior quizás pueda ser uncambio de paradigma respecto a los

grandes del mercado y una nueva manerade concebir las aplicaciones paramóviles, que afecta tanto el diseño comoel desarrollo y la interacción con losusuarios.

Entrevistamos a los responsables dediseño de Firefox OS y Ubuntu,buscando entender por qué se distinguenestos sistemas operativos y quépodemos esperar de ellos, en cuanto adiseño se refiere.

Firefox OS.

El sistema operativo de la fundaciónMozilla ya se encuentra en algunosteléfonos del mercado y promete llegar amuchos más en los próximos meses. Esla primera apuesta de los creadores delfamoso navegador del zorrito en llamaspor el mundo de los móviles.

Figura 17.1. Firefox OS intenta encontrarelementos visuales que construyan su

identidad, al mismo tiempo que presenta clarasinfluencias de otros SO.

Patryk Adamczyk es el Jefe deDiseño de Firefox OS y nos cuenta quées lo que separa a Firefox OS de otrossistemas operativos para móviles:

El objetivo de Mozilla esmantener una web abierta ypermitir a todo el mundotener acceso a unaexperiencia completa.Firefox OS no solo vienecon una navegadorcompletamente funcional

sino que también estáconstruido usandotecnologías web,permitiendo a millones dedesarrolladores escribiraplicaciones para laplataforma, sin necesidadde aprender un nuevolenguaje.

De muchas formas, FirefoxOS funciona como suscompetidores, ya que seposiciona para usuarios queestán cambiando sussmartphonesdesactualizados o feature

phones y aspira a hacer esatransición fluida. Ennuestra versión 1, el costodel dispositivo y la curva deaprendizaje son bajos;esperamos alcanzar losmercados emergentes dondeel acceso a Internet está sinexplotar y la mayoría depersonas accede a través desus ordenadores hogareños,locutorios o cafés.

Hemos diseñado la mayoríade los componentes usandoCSS para conseguirvelocidad y escalamiento.

Mientras vamos avanzandoen actualizacionesgraduales durante lospróximos meses, nuestroplan es evolucionar lainterfaz para que se sientaaún más como una web.

Los principios de diseño de FirefoxOS aún están en plena evolución —dehecho, todavía no hay una guía oficial[4]

— y podemos esperar cambios en lospróximos meses. Sin embargo, lo vistohasta ahora nos da ciertas pistas queindican un SO visualmente más cercanoa Android con influencia de iOS y

Windows Phone en el diseño de lainterfaz.

En el diseño de este SO también seintenta privilegiar el contenido sobre elcontenedor, dándole mayor importanciaal contenido visual —como vídeos ofotografías— que se apoya sobre unaretícula variable para cada necesidad,complementada con fondos oscuros paradestacar los gráficos.

El estilo de texturas y volúmenesque hemos visto en iOS, aquí tambiénestá presente —aunque mucho másmedido y controlado— utilizado enaplicaciones como el reloj que da laapariencia de materiales reales.

Para Firefox, la tipografía siempre

ha sido importante y esto también se vereflejado en su sistema operativo paramóviles. La tipografía Meta, de ErikSpiekermann, utilizada tradicionalmentecomo sello de identidad de la marca, haevolucionado en una versión paramóviles llamada Feura, creada por elmismo diseñador.

Sin embargo, tal vez uno de losdetalles más distintivos de Firefox OS,son los iconos circulares de la pantallade inicio, algo completamente diferentea los otros sistemas operativos.

Habrá que ver cómo crece yevoluciona Firefox OS en los meses porvenir, para saber si realmente consigueestablecer una identidad visual que lo

distinga de los demás.

Ubuntu parateléfonos.

Ubuntu es una distribución de Linuxconocida desde hace tiempo.Desarrollada por Canonical, es lapreferida de muchos «linuxeros» y hastael día de hoy había concentrado susesfuerzos en el sistema operativo paraordenadores.

Figura 17.1. El desembarco de Ubuntu enteléfonos promete ser una buena alternativa a

los SO actuales.

No obstante, las cosas empezaron acambiar cuando hizo sus primerasincursiones en Android y de allí, comoconsecuencia lógica, comenzó adesarrollar su propuesta para móviles,que no es otra cosa que una extensión de

su sistema operativo.Ivo Weevers, Jefe de Diseño de

Ubuntu, es la persona más indicada paracontestar qué hace a Ubuntu diferente alos demás sistemas operativos parateléfonos:

Ubuntu es la únicaplataforma que ofrece unaaproximación de diseñoverdaderamenteconvergente. El mismonúcleo del sistema operativose ejecuta en todos losformatos, incluyendoteléfonos, tabletas,ordenadores de escritorio y

televisores inteligentes.

La interfaz de usuario seescala perfectamente paraadaptarse a los diferentestamaños de pantalla ymétodos de entrada. Estopermite soluciones únicas,tales como ejecutar unaversión de escritorio desdeun teléfono o construir unaapp que podrá ejecutarse encualquier lado.

Sin duda, para un sistema operativotan ubicuo es un desafío mantener unos

lineamientos de diseño que se respetenen cada uno de los soportes.

¿Cuáles serán, entonces, los principiosde diseño de Ubuntu para móviles[5]?

Ubuntu usa gestosdeslizantes simples ynaturales desde los bordesde la pantalla, para facilitarel acceso al contenido ycambiar entre aplicaciones.

Cada borde tiene unpropósito específico —locual lleva la aproximación

de borde / gesto más lejosque cualquier otra solución—, haciendo accesiblesinstantáneamente todas lasaplicaciones, contenidos ycontroles, sin necesidad denavegar de nuevo por lapantalla inicial.

Las pantallas táctilespermiten tecladoscontextuales que soloaparecen cuando el usuariolo necesita. Ubuntu llevaeste concepto un paso másallá, mostrando tambiéncontroles de la interfaz solo

cuando el usuario lorequiere.

Hemos usados tresprincipios clave en eldiseño:

1. Foco en el contenido.2. Interacciones rápidas y

naturales.3. Estilo sofisticado.

Aunque algunos de estosestilos de diseño sontambién mencionados porotras plataformas, Ubuntu

es la única que realmente loconsigue a través delmodelo de interacción delos bordes.

Desafortunadamente, este sistemaoperativo aún no se distribuyepúblicamente en teléfonos y tendremosque esperar un poco más para conocersu evolución.

Mientras tanto, la expectativa esgrande por saber cómo se transformaráel mercado y cómo se desarrollaránsimultáneamente estas opciones desoftware, para comprobar si —de unaforma u otra— empiezan a influir en lasdemás.

Capítulo 18.

Reflexiones finales.

En los capítulos de este libro hemosvisto cómo diseñar y desarrollar unaaplicación, desde la idea inicial hasta supublicación, cuando se encuentradisponible para todo el mundo.

En cada etapa hemos desarrolladolos conceptos que consideramos másinteresantes y a la vez, aquellos que nonecesariamente se encuentran en losmanuales ni en las guías de cada sistemaoperativo. Estos últimos, son el fruto denuestra experiencia, de lo que hemosaprendido durante estos años de trabajo.Sin duda, es lo que hubiéramos queridoque alguien nos explicara antes decomenzar.

Esperamos que saques el máximo

provecho de nuestras palabras. Antetodo, tómalas como un punto de partidadesde el cual puedas investigar más.Cada uno de los temas tiene un riquezainfinita, imposible de abarcar en un sololibro; por ejemplo, existenpublicaciones dedicadas a hablarsolamente de test de usabilidad.Seguramente te habrás interesado poralgún tema más que por otro, por lo cualte recomendamos usar los enlaces allídispuestos para ampliar tusconocimientos.

Lo mejor empiezaahora.

Una vez hayas terminado este libro,estás listo para poner en práctica suscontenidos. No hace falta esperar quealgún cliente te pida un proyecto nuevo,puedes comenzar a hacer tus propiasaplicaciones; aunque no se transformeninmediatamente en productos publicadosy rentables, te servirán para investigar yempezar a plantear tu propia manera deresolver las cosas.

Incluso, solo con un teléfono puedeser suficiente para iniciarte en este

mundo, usándolo a conciencia yobservando crítica y detalladamentecómo hacen las aplicaciones los demás.Esta forma de interactuar con tu móvildebería convertirse, desde hoy, en unapráctica habitual.

Aprovecha herramientas básicascomo el lápiz y el papel para trasladartus ideas, volcar conceptos yevolucionarlos. Para hacerlo, nonecesitas prácticamente nada más que tuimaginación. Quién sabe, quizás con eltiempo, esos esquemas rápidos setransformen en una app exitosa.

El papel deldiseñador.

Definitivamente, creemos en undiseñador que va más allá delestereotipo tradicional de constructor deinterfaces. El diseño es una disciplinarealmente interesante, llena deposibilidades y caminos que se bifurcan,especialmente a partir de su relacióncon la tecnología. Por ejemplo, en unaaplicación podemos hablar tanto dediseño de información, como deinteracción o visual.

Es normal sentirse más identificado,

o incluso apegado, con determinadosroles en un proyecto. Ejecutar el mismopapel de forma continua, con el tiempo,nos convierte en especialistas; pero, loque realmente nos hace mejoresprofesionales, es tener un conocimientoque trascienda las fronteras de nuestrocampo de acción, en este caso, sabercómo se idean y ejecutan otras etapasdel diseño y desarrollo de una app. Deesta forma, la relación e integración conotros miembros del equipo puede sermás fructífera, al generar sinergia queresulte en aplicaciones de mayorcalidad.

Un diseñador debería entonces, enmayor o menor medida, involucrarse en

todas las etapas del proceso, incluso enaquellas que le resulten más técnicas otediosas. Esto no es algo que debaevitarse, por el contrario, deberíaaprovecharse para trasladar elaprendizaje al trabajo propio.

De la misma manera que losdiseñadores deben dar un paso más allá,también los desarrolladores deberíanentender el trabajo de diseño y serconscientes del impacto que tiene en losusuarios una interfaz que, además decuidar los aspectos de usabilidad, se vebien.

Esta relación puede permitir alprogramador incorporar una visiónestética y de sentido visual, que le ayude

a tomar decisiones a la hora de construiruna aplicación, guiado también por suinstinto y sin depender enteramente deldiseñador.

Ya no decimos «los profesionalesdel futuro». Los profesionales de hoymás apreciados por pequeñas ymedianas empresas son aquellos quepueden resolver y plantear solucionesque van más allá de sus tareas. Teinvitamos a que seas uno de ellos.

El futuro de las apps.

El diseño de aplicaciones está en unmomento ideal para sumergirse de llenoen él. Si bien cada sistema operativotiene su propuesta, suelen ser realmentecambiantes y abiertos a las innovacionesque proponen los diseñadores. Lospatrones no son completamentecerrados, lo cual también deja lugar a lainiciativa del diseñador —ya noscomentó esta situación alguien tanreconocido como Loren Brichter en laentrevista—.

Al mismo tiempo, nuevos sistemasoperativos para móviles, como Firefox

OS y Ubuntu, están emergiendo, por loque podemos esperar que en lospróximos meses el panorama generalsiga cambiando. Desde nuestro lugar,podemos intuir que la filosofía dediseño de cada plataforma se veráafectada por las demás, tal como lainfluencia —tácitamente reconocida—del estilo plano de Windows Phonepuede verse en sus competidores.

Son días emocionantes y,seguramente, lo mejor está por venir.Prepárate para ello.

Glosario.

En las siguientes páginasencontrarás una explicación másclara y detallada de algunostérminos usados en este libro. Valeaclarar que, aunque en ocasiones elsignificado de alguno de ellospuede trascender el contexto de lasaplicaciones, hemos preferidoacotar la descripción al ámbito delos contenidos.

Accesibilidad

Posibilidad de acceso a los contenidospor cualquier personaindependientemente de sus capacidadesfísicas. A nivel visual está determinada,entre otras cosas, por el tamaño de lostextos y botones y por el contraste queestos elementos tienen con el fondo. Unaapp accesible también hace referencia auna correcta programación del códigoque permite, por ejemplo, que loscontenidos puedan ser interpretados poraccesorios para ciegos.

App

Es el nombre usado comúnmente parareferirse a las aplicaciones, que surgede acortar el vocablo inglésapplication. Es una pieza de softwareque se ejecuta en teléfonos móviles ytabletas y, como te habrás dado cuenta,es el objeto de estudio de este libro. Siaún no entiendes lo que es una app terecomendamos leer este libro con másatención.

Benchmarking

El benchmarking es un procesosistemático para evaluarcomparativamente productos, serviciosy procesos. En nuestro contexto, esentonces el estudio comparativo yanalítico de otras aplicaciones, con elfin de determinar la calidad ycaracterísticas de cada una de ellas,tomándolas como parámetros dereferencia.

Compilar

Es la acción de empaquetar un código.El resultado de compilar el código deuna aplicación es el archivo final queestá listo para ser subido a la tienda.

Contexto de uso

Entorno general conformado por laubicación y espacio físico que rodea alusuario y al dispositivo. El contexto de

uso determina, además, la forma en queestos dos componentes se relacionan einteractúan entre sí.

CSS

Siglas de Cascading Style Sheets, queen español sería «Hojas de estilo encascada». Ya sea en archivos separadoso dentro del código HTML, estelenguaje determina la apariencia visualde una web o aplicación webdefiniendo, entre otras cosas, loscolores y tamaños de fuente.

Densidad de pantalla

Es la cantidad de píxeles por espaciofísico que tiene una pantalla.Generalmente se mide en «píxeles porpulgada» o DPI por las siglas en inglésde Dots per inch. Las densidades sondiferentes por cada modelo de móvil yse dividen por lo general en bajas,medias o altas, denominación que puedevariar dependiendo del sistemaoperativo.

Dp

Corresponde a las siglas de Density-independent pixels o «píxelesindependientes de la densidad». Es unaunidad de medida empleada porAndroid que está relacionada con ladensidad física de la pantalla. Los DPson unidades relativas a las pantallas de160 DPI, en las cuales un DP equivale aun píxel.

El uso de DP en lugar de píxeles esuna solución propuesta para adaptarcorrectamente una interfaz cuando se

lleva a otras densidades de pantalla.

Escenario

Se refiere a la combinación de contextode uso y persona. Determina la maneracomo un usuario se relaciona con elmóvil en una situación específica.

Experiencia de usuario oUX

Concentra las emociones y percepciones

que tiene una persona al usar unainterfaz o producto. En el caso de lasapps, está influida por un conjunto defactores que determinan si laexperiencia es positiva o negativa, entreellos, la accesibilidad, diseño visual,diseño de interacción y usabilidad.

Feedback

Es la respuesta, generalmente inmediata,de la interfaz para mantener al usuarioinformado de las acciones que acaba derealizar. En este sentido, puede ser laconfirmación de éxito o de error

obtenida al ejecutar una tarea y puedemanifestarse a través de avisos o pormedio de elementos visuales mássutiles.

El feedback también puede referirsea las observaciones y comentarios deusuarios, que sirven como parámetros oindicadores para mejorar una app.

HTML

Corresponde a las siglas de HyperTextMarkup Language. Es el lenguaje quese utiliza tradicionalmente para construirpáginas web y aplicaciones web para

móviles. Define la estructura de undocumento web basado en una serie deseparadores.

Interfaz o UI

La interfaz o User Interface es la capaque existe entre el usuario y eldispositivo, que le permite interactuarcon este último. En las aplicaciones setrata del componente gráfico quecontiene elementos que producenreacciones al pulsarlos y permiten alusuario realizar tareas, como también,aquellos estáticos sobre los cuales se

interpretan los contenidos.

Javascript

Lenguaje de programación utilizadoprincipalmente en proyectos web comositios o aplicaciones, que muchas vecesactúa en conjunto con HTML y CSS paradotarlos de funcionalidad.

KPI

Del inglés Key Performance Indicator,

son los «indicadores clave dedesempeño» que miden las variables deejecución de un proceso, con el fin deobtener datos relevantes para determinarel rendimiento general y conocer si sehan alcanzado los objetivos fijados.

Librería

En programación, se llama así alconjunto de código externo que puedeaprovecharse para conseguirdeterminados comportamientos. Tienerelación directa con el lenguaje deprogramación elegido.

Monetizar

Acción de obtener rédito económico. Enuna aplicación, tiene que ver con lasformas de obtener ingresos de ella y estádirectamente relacionada con el modelode negocio y la estrategia comercial.

Móvil

También llamado (teléfono) celular enalgunos países de América Latina, es un

artefacto electrónico de tamaño variabledonde funcionan las aplicaciones yestamos casi seguros de que tienes unoen tu mano o bolsillo ahora mismo.

Orientación

Es la manera en que se muestra elcontenido en pantalla, dependiendo de laforma en que el usuario sostiene sutableta o teléfono. Puede ser vertical uhorizontal.

Persona

Personificación de los usuarios quesurge como resultado de estudiosbasados en su comportamiento ycaracterísticas etnográficas. Estainvestigación está basada en lospatrones comunes que se detectan en losusuarios. El concepto de «Persona» fuecreado por Cooper y es una herramientahabitual en el diseño de interacción.

Píxel o px

Unidad física mínima formada porpuntos de color que se reparten a lolargo de la superficie de una pantalla.En diseño también suele usarse comounidad de medida para los componentesgráficos de la interfaz en los diferentesprogramas de edición.

Ranking

Clasificación ordenada que se da a lasaplicaciones en cada una de las tiendas,dependiendo de factores como cantidadde descargas o cantidad de valoracionespositivas.

Resolución de pantalla

Es la cantidad de píxeles que puede sermostrada en la pantalla de undispositivo y consiste en una relaciónentre el ancho y alto de la misma.

SDK

El Software Development Kit o «Kit dedesarrollo de software» provee a losprogramadores herramientas necesariaspara desarrollar el código de unaaplicación. Tanto Android, como iOS yWindows Phone, ofrecen uno diferente.

Simulador

Un simulador permite probar la

aplicación sin necesidad de contar conun móvil. De esta forma, se puedeejecutar el código en el ordenador y verlos resultados en la pantalla, con el finde realizar comprobacionespreliminares sobre el funcionamiento dela app.

Sistema operativo o SO

Es el software que contiene cada uno delos teléfonos y sobre el cual se ejecutanlas aplicaciones. Las distintas versionesde Android, iOS y Windows Phone, sonejemplos de sistemas operativos.

Sp

En Android se llama así a los Scale-independent pixels o «píxelesindependientes de la escala», usadospara textos. En diseño, estos tienen elmismo comportamiento que los DP, conla diferencia que el tamaño medido ensp también puede ser afectado por laspreferencias del usuario.

Tamaño de pantalla

Es el tamaño físico que tiene la pantallade un extremo al otro, en forma diagonaly medido, generalmente, en pulgadas.

Tema

Combinación de colores que usanAndroid y Windows Phone de formapreestablecida. En Windows Phone, elusuario puede elegir entre una serie detemas que afectan el color de fondo yelementos destacados a través de laspantallas de todo el sistema operativo.

Tienda

Es el canal de distribución ycomercialización de aplicaciones, desdedonde pueden descargarse de formagratuita o paga. Cada uno de lossistemas operativos móvilesmencionados en este libro tiene unatienda oficial; sin embargo, en el casode Android, existen varias opcionesalternativas además de Google Play;cómo la tienda de apps de Amazon oSamsung.

Usabilidad

En su sentido más amplio, estárelacionada con la eficacia y eficienciade la interfaz de una aplicación parapermitir a un usuario determinadorealizar una tarea o cumplir un objetivo.La usabilidad no puede analizarse deforma aislada, ya que está vinculada conun contexto particular y un usuarioespecífico; por tanto, está directamenteasociada a la experiencia de usuario.

Usuario

El usuario es quien realiza interaccionescon la aplicación a través de su interfaz.Es el foco del llamado «diseño centradoen el usuario» que tiene como eje susnecesidades, para proponer solucionesque resuelvan los problemas,considerando sus emociones yexpectativas.

Referencias.

Para facilitarte el trabajo, hemosorganizado un listado con todos losenlaces que incluimos en cada unode los capítulos que pueden serconsultados para ampliar tusconocimientos.

1. Las aplicaciones

[1] WROBLEWSKI, Luke. MobileFirst [en línea]:http://www.lukew.com/ff/entry.asp?933[2] SEVEN, Doug. What is a HybridMobile App? [en línea]:http://icenium.com/community/blog/icenium-team-blog/2012/06/14/what-is-a-hybrid-mobile-app-[3] Apache Cordovahttp://cordova.apache.org/

[4] Iceniumhttp://www.icenium.com/

2. Entendiendo lasposibilidades

[1] Angry Birdshttp://www.angrybirds.com[2] Pathhttps://path.com[3] Twitterhttps://twitter.com[4] Instagram

http://instagram.com[5] Clearhttp://www.realmacsoftware.com/clear[6] Flowhttp://www.getflow.com[7] Basecamphttp://basecamp.com[8] Evernotehttps://evernote.com[9] Articleshttp://sophiestication.com/articles[10] Paperhttp://www.fiftythree.com/paper[11] Cut the Ropehttp://www.cuttherope.ie[12] Google AdMob

http://www.google.es/ads/admob[13] Apple iAdshttps://developer.apple.com/iad[14] Microsoft Advertising — Adsin appshttp://advertising.microsoft.com/en-ca/windows-8-ads-in-apps[15] 15. KOETSIER, John. Androidup 13%, iOS down 7%, Blackberrydown 81% … and Windows Phoneup a massive 52% [en línea]:http://venturebeat.com/2013/04/01/android-up-13-ios-down-7-blackberry-down-81-and-windows-phone-up-a-massive-52/[16] JIMÉNEZ CANO, Rosa.

Google Play no puede con la AppStore [en línea]:http://tecnologia.elpais.com/tecnologia/2013/04/26/actualidad/1366971919_151325.html[17] Plataforma paraDesarrolladores de Androidhttp://developer.android.com[18] KUMAR, Mugunth y NAPIER,Rob. iOS 6 Programming Pushingthe limits. Diciembre de 2012, [enlínea]:http://iosptl.com[19] iOS Developer Programhttps://developer.apple.com/programs/ios[20] Windows Phone Dev Centerhttp://dev.windowsphone.com/en-us

3. Irene Pereyra: UX conmagia en Fi

[1] Six Reasons You May Want toWork at Fi [en línea]:http://blog.f-i.com/six-reasons-you-want-to-work-at-fi/[2] Explore Touch with InternetExplorer [en línea]:http://blog.f-i.com/explore-touch-with-internet-explorer/[3] Fi — Ramayana Case Studyhttp://www.f-

i.com/google/ramayana/[4] USAToday.com: RedesigningOne of America’s Most PopularNews Sites [en línea]:http://blog.f-i.com/usatoday-com-redesigning-one-of-americas-most-popular-news-site/[5] Fi — Iconographyhttp://www.f-i.com/fi/icons/

4. Explorando ideas

[1] Mailbox

http://www.mailboxapp.com/

5. Definiendo la propuesta

[1] Personashttp://www.cooper.com/journal/personas[2] HOBBS, Jason. An introductionto user journeys [en línea]:http://boxesandarrows.com/an-introduction-to-user-journeys/[3] SYSTROM, Kevin. Instagram:What is the genesis of Instagram?[en línea]:

http://www.quora.com/Instagram/What-is-the-genesis-of-Instagram[4] Make Opinionated Software [enlínea]:http://gettingreal.37signals.com/ch04_Make_Opinionated_Software.php[5] Balsamiqhttp://www.balsamiq.com/[6] Omnigrafflehttp://www.omnigroup.com/products/omnigraffle/[7] Axurehttp://www.axure.com/[8] UXPinhttp://uxpin.com/[9] ARMENGOL, Dani. ¿Qué es unprototipo? [en línea]:http://interactionphilia.com/que-es-

un-prototipo[10] Keynotopiahttp://keynotopia.com/[11] Codiqahttp://www.codiqa.com/[12] Fluidhttps://www.fluidui.com/[13] Framerhttp://www.framerjs.com[14] Flintohttps://www.flinto.com[15] Briefshttp://giveabrief.com[16] POPhttp://popapp.in

6. Dustin Barker: La bancaelectrónica hecha Simple

[1] Simplehttps://simple.com/

7. Interacción y patrones

[1] SAINE, Jamie. How MobileUsers Hold Devices [en línea]:http://blog.utest.com/how-mobile-

users-hold-devices/2013/03/[2] HINMAN, Rachel. Mapping theScreen for Touch. The MobileFrontier. Rosenfeld Media, juniode 2012.[3] CLARK, Josh. Designing fortouch. The Mobile Book. SmashingMagazine, diciembre de 2012.[4] Android Design Patternshttp://www.androidpatterns.com/[5] FIDALGO, Armando. Interfacestáctiles: el desafío de las tabletas[en línea]:http://www.slideshare.net/Afidalgo/interfaces-tctiles-ux-spain[6] WROBLEWSKI, Luke. Touch

Gesture Reference Guide [enlínea]:http://lukew.com/touch

8. Diseño visual

[1] Of Splash Screens and iOS Apps[en línea]:http://blog.manbolo.com/2012/06/27/of-splash-screens-and-ios-apps[2] Android Iconographyhttp://developer.android.com/design/style/iconography.html[3] Custom Icon and Image Creation

Guidelineshttp://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html[4] Android Metrics and Gridshttp://developer.android.com/design/style/metrics-grids.html[5] Principia Arbiter. New VisualProportions for the iOS UserInterface [en línea]:http://aentan.com/design/new-visual-proportions-for-the-ios-user-interface/[6] Android Typographyhttp://developer.android.com/design/style/typography.html[7] iOS 6: Font Listhttp://support.apple.com/kb/ht5484[8] Text and fonts for Windows

Phonehttp://msdn.microsoft.com/en-us/library/windowsphone/develop/cc189010(v=vs.105).aspx[9] JONHSON, Ben. Greatanimations make great apps [enlínea]:http://www.raizlabs.com/2012/09/great-animations-great-apps/

9. Dustin Mierau: Path y elvalor de los detalles

[1] Path

https://path.com/

10. Probando con usuarios

[1] ARMENGOL, Dani. ¿Qué es untest de usabilidad? [en línea]:http://www.usolab.com/wl/2012/08/que-es-un-test-de-usabilidad.php[2] CASSANO, Jay. Secrets From Facebook’s Mobile UX TestingTeam [en línea]:http://www.fastcolabs.com/3007979/open-company/secrets-facebooks-mobile-ux-testing-team

[3] LANG, Tania. Eight Lessons inMobile Usability Testing [en línea]:http://uxmag.com/articles/eight-lessons-in-mobile-usability-testing[4] Mr. Tappyhttp://www.mrtappy.com/index.html[5] Benefits of «Guerrilla» testing[en línea]:http://stamfordinteractive.com.au/conversations/benefits-of-guerrilla-testing/[6] CHISNELL, Dana. UsabilityTesting Demystified [en línea]:http://alistapart.com/article/usability-testing-demystified[7] EL-QUDSI, Ismael. ¿Qué es eldogfooding? [en línea]:

http://www.elqudsi.com/articulos/%C2%BFque-es-el-dogfooding/[8] FiveSecondTesthttp://www.fivesecondtest.com

11. Preparando los archivos

[1] Android Supporting MultipleScreenshttp://developer.android.com/guide/practices/screens_support.html[2] Android Downloadshttp://developer.android.com/design/downloads/index.html[3] teehan+lax: iPhone GUI PSD

http://www.teehanlax.com/tools/iphone/[4] Design resources for WindowsPhonehttp://msdn.microsoft.com/library/windowsphone/design/ff637515(v=vs.105).aspx[5] Windows Phone Emulatorhttp://msdn.microsoft.com/en-us/library/windowsphone/develop/ff402563(v=vs.105).aspx[6] android dpi calculatorhttp://coh.io/adpi[7] Android Draw 9-patchhttp://developer.android.com/tools/help/draw9patch.html[8] Thoughtbot. Designing for iOS:Taming UIButton [en línea]:http://robots.thoughtbot.com/post/33427366406/designing-for-ios-taming-uibutton[9] Panorama control design

guidelines for Windows Phonehttp://msdn.microsoft.com/en-us/library/windowsphone/design/hh202912(v=vs.105).aspx[10] Android Icons Template Packhttp://developer.android.com/shareables/icon_templates-v4.0.zip[11] App bar icon buttons forWindows Phonehttp://msdn.microsoft.com/en-us/library/windowsphone/develop/ff431806(v=vs.105).aspx[12] Android Iconographyhttp://developer.android.com/design/style/iconography.html

12. Loren Brichter:Rompiendo todos losesquemas

[1] LESSIN, Jessica E. High Priestof App Design, at Home in Philly[en línea]:http://online.wsj.com/article/SB10001424127887324392804578358730990873670.html[2] Atebitshttp://www.atebits.com/

13. Ejemplos a seguir

[1] 500pxhttps://play.google.com/store/apps/details?id=com.fivehundredpx.viewer&hl=es[2] Google Drivehttps://play.google.com/store/apps/details?id=com.google.android.apps.docs&hl=es[3] The Guardianhttps://play.google.com/store/apps/details?id=com.guardian&hl=es[4] National Parks by NationalGeographic

https://itunes.apple.com/es/app/national-parks-by-national/id518426085?mt=8[5] Google Mapshttps://itunes.apple.com/es/app/google-maps/id585027354?mt=8[6] Instapaperhttps://itunes.apple.com/es/app/instapaper/id288545208?mt=8[7] Spotifyhttp://www.windowsphone.com/es-es/store/app/spotify/10f2995d-1f82-4203-b7fa-46ddbd07a6e6[8] Twitterhttp://www.windowsphone.com/es-es/store/app/twitter/0b792c7c-

14dc-df11-a844-00237de2db9e[9] Tumblrhttp://www.windowsphone.com/es-es/store/app/tumblr/ffa2fb4f-61b2-4075-ac7b-488846998b72

14. El mundo tableta

[1] The new multi-screen world,Googlehttp://services.google.com/fh/files/misc/multiscreenworld_final.pdf[2] Flipboardhttp://flipboard.com

15. Erik Spiekermann: ElMaestro de la tipografía

[1] Edenspiekermannhttp://www.edenspiekermann.com/

16. Lanzando la app

[1] Market Appealhttp://msdn.microsoft.com/en-us/library/windowsphone/help/jj206715(v=vs.105).aspx

[2] Recursos gráficos y de imagenhttps://support.google.com/googleplay/android-developer/answer/1078870[3] Políticas y prácticasrecomendadashttps://support.google.com/googleplay/android-developer/topic/2364761?hl=es&ctx=topic[4] App certification requirementsfor Windows Phonehttp://msdn.microsoft.com/en-us/library/windowsphone/develop/hh184843(v=vs.105).aspx[5] Amazon Appstore for Androidhttp://www.amazon.com/mobile-apps/b?ie=UTF8&node=2350149011

[6] Samsung Appshttp://apps.samsung.com/[7] Android Publishing Overviewhttp://developer.android.com/tools/publishing/publishing_overview.html[8] Company app distribution forWindows Phonehttp://msdn.microsoft.com/en-us/library/windowsphone/develop/jj206943(v=vs.105).aspx[9] Improving App Quality AfterLaunchhttp://developer.android.com/intl/es/distribute/googleplay/strategies/app-quality.html[10] appFigureshttp://appfigures.com/[11] Google Analyticshttp://www.google.com/analytics/features/mobile.html

[12] Mixpanelhttps://mixpanel.com/[13] Flurryhttp://www.flurry.com/[14] Localyticshttp://www.localytics.com[15] Google Play Badgeshttp://developer.android.com/intl/es/distribute/googleplay/promote/badges.html[16] WARREN, Christina. When &How You Should Update YourMobile App [en línea]:http://mashable.com/2011/09/22/mobile-app-update/

17. Firefox OS y Ubuntu:Los nuevos jugadores

[1] Mobile operating system [enlínea]:http://en.wikipedia.org/wiki/Mobile_operating_system[2] Firefox OShttp://www.mozilla.org/es-ES/firefox/partners/[3] Ubuntu for phoneshttp://www.ubuntu.com/phone[4] ADAMCZYK, Patryk.MozCamp Warsaw: Design

Principles Behind Firefox OS UX[en línea]:https://blog.mozilla.org/ux/2012/09/mozcamp-warsaw-design-principles-behind-firefox-os-ux/[5] Design vision [en línea]:http://design.ubuntu.com/apps/get-started/design-vision

Créditos deimágenes.

1. Las aplicaciones

Figura 1.1. Elaboración propia apartir de imagen de Apple. 2013.Figura 1.2. WALTON, Trent. 2012.Recuperada de:http://trentwalton.com/2012/10/03/a-new-microsoft-com.Figura 1.3. Elaboración propia.

2013.Figura 1.4. Elaboración propia.2013.Figura 1.5. Elaboración propia apartir de capturas de pantalla deFacebook. 2013.Figura 1.6. Elaboración propia apartir de capturas de pantalla deNetflix. 2013.

2. Entendiendo lasposibilidades

Figura 2.1. Elaboración propia apartir de captura de pantalla deAngry Birds. 2013.Figura 2.2. Elaboración propia apartir de captura de pantalla dePath. 2013.Figura 2.3. Realmac Software.2013. Recuperada de:https://itunes.apple.com/es/app/clear/id493136154?mt=8.Figura 2.4. SophiesticationSoftware. Kit de prensa. 2013.Figura 2.5. Elaboración propia apartir de captura de pantalla dePaper. 2013.Figura 2.6. Elaboración propia a

partir de capturas de pantalla deCute the Rope y Whatsapp. 2013.Figura 2.7. Elaboración propia apartir de captura de pantalla deLine. 2013.Figura 2.8. Halfbrick. 2013.Figura 2.9. Elaboración propia.2013.

3. Irene Pereyra: UX conmagia en Fi

Figura 3.1. Fi. 2013. Recuperada

de: http://www.f-i.com/nickelodeon/kids-choice-awards.Figura 3.2. Fi. 2013. Recuperadade: http://www.f-i.com/nickelodeon/kids-choice-awards.

4. Explorando ideas

Figura 4.1. Elaboración propia apartir de capturas de pantalla deiBulb, iLed FlashLight y Linterna.2013.

Figura 4.2. DE SOUSA, Fernando.2013.Figura 4.3. Dropbox Inc. Kit deprensa. 2013.

5. Definiendo la propuesta

Figura 5.1. Elaboración propia.2013.Figura 5.2. Elaboración propia apartir de artículo en UX Matters.2012. Recuperado de:http://www.uxmatters.com/mt/archives/2012/05/expressing-ux-concepts-visually.php.

Figura 5.3. Elaboración propia apartir de captura de pantalla deInstagram. 2013.Figura 5.4. Elaboración propia apartir de artículo en UX Booth.2012. Recuperado de:http://www.uxbooth.com/articles/lessons-learned-designing-a-windows-8-app.Figura 5.5. Estudio Chipsa. 2013.www.chipsa.ru.Figura 5.6. STARK, James.Figura 5.7. ARNALL, Timo.Figura 5.8. Android. 2013.Recuperada de:http://developer.android.com/intl/es/design/downloads/index.html

Figura 5.9. Elaboración propia apartir de captura de pantalla deOmnigraffle e imagen de 2013.

6. Dustin Barker: La bancaelectrónica hecha Simple

Figura 6.1. Elaboración propia apartir de imágenes de Simple. Kitde prensa. 2013.Figura 6.2. Elaboración propia apartir de imágenes de Simple. Kitde prensa. 2013.

7. Interacción y patrones

Figura 7.1. Elaboración propia apartir de imagen de HOOBER,Steven. 2013. Recuperada de:http://blog.utest.com/how-mobile-users-hold-devices/2013/03/.Figura 7.2. Elaboración propia apartir de captura de pantalla deWeightbot. 2013.Figura 7.3. Elaboración propia.2013.Figura 7.4. Elaboración propia.

2013.Figura 7.5. Elaboración propia.2013.Figura 7.6. Elaboración propia.2013.Figura 7.7. Elaboración propia.2013.Figura 7.8. Elaboración propia.2013.Figura 7.9. Elaboración propia.2013.Figura 7.10. Elaboración propia.2013.Figura 7.11. Elaboración propia.2013.Figura 7.12. Elaboración propia.

2013.Figura 7.13. Elaboración propia.2013.Figura 7.14. Elaboración propia.2013.Figura 7.15. Elaboración propia.2013.Figura 7.16. Elaboración propia.2013.Figura 7.17. Elaboración propia.2013.Figura 7.18. Elaboración propia.2013.Figura 7.19. Elaboración propia.2013.

8. Diseño visual

Figura 8.1. Elaboración propia apartir de captura de pantalla deGmail. 2013.Figura 8.2. Elaboración propia apartir de capturas de pantalla deiOS. 2013.Figura 8.3. Elaboración propia apartir de capturas de pantalla deiOS. 2013.Figura 8.4. Elaboración propia apartir de capturas de pantalla de

Windows Phone. 2013.Figura 8.5. Elaboración propia apartir de capturas de pantalla deWunderlist. 2013.Figura 8.6. Path. 2013,www.path.com.Figura 8.7. Elaboración propia apartir de capturas de pantalla deVine. 2013.Figura 8.8. Elaboración propia apartir de capturas de pantalla deGoogle Play. 2013.Figura 8.9. Elaboración propia.2013.Figura 8.10. Elaboración propia.2013.

Figura 8.11. Elaboración propia.2013.Figura 8.12. Elaboración propia.2013.Figura 8.13. Elaboración propia.2013.Figura 8.14. Capturas de pantallade Skype, rdio y Nike+ Running.2013.Figura 8.15. Capturas de pantallade iOS. 2013.Figura 8.16. Android. 2013.Recuperada de:http://developer.android.com/intl/es/design/style/metrics-grids.html.Figura 8.17. ARBITER, Principia.

2011.Figura 8.18. Microsoft. 2013.Recuperada de:http://developer.windowsphone.com/en-us/design/principles.Figura 8.19. Elaboración propia.2013.Figura 8.20. LÜSCHER, Christoph.2012. Recuperada de:http://ia.net/blog/responsive-typography-the-basics/.Figura 8.21. Android. 2012.Recuperada de:http://developer.android.com/intl/es/design/style/typography.htmlFigura 8.22. Elaboración propia apartir de captura de pantalla de

Bloomberg. 2013.Figura 8.23. Elaboración propia.2013.Figura 8.24. Elaboración propia.2013.Figura 8.25. Elaboración propia.2013.Figura 8.26. Elaboración propia.2013.Figura 8.27. Microsoft. 2013.Recuperada de:http://msdn.microsoft.com/en-us/library/windowsphone/design/hh202878(v=vs.105).aspxFigura 8.28. Android. 2013.Recuperada de:http://developer.android.com/intl/es/design/style/color.html

Figura 8.29. Elaboración propia apartir de recursos de Teehan + Lax.2013. Recuperados de:http://www.teehanlax.com/blog/ios-6-gui-psd-iphone-5/.Figura 8.30. Captura de pantalla deLetterpress. 2013.Figura 8.31. Captura de pantalla deWWDC. 2013.Figura 8.32. Capturas de pantallade Spotify. 2013.Figura 8.33. Elaboración propia apartir de capturas de pantallas deClear. 2013.Figura 8.34. Elaboración propia apartir de capturas de pantallas de

Windows Phone. 2013.

9. Dustin Mierau: Path y elvalor de los detalles

Figura 9.1. Elaboración propia apartir de capturas de Path. 2013.Figura 9.2. Elaboración propia apartir de capturas de Path. 2013.

10. Probando con usuarios

Figura 10.1. Elaboración propia apartir de imagen de BULT, Mark.2013.Figura 10.2. Mr. Tappy. Kit deprensa. 2013.Figura 10.3. Elaboración propia.2013.Figura 10.4. MELBOURNE, Ben.2013.

11. Preparando los archivos

Figura 11.1. OpenSignal. 2013.Recuperada de:

http://opensignal.com/reports/fragmentation.phpFigura 11.2. Microsoft. 2013.Recuperada de:http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj206974(v=vs.105).aspxFigura 11.3. YERMOLAYEV,Nikita. 2013. www.komarov.mobi.Figura 11.4. Sketch Gems. Kit deprensa. 2013.Figura 11.5. Elaboración propia.2013.Figura 11.6. Elaboración propia.2013.Figura 11.7. LEMEDEN, Reda.2013.Figura 11.8. Elaboración propia.

2013.Figura 11.9. Elaboración propia.2013.Figura 11.10. Elaboración propia.2013.

12. Loren Brichter:Rompiendo todos losesquemas

Figura 12.1. Elaboración propia apartir de imagen de Atebits. Kit deprensa. 2013.

Figura 12.2. iMore. 2013.Recuperada de:http://www.imore.com/hall-fame-loren-brichter-and-tweetie.

12. Loren Brichter:Rompiendo todos losesquemas

Figura 13.1. Captura de pantalla de500px. 2013.Figura 13.2. Captura de pantalla de500px. 2013.

Figura 13.3. Captura de pantalla deGoogle Drive. 2013.Figura 13.4. Captura de pantalla deGoogle Drive. 2013.Figura 13.5. Captura de pantalla deThe Guardian. 2013.Figura 13.6. Captura de pantalla deThe Guardian. 2013.Figura 13.7. Captura de pantalla deNational Parks. 2013.Figura 13.8. Captura de pantalla deNational Parks. 2013.Figura 13.9. Captura de pantalla deGoogle Maps. 2013.Figura 13.10. Captura de pantallade Google Maps. 2013.

Figura 13.11. Captura de pantallade Instapaper. 2013.Figura 13.12. Captura de pantallade Instapaper. 2013.Figura 13.13. Captura de pantallade Spotify. 2013.Figura 13.14. Captura de pantallade Spotify. 2013.Figura 13.15. Captura de pantallade Twitter. 2013.Figura 13.16. Captura de pantallade Twitter. 2013.Figura 13.17. Captura de pantallade Tumblr. 2013.Figura 13.18. Captura de pantallade Tumblr. 2013.

14. El mundo tableta

Figura 14.1. Touch Press. Kit deprensa. 2013.Figura 14.2. Elaboración propia apartir de capturas de pantalla deDropbox. 2013.Figura 14.3. plantronicsgermany.Kit de prensa. 2013.Figura 14.4. Elaboración propia apartir de imagen deWROBLEWSKI, Luke. 2012.Recuperado de:

http://www.lukew.com/ff/entry.asp?1649.Figura 14.5. Spotify. Kit de prensa.2013.Figura 14.6. Elaboración propia apartir de captura de pantalla deFlipboard. 2013.

15. Erik Spiekermann: ElMaestro de la tipografía

Figura 15.1. Elaboración propia apartir de material de Erik

Spiekermann. 2013. Recuperadode:http://spiekermann.com/en/downloads/

16. Lanzando la app

Figura 16.1. Elaboración propia apartir de captura de pantalla deVine. 2013.Figura 16.2. Localytics. Kit deprensa. 2013.Figura 16.3. Simplebots. 2013.www.simplebots.co.

17. Firefox OS y Ubuntu:Los nuevos jugadores

Figura 17.1. Firefox OS. Kit deprensa. 2013.Figura 17.2. Ubuntu. Kit de prensa.2013.

Agradecimientos.

Queremos agradecer a todas laspersonas que de alguna forma u otra seinvolucraron en nuestro proyecto. Sutiempo, motivación e ideas han hechoque el resultado sea mucho mejor de loque podríamos haber logrado sin ellas.

(Por apartados y ordenadosalfabéticamente)

Entrevistas

Patryk Adamczyk (Mozilla)Dustin Barker (Simple)Loren Brichter (Atebits)Dustin Mierau (Path)Irene Pereyra (Fantasy Interactive)Erik Spiekermann(Edenspiekermann)Ivo Weevers (Ubuntu)

Comentarios y aportes alos contenidos

Magalí Amalla

Daniel ArmengolPaloma CelaáPierluigi CifaniAndrés ColmenaresRuymán FerreyraArmando FidalgoVictoria GerchinhorenXavi PinyolFlorencia RosenfeldMarc TorrentSergi Vélez

Otras contribuciones

Jordi AguilàJonatan CastroCatalina Duque GiraldoRodrigo EncinasEsteban HumetPaula MarquesCatalina PérezMaría Daniela QuirósJure SustercicSeba y Maga

También queremos agradecer a nuestrasfamilias, a Lu por el aguante y a todoslos han estado cerca nuestro en estosmeses, apoyándonos y difundiendo elproyecto.

GRACIAS TOTALES.