Usabilitat en aplicacions mòbils i d'escriptori

1. Diferències entre el disseny d'aplicacions mòbils i d'escriptori

Quan es tracta de dissenyar aplicacions mòbils en comparació amb les d’ordinador d’escriptori, hi ha algunes consideracions importants a tenir en compte. Tot i que hi ha uns principis de disseny generals que s’apliquen a tots dos casos, trobem algunes diferències notables que requereixen una atenció especial.

Cal no confondre el dispositiu de visualització, des d’on la persona usuària accedeix i interactua, amb les funcionalitats exclusives que permet el programari del dispositiu. Mentre que una part important d’aplicacions a les que ens referim quan parlem d’ordinador d’escriptori són web (es visualitzen sobre un navegador), per mòbil poden ser aplicació nativa del propi sistema operatiu (instal·lades directament al dispositiu mòbil) a més de web.

Els web preparats per accedir tan des d’escriptori com des d’un mòbil es diuen “responsive o adaptatives” perquè s’adapten a les diferents resolucions de les pantalles d’accés que els permet el navegador.

Dins dels web “responsive o adaptatives” cal diferenciar també el concepte “Mobile First”. Es dona aquest qualificatiu als webs que han estat dissenyats pensant primer en el seu ús des d’una pantalla petita i per ser interaccionada principalment amb els dits “taps” en comptes del ratolí “clics”.

Amb tot aquest escenari i per donar la millor experiència d’ús a totes les persones usuàries hem de seguir unes bones practiques d’inclusivitat, a l’hora de dissenyar una aplicació cal aplicar els principis més restrictius. És a dir, si es un web que es podrà accedir tan des d’ordinador d’escriptori com des de dispositiu mòbil aplicarem les recomanacions de dispositiu mòbil, tant si hem decidit que el nostre web sigui “Mobile First” o no.

1.1. Mida i resolució de la pantalla. Espai limitat

Les pantalles dels dispositius mòbils són considerablement més petites que les dels ordinadors d’escriptori. Això significa que hem de ser més selectius amb els elements que incloem en la interfície mòbil i assegurar-nos que cada element sigui rellevant i útil. La manca d’espai també implica que hem d’utilitzar dissenys i mides de font adequats per garantir una experiència llegible i còmoda a la persona usuària.

Per a text normal i cos de text, una mida de font de 16 punts i mínima de 14 punts (o SP en Android) proporcionen una bona llegibilitat en dispositius mòbils. Per a títols o encapçalaments, es suggereix una mida de font d’almenys 18 punts (o SP).

1.2. Interacció tàctil en dispositius mòbils

A diferència de les aplicacions d’escriptori, les aplicacions mòbils es controlen principalment a través de pantalles tàctils. Això significa que hem de tenir en compte els gestos tàctils i els controls intuïtius en el disseny de l’aplicació mòbil. Hem de garantir que els elements interactius siguin prou grans i espaiats perquè la persona usuària pugui tocar-los fàcilment amb els dits.

1.3. Context d'ús

Les aplicacions mòbils solen utilitzar-se en un context de mobilitat i en situacions ambientals molt diverses, el que implica que les persones usuàries poden tenir diferents necessitats i objectius en comparació amb l’ús d’una aplicació d’escriptori. Hem de comprendre el context d’ús mòbil i adaptar el disseny perquè s’ajusti a les necessitats i limitacions d'elles en moviment.

Per aquest motiu, és fonamental fer un disseny inclusiu i seguir les bones practiques d’accessibilitat WCAG2.0 com a mínim el nivell AA. En un context d’ús concret de mala il·luminació, excés de soroll, estar fent una altra cosa en paral·lel, entre d'altres. Tots nosaltres podem estar situacionalment, temporalment o permanentment incapacitats per una determinada interacció. Es diu que “si resols una situació per una persona que no té braç, estàs a l’hora resolent per una persona que s’ha trencat un braç o per una altra que porta una criatura a coll o el cistell de la compra”.

1.4. Funcionalitats i restriccions

Certes funcionalitats poden estar disponibles només en una plataforma específica. Per exemple, algunes característiques poden dependre dels sensors i capacitats úniques dels dispositius mòbils, com ara la ubicació GPS, la càmera o els acceleròmetres. També hem de tenir en compte les restriccions tècniques i de rendiment dels dispositius mòbils, com ara la mida de l’arxiu de l’aplicació i el consum d’energia.

En relació al consum d’energia i per certs beneficis visuals en determinades persones usuàries, és important considerar dissenyar també el "dark mode" de la aplicació i assegurar-se que la qualitat visual és equivalent a la versió clara.

1.5. Elecció entre aplicacions natives i aplicacions web

Comparació entre aplicacions natives i aplicacions web:

Aplicació nativa:

Ofereix una interfície centrada en la persona usuària i una bona experiència general. Proporcionen una sensació coherent amb la resta d’aplicacions del dispositiu.
Ús de llenguatges de programació natius i eines específiques de cada plataforma en el procés de desenvolupament
Rendiment optimitzat, més ràpid i fluid.
Accedir a característiques de maquinari i nadiues del dispositiu, com la càmera, GPS, els sensors i notificacions push.
Permetre l'accés a certes funcions sense tenir una connexió a Internet activa. Útil en situacions amb connectivitat limitada o intermitent.
Requerir a les persones usuàries que es descarreguin actualitzacions i depenen de les botigues d’aplicacions.
Poden tenir restriccions en la monetització a causa de les polítiques dels fabricants dels dispositius.
Són més eficients i ràpides, però més cares de desenvolupar.

Aplicació web:

Funcionen en diferents dispositius a través d’un navegador web.
Ús de llenguatges web estàndard i eines generals en el procés de desenvolupament.
Tenen un accés limitat a característiques natives del dispositiu.
Les actualitzacions es realitzen manualment i no depenen de les botigues d’aplicacions.
Poden monetitzar-se a través d’anuncis i altres mitjans.
Poden tenir major costos de manteniment a través de múltiples plataformes i manquen d’una autoritat reguladora específica.

En conclusió, l’elecció entre aplicacions natives i aplicacions web depèn de factors com l’experiència d’usuari desitjada, el pressupost, l’accés a característiques del dispositiu i l’eficiència requerida. També és possible desenvolupar tots dos tipus d’aplicacions per a aprofitar els seus respectius avantatges.

2. Disseny d'aplicacions mòbils Android vs iOS

En el disseny d’aplicacions mòbils per Android i iOS, ambdós sistemes tenen les seves pròpies directrius de disseny d’interfície d’usuari: les Directrius d’Interfície Humana per a iOS i Material Design per a Android. Aquestes directrius proporcionen recomanacions detallades sobre com abordar el disseny de la interfície.

Hi ha diferències natives de sistema operatiu en aspectes com la tipografia, la navegació i les funcions de cerca, entre d'altres, que els dissenyadors d’aplicacions mòbils han de tenir en compte a l’hora de dissenyar per a cada plataforma. Per usabilitat i eficiència en el desenvolupament, sempre que sigui possible es recomanable seguir les recomanacions natives i els estàndards de cada plataforma.

A l’hora de fer els lliurables als desenvolupadors, és important tenir en compte les diferències en les resolucions dels dispositius i exportar els recursos de disseny en les resolucions adequades.

2.1. Material Design d'Android

L’ús de Material Design d’Android per a dissenyar una aplicació mòbil té avantatges destacables.

2.1.1. Consistència

Material Design proporciona directrius de disseny coherents i un llenguatge visual unificat per a les aplicacions d’Android. Això significa que la nostra aplicació seguirà les convencions de disseny establertes per Google, oferint una experiència consistent a les persones usuàries d’Android i ajudant-los a familiaritzar-se ràpidament amb l’aplicació.

2.1.2. Components i patrons de disseny predefinits

Proporciona una àmplia gamma de components i patrons de disseny predefinits, com ara botons, targetes, barres d’eines i menús desplegables. Aquests elements predefinits faciliten la creació d’interfícies consistents i funcionals, estalviant temps i esforç en el procés de disseny.

2.1.3. Disseny responsiu i adaptatiu

Material Design està dissenyat per adaptar-se a diferents mides de pantalla i dispositius, garantint que la nostra aplicació tingui un bon aspecte i funcioni bé en una varietat de dispositius Android, des de telèfons intel·ligents fins a tauletes. Això proporciona una experiència d’ús fluïda i consistent entre diferents dispositius.

2.1.4. Implementació fàcil i documentació

Google proporciona una àmplia documentació i recursos de disseny per ajudar a implementar Material Design a l' aplicació. Això inclou guies detallades, exemples de codi i llibreries de disseny que faciliten l’adopció dels principis de Material Design a l'aplicació.

2.1.5. Compatibilitat amb característiques d'Android

Material Design s’integra perfectament amb les característiques i funcionalitats d’Android, com ara les notificacions, les transicions i les accions tàctils. Això ens permet aprofitar al màxim les capacitats de la plataforma Android i proporcionar una experiència d’ús coherent amb altres aspectes del sistema operatiu a la persona usuària.

2.2. Directrius d'interfície humana per a iOS

L’ús de les directrius d’interfície Humana per a iOS, per dissenyar una aplicació mòbil. En els punts següents recollim els avantatges.

2.2.1. Consistència

Las directrius proporcionen orientacions clares i coherents sobre com ha de ser el disseny d’una aplicació perquè sigui consistent amb l’estil i l’experiència d’iOS. Això ajuda a crear una experiència d’ús familiar i cohesionada a totes les aplicacions d’iOS a les persones usuàries.

2.2.2. Usabilitat

Las directrius estan dissenyades tenint en compte les millors pràctiques d’usabilitat i accessibilitat. Seguint aquestes directrius, es poden crear interfícies fàcils d’utilitzar, intuïtives i accessibles, millorant l’experiència i facilitant la interacció amb l’aplicació a la persona usuària.

2.2.3. Estètica

Las directrius de disseny d’iOS ofereixen orientacions detallades sobre elements visuals, com ara tipografia, iconografia i disseny de botons. Seguint aquestes directrius, es pot aconseguir una aparença atractiva i professional per a l’aplicació, la qual cosa contribueix a generar confiança i atractiu visual per a totes les persones usuàries.

2.2.4. Actualitzacions i compatibilitat

Les directrius d’interfície humana s’actualitzen regularment per part d’Apple per reflectir els canvis a les versions d’iOS. Seguint aquestes directrius, s’assegura que l’aplicació estigui actualitzada i sigui compatible amb les versions més recents d’iOS, proporciona una experiència més fluida per a les persones usuàries i evita problemes de compatibilitat.

2.2.5. Aprovació de l'app Store

Seguint les directrius de disseny d’iOS, s’augmenta la probabilitat que l’aplicació sigui aprovada i acceptada a l’app Store d’Apple. Això és important per garantir la disponibilitat i distribució de l’aplicació a les persones usuàries d’iOS.

3. Disseny i usabilitat en entorns mòbils

Els principis d’usabilitat i disseny per dissenyar una aplicació mòbil (Android i iOS) són una guia general i es poden adaptar segons les necessitats i característiques específiques de la nostra aplicació mòbil. La usabilitat i el disseny efectiu són processos iteratius, per la qual cosa és important recopilar els comentaris de les persones usuàries i realitzar millores contínues al llarg del temps.

3.1. Consistència

La coherència és un element essencial en una interfície mòbil de qualitat. És important dissenyar una experiència intuïtiva que sigui fàcil d’entendre i utilitzar. Això contribueix a crear una aplicació atractiva i agradable per a les persones usuàries.

3.2. Prioritzar el contingut

Hem de destacar el contingut principal, utilitzar menús desplegables i evitar elements que distreguin. Menys és més en pantalles reduïdes.

3.3. Disseny i navegació intuïtius (familiaritat)

L’objectiu és simplificar el procés i garantir que sigui fluid per a la persona usuària:

Evitar salts innecessaris entre pàgines o aplicacions.
Navegar per l’aplicació sense necessitat d’explicacions addicionals.
Seguir patrons de disseny reconeixibles per a una interacció ràpida i familiar.
Utilitzar una navegació clara de pocs nivells amb icones i etiquetes descriptives, prioritzant les opcions importants.
Incorporar gestos tàctils comuns per millorar l’experiència de navegació.

Alguns consells:

Mantenir la navegació visible en tot moment
Utilitzar components estàndard
Mantenir la coherència: mantenir un únic patró de navegació a tota l’aplicació
Permetre que la persona usuària sàpiga on es troba. Tenir visible en tot moment el lloc actual en la navegació

3.4. Mida adequada

Els elements clicables han de tenir una mida prou gran perquè les persones usuàries puguin tocar-los fàcilment amb els seus dits sense dificultat. Es recomana una mida mínima de 44 x 44 píxels com a punt de referència. No obstant això, hem de tenir en compte que això pot variar segons la densitat de píxels de la pantalla i l’audiència objectiu. Per a pantalles de major densitat, és possible que considerem mides lleugerament més grans.

3.5. Espaiat adequat

A més de la mida dels elements, és important tenir en compte l’espaiat entre ells. Hem de deixar prou espai entre els elements clicables per evitar tocs accidentals i perquè les persones usuàries puguin seleccionar fàcilment l’element desitjat sense tocar altres per error.

3.6. Contingut de text llegible

La clau d’una bona tipografia per a dispositius mòbils és la seva llegibilitat. Cal tenir en compte:

Escollirem un tipus de lletra familiar per a les persones usuàries de la plataforma (per exemple Roboto per a Android o San Francisco per a iOS)
Recomanem una mida de lletra de 16px, encara que això pot variar segons el tipus de lletra.
Assegurem-nos que hi hagi suficient contrast entre la lletra i el fons perquè el contingut sigui llegible, evitant combinacions amb poc contrast que dificultin la lectura, especialment en dispositius utilitzats a l’aire lliure.
Tenir en compte l’espaiat entre línies, que millora l’experiència de lectura.

3.7. Objectius fàcils d'assolir

Col·locarem els elements clicables en àrees de la pantalla que siguin fàcils d’assolir amb el polze de la persona usuària. Això generalment significa col·locar els elements prop de la part inferior de la pantalla, on els polzes solen estar quan subjecten el dispositiu mòbil.

3.8. Precisió en la detecció tàctil

Tindrem en compte que els dits d’una persona usuària no són tan precisos com el punter d’un ratolí. Ens assegurarem que els elements clicables siguin prou grans perquè es puguin prémer amb precisió, fins i tot si no pressionen exactament al centre de l’element.

3.9. Proporcionar control a la persona usuària

La persona usuària ha de sentir que controla la seva experiència amb l'aplicació. Cal donar-li l’opció de poder controlar les notificacions, canviar la configuració, cancel·lar accions, entre d'altres.

3.10. Simplicitat

Una aplicació mòbil ha de ser senzilla i fàcil d’utilitzar. Les persones usuàries han de poder comprendre ràpidament com navegar per la interfície i realitzar les accions desitjades sense confusions.

3.11. Feedback visual

Proporcionar retroalimentació visual per a les accions de la persona usuària. Per exemple, en tocar un botó, és útil que canviï d’aparença per mostrar que ha estat premut. També és útil mostrar indicadors de càrrega, confirmacions d’èxit o missatges d’error perquè sapiguen què està passant a l’aplicació.

3.12. Jerarquia visual

Utilitzar una jerarquia visual clara per guiar a través de l’aplicació i ressaltar la informació important. Utilitza mides de lletra, colors i espaiat per destacar elements clau i assegurar que la informació es presenta en un ordre lògic.