Title: Continguts i recursos
Course: CFGS - Disseny i edició de publicacions impreses i multimèdia > Section: Especificacions inicials, arquitectura d'informació i usabilitat d'una app

Continguts i recursos

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
  - dissenyada 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 costosa 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 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 dels diferents app markets.﻿﻿

- Avantatges:
  - Un sol codi produeix múltiples apps
  - Ò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 a 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 una aplicació durant i després d'haver-la fet servir. Per dissenyar i millorar l'experiència general s'ha 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 vostra 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. Dibuixeu el vostre "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. Podeu dibuixar diagrames de flux o fer servir maquetes (mock-ups) per traçar els diferents fluxos. Intenteu que la navegació sigui tan senzilla i intuïtiva com pugueu.

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.
Heu de familiaritzar-vos amb les directrius d'interfície d'usuari (UI guidelines) del sistema operatiu pel qual fareu el desenvolupament. Cada plataforma és un entorn diferent i heu de conèixer 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 tingueu motius de pes per fer el contrari, és millor seguir els mètodes recomanats (teniu 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 vostra 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 vostra 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 ells. Un cop els usuaris coneixen la vostra 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, esteu obligant els usuaris a tornar a aprendre les convencions cada vegada. Si això és el que desitgeu que succeeixi, assegureu-vos 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 vostra aplicació pot semblar molt diferent depenent de la plataforma per a la qual hagi estat dissenyada. Assegureu-vos de què els votres 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. Utilitzeu 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. Feu que tingui un bon aspecte. Si us esteu plantejant fer versions per a diferents plataformes comproveu-ne els requisits de disseny abans, amb la intenció de facilitar-vos 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 vostra idea i interfície és posar-la a disposició dels usuaris reals, tan aviat com sigui possible. No heu d'esperar-vos a tenir un producte acabat i polit. De fet, no hauríeu 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.
Demaneu a algunes persones que interactuïn amb el vostre prototip. Si l'aplicació que esteu dissenyant és un reproductor de música, podeu demanar-los que escoltin una canço. Si no esteu segurs de certes funcionalitats de la vostra aplicació podeu 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́ podeu realitzar sessions de proves a altres aplicacions ja existents. Us sorprendrà de la quantitat de coses que aporten els usuaris sobre la vostra aplicació, coses que potser mai hauríeu 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 apresa, 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 mesurar 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/