5.4. Prototipat visual (mockups) – Disseny d'Interacció (DxI)

Una vegada definit el disseny d’interacció d’un projecte, passem a treballar en el prototip visual o mockup del web o l’aplicació. El disseny visual ha de ser coherent amb els objectius del projecte i amb el target al qual va destinat. A més, si el projecte parteix d’una marca que té una identitat gràfica determinada, generalment el dissenyador haurà de treballar tenint en compte el llibre d’estil de la marca, per mantenir la coherència amb ella.

El prototip visual mostra amb tot detall quin serà el look-and-feel o aspecte final del producte. El prototip va guanyant detalladament a mesura que avança el procés, fins a arribar a ser una representació píxel-perfect del que es vol que sigui el web o l’aplicació una vegada publicats.

Els mockups han de mostrar no solament el disseny de les pàgines o pantalles, sinó també els diferents estats dels interactuables. Per exemple, cal definir quin aspecte tindran els botons en repòs, en hover, quan se seleccionen…

Exemple de mockups d’una aplicació per a mòbil (imatge d’https://s-media-cache-ak0.pinimg.com/736x/53/86/6c/53866c977a5e280af7790c11e9cdae86.jpg)

La guia d’estil forma part també del prototip visual. La guia és un document molt visual (conté solament el text imprescindible) en el qual el dissenyador especifica les característiques gràfiques del projecte, que solen ser fonamentalment les següents (encara que depenent del projecte poden afegir-se més):

Reticle
Gamma cromàtica
Estils tipogràfics (especificació dels estils utilitzats en el projecte)
Disseny d’interactuables (botons, camps de formulari, opcions desplegables…) en els seus diferents estats
Icones

Exemple de guia d’estil, en la qual s’observen les diferents especificacions de disseny (imatge d’http://www.underconsideration.com/brandnew/archives/new_logo_identity_and_ui_for_codecademy_by_pentagram.php#.V1qJg5OLSEJ)

6.4.2. Principis de disseny visual per a interacció

Encara que cada projecte té unes característiques visuals diferents, existeixen algunes qüestions que cal tenir en compte en el disseny per a pantalla, amb l’objectiu que l’usuari pugui entendre la informació que se li està mostrant i quines accions d’interacció pot efectuar en una pantalla o pàgina.

Reticle

El reticle proporciona ordre, continuïtat i harmonia a la presentació d’informació. A més, quan dissenyem per a webs responsive (en la qual el disseny ha d’adaptar-se a diversos dispositius), la utilització d’un reticle és molt recomanable per mantenir una continuïtat, malgrat els canvis inherents a cada grandària de pantalla.

Exemple de sistema de reticle adaptat als diferents formats de visualització d’una web responsive (imatge d’https://www.igentics.com/media/1086/1600×746-creativeindustries-web-14.jpg)

Tipografia

La tipografia transmet un to, humor o estil. Per tant, la selecció d’una font o una altra per a un projecte es realitza tenint en compte l’estratègia comunicativa del projecte. Per a un mateix projecte, és recomanable evitar combinar més de dues fonts, i si se’n combinen, haurien de presentar característiques clarament diferents, per generar un contrast perceptible.

En aquest disseny s’han utilitzat dues fonts (una sérif i una sans-sérif), que constrasten clarament, per establir un ritme visual (captura d’http://waaark.com/)

En pantalla es recomana alinear el text a l’esquerra per a textos extensos (en cas de textos breus poden utilitzar-se altres alineacions) i mantenir una longitud màxima de línia de 45/75 caràcters: com més llarga sigui la línia, més difícil serà llegir el text.

Encara que existeixi més espai horitzontal disponible, l’ample de la línia en pantalla ha de mantenir-se controlat, per afavorir la llegibilitat del text (captura d’https://backchannel.com/who-are-the-real-life-models-of-silicon-valley-characters-we-have-them-3507bc890d9a#.iu6qkmqim).

D’altra banda, per al disseny de webs o aplicacions, les fonts utilitzades poden ser les del sistema (que tots els usuaris tenen instal·lades, com Arial, Estafis, Verdana, etc) o webfonts (en cas que l’usuari no disposi de la font utilitzada, aquesta es descarrega d’un servidor online).

En cas que s’utilitzin webfonts, és important assegurar-se que el seu preu s’adapta als requeriments del projecte. A més, existeix un alt nombre de webfonts gratuïtes, com les que es troben a https://www.google.com/fonts

Disseny de botons call-to-action

Com es comentava a l’apartat dedicat al disseny d’interacció, els call-to-action són botons que capten l’atenció de l’usuari perquè realitzi una acció. S’utilitzen quan és important guiar l’acció de l’usuari. Resulta útil aplicar els següents criteris de disseny a aquest tipus de botó:

Proporcionar-li una grandària major que el dels elements que l’envolten, i que la resta de botons de la pàgina.
Col·locar-lo en una posició destacada a la pàgina (sempre dins de l’àrea inicialment visible sense scroll).
Per destacar-lo, reservar espai buit al voltant del call-to-action.
Proporcionar-li un color que el faci destacar respecte als elements que l’envolten.

Exemple de call-to-action clarament visible al centre de la pantalla (imatge d’https://designschool.canva.com/blog/call-to-action-button/?utm_source=newsletter18&utm_medium=email&utm_campaign=thisweekindesign)

Disseny de breadcrumb

Com es comentava a l’apartat dedicat al disseny d’interacció, el breadcrumb mostra a l’usuari la posició en què es troba dins de la web i el camí que ha seguit per arribar fins a ella. Resulta útil aplicar els següents criteris de disseny als breadcrumb:

Per separar els enllaços d’un breadcrumb, el símbol més recognoscible és >, ja que denota jerarquia. Altres símbols freqüentment utilitzats són >> i /.
El breadcrumb es col·loca generalment a la zona superior de la pàgina, sota la navegació principal (en cas que es tracti d’un menú horitzontal).

En aquest exemple el breadcrumb s’ha situat sota la imatge de capçalera, i just damunt de les subopcions de la pàgina en la qual ens trobem (captura d’http://www.designcouncil.org.uk/our-services/service-transformation)

Camp de cerca

El camp de cerca se sol situar a la cantonada superior dreta de cada pàgina del website, on els usuaris esperen trobar-lo.

Si el cercador és l’element central de la pàgina es pot utilitzar una ubicació centrada i proporcionar-li una major grandària.

És una bona pràctica incloure una cerca d’exemple en el camp de cerca, per indicar als usuaris quina és la seva funció. Aquest text hauria d’esborrar-se quan l’usuari comenci a escriure en el camp.

A Flickr el cercador ocupa un lloc central, ja que molts dels usuaris accedeixen a les imatges realitzant una cerca (captura d’https://www.flickr.com/)

6.4.3. Eines de prototipat visual

Com en el cas dels wireframes, per realitzar els mockups existeix una gran diversitat d’eines i freqüentment se n’incorporen de noves.

En el moment d’optar per una o una altra, per tant, és recomanable realitzar una cerca de les millors eines existents en aquell moment i valorar tant les seves funcionalitats com el seu preu.