Title: Continguts i recursos
Course: CFGS - Gestió de vendes i espais comercials / Màrqueting i publicitat > Section: Disseny d'APPS per a dispositius mòbils

- Introducció a les apps
- Experiència d'usuari - UX
- Arquitectura de la informació
- Usabilitat i prototipatge
- Disseny gràfic
- Comunicació audiovisual

Introducció a les apps

﻿

Aplicacions nadius, web apps i apps híbrides.

Una aplicació nativa és una aplicació descarregable que s'instal·la i executa directament des del telèfon / dispositiu.
- Avantatges:
  - rapidesa
  - dissenyat específicament per al sistema operatiu
  - fàcilment se sent integrada amb la resta de l'interfície del dispositiu
- Desavantatges:
  - més costosa de construir
  - més costós de mantenir
  - audiència més limitada
  - mantenir múltiples versions de l'aplicació en els diferents sistemes operatius de dispositius mòbils és més costós

Una web app és un lloc web que ha estat desenvolupat específicament per ser similar a una aplicació nativa. 
- Avantatges:
  - funciona amb qualsevol dispositiu (Blackberry, iPhone, qualsevol telèfon Android, cap de Windows ... etc)
  - fàcil d'actualitzar i mantenir perquè no hi ha versions per diferents sistemes operatius
  - Utilitza tecnologies web que solen ser de desenvolupament menys costós
- Desavantatges:
  - No és tan polit com una aplicació totalment nativa
  - Requereix connexió web almenys inicial
  - Només pot ser distribuït a través d'Internet - sense xarxa de distribució de cap app market.
  - Emmagatzematge de dades està limitat

Una app híbrida és una aplicació que s'ha desenvolupat utilitzant tecnologies web i després empaquetada en una aplicació totalment nativa. Un cop empaquetada aquesta aplicació es pot descarregar al dispositiu a través de les diferents app markets.﻿﻿

- Avantatges:
  - Un sol codi produeix múltiples app
  - Òptim en equips de desenvolupament ja familiaritzats amb l'entorn web
  - Beneficis similars als de l'aplicació nativa - distribució a través de les botigues d'aplicacions, s'executa en el dispositiu, té accés a totes les funcions del dispositiu
  - funciona amb qualsevol dispositiu (Blackberry, iPhone, qualsevol telèfon Android, cap de Windows ... etc)
- Desavantatges:
  - Potser no 100% tan elegant com una aplicació totalment nativa
  - Possibilitat d'alguns problemes al no ser codi pur "natiu"

Experiència d'usuari (UX)

L'experiència d'usuari és la satisfacció en general que genera un producte (una app en aquest cas)

- Útil - aporta alguna utilitat
- Usable - és còmode d'utilitzar i intuïtiu (usabilitat)
- Desitjable - genera simpatia a nivell emocional (imatges, sons, animacions, etc..)
- Trobable i funcional - l'usuari pot accedir a allò que busca quan vol
- Accesible - a persones amb discapacitats (10% de la població)
- Creíble - genera confiança
- En definitiva i en resum: valuós per l'usuari

Dissenyant Experiència d'Usuari

L'experiència de l'usuari (UX, de l’anglès User Experience) és com els usuaris perceben la teva aplicació durant i després d'haver-la fet servir. Per a dissenyar i millorar l'experiència general has de pensar en el flux d'ús, en les funcionalitats, la interacció i el disseny visual. Com funcionaran, tots junts, a l'entorn de la teva aplicació? S’ha de pensar en els problemes que els usuaris podran tenir mentre facin servir l‘aplicació i mirar de trobar solucions mentre es treballa en el prototip de l’aplicació. Dissenyar no és un procés lineal, de manera que cal repetir i aplicar tot el que es va aprenent a partir de proves d'usuari tan sovint com sigui necessari.

Flux d'usuaris

Algunes aplicacions tenen un flux molt lineal per aconseguir una tasca senzilla (per exemple, una aplicació de la càmera). Algunes poden tenir rutes més interactives. Dibuixa el teu "escenari ideal" on l'usuari comença en un punt A i, després d'una sèrie de passos, acaba en un punt B. Pots dibuixar diagrames de flux o fer servir maquetes (mock-ups) per traçar els diferents fluxos. Intenta que la navegació sigui tan senzilla i intuïtiva com puguis.

Wireframes

Els wireframes (maquetes d'estructura) o mockups (prototips que mostren el "look and feel"), són versions incompletes i senzilles de la interfície. El seu propòsit és capturar les funcionalitats i estructura general de la interfície.
Es poden fer amb llapis i paper o utilitzar una de les eines existents per a la creació de prototips. N'hi ha moltes.
Has de familiaritzar-te amb les directrius d'interfície d'usuari (UI guidelines) del sistema operatiu pel qual faràs el desenvolupament. Cada plataforma és un entorn diferent i has de coneixer les directrius per utilitzar les convencions correctes. Un exemple clàssic és el botó de retrocés a la capçalera de les aplicacions iOS versus el botó de retrocés d'Android, que està sempre visible a la pantalla independentment de l'aplicació que estigui executant l'usuari (de vegades és un botó físic al propi dispositiu). A menys que tinguis motius de pes per fer el contrari, et recomanem seguir els mètodes recomanats (tens els enllaços a les orientacions per a l'alumnat).

Prototipatge

Un prototip és la millor manera de visualitzar i avaluar les interaccions de la teva aplicació.  El prototip es crea abans de gastar temps en el desenvolupament del codi final i de realitzar un disseny acurat amb una precisió a nivell de píxel. Un prototip validat també és una referència útil perquè els equips puguin treballar sense córrer el risc de sortir-se massa del camí marcat.

Disseny visual

Un disseny visual atractiu millorarà l'experiència de la teva aplicació i farà que destaqui entre les demés.
La gestió d’espais i jerarquia visual milloren la usabilitat de la interfície. El disseny defineix els detalls del posicionament dels elements a la pantalla i la seva relació entre si. Un cop els usuaris coneixen la teva interfície d'usuari, aquesta hauria de romandre constant a tota l’aplicació. Per exemple, si el botó principal canvia de color d'una pantalla a una altra, estàs obligant els usuaris a tornar a aprendre les convencions cada vegada. Si això és el que desitges que succeeixi, assegura’t que sigui per una bona raó.
Les directrius o guies de cada plataforma ens poden informar sobre certes decisions d’estil, de la mateixa manera que passava amb el disseny d'interacció als wireframes, Dit això, la teva aplicació pot semblar molt diferent depenent de la plataforma per a la qual hagi estat dissenyada. Assegura’t de que els teus dissenys segueixen les pràctiques recomanades per a l'ús de fonts, icones estàndards i convencions de disseny o estructura gràfica.
El millor és que la marca de l'empresa estigui present a la interfície d'usuari d'una manera no obstructiva. Utilitza el fons, colors de control, i potser certes imatges o altres opcions de disseny per obtenir l'aspecte desitjat. La pantalla d’inici (si n’hi ha) és el lloc on es poden mostrar certs gràfics addicionals.
Finalment, la icona de la pròpia aplicació és el primer element visual pel qual els usuaris la identificaran i avaluaran. Fes que tingui un bon aspecte. Si t’estàs plantejant fer versions per a diferents plataformes comprova’n els requisits de disseny abans, amb la intenció de facilitar-te la tasca de creació del disseny i que aquest pugui ser fàcilment transportat a les diferents plataformes.

Proves d'usuaris

La millor manera de validar la teva idea i interfície és posar-la a disposició dels usuaris reals, tan aviat com sigui possible. No has d'esperar a tenir un producte acabat i polit. De fet, no hauries de fer-ho així. És molt més difícil acceptar comentaris sobre quelcom que considerem gairebé enllestit que acceptar- los en un prototip que podrem actualitzar amb força rapidesa.
Demana a algunes persones que interactuïn amb el teu prototip. Si l'aplicació que estàs dissenyant és un reproductor de música, pots demanar-los que escoltin una canço. Si no està segur de certes funcionalitats de la teva aplicació pots mirar de desviar l'atenció de l'usuari, demanant-los que realitzin tasques invertides, com canviar la pista seleccionada i triar-ne una altra al seu lloc. El més important és moderar, no guiar. També pots realitzar sessions de proves a altres aplicacions ja existents. Et sorpendrà de la quantitat de coses que t'aporten els usuaris sobre la teva aplicació, coses que potser mai hauries pogut ni imaginar.

Arquitectura de la informació

Arquitectura de la informació

Granularitat - Analitzem quina és la unitat mínima d'informació que emmagatzema la nostra app (localitzacions, notícies, dates, events, etc.)

L'arquitectura de la informació és la disciplina que s'encarrega d'organitzar aquestes unitats d'informació per a fer-les trobables per l'usuari.

Sistemes d'organització

1) Esquemes d'organització

- Exactes: Grups ben definits i mútuament excloents:

- Alfabètics
- Cronològics
- Geogràfics - per exemple, la ubicació en un mapa

- Ambigus:

- Tema - el més habitual
- Tasca - organitzem segons la tasca que l'usuari vulgui dur a terme (per exemple, el menú principal d'aquesta pàgina està orientada a tasques)
- Audiència - segons qui hi accedeixi (per exemple, http://www.barcelona.cat/ca)
- Metàfora
- Híbrids - Sistemes potser menys recomanables, poden induïr a confusió.

2) Estructures d'Organització

- Estructura jeràrquica

- Estructura hipertextual (o en xarxa)

- Estructura seqüencial

- Lineal amb jerarquia

Sistemes d'etiquetatge

Quin nom i/o imatge posem a les opcions de navegació

- Textuals
- Icònics

Sistemes de navegació

Els menús de navegació, que poden ser de molts tipus:

1) Sistemes bàsics

- Sistemes integrats

- Constants - o globals; el clàssic menú sempre present)
- Locals - han d'estar correctament articulats amb el constant)
- Contextuals

- Sistemes complementaris (recursos per localitzar informació i per orientar-se que són pàgines pròpies i independents)

- Mapa del lloc
- Índexs
- Guies

2) Sistemes no bàsics

- Sistemes de personalització / customització
- Sistemes de navegació visual
- Sistemes de navegació socials (el més popular, el més comprat, etc.)

Sistemes de cerca

- Reactius
- Proactius
- RSS

Usabilitat i prototipatge

Usabilitat

És la facilitat amb què la gent pot usar una eina o un giny, per aconseguir un objectiu concret. El terme també pot fer referència als mètodes per mesurar la usabilitat i a l'estudi dels principis que doten un objecte d'usabilitat.

La usabilitat, tradicionalment lligada al disseny de panells de control o interfícies per part dels enginyers, s'ha popularitzat amb l'arribada de gran quantitat de dispositius electrònics (mòbils, caixers automàtics, ordinadors, automòbils...) i l'ús de la informàtica (sistemes operatius, programari, pàgines web...). Per fer-los intuïtius i fàcils d'utilitzar, poden requerir disciplines tan diverses com l'enginyeria, la psicologia, el disseny i la comunicació visual, la informàtica, l'etnografia, els estudis de mercat, etc.

La usabilitat permet:

- Més eficiència; amb menys temps es pot acabar una tasca concreta.
- Facilitat d'aprenentatge; el funcionament d'un objecte es pot deduir observant-lo.
- Més satisfacció de l'usuari.

Claus de la usabilitat

- Corba d’aprenentatge - Rapidesa amb què s'aprèn o no a utilitzar la mecànica bàsica de l'app
- Eficiència - un cop après, eficiència amb que els usuaris fan una tasca
- Recordabilitat - Capacitat per recordar-ho al cap d'un temps
- Errors - gestió i prevenció
- Satisfacció

Principis de Nielsen:

- Visibilitat de l'Estat del Sistema - mantenir informats als usuaris del que està passant (barres de càrrega, missatges, etc)
- Relació entre el sistema i el món real - utilitzar el llenguatge dels usuaris
- Control de l’usuari - l'usuari sempre ha de poder tornar enrere, recuperar informació, etc.
- Consistència
- Prevenció errors
- Reconeixement abans que record - que sigui fàcil de fer encara que sigui el primer cop
- Flexibilitat i eficiència d’ús - acceleradors de tasques per usuaris avançats
- Minimalista
- Errors - missatges d’errors han de ser en llenguatge clar i simple i suggerir una solució constructiva
- Ajuda

Avaluació de la usabilitat

Per a medir la usabilitat s'utilitzen diversos mètodes en funció de l'estadi de desenvolupament del projecte:

- Creació de persones i d'escenaris - imaginar hipotètics casos realistes - http://www.uiaccess.com/justask/es/personas.html i http://www.uiaccess.com/justask/es/scenarios_eg.html
- Test heurístic - en fases inicials del projecte - https://en.wikipedia.org/wiki/Heuristic_evaluation i http://www.nosolousabilidad.com/articulos/heuristica.htm
- Test d'usuari - en fases finals - http://thenextweb.com/creativity/2015/04/27/user-testing-explained/

Disseny gràfic

﻿

Disseny

Organització de la informació

- Jerarquia visual
  - Principis Gestalt de la percepció

Recorregut visual

- Centres d'interès - La jerarquia visual defineix uns centres d'interès de la imatge
- Línies de força - línies explícites o implícites en la imatge

El recorregut visual és la resultant de combinar la jerarquia, els centres d'interès i les línies de força  i és el recorregut que fa la vista per una imatge.
Cal utilitzar-la adequadament per conduir els usuaris en el sentit que ens interessa.

Per exemple:

Centres d'interès:

Línies de força:

Recorregut visual:

- Composició - com es combinen els elements gràfics en una imatge
  - Equilibri
  - Simetria
  - Moviment
  - Proporció
  - Ritme

 

Aspectes tècnics del disseny 

- Color RGB i CMYK  - En RGB els colors primaris llum són el vermell, el verd i el blau. Aquests colors s'utilitzen, sobretot, en aparells que combinen la llum emesa per diferents focus lluminosos per a crear la sensació de colors diversos.
En CMYK els colors primaris (pigment) són els que provenen de la reflexió de les ones lluminoses damunt dels objectes i s'empra sobretot en pintura i en impremta, ja que en aquestes disciplines els colors, generalment, no s'obtenen mesclant llums sinó barrejant pigments.

- Resolució d'imatge i mides d’arxiu 
- Formats d’imatge (vectorial i mapa de bits) 
- Formats d’arxius d’imatge 
- Formats d’arxius de vídeo i d’àudio 

 

Wireframes

Ús de la plataforma balsamiq

Comunicació audiovisual

El llibre d'estil

Conjunt de normes i convencions d’un mitjà. Fa entenedor el missatge, unifica l’estil de redacció i dota de personalitat al mitjà.

Defineix temes com ara:

- Regles deontològiques
- Tipografia
- Ortografia
- Colors
- Tipus de llenguatge

 

Normes de redacció per a textos multimedia

A la pantalla, la lectura és un 25% més lenta que en un mitjà escrit.
L'usuari sol ser impacient, escaneja enlloc de llegir. Cal utilitzar textos curts, clars i concisos.

- Titular descriptiu - utilitzem les paraules clau a l'inici
- Conclusions a l’inici (piràmide invertida del periodisme)
- Elements destacats
- Paràgrafs breus i amb una sola idea
- Limitar metàfores, subordinades, etc.
- Ús d’enllaços
- Disseny ha d'acompanyar la jerarquia d’informació desitjada 
- Legibilitat

 

Identitat de marca i imatge de marca

La identitat comprèn els aspectes conceptuals i físics així com les actuacions que una entitat porta aterme per comunicar-se (logotips, web, uniforme dels empleats, locals, etc.)
La imatge és la concepció psicològica que l’usuari té de la marca (si li sembla bona, dolenta, barata, informal, moderna, etc)

- El manual d'identitat corporativa 
- Objectius de la marca / història / introducció
- Simbologia bàsica - logotip i versions / altres elements / colors /tipografies
- Bons i mals usos
- Aplicacions

Elements d'UI (interfície d'usuari)

0. Interactivitat

A banda de teclats i botons, interaccionem amb els dispositius amb gestos:

(Realment n'hi ha moltes més combinacions definides i que encara estan poc explotades)

1. Input

Entrar informació

- Teclats intel·ligents - si per exemple estem en un camp d'entrada de telèfon, el teclat esdevé només numèric
- Autocompletat - evita haver d'escriure-ho tot així com fer alguns errors (per exemple Skype, Google Maps, Google Play Store)
- Lazy signups - permet utilitzar l'app sense haver-se registrat encara. Permet provar l'app abans de registrar-se

- Action bars (toolbar en iOs) - Accés ràpid a funcions freqüents

- Login Social - permet fer log in sense el procés de registre
- Botons grans - ideal per quan els usuaris estan fent altres coses en paral·lel

- Utilitzar els gestos per fer accions - a banda del teclat o els botons, les accions poden simplificar l'accés a algunes funcions

- Controls amagats - Permeten amagar botons secundaris o que només són importants en determinats contexts. Amb algun gest es revelen algunes opcions extres.

- Inputs expansibles - Controls que queden minimitzats fins que l’usuari hi vol accedir (per exemple, la cerca en el youtube)

- Desfés - La opció de desfer permet que l’usuari realitzi accions amb més rapidesa que havent de confirmar cada acció però amb l’avantatge de poder defer l’acció si s’ha equivocat.

Navegació

- Introduccions - a l’iniciar l’app es fa un recorregut per l’aplicació
- Menús desplegables - ocupen poc espai a la pantalla mentre no són desplegats
- Slide entre seccions - navegar entre seccions fent lliscar el dit per la pantalla
- Controls canviants - reemplaçar algunes opcions segons el que estigui fent l’usuari per estalviar espai a la pantalla. Per exemple, si seguim un usuari a twitter tenim la opció de “unfollow” mentre que si no el seguim tenim la opció de “follow”

- Menus estàtics - no es belluguen encara que l’usuari faci scroll. Això fa que sempre estiguin disponibles

- Navegació vertical - afegeix opcions a la navegació per barra d’eines o tool bar

- Pop ups - pantalles que mostren informació rellevant sense que l’usuari hagi de canviar de lloc dins l’app, perdre dades entrades, etc.

- Barres laterals o sidebars - menus secundaris que queden amagats en una barra lateral que llisca sobre el contingut actual o bé el desplaça