Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)

www.izaskunsaez.es @isaezdesign

izaskunsaez.esDiseño Gráfico

Diseño print Diseño web Creatividad

USABILIDAD Y DISEÑO DE APLICACIONES MÓVILES


www.izaskunsaez.es

@isaezdesign

www.linkedin.com/in/izaskunsaez


Usabilidad y estiloal servicio de

una experiencia de usuarioinolvidable


Si nuestra app mola...

www.izaskunsaez.es @isaezdesignIlustración: Igor fernández


Si nuestra appNO mola...

www.izaskunsaez.es @isaezdesignIlustración: Igor fernández


¿Cual es el papeldel diseñador?


Característicasinterfaz

Patrones de usuario

Aspecto generalTexturasColores

Branding

DISEÑO DE APLICACIONES

¿Cómo seinteractuarácon ella?

¿Cuá serásu

aspecto/ESTILO?


Todo empieza por


LA IDEA


http://www.mopapp.com/topapps

Sirve para investigar qué apps se encuentran en el TOP en diferentes países y diferentes

dispositivos.

PREGUNTARTE

QUÉquiero que haga mi app

CÓMOfuncionaría mi app

DÓNDEse usaría principalmente

la app

A QUIÉNse dirige la app

LA IDEA

QUÉquiero que haga mi app

¿Dirigida alentrenimiento?

¿Dirigida a lautilidad?

Diseño más enfocado a lo visual o enfocado a la usabiliadad

LA IDEA

A QUIÉNse dirige la app

Niños Adultos

LA IDEAHombres

Mujeres

LA IDEA

CÓMOfuncionaría/se usará mi app

¿Enmovimiento?

¿De forma más estática o relajada?

El tamaño de los botones o acciones a realizar serán distintos.

¿Para un uso muy ocasional o

más intenso?

¿En compañía?¿Es para disfrutar individualmente?

LA IDEA

DÓNDEse usaría principalmente

la app

¿De noche?¿De día?

¿En lugares con mucha gente?

¿En privado?

¿En ambientes relajados? ¿Al aire libre?

¿En una discoteca?

¿En público?

¿En sitios con conexión

wifi o 3G

¿Qué y cuántatecnología nos rodea?


Pensar en lasconexiones entre

dispositivos puede ayudarte


¿Hacia qué lado se inclina tu idea de

app?


Entretenimiento Utilidad

Vs

Ilustración: Izaskun Sáez


TU IDEAExiste

ya


No pasa nada


INVESTIGAQUE YA ESTÁ HECHO


Y MEJÓRALO


LA IDEA LA EJECUCIÓN


Hay muchas cosas a tener en cuenta


Apps Nativas

HTLM5

Vs


Apps Nativas HTML5Experiencia de usuario más rica y un mejor rendimiento

ACCESO A DISPOSITIVOS Explota al máximo cada una de las presta-ciones integradas en los dispositivos, tales como acelerómetro, calendario, agenda de contactos, audio y vídeo, 3D, y así un largo etcétera.

FACILIDAD PARA GENERAR INGRESOSLas aplicaciones nativas se distribuyen fá-cilmente a través de las tiendas de aplica-ciones como App Store, Android Market, y Amazon Appstore,

FACILIDAD DE DESARROLLO Es más sencillo dar forma al contenido usando HTML y CSS en lugar de las bi-bliotecas nativas de iOS o Android

RAPIDEZ DE DESARROLLOEvaluar y probar su trabajo en tiempo real, creando un ciclo virtuoso de codifi-cación, actualización y repetición.

MENOR COSTE DE DESARROLLO MULTIPLATAFORMA

CONTROL DE LA DISTRIBUCIÓN Y FACILIDAD DE ACTUALIZACIÓN

FUENTE: http://www.businessinsider.com/battle-between-html5-vs-native-apps-2013-55


A qué accede unaAplicación nativa

¿ ¿

Cámarafrontal

MULTITOUCH

CámaraTRASERA

GIROSCOPIOMICROFONO

3G

WIFI

altavoZ

CONEX

IONES

Ilustración: Izaskun Sáez


Ya has pensado mucho y tienes...

TU IDEA


COMENCEMOS


STORYBOARDSe trata de ilustrar en formato de secuencia el uso de la app con la intención de explicar

un ejemplo de uso de la misma


STORYBOARD

¿Para qué sirve esto?Pensar en el diseñode usabilidad de la

App

Detectar mejor elpúblico objetivo de

nuestra app

Pensar posibles

lugares de uso de nuestra app


http://zurb.com


¿Cuál es la idea?

A todos nos gusta aprovechar nuestros

viajes en bus o metro para leer, estudiar...

pero tamboén para dormir, ¡sobre todo

cuando nos pegamos esos madrugones!

¡A todos nos ha pasado!

Aprovechas para echar una cabezadita

en el bus... ¡y se te pasa la parada!.

Llegas tarde a trabjar o a tu casa a última

hora, al instituto...

¡La solución!

Una App que te despierte unos minutos

antes de llegar a tu parada... pero no es

simplemente un despertador, sino que

mediante el uso de la geolocalización y

GPS la App te avisará de forma exacta

ya que detectará tu parada cuando

realmemte esté próxima, teniendo en

cuante retrasos imprevistos.

elige tu transporte

elige tu trayecto

elige tu parada

ÁDespiŽrtame!

Àbus?Àmetro?

ÀBarakaldo-Bilbao?

Àeuskotren?

Casco Viejo

www.izaskunsaez.es

NOMBRE DEL PROYECTO STORYBOARD¡Madrugón!

¡Siempre me quedo dormido y más

de una vez se me ha pasado la parada!

¡Y aún me quedan 30 minutos

de viaje en bus!

Otra vez llegaré

tarde al trabajo ¡Descárgate

Z zALERT!

ZZ

ALERT

Ojalá hubiera algo que me avisase

5 minutos antes de llegar

a mi parada...

¿Y eso cómo

funciona?

ALERT

elige tu transporte

elige tu trayecto

elige tu parada

¡Despiértame!

¿bus?¿metro?

¿Barakaldo-Bilbao?

¿euskotren?

Casco Viejo

La App calculará la duración

del viaje mediante GPS...

25 MIN 5 MIN

Mediante geolocalización la App

sabrá 5 minutos antes de tu parada

que debe despertarte

En ese momento te despertará usando

uno de estos 3 métodos

PIPI PI

Si llevas auriculares con música, la pa

rará

y ¡emitirá un zumbido que te despertará!

ZzAlert

www.izaskunsaez.es

NOMBRE DEL PROYECTO STORYBOARD¡La aplicación solo te avisará cuandoqueden muy pocos minutos parallegar a tu destino!Si LO LLEVAS EN EL BOLSILLOEMITIRÁ UN ZUMBIDO + VIBRACIÓN

Si NECESITAS ALGO MÁS FUERTE PARADESPERTARTE UNIREMOS:ZUMBIDO+VIBRACIÓN+TIMBRE DE LLAMADAPI PI PI

¿Y qué pasa si se retrasa la hora dellegada a mi parada porque hay tráf icoo por lo que sea?

¡Genial!

¡Con Z zAlert, aprovecha el viaje paradormir sin miedo a pasarte tu parada!

ALERT

¡Con llegarás a tiempo altrabajo y podrás dormir esamedia horita en el bus!

ALERT

No tendrás que estar pendientede la parada porque Z zAlertrecalculará la llegada constántemente

ZzAlert


LOS MOCKUPSPlasmar en un papel ya sea a mano o de

forma digital el esquema y funcionalidades de la nueva app.


la mejor manera de empezar es con

Personalmente creo que...

papel y lápiz


http://www.codeproject.com/Articles/111949/Excerpt-from-De-signing-the-iPhone-User-Experience


dribbble.com

iPhone App por Jake Nicolella en Behance


pinterest.comImagen byFernando Guillen

NOMBRE DEL PROYECTO

ESPECIFICACIONES

Mockup 12:00 PM

ESPECIFICACIONES

Mockup 12:00 PM

ESPECIFICACIONES

Mockup 12:00 PM

ESPECIFICACIONES

Mockup 12:00 PM

www.izaskunsaez.es


Más rapidéz (dibujar-borrar-dibujar)

Lo ideal: hacerlo junto con el cliente

Es el BOCETO PREVIO al mockup digital

VENTAJAS DEL PROTOTIPADO EN PAPEL...


pulir los mockupde forma

después...

digital


http://businessofsoftware.org/2012/10/bos-

2012-workshop-team-misfit-toys-output/


Xcode


SVOY app design

http://www.behance.net


Visto enPinterest


nuestro esquemade uso de la app...

Una VEZ TENGAMOS CLARO...

vamos con el diseño


Conocer ALGUNOS DATOS os daráuna visión de la

importancia del diseño de una app


En Juliode 2013

la App Store cumplió años 5


60mil millones de descargas reali-zadas (Octubre

2013)

mil millones de descargas

realizadas (Marzo 2012)

1.000.000

600.000

aplicaciones en el Apple Store

aplicaciones en el Apple Store

25año

año

2012

2013

http://appleweblog.com


Cada segundo que pasa, 800 aplicaciones salen de los servidores de Apple para instalarse en un

iPhone o un iPad

Fuente: http://www.lavanguardia.com

http://www.lavanguardia.com/tecnologia/20130710/54377379926/app-store-apple-cumple-cinco-anos-creado-nueva-industria.html


+ de 400.000aplicaciones que no se han descargado ni

una sola vez

En la App Store hay


Yo no quiero ser una de esas...

vamos a hacerque nosdeseen


No hay una segunda oportunidad

para causar una buena primera impresión{ {


DISEÑO VISUAL YATRACTIVO


La app Store es como un gran escaparate en la que destacar y presentar un diseño atractivo puede ser determinante, empezando

por su ICONO

Si tenemos en cuenta la ENORME COMPETENCIA

Tendrás que tener DAR IMPORTANCIA el diseño


¿ por qué es tan importante el diseño de un buen icono?


PORQUE ES NUESTRA TARJETA DE

PRESENTACIÓN

PORQUE ACTÚA COMO PEQUEÑORECORDATORIO

PARA QUE UTILICE LA APP

¡Soy unaApp

que molo mucho!

¡eh!¡estoy aquí!


REGLAS BÁSICAS

PARA EL DISEÑO DE UN BUEN ICONO


EL TAMAÑO

SÍ IMPORTA


DISEÑO QUE FACILITE SU VISUALIZACIÓN ENTRE EL RESTO DE TODOS LOS ICONOS.


CONSEJOCUANTOS MENOS ELEMENTOS

MEJOR


COSASIMPORTANTES

A TENER EN CUENTAPARA EL DISEÑO DE UN ICONO


El icono de la aplicación debe tener un diseño atractivo y amigable para llamar la atención del

usuario

Un icono mal diseñado, desagradable visualmente o que no se entiende lo que ofrece puede ser decisivo a la hora de que que el usuario decida descargarlo.


El icono de una app tiene que verse bien en diferentes tamaños y sobre

diferentes backgrounds


El icono de una app aporta unainformación inicial al usuario

Los usuarios de iphone o iPadquieren tener cosas

agradables en sus dispositivos

un diseño correctovisualmente y atractivo

un mejor funcionamiento de la app y más fiabilidad


PARA ESTO...


Un icono con texto será ILEGI-BLE y quedará con un ASPEC-TO BORROSO O DE MANCHA cuando lo veamos en nuestro escritorio.

Para solucionar este problema opta por el Uso de una Inicial o como mucho unas siglas o en su defecto utiliza una imagen facilmente re-conocible y memorizable.

Texto en el icono


El uso de formas reconocibles y de tamaño adecuado permitirá que el

usuario reconozca el contenido de la App


El color no es solo esto


Escoge una paleta de colores reducida donde haya un color protagonista

esto creará idea de marca


www.colourlovers.com

En este site encontraréiscientos de paletas de colores.


el color PROVOCA SENSACIONES


¿Qúe aplicación creéis que dará más luz?


El color es mucho más llamativo y las formas son redondeadas,

además son formas poco complejas

para que su reconocimiento sea

más rápido. Ideal para niños.

La austeridad en el uso del color y el realismo de la imagen del icono crean una imagen global que se dirige totalmente a un público adulto.


Pero en todohay excepciones


2

1A Tener en cuenta:- Tamaño del dispositivo

Debemos vigilar el uso del color, si nos vamos a dirigir a un público adulto nos decantaremos por colores más serios u oscuros y si nos diri-gimos a niños optaremos por una paleta más viva y colorista.

El tamaño

El Color

3Elegir las formas que compron-drán nuestro icono, sin querer meter un exceso de información, ten en cuenta que tu app ya irá incluida en una categoría dentro de la tienda (App Store) así que no hace falta que en icono repre-sentemos absolutamente todo lo que ofrecemos. QUEDAOS CON EL CONCEPTO Y RECORDAD MENOS SIEMPRE ES MÁS (o casi siempre)

La gráfica

En resumena tener en cuenta

4Diferenciaos, destacad, los dispositivos móviles son un pequeño escaparate y nosotros cada vez tenemos menos tiempo (y pacien-cia) así que o nos ven o no existimos.

A veces hay que romper con todo

*

*


TODOlo anteriorse aplica

a lainterfaz

de usuario

USABILIDAD


Debemos pensar en el entorno y formas de uso de una App


Vs

Tamaño de la pantalla


FORMA DE interactuar

Vs


FORMA DE USO

imagen thinkstock

http://www.leadpile.com

Vs


http://freshpeel.com/2012/06/where-do-people-check-their-mobile-phones/


Todos estos aspectos hay que tenerlos presentes

a la hora de pensar el diseño de una app


El usuario de una Appno miraOJEA


Menos pasos para realizar una acción

Mayor y mejor visibilidad de los elementos

Elementos táctiles fácilmente seleccionables

Contenido útil abusar de información=


Vamos a centrarnos enalgunas cosas

concretas


EL TEXTOsiempre tiene que ser

legible

EL TEXTOsiempre tiene que ser

legible


1

2

La tipografía

La disposición del texto

La tipografía “verdana”, helvética y otras tipografías “sin serifes” son las que consiguen una lectura más rápida.

Texto enriquecido (títulos, subtí-tulos, destacados...etc) facilita la lectura al usuario.

Texto en peso regular o medium(nunca light o thin porque se pier-den los contornos).

Hola HolaVs

http://nathanbarry.com/app-design-handbook/

https://developer.apple.com/library/ios/documentation/userexperience/


3

4

El tamaño del texto

No abuses de tipografías

Por defecto el texto de párrafo (body) es de 34 ptNunca debe bajar de los 22 ptHabrá que controlar el interlineado e interletrado para una legibilidad óptima


5 Contraste texto-fondoEl texto color negro sobre fondo blanco resulta más “có-modo” de leer. Se puede poner para evitar demasiado contraste debido al propio brillo de la pantalla un negro al 5% para el fondo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet blandit viverra. Ves-tibulum eu magna id mauris cursus pellentesque eu ac erat.

Lorem ipsum dolor sit amet, con-sectetur adipiscing elit. Sed imper-diet blandit viverra. Vestibulum eu magna id mauris cursus pellentes-que eu ac erat.

Con 5% de negro en el fondo

Negro al 100%Sobre blanco.


iOS Fontspágina donde encontrareis las fuentes que usa apple por defecto

App FontsFontspring. Para buscar más tipografías.

How Much Does It Cost To Use A Font In My iOS Appen Dinosaurs With Lazerz escrito por Craig Rozynski donde os hablará sobre el coste de comprar una fuente para vuestra app.

developer.apple.com/library/ios/documentationGuía oficial de Apple sobre iOS Human Interface Guidelines


MÁS COSAS A TENER EN CUENTA


3

4

Imágenes

Botones y menú

1 Los númerosMostrar los números como nú-meros, a los usuarios les resulta-rá muchos más fácil e inmediato reconocerlos.

2 Frases cortas Como ya hemos comentado, la interfaz que contenga una canti-dad significativa de texto debe-rá tender hacia las frases cortas ya que los usuarios “usan cortos tiempos de atención” por lo que si se muestra un texto farrago-so seguramente les ahuyentare-mos.

Las imágenes grandes reciben más atención, siempre que sea posible utilizaremos imágenes donde se vea claramente los detalles y la informa-ción.

Lo aconsejable es que sean senci-llas, limpias y amigables.

Trabajar con formato PNG de 24 bits

Diseño: Tendremos que dedicarle tiempo puesto que suponen el co-rrecto uso de nuestra aplicación.

Ubicación: A ser posible se coloca-rán en la parte inferior de la interfaz ya que estarán más accesibles.

Tamaño: que podamos pulsarlo con la mayor comodidad posible y que sean bien visibles.


7 Espacio en blancoNo es necesario ni aconsejable llenar todos los huecos y esquinas de la página, los sitios con demasiado contenido tienden a ser molestos.

Deja espacios visuales límpios para no agobiar al usuario y provocar su abandono.

Como se suele decir en diseño:

¡Dame aire!


LAUNCH IMAGES

No te quedes

en negro


es lo que se muestra detu app

mientras se estácargando


Ejemplo Splash Screens / Launch Images

zZzlert


Volvemos a la App Store


Ejemplo de proceso de un proyecto


Nombre de usuario

Nombre de usuario

¿Has olvidado tu contraseña?WQ E R T Y U I O P

SA D F G H J K L

Z X C V B N M

.@space123 return

Zlert

Facebook

Twitter

Regístrate

Zlert

IZAS 11:56 AM

IZAS 11:56 AM

Volver EntrarRegistro

Elige tu trayecto

IZAS 11:56 AM

CercanoTu cuentaFavoritos Buscar Updates

Volver Tu trayecto

¿De dónde sales?

¿Cual es tu parada?

Viajas en metro

Busca tu parada

Siguiente

IZAS 11:56 AM


Volver Tu Zalert

34min.

IZAS 11:56 AM


Volver Tu Zalert

IZAS 11:56 AM


Volver Tu transporte

Tranvía Metro

Cercanías Cercanías

Elige tu transporte


PALETA DE COLORES BÁSICA


zZzalert - alarma con geolocalización para no dormirte en el autobús, metro o tranvía.

Login with Facebook

Login with Twitter Metro

Elige tu ruta


Pero el trabajo de un diseñador no

acaba ahí...


Diseño dentrode la estrategia

de Marketing

Diseño redessociales

Diseñooff line

DiseñoLanding o site

de la App

Y lo quesurja...


Vamos a cambiar un poco de tercio...


Seguimos con más cosas a tener en

cuenta...


El filtro deApple


http://www.businessinsider.com/heres-why-it-really-sucks-to-be-an-app-reviewer-for-apple-2012-7#ixzz1zaB9ki4H

1. Nada de contenido para adultos.2. Hay muchas aplicaciones de desarrolladores serios y profesionales, y no quere-

mos que sus programas no estén con aplicaciones hechas por amateurs. Si has hecho una aplicación en pocos días, rápido y simplemente para que tus amigos te sorprendan, será rechazada de la tienda.

3. No necesitamos más aplicaciones de pedos. Textual del PDF, señores.4. No es que en Apple seamos maniáticos del control, sino que estamos compro-

metidos con que los usuarios disfruten de la mejor experiencia de usuario con las aplicaciones.

5. ¿Emuladores escondidos en aplicaciones con otra descripción? Rechazada.6. ¿Clones repetidos de otras aplicaciones que ya fueron rechazadas? También

rechazadas.7. Nada de frameworks de terceros para navegar por la web.8. Aplicaciones muy parecidas en diseño a cualquier promoción de Apple o

con nombres parecidos a los productos de Apple, automáticamente rechazadas.9. Nada de widgets o algo parecido en el iOS.10. Aplicaciones con contenido generado por usuarios que pueda ser ofensivo

(como Chatroulette, por ejemplo), rechazadas.11. Las aplicaciones que compartan archivos de forma ilegal, rechazadas.

En 2010 Apple reveló sus guías de aprobación de aplicaciones


“creemos que tenemos la responsabilidad moral de mantener el porno fuera del iPhone. Las personas que quieran porno pueden comprar un teléfono Android”.

Steve Jobs

Esta frase se la dijo a un cliente de Apple que envió un e-mail a Steve Jobs quejándose del control moral que ejerce Apple en este proceso de revisión.


Apple elimina la aplicación de 500px ya que puedes encontrar imágenes de contenido sexual

http://www.applesfera.com/aplicaciones-ios-1/apple-elimina-la-aplicacion-de-500px-ya-que-puedes-encontrar-imagenes-de-contenido-sexual

Enero 2013


4+ / No contiene material desagradable.

9+ / Puede contener situaciones leves o infrecuentes de violencia realista, fan-tástica o en dibujos animados y contenido sugestivo, maduro o de terror que puede no ser apropiado para menores de 9 años.

12+ / Puede contener lenguaje no apropiado leve o infrecuente, violencia realis-ta, fantástica o en dibujos animados frecuente, y contenido maduro o su-gestivo leve o no frecuente, y juegos de azar simulados que pueden no ser apropiados para menores de 12 años.

17+ / Puede incluir contenido maduro, sugestivo o de terror intenso y frecuente; más contenido sexual, alcohol, tabaco, y drogas que puede no ser apropia-do para menores de 17 años. Los consumidores deben tener al menos 17 años para comprar aplicaciones con esta clasificación. Siempre que una aplicación con esta clasificación sea descargada, se mostrará un mensaje preguntando si el usuario tiene 17 años o más.

http://blog.staffcreativa.pe/desarrollo-aplicaciones-ios-apple/

Desarrollo de Aplicaciones para iOS – Guía Básica


http://en.wikipedia.org/wiki/IOS_app_approvals

http://applicantes.com/apple-proteccion-ninos-nuevas-directrices-apps/

http://www.applesfera.com/apple/mas-transparencia-apple-revela-sus-guias-de-aprobacion-de-aplicaciones-y-crea-un-consejo-de-revision-de-aplicaciones

Más transparencia: Apple revela sus guías de aprobación de aplicaciones y crea un consejo de revisiones

http://www.imaginanet.com/blog/como-subir-apps-a-apple-store.htmlComo subir apps a Apple Store

Apple busca proteger a los niños mediante nuevas directrices sobre las apps infantiles

iOS app approvals

Apple modifica algunas normas de revisión para las aplicaciones de sus tiendas

Es hora de que la App Store mire a los juegos con otros ojos

Trabajar en Apple revisando aplicaciones para la App Store no mola nada (y no adivinaríais el motivo)

http://www.applesfera.com/curiosidades/trabajar-en-apple-revisando-aplicaciones-para-la-app-store-no-mola-nada

http://www.applesfera.com/app-store-1/apple-modifica-algunas-normas-de-revision-para-las-aplicaciones-de-sus-tiendas

http://www.applesfera.com/aplicaciones-ios-1/es-hora-de-que-la-app-store-mire-a-los-juegos-con-otros-ojos


En la web veremos un gráfico que nos dice cuántos días se está tardando en el último mes en revisar las Apps

http://reviewtimes.shinydevelopment.com/

Hay muchoque leer ...


ivomynttinen.com/blog/

Un blog muy interesante dobre diseño en IOS7


developer.apple.com/library/ios/design/index.html#//apple_ref/doc/uid/TP40013289


Resoluciones & especificacionesExtraído de: http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/


App Icons


User Interface


Tipografía


www.idev101.com/code/User_Interface/sizes.html


taybenlor.com/2013/05/21/designing-for-ios.html


Densidad de pantalla


px dpVspíxeles por pulgada puntos por pulgada


Un factor a tener en cuenta es la densidadde la pantalla.

Esta se refiere a la cantidad de píxeles que entran en un determinado espacio físico y se mide en

puntos por pulgada


La densidad de la pantalla, se mide de forma distinta según el sistema operativo.

Cuantos más píxeles o puntos caben en una pantalla, mayor será la densidad de la misma y su resolución.


iOS solo cuenta con dos densidadesretina y no retina


Algunas herramientas para saber la

Densidad de pantalla


http://www.teehanlax.com/blog/density-converter/


Conversor pixel densidad en App Store


http://www.adwe.es/diseno-web-2/diseno-para-dispo-sitivos-moviles-y-la-densidad-de-pantalla

Diseño para dispositivos móviles y la densidad de pantalla


...etc

Aprender es algo contínuo

¡Gracias!

www.izaskunsaez.es

@isaezdesign

www.linkedin.com/in/izaskunsaez

izaskunsaez.esDiseño Gráfico

Diseño print Diseño web Creatividad

[email protected]: isaezdesign

Agradecimiento especial a Igor Fernández por las ilustraciones.

Su Twitter: igor_f_f

Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)

Design

Transcript of Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)