Disseny d'interfície d’un producte multimèdia interactiu

En una primera fase del disseny de la interfície per a un producte multimèdia s’han d’identificar els requisits i els objectius de l’aplicació, així com les característiques, les necessitats, els requisits i els objectius de l’audiència potencial. També cal analitzar el model actual i buscar referències similars.

Aquest procés d’anàlisi consta de dos passos:

• Interpretació d’especificacions i documentació del projecte
• Test de referència

El primer que cal fer és definir, juntament amb el client, el que cal fer. Per això s’han de fer totes les reunions necessàries i recollir tota la informació possible per evitar possibles malentesos futurs.

La definició dels objectius generals d’una aplicació resulta fonamental per guiar el procés posterior de desenvolupament i obtenir els resultats i metes que es desitgen. La declaració d’objectius ha de ser específica, no pot ser una afirmació ambigua en la qual freqüentment es confonen intencions amb els objectius en si.

La identificació dels objectius principals d’una aplicació generalment l’especifica el client, encara que en alguns casos és necessari ajudar-lo per aclarir-los amb les preguntes adequades.

La definició dels requisits tècnics marca les característiques que l’aplicació ha de complir pel que fa a entorns de visualització, dimensions, gestió de continguts, connectors (plugins) o complements necessaris, velocitat de connexió, etc.

El tipus de suport de l’aplicació també és determinant. El disseny d’un lloc web, d’una aplicació distribuïda en CD o en un punt d’informació fix no poden ser iguals.

Per exemple, molts usuaris, encara avui, tenen problemes en el procés de descàrrega d’informació d’internet, especialment si es navega des d’un dispositiu mòbil. Si el web està destinat al gran públic ha de ser necessàriament més lleuger que si va adreçat a un grup d’usuaris limitat i definible, dels quals se sap que disposen de més recursos tècnics. En un punt d’informació, d’altra banda, no se sol utilitzar el ratolí com a eina d’accés a les dades sinó que hi ha altres sistemes. El més utilitzat és la pantalla tàctil, on les opcions de navegació es controlen mitjançant pulsacions dels dits, menys precises que el punter del ratolí. Per tant, les opcions han de ser més grans per a evitar errors. Així doncs, la grandària de les zones actives ha d’estar en relació amb les característiques del dispositiu d’entrada.

El client ha de lliurar, entre altres coses, la guia d’estil de l’empresa (si n’hi ha), el material referent a la identitat corporativa (logotips) i tot el material (gràfics, textos, vídeos, etc.) que vulgui plasmar en l’aplicació.

El test de referència (en anglès, benchmark) consisteix en l’exploració de referències similars al producte que s’ha de desenvolupar fent una comparació amb altres productes al mercat. La similitud pot estar relacionada amb el tema o amb altres conceptes associats al projecte.

Aquest procés és molt important per al disseny de l’aplicació per les raons següents:

• Ajuda a conèixer altres experiències per poder-les millorar.
• Enriqueix el desenvolupament que s’ha de seguir.
• Ajuda a aprofitar els estudis d’usabilitat que han fet altres.
• Ajuda a identificar els errors d’altres (o el que no estan fent) per poder implementar-ho correctament.

Els resultats del test de referència es recullen en un informe, en el qual s’inclouen les URL dels llocs visitats i les imatges més significatives, comentant els aspectes forts i febles de cadascuna. També s’acostuma a fer una recopilació de bones pràctiques i/o exemples de disseny òptims per als aspectes crucials del projecte en curs.

L’arquitectura de la informació (AI) és la disciplina que s’encarrega d’estructurar, organitzar i etiquetar els elements que conformen els sistemes d’informació per facilitar als usuaris la localització i la gestió de la informació de manera efectiva.

L’arquitectura de la informació s’encarrega d’organitzar els continguts perquè siguin fàcilment accessibles i llegibles. Ha d’identificar la missió (els objectius) i la visió (les expectatives) de la pàgina web, determinar els continguts i les funcionalitats de la pàgina, facilitar l’accés mitjançant sistemes d’organització, etiquetatge, navegació i recerca i planificar en previsió de futures modificacions i creixement de la pàgina (Morville i Rosenfeld, 1998).

La complexitat del treball d’un arquitecte de la informació està relacionada directament amb el volum de continguts que s’han d’incloure en una aplicació. En un primer estadi, l’arquitecte de la informació s’encarrega de l’anàlisi dels continguts, per catalogar-los després, a partir d’elaborar els aspectes següents:

• Sistema de classificació de la informació
• Estructura de navegació
• Etiquetatge o retolació de les opcions
• Sistema de cerca de l’aplicació

Estructurar la informació no vol dir limitar-se a classificar-la per categories. En primer lloc, cal buscar l’estructura interna, natural i pròpia del material. A mesura que es treballa amb els materials se’n va revelant l’estructura interna. No obstant això, cal tenir en compte que no totes les llistes produeixen categories naturals i que part del treball de l’arquitecte de la informació és fabricar categories per a aquells elements que queden despenjats.

Un pas crucial en la planificació i conceptualització del producte és definir clarament la matèria i el nivell de detall de cadascun dels temes. És recomanable no generar més de tres nivells de profunditat: temes principals, secundaris i informació final. L’objectiu principal és aconseguir que l’usuari se senti satisfet després d’haver vist l’aplicació, tant si hi ha dedicat un breu espai de temps com si se l’ha mirat amb calma.

Una bona estructuració de la informació ha de permetre com a mínim dos tipus de navegació:

• Navegació ràpida i superficial que informi sobre els temes tractats en l’aplicació i que aconsegueixi transmetre les idees principals.
• Navegació en profunditat que informi l’usuari sobre el tema escollit i tots els conceptes relacionats.

Un cop estructurada la informació, s’han de buscar títols curts, clars i amb ganxo per a totes les categories, especialment per a les principals, que són les que l’usuari troba en primer terme.

Per estructurar la informació i tenir clara tota la disposició web dels continguts és útil treballar des de l’inici amb arbres de continguts.

El terme “arbre” té a veure amb la seva forma, ja que mostra diverses branques connectades entre si i “fulles” que representen la informació que es vol transmetre (vegeu figura). La jerarquització dels apartats i subapartats, el seu ordre d’aparició i la definició dels diferents nivells de navegació són decisions concloents que s’han de prendre durant la fase d’anàlisi arran de les reunions mantingudes amb el client.

L’arquitectura de la informació ha d’intentar que l’usuari tingui accés al major volum possible d’informació útil amb la mínima quantitat de clics possible. Perquè l’experiència de navegació sigui positiva i el record de la visita sigui agradable, l’usuari ha de poder trobar allò que cerca de la manera més còmoda i ràpida possible. L’arbre web permet sospesar fins a quin punt l’accés a una determinada informació és prou àgil i està lliure d’obstacles.

El mitjà per materialitzar l’arbre és el de menys: és igual quin programa s’utilitzi per dissenyar-lo, ja que fins i tot pot estar dibuixat a mà sobre un paper.

Segons com s’organitza la informació en un producte multimèdia, s’aconsegueix que els usuaris trobin més fàcilment els continguts. Els sistemes de classificació o d’organització de la informació es poden dividir en dos grups: els sistemes exactes i els sistemes ambigus.

Els sistemes de classificació exactes són grups ben definits, mútuament excloents i que resulten útils quan l’usuari fa una cerca per elements coneguts. La classificació pot ser de diferents tipus:

• Alfabètica. Exemple: https://designaddict.com/list-designer
• Cronològica. Utilitzat en continguts d’actualització freqüent. Exemple: blogs.
• Geogràfica. Exemple: www.nike.com/es/es_es/retail/es

Els sistemes de classificació ambigus s’usen per a cerques de continguts no coneguts. Són útils si l’usuari vol fer una cerca aleatòria o si vol buscar continguts per criteris personals. Els tipus de classificació ambigua són:

• Temàtica o per categories. Exemple: www.quo.es
• Orientada a tasques. Exemple: menú superior de les aplicacions
• Orientada a l’audiència. Exemple: bit.ly/2syGGyV
• Metafòrica. Exemple: metàfora de l’escriptori de Mac o de Windows o campus virtuals (IOC)

L’estructura de navegació d’una aplicació web és bàsicament un diagrama del flux de la informació, és a dir, l’experiència de navegació del visitant que salta d’una pàgina a una altra dins del lloc web utilitzant el sistema d’hipervincles. L’estructura de navegació s’acostuma a triar en funció del tipus de contingut.

Hi ha tres tipus bàsics d’estructures de navegació, encara que es poden establir estructures combinades: jeràrquica, lineal i en xarxa.

• Jeràrquica: estructura en forma d’arbre en la qual, a partir d’una pantalla o pàgina inicial, s’accedeix ordenadament als diferents nivells i subnivells de contingut (vegeu figura).
  • Es tracta d’una estructura molt indicada per a grans volums de contingut.
  • Permet a l’usuari orientar-se bé en la navegació i saber a quin nivell es troba.
  • Permet ordenar els continguts en diversos nivells de profunditat: més general en nivells superiors, més específic en els més profunds.

És aconsellable no superar els tres nivells de profunditat a partir de la pàgina inicial. No obstant això, en cas que sigui impossible respectar aquest principi, els menús més amplis han de correspondre al primer nivell perquè l’usuari pugui localitzar la majoria de continguts a la pàgina principal. Se sol utilitzar freqüentment en webs institucionals o corporatives, en les quals és important el sentit de l’ordre en l’accés als continguts.

• Lineal: estructura lineal, molt simple, que proporciona un accés seqüencial a la informació (vegeu figura). S’utilitza preferentment en guies d’aprenentatge o aplicacions similars.
  • El contingut progressa del que és general al que és concret.
  • Es tracta d’una navegació altament pautada.

• En xarxa: estructura sense ordre aparent (vegeu figura). S’utilitza preferentment en jocs o entorns experimentals.
  • No hi ha jerarquia.
  • Permet una navegació molt lliure.
  • Requereix una alta densitat d’enllaços.
  • Pot provocar desorientació en l’usuari.

L’estructura hipertextual d’una aplicació interactiva es defineix mitjançant un diagrama de fluxos. Quan hi ha contingut organitzat en temes principals i secundaris cal buscar una estructura que permeti accedir fàcilment a la informació.

Els diagrames de fluxos serveixen per a marcar els fluxos o itineraris possibles de l’usuari en l’aplicació generant un esquema visual de com es relacionen els diferents temes entre si i com podrà navegar l’usuari a través de la informació. Tot i que els usuaris tracen el seu propi camí amb la navegació, l’arquitecte de la informació decideix les opcions que tindran, el que veuran primer, on poden anar i on no, etc.

El diagrama de fluxos ideal és una especificació clara i fàcil de seguir de les categories temàtiques, els nivells, els enllaços del projecte, els processos que es realitzen en l’aplicació o els serveis que s’ofereixen a l’usuari. Aquest tipus de diagrames donen forma al contingut perquè l’usuari es faci una idea del funcionament real del producte. És un document viu que pot ser modificat al llarg del projecte, però és l’única forma de veure ràpidament les parts afectades per modificacions en el contingut, la interactivitat, la navegació i les funcionalitats.

La redacció dels continguts destinats a una aplicació multimèdia té una naturalesa especial, ja que ha d’aprofitar les possibilitats d’interactivitat i ha de tenir en compte, al mateix temps, les limitacions de la lectura en pantalla.

Les característiques que s’han de complir en dissenyar continguts d’una aplicació són (Nielsen, 2000):

• Brevetat. La lectura en pantalla és més lenta que la lectura en paper i també resulta més incòmoda per al lector. Com a regla general, cal escriure un 50% menys de text. Les pàgines han de ser breus i els continguts concrets, però no exempts d’estil.
• Lectura en diagonal. Els usuaris tendeixen a no llegir completament el text en pantalla, sinó que solen rastrejar visualment la pàgina per trobar les paraules clau i llegir els fragments de text relacionats. Per facilitar aquest rastreig, es recomana:
  • Estructurar els continguts en dos o tres nivells de titulars (encapçalaments i subencapçalaments). Els encapçalaments han de ser significatius.
  • Utilitzar llistes amb pics per a enumerar elements, en lloc d’incloure’ls en blocs de text uniformes.
  • Incloure negretes per destacar les paraules clau. També es pot utilitzar el text acolorit, encara que en aquest cas el color triat ha de ser diferent del dels vincles, per no confondre l’usuari.
• Llenguatge estructurat. Les pàgines s’han d’organitzar en piràmide: el més important s’ha de trobar al principi, de manera que l’usuari no es vegi forçat a llegir tota la pàgina per a trobar la conclusió. Donat que molts lectors només llegeixen la primera frase de cada paràgraf, és important aplicar la regla d’“una idea, un paràgraf”. Les frases han de ser senzilles.
• Fragmentació. Encara que el text demani ser concís, es poden incloure pàgines secundàries amb contingut extens i detallat, de manera que els usuaris que vulguin aprofundir en els continguts hi puguin accedir voluntàriament. És recomanable no fragmentar excessivament el text, ja que implica que l’usuari hagi de navegar entre múltiples pàgines, i augmenten les possibilitats que es desorienti.
• Títols de pàgina. Els títols de pàgina s’utilitzen com a referència principal, i són els que queden emmagatzemats si la pàgina s’inclou en la llista de favorits. Han de ser explicatius i breus (es recomana un màxim de sis paraules). Cada pàgina hauria de presentar un títol diferent per a ser vàlid com a referència (i per a un millor SEO).

• Llegibilitat. A més de confeccionar correctament els continguts, el dissenyador s’ha d’assegurar que el text sempre és llegible. Els factors que afavoreixen la llegibilitat són:
  • Contrast entre el text i el fons. La llegibilitat màxima s’obté de text negre sobre fons blanc, encara que l’opció inversa també és correcta.
  • Fons de colors clars. I si contenen gràfics o imatges, han de ser molt subtils.
  • Tipografia a partir d’11 punts, perquè sigui llegible fins i tot per a persones amb dificultats de visió.
  • Tipografia de pal sec (sans serif) per a les mides petites.
  • Text estàtic: les animacions dificulten la lectura.
  • Alineació a l’esquerra recomanable, especialment per a blocs de text extensos.

La definició de prototip ha canviat al llarg dels anys i ha pres diferents significats en els camps als quals s’aplica. En molts casos es relaciona amb la primera versió d’un producte final. En d’altres, és un conjunt de dissenys que permeten mostrar el que es vol desenvolupar. Fins i tot, abans de 1880, un prototip era la materialització mínima d’un concepte a alguna cosa tangible que s’havia de portar a l’oficina de patents per poder registrar-lo.

En l’actualitat la definició més estesa dins els projectes i productes tecnològics és:

En qualsevol projecte o producte cal fer validacions intermèdies abans d’invertir temps i esforç a desenvolupar una versió final, tancada i llesta per a ser comercialitzada. El motiu és clar: per molt coneixement que es tingui en un mercat concret o per moltes investigacions generals sobre un públic objectiu i tendències, l’única manera de comprovar que el que es vol desenvolupar està ben plantejat és provar-ho.

El prototip és un element clau en el procés de disseny, ja que permet detectar les qüestions que han de ser revisades o corregides, i revela si és necessari afegir algun element que no s’hagi tingut en compte.

No es pot parlar del prototip com una etapa en si mateixa, ja que es fan diversos prototips al llarg de tot el procés del disseny de la interfície:

• Wireframe: és un prototip molt esquemàtic que es desenvolupa durant la fase d’arquitectura de la informació i representa l’organització de continguts de les pàgines o pantalles, la ubicació de les opcions i el seu comportament. No conté cap element de disseny visual.
• Mockup (prototip gràfic): es duu a terme durant la fase de disseny visual i comporta el desenvolupament de les característiques gràfiques de l’aplicació. El producte final hauria de mantenir la màxima fidelitat gràfica respecte del mockup.
• Prototip funcional: és un prototip interactiu que permet comprovar la usabilitat de l’aplicació en condicions similars a les de l’aplicació final.

Els wireframes s’utilitzen per connectar el disseny visual del lloc a la seva arquitectura d’informació. El procés de wireframing ajuda a descobrir diferents mètodes per representar o mostrar diferents tipus de contingut i informació, així com prioritzar aquest contingut en ordre d’importància per a l’usuari, les seves expectatives i els seus objectius.

Els wireframes són ràpids, barats i senzills d’executar i haurien de fer-se tan aviat com sigui possible i iterar amb freqüència (és a dir, revisar-los i corregir-los, si escau). Els wireframes són una bona manera d’obtenir una idea o de discutir amb els desenvolupadors sobre les millors opcions per al producte.

Un wireframe complet hauria de contenir la següent informació:

• Inventari de contingut. Contingut de cada pàgina.
• Elements de la pàgina. Capçaleres, enllaços, llistes, imatges, formularis, etc.
• Etiquetatge. Vincles, títols, etc.
• Layout. Ubicació, col·locació i agrupació dels elements de la pàgina (capçaleres, peus, navegació, àrees de contingut, titulars, etc.) Mostra l’estratègia de navegació i la priorització de continguts dins de la pàgina, així com l’agrupació en barres laterals, barres de navegació, àrees de contingut, etc.
• Comportament. Mitjançant notes associades als elements, indicacions sobre com s’han de mostrar (nombre de elements, visualització per defecte) o definir el comportament funcional quan un element s’activa (enllaç extern, etc.)

A la figura es veu un wireframe que mostra l’arquitectura de la informació de la pàgina de llista d’una aplicació web de cerca de feina.

Hi ha multitud d’eines gratuïtes o de pagament per fer wireframes, com per exemple:

• Axure: www.axure.com
• Balsamiq: www.balsamiq.com
• Gliffy: www.gliffy.com
• Cacoo: www.cacoo.com
• Mockingbird: www.gomockingbird.com
• Lumzy: www.lumzy.com
• Mockflow: www.mockflow.com

El mockup o prototip gràfic consisteix en la preparació gràfica, en alta fidelitat, de les pantalles clau. En una aplicació web, s’acostuma a preparar la pàgina d’inici, el menú principal (si és diferent del d’inici) i les pantalles interiors més representatives.

Les opcions se solen representar tant en estat normal com en imatge canviant, és a dir, l’aspecte de les opcions quan l’usuari passa el cursor per damunt, per exemple. D’aquesta manera, s’obté una sèrie de gràfics que permeten veure si la distribució dels elements és correcta i si pot respondre realment als continguts previstos.

El prototip gràfic és un element primordial en l’avaluació del disseny en diversos aspectes, ja que l’equip de producció pot comprovar si la proposta s’adapta realment a les necessitats del sistema i a la capacitat dels recursos disponibles i permet fer avaluacions d’usabilitat per a corregir problemes abans de passar a nivells avançats de desenvolupament.

Vegeu a la figura la versió en alta fidelitat del wireframe de la figura. S’ha mantingut l’arquitectura, però s’hi ha afegit la capa de disseny.

Hi ha moltes eines que permeten crear mockups. De fet, es pot utilitzar qualsevol programa de dibuix, ja sigui vectorial, com Illustrator o Inkscape, o més orientat al retoc d’imatges, com Fireworks o Photoshop. També hi ha diverses eines específiques per a aquesta finalitat, algunes fins i tot en línia, que permeten fer el disseny de maquetació:

• Axure: www.axure.com
• Balsamiq: www.balsamiq.com
• Marvel: www.marvelapp.com
• Sketch: per a usuaris de Mac a www.sketchapp.com
• Mockingbird: www.gomockingbird.com
• Hotgloo: www.hotgloo.com
• Invisionapp: www.invisionapp.com
• Mockflow: www.mockflow.com
• Moqups: www.moqups.com

El prototip funcional implica la preparació d’una versió primerenca i reduïda de l’aplicació en la qual es desenvolupen els camins més significatius. L’usuari té la capacitat de navegar pel sistema mitjançant les mateixes opcions de l’aplicació final, però no pot accedir realment a tots els continguts.

El prototip funcional es presenta al client, que té una primera mostra del que serà l’aplicació, mitjançant la qual pot aportar suggeriments o fer correccions que en aquesta fase del projecte són fàcilment realitzables.

Per realitzar el prototip funcional d’una pàgina web es pot fer a partir d’un CMS com Wordpress per treballar la navegació, però és més eficient treballar amb eines específiques de prototipatge.

Eines de prototipatge:

• JustInMind: www.justinmind.com
• Marvel: www.marvelapp.com
• Invisionapp: www.invisionapp.com
• Axure: www.axure.com
• Sketch: per a usuaris de Mac, www.sketchapp.com
• Proto.io: proto.io

Els patrons d’interfície d’usuari o patrons de disseny són solucions de disseny per resoldre problemes comuns en temes d’interacció i interfícies d’aplicacions.

Aquests patrons de disseny compleixen la seva funció a partir d’una sèrie d’objectius:

• Ser elements de disseny reutilitzables. Donen l’oportunitat de tenir un catàleg ampli d’elements que es poden reutilitzar en els dissenys d’acord amb el tipus de problema que s’intenta resoldre. Aquests patrons van sorgir a partir d’investigacions d’altres productes de manera que ja compten amb la validació que poden resoldre cert problema. Per exemple: menú d’hamburguesa. Aquest patró és reciclable i ajuda a solucionar el tema de navegació perquè l’usuari conegui els racons de l’aplicació.
• Evitar reiteracions. Si es detecta un problema que ha de repetir-se de manera constant en el disseny d’una interfície, té tot el sentit crear una solució que es pugui reutilitzar i no haver de repetir el procés de solució.
• Estandarditzar el disseny. No proposa un estàndard en la tendència del disseny quant a moda, el que proposa és un estàndard en les solucions de disseny en l’àmbit funcional.
• Condensar el coneixement. Permet que nous dissenys puguin comptar amb les solucions estandarditzades per als problemes comuns.
• Estalviar temps i millorar l’efectivitat. Ajuden a fer que la interacció i el flux de l’usuari en una aplicació siguin més amigables i naturals.

Els patrons de disseny o d’interfície d’usuari es classifiquen de la següent manera:

• Patrons d’interacció: tenen una comunicació fluida entre una aplicació i l’usuari.
• Patrons d’usabilitat: són les millors solucions per als problemes d’ús entre l’usuari i una aplicació.
• Patrons arquitectònics: hi ha interacció d’elements entre nivells d’arquitectura d’informació.

Utilitzar un patró de disseny no és “copiar”, sinó utilitzar una solució coneguda i provada a un problema freqüent. Molts dissenyadors d’interfícies topen amb problemes semblants en el seu dia a dia, fet que provoca que si alguns ja van provar l’eficiència de certes solucions en el passat es puguin aplicar en situacions genèriques.

Els patrons de disseny ajuden a ser consistents amb el món exterior. Els usuaris d’un producte alhora també en fan servir molts d’altres, i probablement estan acostumats a certes formes de navegar i a trobar els mateixos components a les diferents interfícies, cosa que facilita l’aprenentatge en un primer ús.

També ajuda a tenir material amb el qual començar incentiva la creativitat, ja que no és el mateix començar amb un full en blanc que tenir certs elements que posin un ordre als nous dissenys. Utilitzar patrons que ja funcionen en altres productes ajuda a organitzar millor l’estructura dels nous dissenys.

El resultat del procés de disseny visual és la definició d’un entorn gràfic, però els seus objectius i la seva funció van molt més allà, ja que estan relacionats amb la comunicació.

En aquest sentit, el disseny visual d’una aplicació interactiva ha de respondre als paràmetres següents:

• Què es vol comunicar: quin és el contingut de l’aplicació. El tractament gràfic de l’aplicació dependrà del tipus d’aplicació. Així, per exemple, una aplicació que vulgui vendre robots educatius tindrà un tractament gràfic diferent que una aplicació que pretengui donar formació a l’usuari sobre la utilització dels robots. Encara que els dos continguts formin part del mateix entorn i mantinguin elements de coherència general, el tractament gràfic acostuma a ser diferent.
• Qui és el destinatari: les característiques dels usuaris objectiu de l’aplicació determinen en gran mesura la línia gràfica. Cada públic té requisits diferents, així que, per exemple, tot i que els continguts siguin similars, no es dissenyaria igual una aplicació orientada a públic adult que una orientada al públic infantil.
• Qui és l’emissor: generalment cada empresa, institució o organització té una estratègia pròpia que determina les característiques de tots els seus productes. Les aplicacions interactives o els llocs web són elements destacats dins de l’estratègia comunicativa i, per tant, han de ser coherents.
• Com es vol comunicar: dins d’una mateixa estratègia comunicativa, hi pot haver canvis de registre segons els objectius específics de cada recurs. Per exemple, una institució educativa pot tenir una estratègia general basada en la seriositat, la fiabilitat i el prestigi, però de vegades pot utilitzar un llenguatge més fresc i informal, adaptat a necessitats específiques.
• Quan es comunicarà: la temporalitat i l’impacte d’un projecte en pot determinar part de les característiques comunicatives. Si es tracta d’una campanya efímera, probablement es podrà permetre variacions sobre l’estratègia general o l’adopció de modes o tendències gràfiques, que per a un producte més estable resulten arriscades.

En la fase de disseny visual es defineixen les característiques gràfiques de la interfície, tenint en compte la informació reunida en les fases d’anàlisi, modelatge de l’usuari i disseny conceptual.

Els passos del desenvolupament del disseny visual de l’aplicació solen ser els següents (amb les variables inherents a cada cas):

1. Anàlisi del llibre d’estil (si n’hi ha) o dels determinants gràfics aportats pel client.
2. Documentació gràfica. Abans de definir les qüestions relacionades amb el disseny visual, es fa una anàlisi de la documentació gràfica que s’integrarà en l’aplicació, com ara fotografies, esquemes, gràfiques, il·lustracions, etc. El dissenyador també es documenta sobre el tractament previ de continguts similars, buscant exemples d’aplicacions que hagin abordat el mateix tema o que s’hagin dirigit al mateix tipus d’usuari; l’observació de produccions existents és important perquè permet tenir en compte aspectes que d’una altra manera s’haurien pogut passar per alt.
3. Disseny de la retícula. La retícula (grid, en anglès) és una eina molt útil per aconseguir l’equilibri en una composició al moment de dissenyar. Es tracta d’una estructura feta de línies verticals utilitzada per estructurar el contingut, organitzant textos, imatges o vídeos d’una manera racional i fàcil de visualitzar. És fonamental definir des del principi la retícula en la qual es basarà l’aplicació, ja que forma part de la definició dels elements principals junt amb el color i la tipografia. Vegeu figura.
4. Elecció dels colors. A partir dels determinants estilístics o del tractament que es vol donar als continguts, es defineix el to cromàtic general de l’aplicació segons el tema, el to general que es vol transmetre i el tipus d’usuari. Si hi ha un llibre d’estil o una imatge de marca, normalment l’aplicació ha de respectar la gamma de colors predeterminada.
5. Elecció de la tipografia. Juntament amb la gamma cromàtica, la tipografia determina el to general de l’aplicació. S’aconsella utilitzar un màxim de dos tipus de lletra diferents, ja que la barreja de moltes variacions pot implicar poca llegibilitat i un aspecte visual caòtic. D’altra banda, en cas d’emprar dos tipus de lletra diferents, cal que siguin prou diferents entre ells per a percebre’s com a tals, per exemple combinant una lletra de tipus pal sec amb una de tipus romà. Si hi ha un llibre d’estil, generalment cal cenyir-se a les seves directrius.
6. Generació dels elements principals. A partir de la divisió i assignació d’espais de pantalla, es concreten els principals elements, que inclouen:
   • Tractament dels fons.
   • Definició de tipus, color i grandària de la lletra en els principals blocs de text: títols, subtítols i menús.
   • Integració de logotips (si n’hi ha).
7. Generació dels elements secundaris. Una vegada concretats els elements principals que caracteritzaran l’aplicació, es passa a detallar el disseny dels elements secundaris, com ara:
   • Opcions. El tractament de les opcions de pantalla ha de ser coherent amb l’estil visual de l’aplicació.
   • Text de contingut. Es defineix el tipus, grandària i color de lletra del text del contingut de l’aplicació.
   • Imatges de contingut. Es determinen els formats i les diferents aplicacions de les imatges de contingut. En aplicacions de gran volum, és important determinar un nombre màxim de variacions de format i localització, per facilitar el treball de l’equip d’edició.
   • Elements ornamentals, si n’hi ha.

Font: Google Developers

Durant anys, el disseny web s’ha vist obligat a fer servir únicament una petita selecció de fonts instal·lades en (gairebé) tots els ordinadors, ja que si la font de la pàgina web no està instal·lada al dispositiu de l’usuari, el sistema la substitueix per una altra i és molt probable que afecti la maquetació original i trenqui el disseny. Fins fa poc la majoria dels dissenyadors i programadors web utilitzaven el que es coneix com a tipografies segures, que són les que apareixen llistades a la figura.

Afortunadament els dissenyadors compten actualment amb moltes més opcions, ja que les anomenades web font han acabat amb la dependència de les fonts segures i s’ha obert un ampli catàleg de possibilitats.

Google Fonts inclou a dia d’avui més de 800 fonts de codi obert que es poden descarregar directament a l’ordinador, o inserir a un web mitjançant el codi que facilita Google. No obstant el gran ventall de possibilitats, cal mantenir l’entusiasme a ratlla i no caure en l’error de fer una macedònia tipogràfica en els dissenys: n’hi hauria d’haver prou amb un tipus base i una altra de contrast per crear un web coherent. Tampoc és recomanable tècnicament, ja que com més fonts s’inclouen, més temps de descàrrega cal.

Hi ha quatre tipus de fitxers de web font (TTF, WOFF, WOFF2, EOT) i és recomanable inserir-los tots per assegurar que en tots els navegadors es visualitzen correctament.

Hi ha una gran quantitat de famílies tipogràfiques, però es poden reunir en dos grans grups en funció de la presència de serif o gràcia en els caràcters:

• Amb gràcia o serif. Els caràcters amb gràcia o serif compten amb uns petits traços generalment perpendiculars al final de les astes verticals i horitzontals. La raó de ser d’aquest element és facilitar la lectura, ja que ajuda al reconeixement perceptiu dels caràcters. Aquestes tipografies són les més antigues, ja que la seva aparició es remunta al Renaixement, on, al seu torn, es recuperaven aquestes tipografies de les antigues formes romanes, per la qual cosa a aquestes famílies tipogràfiques també se’ls acostuma a anomenar tipografies romanes. Vegeu figura:

Font: Wikimedia

• Lineals o de pal sec. Es caracteritzen perquè no tenen gràcia o serif en els traços terminals. Aquestes fonts solen presentar un dibuix lineal més continu, una alçada més alta i, en general, uns traços menys inclinats. Són fonts d’origen més modern. Els primers tipus comencen a crear-se a finals del segle XIX. Vegeu figura:

Font: Wikimedia

Si es volen utilitzar mesures absolutes en el web, es poden definir les mides dels caràcters usant píxels (px) com a unitats. Amb el valor px es defineix que alguna cosa (un text, un paràgraf) presenta una mida determinada en píxels en pantalla. Però aquesta pantalla, depenent del monitor utilitzat, pot ser de mides diferents i la resolució, d’altra banda, pot estar definida amb diferents configuracions.

L’observador (usuari) pot necessitar canviar les mides per qüestions del context en què visualitza el contingut (dispositiu de pantalla petita, llum del sol reflectida en pantalla) o de les seves (dis)capacitats visuals. Per tant, si es fixen les mesures com a absolutes es dificulta l’accessibilitat. L’alternativa és usar mesures relatives. Es poden articular com a percentatges (%) i variacions de l’alçària d’M (ema) amb les unitats em i rem.

Un em és bàsicament la mida d’una lletra M de l’element al qual s’aplica aquesta mesura. És a dir, si un element té aplicada una mida de lletra de 16 píxels, llavors 1 em serà igual a 16 píxels (els navegadors per defecte defineixen una mida de 16 píxels a l’element HTML, per tant, per defecte 1 em és igual a 16 px).

La unitat em sempre depèn del seu element pare. Per exemple, si l’element body té una mida de lletra de 16 px i un element fill té una mida de lletra d’1,3 em, aquest text es mostrarà un 30% més gran que el del body (20,8 px), mentre que si dins d’aquest element hi ha encara un altre fill amb una mida d’1,3 em, la mida de lletra d’aquest objecte serà un 30% més gran que la mida del seu pare (27,04 px).

La unitat de mesura rem és molt similar a em, amb l’única diferència que no depèn de l’element pare, sinó de l’element arrel del document: l’element HTML. Rem vol dir Root Em, és a dir, un em basat en l’arrel. Per tant, si l’element HTML té una mida de lletra de 16 píxels (mida per defecte), llavors 1 rem és igual a 16 píxels. Si es vol aplicar una mida basada en rem a qualsevol element de la pàgina, no importa la mida de lletra dels seus pares, ja que 1 rem sempre serà igual a 16 px, excepte si es modifica l’element arrel. Això permet escalar un projecte complet només canviant la mida de la lletra d’un sol element.

Els principals conceptes que formen part de la composició tipogràfica són:

• Espai entre lletres. Encara que cada tipus de lletra tingui un espaiat òptim, que és aquell per al qual ha estat dissenyat, es pot ajustar (tracking). En cas que totes les lletres siguin majúscules, sol ser aconsellable augmentar l’espai.
• Espai entre paraules. L’espai entre paraules ha de ser constant, independentment de l’alineació del text. Un espai massa petit pot reduir la llegibilitat, en impedir la diferenciació immediata de paraules. Un espai massa ample també dificulta la lectura, perquè el final d’una paraula i l’inici de la següent queden desconnectats.
• Longitud de línia. Com més llarga és una línia, més difícil es fa llegir-la, però, d’altra banda, les línies massa estretes fragmenten el text i interrompen el ritme de lectura. Cal trobar un punt intermedi per a la longitud de la línia. La longitud de línia aconsellable depèn del tipus de lletra, de l’interlineat (distància entre línies) i de la grandària i resolució del suport:
  • En suport paper una línia hauria de tenir 55/60 caràcters, o 9/10 paraules per a aconseguir un grau de llegibilitat òptim.
  • En el cas de la pantalla d’ordinador, la seva resolució limitada en dificulta la lectura. En aquest cas, és aconsellable intentar que els blocs de text densos no superin els 40/60 caràcters per línia.

  Interlletratge

  Ajustament d’espai entre parells de lletres per optimitzar la llegibilitat d’un text.

• Interlineat. L’interlineat es refereix a la distància entre línies de text. Si l’interlineat és massa petit, el procés de lectura es veu dificultat per l’apreciació de blocs foscos entre el text (el text queda molt enganxat). Un interlineat massa ample pot provocar problemes per a saltar d’una línia a la següent, i interfereix en el ritme de lectura. Quan es treballa amb blocs de text llargs i densos, l’interlineat ha de ser més ample que si es treballa amb llistes o componem blocs més lleugers. Per a la lectura en pantalla, es recomana que l’interlineat estigui entri entre el 130 i 150%.
• Alineació. L’alineació és un dels factors que contribueixen a dotar el text d’un caràcter determinat: l’alineació a l’esquerra és la més llegible, l’alineació a la dreta s’aconsella únicament per a petits blocs de text o per a finalitats molt determinades, com per exemple per posar notes al marge, el text centrat s’utilitza per a petits blocs de text i en composicions en les quals l’atenció de l’espectador s’hagi d’atreure de manera ràpida i directa, i el text justificat (marginat pels dos costats) és el més utilitzat en publicacions impreses. Està en segon lloc en ordre de llegibilitat (per sota del marginat a l’esquerra), i connota formalitat i –moltes vegades– cert classicisme. No es recomana en web, especialment en blocs estrets, ja que es poden produir efectes visuals no desitjats, com tenir un espai excessiu entre paraules.
• Variacions. Es poden distingir les variacions tipogràfiques següents:
  • Negreta. Estableix punts d’atenció a la pàgina. S’ha d’utilitzar amb criteri, ja que l’abús de negreta provoca l’efecte contrari i condueix al fet que res no destaqui especialment a la pàgina. Ajuda a determinar una jerarquia.
  • Cursiva. La cursiva s’acostuma a utilitzar per a donar èmfasi a una part de text o per a assenyalar una citació: frase literal d’algun autor, títols de llibres, revistes, pel·lícules, etc.
  • Versaletes. Són una variació a una tipografia de lletres majúscules on l’alçada és similar a la lletra x de les minúscules i amb proporcions lleugerament diferents. És altament recomanable no utilitzar ni versaletes ni majúscules per emfatitzar blocs de text en una pàgina, ja que disminueixen la llegibilitat i interrompen el ritme de lectura. D’altra banda, amb les majúscules SEMBLA QUE S’ESTIGUI CRIDANT al lector, en lloc de dirigir-s’hi en un to normal. El més recomanable es deixar-les per als títols o fragments curts per destacar (vegeu figura).

Font: Wikimedia

• Llegibilitat. La llegibilitat és el grau de facilitat amb el qual un text pot ser llegit sense ambigüitat formal i cal tenir en compte els aspectes següents:
  • Els caràcters sense serif són en general menys llegibles, ja que se solen assemblar més entre ells, especialment en grans blocs de text.
  • Per a la lectura en pantalla, la tipografia sense serif és la més llegible, ja que s’adapta al reticle de píxels.
  • La lletra regular (també anomenada rodona) resulta més llegible que qualsevol de les seves variants (cursiva, negreta, versaletes).
  • Les paraules han d’estar properes les unes de les altres. El lector no llegeix caràcter per caràcter, sinó per paraules o grups de paraules, per tant l’espai intermedi ha de ser petit. Com a màxim, les paraules han d’estar separades per un espai igual que l’amplària de la lletra a.
  • L’espai entre línies ha de ser superior a l’espai entre paraules.
  • Quan la línia és superior a dotze paraules, la vista s’ha d’allunyar molt de l’inici de línia, amb la qual cosa augmenta la dificultat per a trobar el principi de la línia següent.
  • Les lletres minúscules (de caixa baixa) són més llegibles que les majúscules (de caixa alta), que formen rectangles visuals homogenis.
  • Intercalar majúscules dins d’una frase interromp notablement el ritme de lectura.

  Versaleta

  Diminutiu de la paraula versal. Fa referència a les lletres majúscules, perquè amb caràcters d’aquestes dimensions i formes s’inicien els versos.

Generalment un text es fa menys llegible quan:

• El tipus de lletra és massa condensat o massa estès.
• La mida és massa petita.
• L’interlineat es redueix en excés.
• Les línies són massa llargues.

La grandària de lletra de pantalla no hauria de ser inferior als 9 punts. La lletra estàndard d’ordinadors més llegible és Arial a 12 punts, seguida de Times New Roman a 12 punts.

El color és una sensació complexa, resultat d’una sèrie de fenòmens percebuts simultàniament. Els models actuals coincideixen a definir el color com el resultat de tres paràmetres: lluminositat, saturació i matís o tonalitat.

• Matís o tonalitat. Defineix la diferència, se’n podria dir essencial, entre un color i un altre, per la qual cosa és possible designar quan un matís és verd, violeta o ataronjat.
• Lluminositat. És la intensitat lumínica d’un color, és a dir, és la major o menor proximitat al blanc o al negre d’un color determinat. Per exemple, es dona el nom de verd clar al verd proper al blanc o de verd fosc quan el verd s’acosta al negre.
• Saturació. Defineix el nivell de puresa (o intensitat) d’un color, és a dir, la mesura en què una tonalitat tendeix més cap a la seva intensitat màxima (color saturat) o cap a la falta de color o acromatisme (gris). Aquest atribut permet diferenciar entre colors vius i apagats.

El significat dels colors ve definit principalment per dos factors: l’efecte que tenen en l’ànim psicològic de les persones i en el significat cultural donat per la societat des dels seus orígens. En el dia a dia es poden aprofitar aquests efectes i significats amb diferents propòsits, com ara decorar un dormitori que transmeti pau i relaxació, aconseguir generar un ambient laboral creatiu, influir sobre algú mitjançant la forma de vestir, cridar l’atenció en campanyes publicitàries, etc.

La majoria dels significats dels colors estan definits per la relació cultural existent amb la connexió amb la natura. Els significats dels colors són en bona mesura el reflex de com els nostres avantpassats veien el món. Si bé cada color té un significat comú per a tothom, és cert que la societat actual, així com les vivències personals de cada individu, modifiquen sensiblement la percepció del significat de cada color.

Un exemple del significat d’un color definit per la seva visibilitat en la naturalesa és el blau, relacionat amb tranquil·litat, ja que és el color del cel clar i en calma. El blau també es percep com un color fred i profund, per la seva relació amb la pluja i el reflex del cel de les grans superfícies d’aigua.

En general, cada color s’associa a una sèrie de sensacions, emocions i convencions culturals, de vegades contradictòries, segons el context:

• Vermell: alegria, entusiasme, comunicació, passió, emoció, acció, agressivitat, perill, guerra, vida, caritat, sacrifici, triomf
• Blau: reserva, llunyania, confiança, harmonia, afecte, amistat, fidelitat, amor
• Verd: reserva, esplendor, esperança, naturalesa, joventut, desig, descans, equilibri
• Groc: llum, egoisme, gelosia, enveja, odi, adolescència, riure, plaer
• Taronja: festa, plaer, sol, llum, diversió
• Violeta: calma, autocontrol, dignitat, aristocràcia, violència, agressió, engany, robatori, misèria
• Marró: cordialitat, calidesa, noblesa, força, resistència, vigor
• Blanc: innocència, pau, infància, ànima, divinitat, estabilitat, calma, harmonia
• Negre: dissolució, separació, tristesa, mort, nit, ansietat, seriositat, noblesa
• Gris: desconsol, avorriment, passat, vellesa, indeterminació, absència de vida, descoratjament

El significat de colors tant càlids com freds té una correlació directa amb la percepció dels logotips corporatius. Hi ha centenars d’exemples de professionals que utilitzen els colors per crear relació entre un producte i una sensació als consumidors. En la infografia de la figura es mostren exemples d’utilització del color en marques molt reconegudes.

Autor: The Logo Company

Un dels camps professionals que més utilitza els significats del color és el del disseny i el màrqueting, gràcies a aquesta capacitat dels colors d’influir en l’ànim de les persones. Un anunci en gris sobre un fons clar passarà desapercebut per la majoria de gent, però el mateix anunci amb un fons groc atraurà l’atenció de la mateixa manera que ho fa la llum del sol (que s’associa amb el groc en la naturalesa).

El significat dels colors i la seva percepció sensorial no només és aplicable a un sol color, sinó a la relació que s’estableix entre diferents colors. Per exemple, el taronja sobre el verd crea un contrast visual que el cervell percep com a advertència, i el vermell superposat al groc transmet una senyal receptiva de perill. Tot això ha estat demostrat amb estudis científics que demostren que en mirar aquestes combinacions de colors s’activen els mateixos processos neuronals que quan ens trobem en perill o en situació d’alerta.

La imatge digital es construeix segons dues arquitectures de codificació diferenciades:

1. Mapa de bits: s’estructura la imatge en una retícula de píxels, on cadascun d’aquests pot reproduir una tonalitat diferenciada.
2. Vectorial: es desa la informació geomètrica de cada objecte segons funcions matemàtiques.

Els gràfics de mapa de bits construeixen la imatge segons la configuració d’una quadrícula regular i bidimensional d’elements continus i equivalents, on cadascun d’ells pot reproduir un valor cromàtic diferenciat. La visualització del conjunt d’aquests elements cromàtics (punts descriptius d’imatge) a certa distància genera la percepció de la imatge. Cadascun d’aquests elements de la quadrícula són els anomenats píxels. Cada píxel reprodueix un color, que pot ser igual o diferent del píxel contigu.

1 píxel = 1 color

La imatge en el mapa de bits es troba totalment determinada per dos paràmetres derivats de l’estructuració en píxels: la resolució i la profunditat de color.

El píxel, per constitució, no té mesura. És una unitat relativa que per ser significativa s’ha d’associar a una mesura concreta. La resolució és la relació d’elements de descripció d’imatge digital per unitat de superfície física o, el que és el mateix, el nombre de píxels per unitat de mesura que presenta un gràfic digital de mapa de bits.

Si la resolució és el nombre (relatiu) d’unitats descriptives d’una imatge de mapa de bits, la profunditat de to constitueix la càrrega de memòria adjudicada a cadascun d’aquests píxels i que determina, al seu torn, la capacitat per reproduir una gamma cromàtica més gran o més petita.

Això fa dels mapes de bits un mitjà idoni per a la representació d’imatges amb molts detalls. Entre els exemples més clàssics hi ha les fotografies fetes amb una càmera digital o les imatges creades a partir d’un escàner. Com que estan compostes per un nombre fix de píxels, tant la qualitat com la mida depenen de la quantitat total de píxels: com més gran és el nombre de píxels que compon la imatge, més alta és la qualitat, i també més gran és l’espai d’emmagatzematge que necessita. Aquesta interdependència entre qualitat de la imatge i quantitat de píxels té com a conseqüència que les imatges no es puguin escalar sense pèrdues de qualitat.

Els gràfics vectorials, a diferència de les imatges en mapa de bits, no es construeixen sobre la base d’una matriu de píxels equivalents, on cada un pot reproduir un valor cromàtic diferenciat. No s’estructuren punt per punt, sinó de manera més global. Aquests gràfics codifiquen la informació numèrica de la seva geometria, generant objectes gràfics, independents entre si, definits per punts de coordenades, units tots ells per vectors.

Aquests gràfics o objectes vectorials s’articulen en funció de fórmules matemàtiques que descriuen la posició, les dimensions, la forma i el color per tal de construir el que seran els dos elements constitutius de tot objecte vectorial, el contorn i l’interior del grafisme. Aquesta arquitectura matemàtica permet el redimensionament il·limitat de l’objecte o conjunt d’objectes vectorials, sense afectar substancialment ni la càrrega de memòria ni la qualitat representativa.

Vegeu a la figura l’exemple d’un triangle en un gràfic de mapa de bits i com es veuria a l’ampliar-lo. Dona la informació del color de cada punt de la imatge (representats per les caselles), però no la informació del triangle per si mateix, sinó que aquest es mostra a partir de la informació de cadascun dels punts.

En canvi, a la figura es mostra com es veuria una imatge en format vectorial amb un triangle definit a partir de les coordenades dels vèrtexs i de la unió d’aquests a partir de línies rectes. En aquest cas sí que dona la informació geomètrica de l’objecte.

La possibilitat d’escalar sense pèrdues fa que les imatges vectorials estiguin especialment indicades per a la representació de diagrames, logotips, figures geomètriques, signatures, icones i dissenys tècnics.

Imatges més complexes com fotografies digitals d’objectes naturals amb molts valors diferents de color i de contrast no es poden representar amb vectors sense pèrdues visibles de qualitat. En aquest cas és millor fer servir imatges basades en píxels.

A l’hora de dissenyar la interacció de l’usuari amb el producte, el més important és buscar una interacció tan natural, intuïtiva i senzilla com sigui possible.

Abans d’abordar el disseny de la interacció cal parlar de nivells d’interactivitat. Encara que la relació de les persones amb els ordinadors sigui interactiva per naturalesa, es pot parlar de tres nivells d’interactivitat en funció de la seva complexitat: navegacional, funcional i adaptativa.

• Interactivitat navegacional. Forma bàsica d’interactivitat. Se centra en la navegació per l’espai informacional mitjançant comandaments, menús, cercadors, directoris o enllaços, limita les opcions de l’usuari en una sola direcció: on vol anar amb el següent clic.
• Interactivitat funcional. Nivell més sofisticat d’interactivitat. Se centra en la interacció de l’usuari amb el sistema durant el procés de consecució d’un objectiu (per exemple, guanyar en un joc, comprar un producte, treballar en una aplicació, etc.). El feedback entre l’usuari i el sistema ha de ser continu al llarg del procés.
• Interactivitat adaptativa. Nivell més complex d’interactivitat. Se centra en el control del sistema per part de l’usuari i la personalització de l’aplicació: l’usuari pot adaptar l’aplicació o el sistema en funció dels seus interessos o personalitat. L’objectiu últim en aquest tipus d’interactivitat és la construcció de sistemes intel·ligents que interactuïn amb l’usuari i s’adaptin ràpidament a les seves necessitats, interessos i gustos canviants, en un entorn multisensorial i envoltant.

Un bon producte interactiu ha de respondre els objectius de l’usuari en un determinat context, a més de permetre-li mantenir el control de la situació en tot moment.

Les zones per dur a terme accions per part dels usuaris del lloc web s’anomenen àrees d’interacció. La interacció va des d’accions menors, que poden ser enllaços que duen a una pàgina amb més informació o a la subscripció a serveis informatius diaris, fins a la realització de tràmits complexos, com l’obtenció de certificats o el pagament de tributs.

L’usuari normalment entén que les zones de continguts són per llegir i revisar informació i les zones d’interacció no són per llegir sinó que mostren botons per introduir nova informació. Cal que en les zones d’interacció hi hagi la mínima informació possible i que alhora sigui la necessària per fer adequadament l’acció a què es refereix la interfície.

Vegeu alguns elements d’interacció que es poden trobar en una interfície:

• Botons. Un botó és un objecte de control sobre la interfície que possibilita introduir una dada de confirmació al sistema. Actua com a metàfora visual i funcional dels botons inclosos en els dispositius tecnològics. Acostuma a incloure una descripció breu a l’interior per a realitzar l’acció. Vegeu figura:

• Botons de ràdio (radio button). Són botons rodons que possibiliten ser marcats a través de l’acció de l’usuari. S’utilitzen en formularis per donar la possibilitat d’escollir un únic ítem d’una llista. Vegeu figura:

• Botons de confirmació (checkbox). Són botons similars als botons de ràdio, però amb forma quadrada. S’utilitzen per seleccionar un o més els elements en una llista. Vegeu figura:

• Llista seleccionable (select o ListBox). Mostra les opcions en format de llista desplegable. L’usuari pot seleccionar una o més de les opcions. Vegeu figura:

• Elements d’entrada de text (textfield). Espai per introduir text. Normalment es delimita una àrea en blanc marcada amb una vora i s’hi indica mitjançant un espai reservat (placeholder) la possibilitat d’introduir text. Vegeu figura:

• Barra de progrés. La barra de progrés és un element que indica a l’usuari el progrés d’una acció realitzada pel sistema. Com que no totes les accions es fan de manera instantània, és fonamental donar feedback a l’usuari a través de la representació del progrés de l’acció perquè l’usuari estigui informat de la situació. Vegeu figura:

Una aplicació no pot saber el moment en què l’usuari voldrà dur a terme una determinada funcionalitat. Aquesta interacció serà asíncrona durant l’execució del programa. Els esdeveniments proporcionen un mecanisme adequat per tractar aquest tipus de situacions que, normalment, són produïdes des de l’exterior de l’aplicació. Un exemple pot ser quan l’usuari pressiona una tecla.

Al rebre un esdeveniment, pot interessar tractar-lo o podem no fer res. Per exemple, podem estar a l’espera que l’usuari premi la tecla “enter” per a desar la informació i per això nomes es capturarà l’esdeveniment d’una tecla concreta (en aquest cas, la que té com a codi el “13”) i no es farà res en cas que l’usuari premi altres tecles.

Vegeu alguns dels esdeveniments més comuns en l’execució d’una aplicació web:

• Clic: en fer clic amb el botó esquerre del ratolí sobre el control.
• Canvi (change): en canviar el contingut del control (per exemple, a l’escriure un text a un camp de text o a l’escollir una opció d’un seleccionable).
• Mouse Over (hover): en moure el ratolí per sobre d’un control.
• Key Down: en prémer qualsevol tecla del teclat.
• Focus: quan el control rep l’enfocament, és a dir, quan s’activa el control en temps d’execució per introduir-hi dades o fer alguna operació.
• Blur (lost focus): quan el control perd l’enfocament, és a dir, es passa a un altre control per seguir introduint dades. És el contrari de l’esdeveniment anterior.

Es poden capturar molts altres esdeveniments, com ara quan un usuari arrossega un element, quan el deixa anar, quan fa doble clic, quan selecciona un text, quan mou el ratolí, quan canvia la mida d’un element, quan fa scroll a la pàgina, etc.

És important comunicar-se amb l’usuari a través de missatges de text, ja siguin d’error, alerta o confirmació. Han d’estar ben redactats, ser precisos i donar l’oportunitat de cancel·lar o desfer una acció.

Sempre s’ha d’informar l’usuari de què està passant. Per exemple, si l’usuari s’ha d’esperar fins que s’acabi una operació, la pàgina ha de mostrar un missatge explicatiu de què està passant. Afegir en el missatge el temps estimat d’espera o una barra de progrés ajuda l’usuari en aquest sentit.

També és important utilitzar efectes subtils però culturalment reconeguts per guiar l’usuari. Per exemple, si posa el ratolí sobre un botó i aquest canvia de color i canvia el cursor, l’usuari entén que hi pot fer clic.

• Sons. En aplicacions web no és massa habitual trobar sons com a informació de retroalimentació. Sovint els usuaris tenen els altaveus apagats (o directament no en tenen) o estan escoltant música i els sons de feedback no són massa ben rebuts, excepte si es tracta d’un videojoc. El so en els videojocs contribueix a donar un feedback a les operacions que fa el jugador. Això és fa més evident en la interfície principal, on els botons dibuixats a la pantalla reaccionen produint efectes sonors. Durant el joc, la retroalimentació de l’àudio ajuda el jugador a sentir que les seves accions tenen un efecte. Exemple: el so que es reprodueix quan es torna a carregar una pistola. El so suma informació sobre el joc i el seu propi món. El soroll dels enemics que s’aproximen, per exemple, adverteixen el jugador del perill i el conviden a preparar-se per a l’acció. També ajuda a cridar l’atenció sobre esdeveniments importants del joc i a crear realisme. La música i els efectes sonors ajuden a submergir el jugador en el món del joc i encoratgen la suspensió de la incredulitat. Ajuden a posar al jugador en escena, fent-lo formar part de l’acció: les explosions sense àudio no són ni creïbles ni tampoc massa dramàtiques.
• Vibracions. En el cas dels videojocs, els fabricants de dispositius d’entrada han anat introduint millores en els seus productes per a crear noves sensacions en els jugadors i una de les més implantades és la utilització de la força, que permet que el joc recreï sensacions de força sobre el controlador (joystick o comandament) com, per exemple:
  • Recrear un tremolor per simular una sortida de carretera a un joc de carreres.
  • Fer força en una direcció determinada quan en un joc de simulació de vol l’avioneta està ascendint o girant.
  • Decidir la quantitat de força necessària en cadascuna de les accions anteriors.
  • En el cas de vibració, indicar-ne el període o la freqüència. Per exemple, augmentar la freqüència de vibració a mesura que el terreny es faci més rugós.

Les pantalles dels usuaris són planes, però dissenyadors i desenvolupadors s’han esforçat a fer que bona part del seu contingut es mostri simulant tres dimensions. Des dels inicis de les interfícies gràfiques d’usuari, les pantalles han utilitzat recursos com ara ombres, gradients o llums per a aconseguir simular efectes de 3D i ajudar així els usuaris a comprendre les accions disponibles a primer cop d’ull.

Els efectes tridimensionals donen una il·lusió de profunditat a una interfície i ajuden els usuaris a interpretar la jerarquia visual, així com també a comprendre quins elements són interactius.

Els elements que simulen estar elevats donen la idea que poden ser pressionats: aquesta tècnica s’utilitza sovint com un significant per als botons. Els elements que simulen estar enfonsats (o buits) donen la idea que han de ser omplerts: aquesta tècnica s’utilitza sovint com un significant per als camps d’entrada de text.

• Flat design o disseny pla. Pocs anys enrere va arribar al disseny web una moda que es va anomenar flat design o disseny pla. Aquest, a diferència del disseny tridimensional, ni tan sols intenta reproduir l’aparença del món físic, ja que és literalment pla, sense cap model d’il·luminació que emeti ombres subtils que indiquin el que es pot fer amb un clic simulant una elevació ni on es pot escriure simulant un enfonsament. En un disseny flat és difícil distingir un botó (clicable) d’una etiqueta (no clicable), de manera que els usuaris poden passar per alt o malinterpretar la interactivitat dels components de la interfície. Els usuaris necessiten significants per saber on poden fer clic/tocar en una pàgina: pistes perceptibles que els ajudin a entendre com utilitzar les interfícies. I les ombres són senyals inestimables a l’hora de dir-li al cervell humà quins elements de la interfície d’usuari s’estan veient.
• Disseny gairebé pla. Amb el temps alguns dissenyadors s’han adonat dels problemes d’usabilitat del disseny pla i, com a resultat, n’han fet una nova interpretació més equilibrada. Aquest estil és pràcticament pla, però fa ús d’ombres subtils, realçaments i capes per crear una mica de profunditat en la interfície d’usuari. Un exemple d’aquest tipus de disseny és el material design de Google, que pren els principis de la física per ajudar els usuaris a entendre les interfícies i interpretar les jerarquies visuals en el contingut.
• Ombres i elevació. Les interfícies modernes aprofiten l’eix z per tal de donar una sensació de profunditat a la interfície i provocar així una experiència més tangible. Les ombres, sense abusar, poden donar aquesta impressió de profunditat i ajudar els usuaris a tenir sentit de les interfícies. Trets importants que cal tenir en compte sobre l’ús d’ombres:
  • L’ombrejat indica que és possible fer clic en l’element.
  • Les ombres ajuden l’usuari a ser conscient de la jerarquia d’elements: ajuden a diferenciar entre dos objectes i indicar, si escau, si un està per sobre d’un altre.
  • Les ombres proporcionen indicacions visuals importants sobre el moviment direccional.
  • L’ombra hauria de ser més suau i més gran a mesura que augmenta l’elevació de l’objecte i, en canvi, més nítida i més petita a mesura que disminueix l’elevació.
  • Quan els usuaris no se senten segurs de si alguna cosa és clicable, necessiten una tranquil·litat immediata després de fer clic/teclejar. I aquí l’elevació entra en escena. L’elevació d’un objecte determina l’aparença de la seva ombra.
  • Utilitzar ombres pesades, gradients extrems o efectes d’il·luminació complexos pot tenir un efecte contraproduent i distreure l’usuari.

No és una bona idea deixar l’avaluació de la interfície per a quan ja s’ha acabat el disseny o quan s’ha acabat de programar i implementar l’aplicació, ja que en cas que hagin de corregir-se problemes greus implica modificar-ne una bona part, i això suposa una inversió d’hores i una pèrdua de temps important evitable amb avaluacions iteratives.

L’avaluació de la usabilitat s’ha de dur a terme diverses vegades al llarg de tot el procés:

1. Abans de començar el disseny. Si el projecte consisteix en el redisseny d’una aplicació ja existent, cal avaluar-la per conèixer els aspectes que s’han d’optimitzar.
2. Durant el procés de prototipatge. Els diferents tipus de prototips (wireframes, gràfic i funcional) es poden avaluar una o diverses vegades al llarg del procés de disseny. Per exemple, els wireframes poden ser avaluats, millorats i tornats a millorar. El mateix passa amb la resta de prototips. És important tenir en compte que es tracta d’un procés iteratiu, de millora continuada.
3. Després de la implementació. Un cop acabat el disseny i la implementació, cal un seguiment tant a partir de la recol·lecció de dades d’ús quantitatives com de la realització d’avaluacions, per comprovar com funciona l’aplicació en entorns reals i com cal adaptar-la a les variacions de context.