10segons - memoria

Descobrir

Títol: 10 segons Autor: Josep Oriol Valentí Solà DNI: 41529455-B Tutora: Isadora Guardia ESCOLA AUDIOVISUAL I MULTIMÈDIA (ERAM) 2014 - 2015 Setembre 2015

“Per tots aquells que m'han suportat durant aquests mesos. En especial a la meva parella Anna, la dona més guerrera que conec, que m'ha donat forçes per tirar-ho endavant.”

Títol: 10 segons Autor: Josep Oriol Valentí Solà DNI: 41529455-B Tutora: Isadora Guardia ESCOLA AUDIOVISUAL I MULTIMÈDIA (ERAM) 2014 - 2015 Setembre 2015

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

SUMARI 1. Proposta creativa 1.1. Procés de creació

5

1.1.1. Factor fluïdesa

6

1.1.2. Factor flexibilitat

6

1.1.3. Factor ela boració

6

1.1.4. Factor innovació

7

2. Cap a una aproximació a la importància del disseny web com a element c 2.1. El procés comunicatiu i l’origen del “mass media” 2.2. Internet com a eina comunicativa 2.2.1. La World Wide Web 2.3. La interacció entre persona i ordinador

8 8 11 13 14

2.3.1. Definició d’interfície gràfica d’usuari

15

2.3.2. Usabilitat

20

2.3.3. Accesibilitat

21

2.3.4. El disseny centrat en l’usuari

23

2.3.5. Definició del concepte d’experiència d’usuari

25

2.3.5.1. Metodologies d’anàlisi i mesura 2.4. El disseny aplicat a la interfície gràfica

1

5

27 28

2.4.1. Principis del disseny aplicats disseny d’interfície d’usuari

28

2.4.2. L’estètica en la interfície gràfica interactiva

36

2.4.2.1. El color

36

2.4.2.2. La secció àuria

36

2.4.2.3. El balanç

38

2.4.2.4. Els espais en blanc

39

2.4.2.5. Les fotografies

39

2.4.2.6. Llegibilitat i intel ligibilitat

41

2.4.2.7. Llei de Fitts

42

2.4.2.8. Les lleis de la Gestalt aplicades al disseny d’interfície

42

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

2.5. El disseny de continguts 2.5.1. L’arquitectura de la informació com a atribut del disseny

46

2.5.2. La classificació

46

2.5.2.1.Classificació orientada a la tasca

48

2.5.2.2. Classificació temàtica

48

2.5.2.3. Classificació en funció de l’audiència

49

2.6. Les planes web d’aterratge 2.6.1. Tipologia de planes web d’aterratge 2.7. Crear i comunicar noves idees i propostes

50 50 52 53

3. Introducció

2

46

3.1. Planificació i realització

53

3.2. Objectius del treball

55

3.2.1. Objectius generals

55

3.2.2. Objectius específics

55

3.3. Desenvolupament creatiu

56

3.3.1. Recerca creativa

56

3.3.1.1. Referents d’estructura web

59

3.3.1.2. Referents d’estil

61

3.3.1.2.1. Tipografia

61

3.3.1.2.2. Il lustració

62

3.3.1.2.3. Animació

65

3.3.2. Proves

67

3.3.3. Estructura web

69

3.3.4. Desenvolupament web

71

3.4. Proposta creativa

71

3.4.1. Disseny

71

3.4.2. Guió

73

3.4.3. Generació de nom “Naming”

77

3.4.4. Tipografia i color

78

3.4.5. Animació

80

3.4.6. Anàlisi i modificacions

80

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

4. Llenguatges expressius

81

4.1 Millora del treball

81

4.2 Prospectiva

82

4.3 Conclusions

82

5. Bibliografia

86

6. Anexos

91

3

6.1. Briefing

91

6.2. Versions de guió prèvies

93

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Resum Aquest projecte personal, s’engloba dins la tipologia de treball de final de grau (TFG), una monografia extensa d’anàlisi sobre disseny i comunicació, tot realitzant un procés de creació tenint en compte elements propis del disseny web.

La proposta consisteix en la realització d’una plana web amb l’objectiu de comunicar d’una manera formal i organitzada, un conjunt d’idees i consells per l’elaboració d’una pàgina web d’aterratge també coneguda com a “Landing page”, amb el fi de d’explorar sobre la importància del disseny web en l’àmbit comercial.

Paraules clau Disseny web - comunicació - experiència d’usuari - conversió - Landing page

Resumen Este proyecto personal, se engloba dentro de la tipologia de trabajo de fin de grado (TFG), una monografía extensa de análisis sobre diseño web y comunicación, realizando un proceso creativo teniendo en cuenta elementos propios del diseño web.

La propuesta consiste en la realización de una página web dónde el principal objetivo será comunicar de manera formal y organizada, un conjunto de ideas y consejos para la elaboración de una página web de aterrizaje también conocida cómo “Landing page”, con la finalidad de explorar sobre la importancia del diseño web en el ámbito comercial.

Paraules clau Diseño web - comunicación - experiencia de usuario - conversión - Landing page

4

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Abstract This personal project fits in the typology of the TFG, it is an extend monograph about design and communication, including a creation process using elements from web design.

My work is about the creation of a website. It's goal is to provide the readers with useful information and advices in order to create your own landing website, or "Landing page". My goal with it is to be able to explore web's design importance in the commercial field.

Keywords Web design, comunication, user experience - conversion - Landing page

1. Proposta creativa Des de l’inici, el projecte està elaborat amb la intenció d’explicar la importància del disseny web per l’obtenció dels objectius plantejats. Des d’un punt de vista creatiu, el repte està en trobar una forma adequada d’explicar un tema ampli i complex de forma simple, gràfica i breu.

1.1. Procés de creació El procés creatiu ha estat present des de l’inici, intentant seguir una metodologia de treball creativa i oberta, que fomentés la generació d’idees i ajudes a enriquir el projecte des d’un punt de vista conceptual amb la intenció d’obtenir noves idees, punts de vista, corregir errors i eixamplar el ventall de solucions per a descobrir una forma adequada de comunicar el tema escollit.

5

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

1.1.1. Fluïdesa Per tal d’obtenir el major nombre de propostes davant el problema plantejat, el procés creatiu ha començat per la generació d’una pluja d’idees individual, on es pugui enumerar un gran nombre d’idees sense cap mena de censura, per tal d’engrandir el tema i obrir el ventall d’opcions d’enfocar el tema. Després, s’ha utilitzat la tècnica de preguntes, que consisteix en generar un conjunt preguntes específiques (Què? Per què? Com? Per qui?) que permetin obtenir una visió més clara del projecte i destacar el punts forts i febles de tema escollit.

Un cop acabades les opcions individuals, s’ha plantejat el projecte a una persona externa, que no estigui condicionada per les idees sorgides, i que fos capaç de donar idees i opinions sobre l’enfoc i el seu punt de vista respecte al tema plantejat.

1.1.2. Flexibilitat Des de l’inici, el tema a escollir gira entorn a les interfícies gràfiques, i la seva importància degut a la seva funció comunicativa entre humans i màquines. El tema ha patit variacions durant tot el procés, pel fet que la naturalitat del tema és àmplia i difícil d’abastar. El punt de partida sempre ha estat el mateix, comunicar l’exploració realitzada a través d’una forma simple i efectiva.

Durant el procés d’elecció de la temàtica, s’ha plantejat la possibilitat d’explorar-la des de diversos fronts com infografia, joc-web o animació gràfica, però finalment, s’ha optat per fer-ho a través de la creació d’una plana web.

1.1.3. Elaboració El procés d’elaboració ha estat llarg i dificultós, degut a la inexperiència alhora de mesurar el temps que s’hauria de dedicar a cada fase del projecte. Durant el procés d’elaboració, el projecte pateix una evolució natural, després d’haver dut a terme la tasca del documentalisme.

6

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Aquest fet sumat a l’opinió rebuda després de sotmetre el projecte a un punt de vista extern, fa replantejar la viabilitat de la idea escollida. La conclusió que s’obté és que perquè algú entengui el que es planteja, la idea ha d’ésser comunicada de forma clara i ordenada, sense oblidar en cap moment del seu punt de partida.

1.1.4. Innovació

Des d’un punt de vista creatiu, el projecte pretén ésser innovador tant a nivell de forma com de contingut. A causa de la seva rellevància, el disseny web ha estat exposat a un gran nombre d’exploracions i anàlisis, sovint demostrats mitjançant infografies estàtiques o animades, llibres, planes web, blogs… Tot i això, durant la recerca no s’ha trobat cap projecte que coincidís en temàtica, format i contingut.

El projecte 10segons pretén ésser innovador amb el format, explicant la importància de la creació de planes web de forma sintètica i atractiva. Els conceptes explicats, seran presentats mitjançant titulars acompanyats d’elements gràfics, per tal de facilitar la seva comprensió.

7

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

2. Aproximació a la importància del disseny web com a element comunicatiu 2.1. El procés comunicatiu i l’origen del “mass media” Des de l’inici de l’existència humana, la comunicació ha estat un procés fonamental per a la creació i el desenvolupament de les societats humanes. Al llarg dels segles els mètodes de comunicació han evolucionat, però la base sempre ha estat la mateixa, l’intercanvi de missatges. Segons la teoria de la comunicació humana, en el procés comunicatiu i intervenen un mínim de dos individus, anomenats emissor i receptor. L’emissor és l’encarregat de codificar i emetre un missatge a través d’un canal, i el receptor realitza el procés invers, descodificant el missatge rebut amb el fi de processar la informació continguda en el missatge. En aquest procés és més complex, ja que hi intervenen altres factors que poden influenciar el missatge, aquests però no són essencials per introduir al procés comunicatiu.

El 1920, gràcies a l’evolució tecnològica dels darrers segles, van aparèixer nous canals comunicatius que van permetre millorar la comunicació entre individus a distància. La premsa escrita, el telèfon, la ràdio i Internet en són alguns dels exemples més rellevants. Tots aquests, formen part dels anomenats mitjans de comunicació coneguts com els “Mass Media”, canals que obtenen un poder important en l’espai individual, familiar i social; actuen com a mediadors polítics que canalitzen i creen opinió pública, com a instruments de cultura i vehicles de difusió d’obres culturals; mecanismes a través dels quals els individus perceben el món que els envolta. (McLuhan ; 1964).

Amb la seva aparició, es desperta un gran interès governamental per tal d’obtenir eines que permetessin el control del comportament. En aquesta línia, apareix la teoria de l’agulla hipodèrmica, un estudi realitzat entre la primera i la segona guerra mundial per Harold

8

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Lasswell1, on afirma que la propaganda permet aconseguir adhesió de ciutadans a uns plans polítics determinats, sense necessitat de recórrer a la violència, mitjançant la manipulació.

Per a aprofundir en l’anàlisi de l’impacte dels mitjans de comunicació de masses apareix als Estats Units la ”Mass Communication Research”, projecte impulsat des del govern, vinculat a Universitats, empreses, organismes de defensa governamental i partits polítics, units amb el fi d’obtenir elements clau per entendre millor els mecanismes i millorar el control sobre el comportament de les masses. Mattelart, 1973. Vinculat a aquest corrent d’estudis apareix un model per determinar els àmbits d’anàlisi dels actes comunicatius, anomenat el model de Laswell i que es basa en la resposta a cinc interrogants: (1) Qui diu (2) Què, en (3) Quin Canal, (4) a Qui i amb (5) Quins Efectes?.

El 1948, Claude E. Shannon i Warren Weaver, publiquen un article on presenten una teoria de la informació. Aquesta teoria és la primera que interpreta la comunicació des d’un punt de vista numèric, i que per primer cop permet determinar mitjançant fórmules matemàtiques, quina és la forma més eficient i segura de transportar informació sense perjudicar la comunicació. (Abril, Gonzalo ; 1997).

Aquesta petita introducció a un marc d’estudi teòric i a un context històric ens permet entendre millor quin és el lloc que ocupa el sector comercial dins el procés comunicatiu, focalitzant la publicitat com l’element central d’aquest i entenent-lo com un sistema de comunicació, convertit en un fenomen cultural amb una dimensió semàntica i epistemològica. El seu sincretisme, el seu caràcter narratiu tancat i l’al·lusió a estereotips, el converteixen en un sistema de comunicació immediat i efectiu, que conforma una “cultura” de masses constituïda per símbols, mites i imatges assimilades per l’individu com una forma de “producció industrialitzada” de la 1

Harold Dwight Lasswell (Donnellson, 13 de febrer de 1902 – Nova York, 18 de desembre de 1978) fou un sociòleg estatunidenc. Professor de dret de laUniversitat Yale, és un dels pares i pioners de la investigació sobre comunicació de massa.

Especialista en temes de psicologia política, la seva metodologia ha esdevingut una de les pautes fonamentals en els estudis dels mitjans de comunicació de massa. Per més informació Mauro Wolf (1994) La investigación de la comuniccación de masas, Paidós, Barcelona. Mattelart, Michele (1980) Mass Media, Ideologies and the Revolutionary Movement, The Harvester Press, Sussex.

Miquel Rodrigo Alsina (1989) la construcción de la notícia, Paidos iberica, Barcelona.

9

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

realitat. Juntament amb la premsa, permeten configurar la cultura, entesa com la imatge que una societat es forma de si mateixa, permeten actuar de forma poderosa sobre el comportament (Todorov ; 2008: 90).

“Els mitjans de comunicació de masses han estat, des de la seva aparició, una eina molt lucrativa per a governs, empreses privades i tots aquells que els volguessin usar de forma persuasiva. S’han utilitzat per formar tendències en l’opinió pública, influir sobre els votants, modificar actituds, moderar la conducta, derrocar o construir mites i vendre productes. Aquesta funció és més efectiva quan es duu a terme de forma subtil.”

(D’Adamo, García Beaudoux y Freidenberg ; 2000:3).

Pel que fa als canals de comunicació associats al fenomen del “Mass Media”, Internet, ha suposat un canvi radical de model, superant en tots els aspectes, als mitjans de comunicació clàssics existents, pel seu radi d’abast, la simultaneïtat, l’anonimat que ofereix, l’heterogeneïtat de la seva audiència i la seva capacitat de creixement, només limitada per la tecnologia digital i l’economia. (Biagi ; 2005). Gràcies al seu creixement, Internet s’ha convertit en un canal de negoci molt important, que serveix d’altaveu mundial per petits i grans comerciants d’arreu del món.

El comerç electrònic consisteix en la compra venda de productes o serveis per mitjans electrònics. Aquest tipus de comerç es va iniciar el 1970, i des d’aleshores no ha parat de créixer. Internet és un mercat en auge, amb una oferta cada cop més àmplia, i en conseqüència amb una competència cada cop més alta. Les planes web en són l’aparador visible, i per tant, són un factor molt rellevant dins l’intent d’obtenir més rendibilitat i visibilitat, i en conseqüència, alhora de vendre més.

Aquest treball pretén estudiar la importància del disseny web, per tal de poder oferir unes pautes sobre bones pràctiques alhora d’elaborar una tipologia de plana web concreta, enfocada al sector comercial.

10

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

2.2. Internet com a eina comunicativa El 1958, apareix als Estats Units d’Amèrica una agència anomenada ARPA2, finançada pel govern, amb la fi d’incrementar l’evolució tecnològica per a ús militar del país. El projecte neix com arrel de la guerra freda, per contra restar el notable avantatge demostrat pel govern Rus, amb el llançament dels Sputnik3. El Març del 1960, ARPA inicia l’experimentació amb interfícies d’ordinador, però no és fins al 1969 quan apareix ARPANET4, coneguda per ser la primera xarxa d’ordinadors creada per ésser utilitzada com a mitjà de comunicació entre els diversos organismes nacionals dels EUA.(InternetSociety ; 2012).

ARPANET, permetia enviar i rebre dades a través d’un protocol anomenat NCP5. Al 1972 es va dur a terme una presentació pública del funcionament del sistema per DARPA6.

A partir

d’aquest moment, DARPA es va centrar en recercar noves tècniques per interconnectar xarxes de diverses classes, desenvolupant nous protocols comunicatius per a millorar l’intercanvi d’informació virtual. Aquests avenços van permetre al 1983 substituir l’antic protocol NCP per l’actual protocol TCP/IP. En aquest moment, apareix el terme “Internet” per definir totes aquelles xarxes interconnectades mitjançant el protocol TCP/IP.(InternetSociety ; 2012).

L’evolució d’una xarxa global, comença a estandarditzar-se i no és fins al 1990 quan un equip de físics del

CERN7 encapçalats per Tim Berners-Lee, creen el llenguatge HTML8, un

llenguatge de marcatge que permetia estructurar textos i relacionar-los a través d’hipertext9.

(Ronda ; 2001), "From the ARPANET to the Internet".

Paral·lelament a DARPA, i al terme Internet, al 1978, apareix un sistema de comunicació a través de la xarxa telefònica anomenat BBs, acrònim de “Bulletin Board system” i traduït com sistema de taulell d’anuncis. Aquest permetia als ordinadors més potents, accedir a un taulell 2 3 4 5 6 7 8 9

ARPA “Advanced Research Projects Agency” Agència de projectes d’investigació avançats, actualment anomenada DARPA. Sputnik o programa Sputnik, missions espacials no tripulades, per demostrar la viabilitat dels satèlits artificials a l’òrbita terrestre.

ARPANET “Advanced Research Projects Agency Network” NCP “Network Control Program” Programa de control de xarxa.

DARPA “Defense Advanced Research Projects Agency” CERN “Conseil Européen pour la Recherche Nucléaire” o Consell Europeu per la investigació nuclear.

HTML “Hyper Text Markup Language” o llenguatge de marcat d’hipertext.

Hipertext sistema d’organització d’informació basat en la possibilitat lògica de moure’s entre textos per mitjà de paraules clau.

11

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

d’anuncis virtual, estil “teletext”. El taulell permetia introduir anuncis, es podien enviar correus electrònics, hi havia sales de xat i jocs en línia. Aquest sistema va ser molt popular als Estats Units fins al 1994, any en què es varen abaratir els costos de connexió telefònica i la World Wide Web ja apareixia per imposar-se com a estàndard alhora d’accedir a internet. (Luján ; 2012).

Des de la seva presentació pública fins a l’actualitat, Internet ha patit un creixement exponencial. Des de la seva presentació pública al 1993, les seves xifres d’usuaris no han deixat de créixer. Segons dades de la ITU10, el 1995 menys d’un 1% de la població mundial tenia accés a Internet. Es calcula que és a partir del 1999 quan l’ús d’Internet comença a créixer de forma molt notable. Al 2005, un bilió de persones hi tenen accés i al cap de cinc anys, la xifra es duplica. Actualment, al voltant d’un 40% de la població mundial té accés a

Internet. (Internetlivestats.com ; 2015).

Figura1. Estadística del creixement d’usuaris d’Internet. font: Internet Live Stats

10 11

International Telecomunication Union o Unió internacional de telecomunicacions. http://www.internetlivestats.com/internet-users/

12

11

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

2.2.1. La World Wide Web L’abril de 1993 l’equip del CERN presenta de forma pública el que actualment coneixem com “el web” un conjunt d’eines pensades per a poder navegar i crear planes web. El projecte obre un món de possibilitats per explorar i ampliar, la navegació web comença esdevenir popular i apareixen noves alternatives per navegar a través de la xarxa, una de les més destacables és ViolaWWW, considerat el primer navegador gràfic, va destacar per ser el primer en incloure estil al text i als hipervíncles de la xarxa. Posteriorment, apareix MOSAIC, el segon navegador gràfic, reconegut actualment com el més emblemàtic dels inicis de la World Wide Web, per la seva cuidada interfície gràfica i per la seva popularitat.

Figura 2. Captura del primer navegador web gràfic.

12

font: http://www.viola.org/

13

12

font: http://www.viola.org/

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

2.3. La interacció entre persona i ordinador La interacció Persona-Ordinador13 és una àrea d’estudi centrada en el fenomen d’interacció entre usuaris i sistemes informàtics, amb l’objectiu d’establir unes bases teòriques, metodològiques i pràctiques per al disseny i avaluació dels productes interactius. L’objectiu de l’àrea és aconseguir que els productes puguin ésser usats de forma eficaç, eficient, segura i satisfactòria. Per a fer-ho, es basa en moltes disciplines com la psicologia cognitiva i de la conducta, l’ergonomia, la sociologia, l’antropologia i les ciències de la computació. (Rogers ; 2012).

A l’inici de la seva aparició, aquest camp d’estudi es centrava en analitzar les habilitats i processos cognitius de l’usuari, observant el seu comportament racional. A l’any 2000 apareix una article anomenat “Touch me, hit me and I know how you feel: a design approach to emotionally rich interaction” (Stephen Wensveen, Kees Overbeeke, Tom Djajadiningrat). En aquest, s’introdueix per primer cop l’emoció dins el procés d’interacció entre persona i ordinador, redefinint l’enfoc d’estudi tradicional que deshumanitzava l’usuari impedint comprendre de forma acurada els factors implicats en la interacció.

El comportament emocional de l’usuari és resultat de tres factors diferents: les emocions evocades per al producte durant la seva interacció, l’estat d’humor de l’usuari i per últim els seus sentiments preassociats cap al producte. (Hassan i Martin ; 2005) Els sentiments, al contrari que les emocions o l’humor, no són estats de l’individu, sinó propietats de valor que l’usuari associa al producte resultat de les seves experiències prèvies, ja sigui per l’ús amb anterioritat del mateix producte o de productes similars. Tots aquests elements emocionals per tant, juguen un paper clau en la interacció de l’usuari, segons Scott Brave i Clifford Nass (2002), les emocions afecten la capacitat d’atenció i memorització, al rendiment de l’usuari i a la seva valoració final del producte.

13

Traducció de l’acrònim anglès HCI “Human-Computer Interaction”

14

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

El disseny d’un producte, pot evocar emocions de forma explícita, emulant “afecte” o de forma implícita, a través de la seva estètica. En l’actualitat existeixen molts exemples de producte que utilitzen l’emoció per tal de millorar l’experiència que obté l’usuari del mateix. Un exemple emblemàtic de producte que fusionava emocions implícites i explicites, és el del programa d’ofimàtica Microsoft Office, que al 2003 va incloure un ajudant virtual amb forma de clip, que mostrava emocions pròpies dels éssers humans. Un altre exemple més actual el trobem en els dispositius mòbils d’Apple amb el conegut Siri, un assistent virtual per veu, que té nom de persona i és capaç de respondre a preguntes de caràcter personal i/o emocional.

1.

2.

Figura 3. Assistents virtuals que expressen afecte 1.Clip de Microsoft Office. 2. Assistent de veu de Apple.

2.3.1. Definició de interfície gràfica d’usuari La interfície gràfica és el canal de comunicació entre els humans i els ordinadors. Entenem interfície gràfica d’usuari com tots els elements gràfics i indicadors visuals compresos dins d’un sistema operatiu amb la intenció de permetre i facilitar la seva utilització. ( Linfo.org ; 2004).

15

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

El terme és un derivat de la interfície d’usuari i es caracteritza per ser un element de connexió entre humà i màquina. Dins les interfícies d’usuari podem distingir-ne de tres classes, de hardware14 (físiques), de software15(virtuals) o de software-hardware (física i virtual).

D’interfícies gràfiques d’usuari en trobem no solament als ordinadors, sinó a tota mena de dispositius, com reproductors multimèdia portàtils, Dvd’s, mp3, video-consoles… La seva funció principal és la de simplificar i acostar a les persones el procés de comunicació entre aparells electrònics i humans.

En el cas dels ordinadors, per a estandarditzar la interacció entre usuari i ordinador al 1980 es va introduir el terme WIMP, es creu que va ser Merzouga Willberts, un acrònim traduit al català com “finestra, icones, menús i punter”, que defineix una estructura d’elements en comú, per tal d’unificar i simplificar la interacció.

Els elements estructurals bàsics que conformen una interfície gràfica són: -

Finestra: És un element de la pantalla que mostra informació independent a la resta d’elements de la pantalla. Es pot manipular per ampliar-ne les dimensions fins a cobrir tota la pantalla, o reduir-la al màxim, per tal de poder-ne tenir més d’una oberta, es pot expandir o amagar a través de les icones.

14 15

Totes les parts tangibles d’un sistema informàtic.

Tots els conjunts lògics que conformen un sistema informàtic.

16

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Figura 4. Exemple de finestra del sistema operatiu Windows 8.

-

Icona: És una imatge, normalment petita, que representa o intenta representar objectes físics, amb la finalitat de fer una interfície més comprensible i més fàcil d’usar per a tothom. Serveix per executar documents, ordres i programes. Les imatges usades no varien gaire entre sistemes operatius, per tal d’unificar i simplificar al màxim la seva compressió. L’únic que varia al llarg del temps és el seu estil, adaptant-se a l’estètica global del sistema operatiu.

Figura 5. Exemple de conjunt d’icones del sistema operatiu Windows 8.

17

10segons Oriol Valentí Solà

-

Tutora: Isadora Guardia

Pestanya/es: És una petita caixa rectangular que conté una etiqueta de text o una icona associada. El concepte apareix en els navegadors web que permeten tenir oberta més d’una finestra, diferenciant-les a partir d’un nom o del logotip de la plana web.

Figura 6. Exemple de pestanyes de navegació, amb pestanya activa subratllada del navegador Google Chrome.

Una interfície gràfica també conté elements d’interacció, amb els quals l’usuari es podrà moure i interactuar amb l’espai virtual, els més destacats són: -

El punter o cursor: Símbol que sol tenir forma de fletxa, respon als moviments del ratolí. Permet a l’usuari ubicar-se i moure’s a través de la interfície i pot executar opcions com arrossegar un element, seleccionar-lo i/o obrir-lo.

Figura 7. Exemple de punter d’interfície gràfica.

-

Punt d’inserció: Barra vertical, que indica la posició de la pantalla en la qual apareixerà el text si escrivim quelcom. Permet per tant, ubicar a l’usuari per tal d’evitar que es desorienti.

18

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Figura 8. Exemple de punt d’inserció dins un editor de text.

-

La selecció: element o elements que apareixen destacats al seleccionar-los amb el cursor, sobre els quals es podrà executar una acció concreta (p.ex: copiar o retallar).

Figura 9. Exemple de fragment de text seleccionat mitjançant l’opció de selecció.

19

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

2.3.2. Usabilitat La usabilitat - anglicisme que significa "facilitat d'ús" com indiquen Bevan, Kirakowski, i Maissel (1991) sembla tenir l'origen en l'expressió "user friendly", que és reemplaçada per les seves connotacions vagues i subjectives.

Nombrosos autors han proposat diverses definicions d'usabilitat, normalment a través de l'enumeració dels diferents atributs o factors mitjançant els quals pot ser avaluada, depenent finalment cada definició de l'enfocament amb el qual pretén ser mesurada (Folmer ; 2003).

En aquest treball utilitzarem la definició oferida per la ISO, que és la més estesa i defineix usabilitat com “el grau d'eficàcia, eficiència i satisfacció amb què usuaris específics poden aconseguir objectius específics, en contextos d'ús específics".

La usabilitat és un concepte central dins l’estudi de la interacció entre persona i ordinador. El concepte no només pot ésser definit com a atribut de qualitat d'un producte, sinó conseqüentment, com a metodologia de disseny i avaluació. En aquest sentit es sol parlar d’enginyeria de la Usabilitat UE, Usability Engineering i Disseny Centrat en l'Usuari UCD, User Centered deisgn - conjunt de processos i metodologies que assegurin empíricament el compliment dels nivells d'usabilitat requerits per al producte - Hassan, Fernández, Iazza ; 2004.

Segons Jakob Nielsen (2003), conegut com “el guru de la usabilitat web”, els elements que permeten mesurar-la són: -

Facilitat d’aprenentatge: de l’anglès Learnability, fa referència a la dificultat amb què un usuari duu a terme les tasques bàsiques en la primera presa de contacte amb una interfície.

-

Eficiència: Un cop après el funcionament bàsic de la interfície, quan tarden en realitzar les tasques?

20

10segons Oriol Valentí Solà

-

Tutora: Isadora Guardia

Eficàcia: Durant la realització d’una tasca, quants errors fa l’usuari?, i si en fa, com són de greus les conseqüències d’aquells errors?, com l’usuari pot desfer les conseqüències dels seus errors?

-

Satisfacció: Com d’agradable i senzill li ha semblat a l’usuari la realització de les tasques?

Aplicant aquests indicadors a una mostra representativa de persones, es podria obtenir una referència clara de com d’usable és l’aplicació o web analitzada. No obstant això, cal tenir clar que no sempre els resultats acabaran donant amb una fórmula clau, i segueix existint un alt grau d’incertesa alhora de com avaluar productes interactius.

La usabilitat és un atribut fonamental per a crear una bona interfície, però no és l’únic. En primer lloc cal no confondre usabilitat amb utilitat, ja que tot i que s’assemblen i van en paral·lel, no són el mateix. Utilitat, és el profit, benefici i interès que produeix usar un producte. En canvi, la usabilitat representa el grau en què un usuari pot explotar la utilitat.

La usabilitat, per tant, és quelcom mesurable i millorable. Això no obstant, no només serà el “creador” d’un producte o eina el que haurà de fer esforços per millorar-ne l’ús, sinó que en molts casos, serà necessari que l’usuari també s’adapti a ell. Un exemple clar és el dels automòbils, eines que requereixen un gran esforç d’aprenentatge i adaptació, però que no per això són entesos com poc usables. (Norman ; 2005.)

2.3.3. Accessibilitat L'accessibilitat d'un lloc web fa referència a la possibilitat que pugui ser accedit i usat pel major nombre possible de persones, deixant de banda les limitacions pròpies de l'individu o de les derivades del context d'ús. Per limitacions pròpies de l'individu ens referim a les discapacitats permanents o temporals - dels usuaris, o a les imposades pel seu nivell de coneixements, habilitats o experiència. Per limitacions derivades del context d'ús ens referim a les condicionades pel programari, maquinari o entorn d'ús. (Hassan, Fernández ; 2004).

21

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Quan parlem d’accessibilitat, hem d’entendre que és un atribut i un requisit més de la usabilitat.

Tot i amb això hi ha una estesa creença que són atributs diferents (i de vegades fins i tot incompatibles), conseqüència d'una (errònia) interpretació exclusivament tècnica del concepte d'accessibilitat, en la qual aquesta sembla quedar reduïda al compliment de les directrius WAI16. Les pautes d'accessibilitat han de considerar, tan sols, com un punt de partida en el camí cap a l'accessibilitat, ja que no és possible considerar un disseny plenament accessible mentre hi hagi usuaris objectius que no puguin o sàpiguen fer servir el lloc web.

Entre les directrius més importants referenciades a la web oficial de la W3, trobem: -

Informació perceptible i interfície d’usuari: Tota la informació compresa dins una plana web, ha de poder ésser llegida, sigui text o no. Per fer-ho s’haurà d’utilitzar l’etiqueta html <alt> que permetrà incloure una referència textual de qualsevol element, sigui imatge, vídeo o àudio. A més, els elements hauran d’incloure una llegenda que descrigui el contingut per a la seva comprensió.

-

Interfície d'usuari operable i navegació: El 100% de les funcions que ofereix la plana web, ha d’ésser operatiu a través del teclat, a més el contingut ha d’estar ordenat i contrastat permeten ésser localitzats fàcilment.

-

Informació comprensible i interfície d'usuari: El text haurà d’estar escrit de forma coherent i comprensible, a més, el contingut haurà d’aparèixer i actuar de forma predictible, utilitzant mecanisme de navegació lògic i estructurat. La interfície haurà d’ésser predictible i oferir elements repetits per no desorientar a l’usuari.

-

Contingut Robust i fiable interpretació: El contingut haurà d’ésser compatible amb diferents navegadors i tecnologies de suport.

16

Espai web oficial de la World Wide Web, on es defineixen els estàndards web.http: // www.w3.org/WAI/(darrera visita: 24/03/15)

22

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Es podria argumentar que l'accessibilitat té vocació universal i és resultat d'un "disseny per a tots", mentre que la usabilitat és relativa, i resultat d'un disseny orientat a satisfer una audiència específica. Però això no és cert, ja que usabilitat i accessibilitat són resultat d'un disseny centrat en tots els usuaris que conformen l'audiència del producte, però no a la resta de la població. És a dir, una filosofia de disseny usable és aquella que persegueix satisfer la seva audiència específica, assumint la diversitat d'aquesta audiència. Atendre aquesta diversitat implica complaure a usuaris amb diferents habilitats, coneixements, edat, gènere, discapacitats, condicions d'accés, formació, cultura, ingressos, etc. (Shneiderman ; 2000) La diversitat de l'audiència no és un problema intranscendent. Per començar perquè hi haurà poques característiques compartides per un gran percentatge de l'audiència, però una gran quantitat d'elles compartides per percentatges molt menors. A més, com alerten Newell i Gregor; 2000 "proporcionar accés a persones amb cert tipus de discapacitat pot fer el producte significativament més difícil d'usar per persones sense discapacitat, i sovint impossible d'usar per persones amb diferent tipus de discapacitat". Això vol dir que, en moltes ocasions, el disseny haurà de ser diferent o adaptable dinàmicament per a diferents usuaris (i contextos d'ús) (Hassan ; Martín, 2004), cosa que actualment és possible tecnològicament, però més costós a nivell de recursos i temps.

2.3.4. Disseny centrat en l’usuari El disseny Centrat en l’usuari o DCU(UCD, User-Centered Design) fa referència al conjunt de processos i metodologies que asseguren empíricament el compliment dels nivells d’usabilitat requerits per un producte. Es centra en una visió o filosofia de disseny en la que el procés està conduit per informació sobre l’audiència objectiva del producte. (UPA17;2010) L’origen d’aquesta visió s’emmarca en el disseny industrial i militar de la dècada dels cinquanta, on els dissenyadors estan convençuts que l’optimització i l’adaptació de l’ésser humà al disseny de productes respon a un minuciós procés d’investigació en els factors humans, l’ergonomia, l’antropometria, l’arquitectura o la biomecànica (Hassan i Ortega, 2003).

17

“Usability professionals association”, associació de professionals de la usabilitat.

23

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

El DCU es diferencia de la resta per tenir un procés no-lineal o seqüencial, sinó que utilitza cicles en els quals es prova el disseny, es troben errors i es torna a provar, i a base d’iteració amb el producte, s’optimitza fins a arribar al nivell de qualitat desitjat.

El procés d’iteració en el DCU consta de les següents etapes o fases inicials: 1. Planificació i Investigació: defineix conceptualment el producte d’acord amb la investigació

de

l’audiència

objectiva

i

les

seves

necessitats,

motivacions,

característiques, model mental, activitats…) i segons l’anàlisi competitiu ( si existeixen altres productes amb audiències i funcions similars) 2. Decideix elements i funcionalitats de disseny, des de la dimensió més general fins a la dimensió més específica.

3. Avalua les decisions prèvies, i decideix si es pot començar la fase de producció o s’ha de refer.

4. Implementació: Un cop el disseny assoleix el nivell requerit, es comença la fase de producció.

5. Monitorització: Un cop acabat el producte, s’estudia l’ús que en fan els usuaris, per tal d’identificar oportunitats de millora.

Figura 10: gràfic descriptiu sobre els processos d’iteracció del DCU. font: https://uxpa.org/resources/about-ux; darrera cerca: 24/03/2015

24

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

2.3.5. Definició del concepte d’experiència d’usuari L’experiència d’usuari és el resultat d’un fenomen interactiu en el qual intervenen multitud de factors. Sensació, sentiments, resposta emocional, valoració i satisfacció de l’usuari respecte un producte, resultat del fenomen d’interacció amb el producte i la interacció amb el seu proveïdor. El concepte, té origen en el camp del màrqueting, i es relaciona directament al concepte d’experiència de marca, que pretén establir un vincle o relació familiar i consistent entre consumidor i marca. (Hassan, Martin ; 2005).

El concepte es popularitza en el camp de la creació web, i s’usa l’acrònim UX “User experience” per definir-lo. No obstant això, pot ésser aplicat a qualsevol producte, aplicació o web. Nielsen18 proposa al 2012, una definició genèrica del concepte “L'experiència d’usuari comprèn tots els aspectes de la interacció de l'usuari final amb l'empresa, els seus serveis i els seus productes.”

Segons Arhippainen y Täthi19(2003) l’experiència d’usuari és “l’experiència que obté l’usuari quan interactua amb un producte en unes condicions particulars”.

Per analitzar l’experiència d’usuari, Arhippainen i Täthi proposen deglosar-la en les variables que conté. Segons elles, es compon de cinc tipus de variables: factors d’usuari, socials, culturals, de context d’ús i propis del producte.

18

Nielsen,Jakob Reputat tèoric del camp de l’experiència d’usuari i l’usabilitat, conegut per ser el fundador de Norman & Nielsen Group, empresa de consultoria d’experiència d’usuari i usabilitat.

19 Arhippainen,Leena; Tähti,Marika; autors de l’estudi “Empirical Evaluation of User Experience in Two Adaptive Mobile Application Prototypes”(2003) http://www.ep.liu.se/ecp/011/007/ecp011007.pdf

25

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Figura 11: Imatge de l’estudi elaborat per Arhippainen i Täthi. font:http://www.ep.liu.se/ecp/011/007/ecp011007.pdf (última visita 11/3/2015)

(2003)

20

De forma més específica, centrat només en el context de la creació de planes web, Peter Morville (2004), proposa desglossar-la en un diagrama a partir de les propietats que ha de complir: Útil, usable, desitjable, fàcil de trobar, accessible, creïble i valuós.

Figura 12: Imatge del blog de Peter Morville

20 21

21

font:http://www.ep.liu.se/ecp/011/007/ecp011007.pdf (última visita 11/3/2015) font:http://semanticstudios.com/user_experience_design/ (última visita: 24/03/15)

26

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

L’any 2005, Keith Instone en el seu treball (“An umbrella topic”) defineix l’experiència d’usuari des d’un punt de vista pràctic, relacionant-la conceptualment amb la idea de paraigües, capaç de contenir totes les disciplines professionals relacionades amb el disseny de productes interactius. Aquestes en són algunes de les més representatives: -

Arquitectura de la informació: Ciència i art d’estructurar la informació perquè pugui ésser més visible i rellevant.

-

Enginyeria de la usabilitat: Conjunt de conceptes i tècniques per planificar, realitzar i verificar els objectius d’usabilitat d’un sistema.

-

Disseny gràfic: Activitat que permet comunicar i transmetre de forma gràfica un o diversos missatges amb objectius clars i determinats.

-

Disseny d’interacció: Camp de desenvolupament interdisciplinari, que s’encarrega de definir el comportament interactiu dels productes i sistemes.

2.3.5.1. Metodologies d’anàlisi i mesura Per tal d’aconseguir mesurar i calibrar al màxim la relació entre usuari i producte o servei, existeixen mètodes i eines que es centren en mesurar l’experiència emocional, com per exemple PrEmo, una eina no verbal, basada en divuit emocions, representades en un personatge de còmic. En acabar la prova amb el producte, es pregunta a l’usuari quin personatge escolliria, en relació a la reacció emocional que hagi sentit.

Figura 13: PrEmo (Desmet, Hekkert, Hillen; 2003),

27

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Existeixen altres mètodes i eines per a mesurar els estats afectius de l’usuari, basats en qüestionaris, reconeixement de l’expressió facial o que utilitzen electroencefalogrames per mesurar l’activitat cerebral i determinar quina ha estat la reacció d’un usuari al interactuar amb determinats elements.

2.4. El disseny gràfic aplicat a la interfície gràfica El disseny de la interfície d’usuari, és clau en la mediació de les diferents relacions cognitives i emocionals que estableixen els usuaris quan interactuen amb un sistema. La comprensió i identificació dels models associats al disseny i al desenvolupament d’interfícies ens possibilita un acostament a la lògica de l’usuari i constitueix una eina de gran utilitat per facilitar els objectius d’interacció i comunicació.

Aquest disseny de la interfície, el desglossarem d’acord amb la consecució de dos objectius diferenciats. Per un costat, s’han tingut en compte els aspectes objectius de la usabilitat com són la utilitat o la facilitat d’aprenentatge i de l’altre, s’han tingut en compte els aspectes subjectius relacionats amb la qualitat de l’experiència, i per tant relacionats amb l’actitud afectiva de l’usuari envers al sistema, com són la satisfacció o l’estètica.

Dissenyar una interfície permet crear una funció a la forma, amb la finalitat de simplificar l’accés i navegació a l’usuari. Segons Jerry Cao, un bon disseny d’interfície determinarà si l’usuari es quedarà més de dos segons al web, ja que el sentit de la visió és el primer que té lloc en l’experiència de l’usuari (Web UI Design for the Human Eye ; 2015:6). Així doncs, la retina serà la principal responsable de retenir i integrar a l’usuari dins una interfície gràfica.

2.4.1. Principis del disseny aplicats al disseny d’interfície d’usuari El disseny d’interfície d’usuari ha d’intentar ésser el màxim eficient possible, permeten a l’usuari completar la seva tasca interactiva de forma ràpida i sense imprevistos. Aquest és clau alhora de determinar quina serà la impressió final d’un usuari cap al producte o servei. Idealment, el

28

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

producte hauria de poder respondre a cada acció de l’usuari de forma instantània, o si més no en el menor temps possible.

Un dels estils d’interacció que requereix major esforç per part de l’usuari són els formularis de dades. Aquests sol·liciten a l’usuari entrar una informació de forma obligatòria si vol seguir amb el procés. Per tal de facilitar aquest procés s’han de tenir en compte aquests factors: -

Minimitzar el nombre de camps: Per tal d’evitar l’excés d’esforç i la conseqüent desmotivació de l’usuari, s’hauria d’evitar demanar informació que no fos imprescindible.

-

Valors per defecte: Per tal d’estalviar temps, cal mostrar les opcions més freqüents amb un valor per defecte.

-

Dimensió dels camps de text: Al introduir informació textual, el camp de text ha de tenir la dimensió adequat, ja que si és molt petit, exigirà major esforç i provocarà més errors.

-

Alineació de les etiquetes: Quan les etiquetes es troben pròximes al camp de text que descriuen, resulta menys dificultós relacionar-les visualment.

29

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

22

Figura 14: Proximitat entre etiquetes i camps de text .

-

Organització dels camps: Els formularis amb els camps posicionats en diverses columnes, són més complexos d’emplenar que els d’una sola columna.

22

font: http://uxmovement.com/forms/form-label-proximity-right-aligned-is-easier-to-scan/

30

10segons Oriol Valentí Solà

Figura 15: Exemple de formulari composat en una única columna.

Tutora: Isadora Guardia

23

Figura 16: Exemple de formulari composat en una dues columnes.

23 24

font: http://uxmovement.com/forms/aligning-submit-buttons-on-column-layouts/ font:http://uxmovement.com/forms/aligning-submit-buttons-on-column-layouts/

31

24

10segons Oriol Valentí Solà

-

Tutora: Isadora Guardia

La llei de Fitts: Com menor sigui l’àrea clicable d’un element, major és l’esforç i temps requerit per accionar-lo.

-

La llei de Hicks: Reduir al mínim el nombre d’opcions per camp.

-

Captchas: Són difícils i incòmodes de resoldre, sobretot els anomenats “re-captchas”.

Per tal de facilitar el procés s’haurien d’utilitzar mètodes més senzills.

Figura 17: Desavantatges d’utilitzar “captchas” tradicionals, davant mètodes més senzills.

-

25

Validació instantània: Un cop hagi introduït un camp, el camp hauria d’ésser validat a l’instant, per tal de mostrar error en cas d’ésser incorrecte, evitant així haver d’esperar al final del procés per determinar si els camps són correctes o no.

25

font:http://uxmovement.com/forms/captchas-vs-spambots-why-the-slider-captcha-wins/

32

10segons Oriol Valentí Solà

Figura 18: Exemple de formulari amb validació d’errors instantània.

Tutora: Isadora Guardia

26

http://uxmovement.com/forms/why-

long-forms-need-instant-field-validation/

-

Ajuda contextual: Quan l’usuari tingui dubtes sobre el significat d'algun dels camps o sobre com introduir les dades, hauria de rebre ajuda contextual.

-

Suggeriments automàtics: Quan el llistat d’opcions a escollir dins un camp de text sigui gran, i l’usuari tingui una representació mental sintàctica de l’opció desitjada, resulta més recomanable utilitzar un camp de text que quan l’usuari comenci a escriure, ofereixi de forma automàtica les opcions que coincideixin amb el text introduït.

A més de facilitar l’eficiència, el disseny s’hauria d’encarregar d’evitar o preveure l’error humà.

Els usuaris cometen errors, en gran part pel fet que quan utilitzen un producte interactiu, la seva principal prioritat és l’eficiència, és a dir, aconseguir el seu objectiu en el mínim temps possible. Això implica que no s’aturin a observar i pensar sobre tots els detalls de la interfície, ni sobre cada acció que duen a terme.

26

font:http://uxmovement.com/forms/why-long-forms-need-instant-field-validation/

33

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

El disseny hauria de preveure que l’usuari cometi errors, oferint-li vies de solució quan aquests es produeixin, ja que són la major causa de frustració per part de l’usuari. Segons Norman, aquests errors no s’haurien de considerar errors de l’usuari, sinó errors del sistema o de mal disseny. A més, suggereix que és hora de deixar a les persones comportar-se com persones, per tal d’exemplificar de forma més clara com actualment encara existeix molta feina per fer quant a la interacció entre humà i ordinador.

Figura 19: Exemple d’error de sistema.

27

Existeixen una sèrie de mesures per tal de millorar aquest fet: -

Limitar les possibilitats: Com més es limitin les formes de dur a terme una mateixa acció, menor serà la probabilitat que es faci erròniament.

-

Orientar a l’usuari: Oferir ajuda contextual, mitjançant breus explicacions o “tooltips”, redueix la probabilitat d’error.

27

font:http://www.jnd.org/dn.mss/error_messages_are_e.html

34

10segons Oriol Valentí Solà

Figura 20: Exemple de camps de text amb ajuda per evitar l’error.

-

Tutora: Isadora Guardia

28

Advertir i sol·licitar informació: Quan l’usuari realitzi una acció que pugui tenir conseqüències irreversibles, cal advertir-lo i sol·licitar-li una confirmació, per tal de dificultar-li l’operació amb la intenció d’evitar que prengui una mala decisió sense saberho.

-

Protegir la feina de l’usuari: El guardat automàtic és una forma d’evitar pèrdua d’informació i la conseqüent frustració i mala imatge cap al producte.

-

Permetre desfer: Un dels mecanismes més eficaços per evitar conseqüències negatives d’un error humà, és permetre a l’usuari desfer en qualsevol moment els canvis realitzats.

-

Solució automàtica d’errors: Cal solucionar els errors de forma automàtica, evitant obligar a l’usuari a rectificar-los.

-

Missatges d’error il·legibles: En cas d’ésser impossible evitar un error humà o del sistema, cal que aquest informi de forma clara i llegible, i que ofereixi una solució al problema.

28

font:http://alistapart.com/article/good-help-is-hard-to-find

35

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

2.4.2. L’estètica en la interfície gràfica interactiva El resultat d’aquest procés de creació sovint es coneix com el “Look and feel” una expressió anglesa que prové del màrqueting i fa referència a l’aspecte visual i d’interacció. En el cas de la web, es determina a través d’elements com el color, la tipografia, les formes i la composició a més dels aspectes interactius com les animacions i les transicions.

No existeixen directius o recomanacions infal·libles perquè un disseny resulti estètic, però existeixen conceptes sobre els fonaments del disseny que tenen molt de pes alhora de crear una interfície gràfica.

2.4.2.1. El color El color és un dels recursos amb major impacte en l’estètica i atractiu d’una interfície. Millora l’estètica i funciona de forma eficaç tant per destacar i organitzar elements, com per codificar informació. Segons Norman (2003), no hi ha cap motiu racional que faci pensar que el color pot ajudar alhora de millorar una interfície, però afegeix que després de provar un monitor en color, ja no va voler-lo canviar. Aquest fet s'atribueix a la reacció emocional que produeix el color.

El color no té una funció exclusivament estètica o emocional, ja que també pot tenir una important funció comunicativa. En moltes ocasions el color pot utilitzar-se com a recurs per reforçar el significat d’algun element de la interfície.

2.4.2.2. La secció àuria El número àuric és un número algebraic irracional el valor del qual és aproximadament 1,61803. Si tenim dos segments, a i b, essent de major tamany que b, podem parlar de proporció Àuria quan la proporció entre la suma de dos segments i la del segment a, és la mateixa que entre el segment a i el segment b.

36

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Figura 12:Segment dividit en dos segments a ib de forma àuria: El segment sencer és al segment a com el segment a és al segment b. Font: wikipedia

Aquesta proporció és rellevant en l’àrea del disseny gràfic, ja que la trobem en moltes formes geomètriques de la naturalesa, i que han estat aplicats durant segles en l’arquitectura i l’art a causa del seu efecte positiu.

En l’àrea de la creació d’interfícies gràfiques, aquesta proporció ha estat implementada per tal de determinar l’ample i la proporció entre dues columnes (quan una és major a l’altre) o en la proporció entre l’amplada i l’altura de rectangles.

Figura 21: Forma gràfica de la secció àuria.

37

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Figura 22: Exemple d’aplicació de la secció àuria a la interfície gràfica de Twitter.

2.4.2.3. El balanç El balanç com a concepte aplicat al disseny, busca com a la física, igualar tensió entre elements. Un disseny equilibrat, és percebut com a més estètic, ja que transmet harmonia.

Una forma d’aconseguir un disseny equilibrat, és mitjançant la simetria, en la que els elements a cada costat de l’eix central tenen el mateix pes visual.

Però també existeixen formes d’aconseguir un disseny equilibrat mitjançant dissenys asimètrics. Per aconseguir-ho, s’ha de jugar amb el pes visual dels elements fins a arribar a un estat d’equilibri entre ambdós costats de l’eix central. El pes visual d’un element es determina en funció de les seves dimensions, color, intensitat, proximitat o d’altres elements o marges.

38

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Figura 23: Exemple de balanç asimètric, on el pes visual de la imatge de la dreta compensa els textos de l’esquerre.

2.4.2.4. Espai en blanc El procés de disseny ha de tenir molt en compte els espais buits, per tal d’alleugerir la càrrega visual i cognitiva de l’usuari. L’espai en blanc també s’anomena espai negatiu, i es refereix a l’espai i marge entre elements o grups d’elements. Aquest, facilita la diferenciació d’elements o grups d’elements, alleugereix l’exploració visual i incrementa la simplicitat, l’elegància i l’aparença estètica del disseny.

2.4.2.5. Les fotografies Les fotografies tenen una gran capacitat per comunicar i evocar emocions, i un impacte directe en l'estètica del disseny. Si bé les fotografies tenen un gran potencial per millorar l’experiència de l'usuari, una mala o descurada utilització pot tenir l'efecte completament contrari: provocar

39

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

desconfiança en l’usuari, transmetre poca professionalitat o entorpir la interacció i exploració visual de l' usuari. Entre els errors més comuns en la inclusió de fotografies en productes digitals es troba utilitzar fotografies sense funció més enllà de la purament ornamental; fotografies d'una grandària tan reduïda que les fa il·legibles; o fotografies de persones que es perceben com a artificials, en què és difícil veure identificat o que atreguin l’atenció (cosa que sol ser bastant comú quan s'utilitzen fotografies gratuïtes de bancs d'imatges).

Chudley (2013) proposa una senzilla llista per determinar o avaluar la efectivitat d'una fotografia: 1. Llegibilitat i credibilitat 1.1. ¿Es pot veure clarament el contingut de la foto? Aspectes a avaluar: focus, composició, exposició, qualitat i grandària.

1.2. La foto sembla creïble?

Aspectes a avaluar: professionalitat, adequació (al context i marca), versemblança i rellevància.

2. Quins missatges comunica la foto?

Aspectes a avaluar: Què es vol comunicar, què comunica i què hauria de comunicar per satisfer les necessitats de l'usuari.

3. Utilitat i eficàcia 3.1. La fotografia provoca la resposta emocional desitjada?

Aspectes a avaluar: desig, aspiració, estètica, calma, entreteniment i altres emocions.

3.2. La fotografia ajuda o facilita a l'usuari la seva tasca?

Aspectes a avaluar: Serveix a un propòsit? ¿Educa sobre alguna cosa o provoca pensar de forma diferent sobre un tema? ¿Instrueix sobre com fer alguna cosa? És 40

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

constructiva? Ajuda a prevenir l'error humà? Permet reconèixer alguna cosa en lloc d'haver de recordar? ¿Comunica eficaçment el seu missatge? El significat és el mateix en diferents països o cultures? La fotografia expressa alguna cosa que seria més difícil d'expressar amb paraules?

3.3. Té la fotografia algun impacte en el comportament de l’usuari?

Aspectes a avaluar: La fotografia dirigeix eficaçment la mirada de l' usuari ? ¿Incita que l'usuari dugui a terme l’acció desitjada? És capaç de canviar l'opinió del usuari? Provoca que l'usuari desitgi el producte o continguts de la fotografia? Motiva que l'usuari comparteixi el contingut amb altres? Fa que l'usuari atribueixi alguna qualitat a la marca?

Comunica el missatge al seu públic objectiu?

2.4.2.6. Llegibilitat i intel·ligibilitat Una gran part dels problemes que existeixen en la interacció entre persona i ordinador sorgeixen del llenguatge, que en ocasions, no permet comunicar de forma clara i comprensible les opcions que disposa l’usuari en cada moment.

Els textos, capçaleres i continguts d’una interfície ha de ser llegibles i intel·ligibles, és a dir, s’han de poder llegir i entendre de la forma més ràpida i còmode.

La llegibilitat d’un text depèn de diversos factors: (Hassan; 2014:118)

41

-

Font tipogràfica

-

Tamany de la font

-

Contrast

-

Interlineat o espai entre línies

-

Longitud de la línia

-

Estils tipogràfics

-

Majúscules

-

Concisió

-

Previsibilitat

10segons Oriol Valentí Solà

-

Vocabulari dels usuaris

-

Consistència

-

Precisió

-

Formes verbals

-

Preguntes

-

Estàndards de facto

-

To

Tutora: Isadora Guardia

2.4.2.7. Llei de Fitts La llei de Fitts, publicada per Paul Fitts el 1954, fa referència a un model general de comportament psicomotor que permet predir el temps i l’esforç requerit per una persona aconseguir una àrea determinada, a partir de la seva distància i tamany. (Academic Press, 2004).

En la seva aplicació al disseny de la interacció, la llei de Fitts determina que com més petit sigui un element i major sigui la seva distància des de la posició d’inici de l’apuntador (punter del ratolí o dit en interfícies tàctils), major serà l’esforç i temps requerit.

Per tal d’usar aquest principi correctament, caldrà tenir molt en compte el tamany dels elements d’interacció dins una interfície (botons, controls, enllaços…) per tal d’assegurar que sigui el mínim complexos d’accionar.

2.4.2.8. Lleis de la Gestalt aplicades al disseny d’interfície Quan observem un disseny, de forma immediata, automàtica i inconscient organitzem perceptualment tot allò que estem veient, identificant relacions d’agrupació, coordinació, continuïtat i ordre entre elements.

42

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

El terme Gestalt pot ésser traduït com a “forma” “figura” o “estructura”, i té el seu origen en la teoria de la Gestalt (Gestalttheorie) sorgida a Alemanya a principis del s. XX. Aquesta teoria apareix acompanyada de tota un corrent de pensament dins de la psicologia moderna.

Els seus exponents més reconeguts han sigut els teòrics Max Wertheimer, Wolfgang Köhler, Kurt Koffka i Kurt Lewin. (Hassan ; 2015:91) De totes les lleis de la Gestalt, les que són més aplicables al disseny d’interfície són: -

La llei de proximitat: Els elements pròxims entre si, i distanciats de la resta, són percebuts de forma conjunta.

Figura 24. Elements pròxims entre si son percebuts de forma conjunta. Font: creació pròpia.

-

Llei de semblança: Els elements que comparteixen característiques visuals (forma, color, dimensions, orientació, textura) tendeixen a ser agrupats perceptualment.

Figura 25. Elements pròxims entre si son percebuts de forma conjunta. Font: creació pròpia.

-

43

Llei de tancament: La nostra ment tendeix a completar formes inacabades.

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Figura 25. Forma inacabada. Font: creació pròpia.

-

Llei de simetria: Les formes asimètriques són percebudes amb més dificultat i com incompletes.

Figura 26. Forma asimètrica i forma simètrica. Font: creació pròpia.

-

Llei de continuïtat: L’atenció visual tendeix a seguir instintivament la direcció espacial dels elements. Com més suaus siguin els canvis de direcció més fàcilment seran percebuts i agrupats conjuntament els elements.

44

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Figura 27. Direcció espacial d’elements. Font: creació pròpia.

-

Llei del destí comú: Els elements que es mouen cap a un mateix destí o una mateixa direcció són agrupats perceptualment.

Figura 28. Elements cap a una mateixa direcció. Font: creació pròpia.

-

Llei de la regió comú: Els elements ubicats dins una mateixa regió són percebuts com a agrupats.

45

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Figura 29. Elements situats en una mateixa regió. Font: creació pròpia.

2.5. El disseny de continguts 2.5.1. L’arquitectura de la informació com a atribut del disseny El terme arquitectura de la informació va ser encunyat originalment per Richard Saul Wurman al 1975, i definit com “L’estudi de l’organització de la informació amb l’objectiu de permetre a l’usuari trobar la seva via de navegació cap al coneixement i la comprensió de la informació”. ( Wurman; 1997: 17) Dins el vessant del disseny de continguts, l’arquitectura de la informació pot ésser usada per tal de permetre a l’usuari trobar la informació que necessiti; facilitar la navegació i comprensió del producte; i motivar-lo a explorar continguts i funcions.

2.5.2. La classificació La classificació de continguts pot tenir diferents propòsits o funcions. La funció més freqüent és facilitar la recuperació d'informació, permetre a l'usuari satisfer les seves necessitats

46

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

d'informació. En aquest cas una categorització eficaç és aquella que empra un llenguatge o vocabulari familiar per a l'usuari i en el qual els continguts agrupats sota cada categoria resulten predictibles. En altres paraules, una classificació que encaixa amb el model mental dels seus usuaris.

Una altra funció diferent és la instructiva o didàctica: quan la categorització o taxonomia pretén influir en el model mental i semàntic de l'usuari. En aquests casos la taxonomia no serveix únicament com a mitjà per trobar la informació, sinó també com a via per ensenyar o formar l'usuari sobre el domini representat. Ja no és el vocabulari i terminologia coneguda pels usuaris la qual cal emprar, sinó la del domini de coneixement sobre el qual s'instrueix. Això vol dir que no comparteixen el mateix objectiu una taxonomia en un comerç electrònic que, per exemple, la d'un lloc web educatiu.

La classificació de qualsevol conjunt de recursos es sustenta sobre la caracterització d'aquests recursos per les seves propietats, i la seva posterior agrupació per propietats comunes.

Aquestes propietats poden ser formals o descriptives.

Les propietats formals són objectives, això significa que un recurs té aquesta propietat o no la té, independentment del judici de l’arquitecte d'informació. Per exemple, si estem classificant les fitxes d'ordinadors personals en una botiga en línia, i ho fem pel seu preu (propietat formal), l'arquitecte d'informació podrà decidir quines categories es presentaran a l'usuari ("de 100-500 €", "de 500 € a 1000 €", " més de 1000 €"), però no és ell qui decideix a què categoria o grup pertany cada ordinador. En altres paraules, no decideix quin preu té cada ordinador, ni quina és la seva mida de la seva pantalla o el seu pes, perquè aquestes són propietats formals.

Les propietats descriptives, en canvi, són subjectives i variables. Si per exemple classifiquem temàticament els continguts d'una revista línia, la decisió de quines categories temàtiques s'utilitzaran i de quina categoria temàtica es vincularà cada article de la revista, no és una decisió exempta de subjectivitat. En aquests casos l'efectivitat d'una categoria, des del punt de vista de la recuperació d'informació, ve determinada per la seva expressivitat i exclusivitat.

47

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

L'expressivitat es refereix al grau en el qual l'usuari podrà predir els continguts representats o vincular inequívocament la categoria amb les seves necessitats d'informació. L’exclusivitat es refereix al grau de dissimilitud de la categoria respecte a la resta de categories, i per tant a la baixa probabilitat que un usuari pugui dubtar entre si el que busca es pot trobar a més d'una categoria. Depenent de la propietat descriptiva utilitzada per agrupar els continguts, i per tant del rètol o nom que se li assigni a cada categoria, podem diferenciar entre tres esquemes principals de classificació descriptiva: Classificació orientada a l'audiència, classificació orientada a la tasca, i classificació temàtica. A continuació analitzarem cadascuna, assenyalant en quins casos seran recomanables.

2.5.2.1. Classificació orientada a la tasca Si el que estem categoritzant no són continguts informatius, sinó funcionalitats, o informació sobre com utilitzar aquestes funcionalitats, les categories han d'estar orientades a l'acció i retolades normalment en forma verbal.

Figura 30. Exemple de classificació orientada a la tasca. Font: https://www.paypal.com/es/webapps/mpp/merchant

2.5.2.2. Classificació temàtica Es coneix com la forma més comú i efectiva de classificar el contingut, mitjançant la classificació temàtica, a través de categories en forma de substantius.

Aquest esquema de classificació resulta molt útil quan l'usuari té una representació semàntica de la seva necessitat informativa, ja que facilita reconèixer què s'està buscant recorrent les diferents categories. No obstant això, aquest tipus de classificació també pot resultar

48

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

problemàtica per a l'usuari, a causa de l'ambigüitat inherent del llenguatge natural (sinonímia i polisèmia). En tractar-se d'una classificació subjectiva, potser l'usuari no reconegui el significat d’algunes categories, o sigui incapaç de predir quins continguts estan representats per cada categoria.

Figura 24: Exemple de classificació del contingut per temàtica. Font: http://www.constructionguide.in/finishing-works/false-ceiling/what-is-gypsum-false-ceiling/

2.5.2.3. Classificació orientada a l’audiència Quan el producte té una audiència clarament definida i segmentada, la classificació del contingut s’elabora en funció dels destinataris. Aquest tipus de classificació és poc usat, i només té sentit si tots els continguts es poden categoritzar almenys des d’un dels perfils o segments d’usuari definits, i quan aquests perfils d’usuari tenen necessitats informatives diferents entre si.

49

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Figura 25: Exemple de classificació del contingut orientada a l’audiència. Font: https://www.lacaixa.es/

2.6. Les planes web d’aterratge En el sentit més pur, una pàgina d’aterratge, és qualsevol plana web on l’usuari pot arribar o “aterrar”. No obstant això, quan es parla de planes web d’aterratge “landing page” es sol relacionar amb l’àmbit del màrqueting i la publicitat, i s’utiltiza per definir aquella plana web que ha estat creada com de forma independent al seu lloc web principal, i ha estat dissenyada amb un sol objectiu molt enfocat, limitant les opcions disponibles per als seus visitants, i guiant-los cap a la meta de conversió prevista.

2.6.1. Tipologia de planes web d’aterratge Hi ha dos tipus bàsics de planes web d’aterratge, “click through” i “Lead generation”.

1. “Click through” o fes clic a través: té l’objectiu de convèncer al visitant de fer clic cap a un altra pàgina. Es sol utilitzar en campanyes de planes web de comerç electrònic, per emfatitzar un producte o oferta amb detall i persuadir al visitant perquè obtingui un punt de vista positiu sobre el producte i pugui acabant comprant-lo.

50

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Figura 25: Exemple de “Click through page” amb tres atributs que defineixen el producte a la part inferior, i un botó de conversió a la part superior dreta.

2. ”Lead generation” o generadores de plom: S’utilitzen per capturar dades de l’usuari, com un nom o una adreça de correu electrònic. El seu únic objectiu és recaptar el màxim d’informació possible, per tal d’ampliar la xarxa de potencials clients, i aconseguir vendre més.

Tradicionalment, aquest tipus de plana, conté un formulari juntament amb una descripció del que s’obté a canvi d’enviar les seves dades personals. Les recompenses obtingudes al donar les teves dades, varien en funció del tipus de lloc que sigui, per exemple si és una plana que anuncia un software, doncs poden oferir-te una prova gratuïta, un descompte o un llibre electrònic que tingui contingut relacionat amb el tema del software.

51

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Figura 26: Exemple de “Lead page” amb la descripció de la oferta a l’esquerre i el formulari de dades a la dreta.

2.7. Crear i comunicar noves idees i propostes En l’actualitat, la tecnologia ha envaït molts aspectes de la nostra vida, i la tendència demostra que aquest increment no cedirà en els darrers anys, fet que demostra que vivim condemnats a entendre’ns amb la tecnologia. Diàriament, usem més d’un dispositiu, aplicació i/o lloc web, amb el qual interactuem per mitjà d’una interfície d’usuari, concebuda com a punt de trobada entre usuari i producte. (Hassan; 2015) Així doncs, prenent de base aquest fet, el treball té com a objectiu principal aprofundir en l’estudi del disseny d’interfícies web, per tal d’explorar sobre formes de comunicació gràfica i textual efectives, que permetin complir amb els objectius plantejats. El resultat serà una plana web d’aterratge, que ofereixi alguns dels passos més rellevants alhora de crear una plana d’aterratge.

52

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

3. Introducció En aquesta fase del projecte s’utilitzarà el coneixement i les dades adquirides durant la fase de recerca documental, per tal d’elaborar una proposta formal que permeti per una banda, posar en pràctica el coneixement adquirit i per l’altre assolir el conjunt d’objectius plantejats.

3.1. Planificació i realització Fase 1 documentalisme: 1/05/15 -

Recerca teòrica de l’aparició i el desenvolupament d’Internet, per tal d’observar i entendre l’evolució social i tecnològica que va implicar la seva aparició.

-

Recerca teòrica sobre la relació entre els humans i els ordinadors, per tal de determinar quines són les limitacions existents, així com determinar com es poden resoldre.

-

Recerca teòrica en l’àmbit del disseny gràfic aplicat al disseny d’interfície, amb la finalitat d’analitzar les diverses tècniques utilitzades, i extreure idees i referents gràfics.

-

Recerca de projectes web que tinguin relació amb l’experiència d’usuari, per tal d’observar quin és el seu plantejament alhora de comunicar una idea.

Fase 2 Briefing 15/06/15 -

Redefinir el tema escollit per tal de generar una proposta innovadora i diferenciadora.

-

Definir el públic objectiu per tal de determinar una línia de comunicació clara i uniforme, adaptant el llenguatge gràfic i visual a un públic determinat.

53

10segons Oriol Valentí Solà

-

Tutora: Isadora Guardia

Realitzar uns terminis d’entrega per tal de ser el més eficient possible en un període de temps determinat.

-

Definir els objectius que es pretenen assolir amb la realització d’aquest treball.

-

Establir uns requisits obligatoris del treball per tal de marcar uns patrons lògics durant el procés d’execució.

Fase 3 o Fase creativa: 30/6/15 -

Direcció creativa: el què.

-

Direcció d’art (imatge gràfica, tipografia i interacció): el com.

-

Realització tècnica: prototipat, disseny i blog.

-

Realització del la plana web.

-

Realització del discurs i la presentació

Execució final i Presentació del projecte: 10/09/15

54

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

3.2. Objectius del treball 3.2.1. Objectius generals L’objectiu principal d’aquest projecte és l’experimentació mitjançant la creació d’una plana web amb un discurs didàctic, que ofereixi una visió general sobre la importància del disseny d’interfície en l’àmbit de la creació web.

Un objectiu intrínsec al primer, és el d’analitzar i explorar l’experiència d’usuari, per tal d’aprofundir en la matèria i poder obtenir coneixements específics sobre punts de vista, enfocaments, metodologies i software utilitzat per a millorar-la.

3.2.2 Objectius específics ●

Pel que fa a la web:

-

Oferir informació de qualitat, lleugera i sintètica, evitant i substituint l’excés de text per imatges.

-

Oferir el contingut de forma clara i concisa.

-

Ensenyar quelcom al visitant de forma divertida i despreocupada.

-

Aconseguir que el màxim nombre de visitants arribi al final de la plana.

-

Aconseguir que el màxim nombre de visitants faci clic al botó d’anar al blog.

-

Augmentar el nombre de visites del blog.

-

Ha de poder transmetre una experiència igual de satisfactòria des d’un mòbil o tauleta que des de l’ordinador.

55

-

Ha d’estar preparada per ser traduïda.

●

Pel que fa al blog:

-

La temàtica ha de tenir relació amb el contingut de la plana web principal.

-

Ha d’ésser molt simple d’usar.

-

Haurà d’oferir la possibilitat d’introduir comentaris de forma senzilla.

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

●

Objectius opcionals:

-

Disponible en diversos idiomes.

-

Animacions fetes amb svg.

-

La plana web haurà d’incloure un test A/B també anomenat Split Test.

●

Formació pròpia:

-

Ampliar i millorar els meus coneixements teòrics i pràctics.

-

Ampliar i millorar els meus coneixements de programari.

-

Ampliar la meva capacitat de treballar en projectes amb disseny responsiu.

3.3. Desenvolupament creatiu 3.3.1. Recerca creativa Aquest projecte té com a objectiu explorar en les formes de comunicació gràfica i textual a través d’una plana web. Per poder enfocar el projecte, s’ha analitzat a través de la recerca prèvia realitzada a la primera fase, la relació entre els humans i els ordinadors, així com les bases del disseny d’interfície. Des de l’inici de la recerca, s’ha treballat amb la intenció d’entendre més el comportament d’una persona davant una plana web per tal d’observar si existeix una relació entre una plana web ben elaborada i l’èxit que aquesta pugui assolir. El concepte creatiu escollit per fer-ho, es basa en destacar la importància de la primera impressió en una web com a element diferenciador.

La primera impressió és un factor clau alhora de condicionar una decisió. Un exemple pràctic el trobem en el cas del Paó real, que utilitza tota la seva bellesa formal, per causar una bona primera impressió i així aconseguir aparellar-se.

56

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Figura 27: Paó real obrint el seu plomall de bat a bat per tal de causar impressió.

En l’àmbit de la creació web, existeixen proves i estudis que han provat la importància d’una primera impressió. Al 2012, el departament de recerca de Google va realitzar un estudi en el qual van demostrar que un visitant tarda de mitjana 50 mili-segons a crear una opinió sobre el que veu.

Un altre estudi sobre les primeres impressions realitzat al 201029 determina que el porcentatge d’abandonament de les planes web és molt més alt poc temps després d’haver-hi entrat.

Aquest estudi queda il·lustrat a la figura 28 on es mostra el % de probabilitats d’abandonament de visites d’una plana web respecte al temps de visita.

Figura 28: Gràfic que il·lustra els resultats de l’estudi sobre la duració de les visites a planes web. http://dl.acm.org/citation.cfm?doid=1835449.1835513 29

Liu Chao, Ryen W.White, Dumais Susan. (2010) Understanding web browsing behaviors through Weibull analysis of dwell time

57

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

La primera conclusió extreta de la recerca ha estat entendre que no es tracta d’una fórmula matemàtica que es pot aplicar en qualsevol situació, sinó tot el contrari, per poder dissenyar una plana web “efectiva” s’haurà d’entendre primer de tot, per quin tipus de públic s’està creant.

Cada tipus de públic tindrà un nivell de coneixements diferent, uns gustos diferents, un nivell socioeconòmic diferent, i unes necessitats diferents. A l’entendre que no existeix la possibilitat de crear una fórmula que permeti satisfer a tothom, caldrà doncs, descobrir i entendre molt bé com pensen les persones a qui anirà dirigida la plana web.

La segona conclusió extreta, és que existeix un factor psicològic molt important vinculat al comportament i les accions que un usuari realitzi en un lloc web, és a dir, una persona no reaccionarà sempre igual davant la mateixa interfície, sinó que ho farà condicionat pel seu estat físic i mental d’aquell precís moment.

Un cop extretes les conclusions de la recerca, es planteja com utilitzar la informació obtinguda de forma pràctica. L’opció escollida és la de crear una plana web de tipus landing page, on s’ofereixi un recorregut visual i narratiu que permeti aproximar al visitant conceptes fonamentals a l’hora de crear una plana web de tipus landing page.

Alhora de crear la plana, s’han establert unes prioritats que permetin expressar el concepte d’una forma adequada. En primer lloc, per tal de recolzar i donar sentit al concepte creatiu, les explicacions hauran d’ésser breus i sintètiques, fins al punt de poder ésser enteses de forma parcial o total, en un màxim de deu segons. De forma complementària, s’oferirà si s’escau informació addicional més extensa sobre cada apartat, la qual no estarà regida pel criteri dels deu segons. En segon lloc, amb la intenció de crear una experiència més immersiva i evitar distraccions, el disseny serà plantejat com una unitat, evitant crear una separació visual entre una explicació i un altre.

58

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

3.3.1.1. Referents d’estructura web

Figura 29: Exemple de plana web amb el contingut centrat.http://www.helpscout.net/consumer-behavior/

Figura 30: Exemple de landing page amb titulars centrats. https://www.diagoniste.com

59

10segons Oriol ValentĂ­ SolĂ

Tutora: Isadora Guardia

Figura 31: Exemple de landing page amb titulars centrats. http://desiign.de

Figura 32: Exemple de landing page amb titulars centrats. https://www.postbox-inc.com

60

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Figura 33: Exemple de landing page amb titulars centrats. https://www.postbox-inc.com

3.3.1.2. Referents d’estil 3.3.1.2.1. Tipografia Alhora d’escollir la família tipogràfica, la llegibilitat ha el centre de la cerca.

Figura 31: Referents de tipografia. https://www.google.com/fonts

61

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Figura 32: Referents de tipografia.. http://www.fontsquirrel.com/fonts/lato

3.3.1.2.2. Referents d’il·lustració Les il·lustracions han de poder ésser enteses amb un obrir i tancar d’ulls, a causa d’això les formes hauran d’ésser simples, icòniques i estereotipades per poder ésser compreses ràpidament.

62

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Figura 33: Il·lustracions icòniques recolzades per text. http://diagnosite.com/

Figura 34: Il·lustracions icòniques. https://support.google.com/webmasters/answer/6001103?hl=es&ref_topic=4631146

63

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Figura 35: Il·lustracions icòniques recolzades per text. http://www.momentsapp.com/

Figura 36: Il·lustracions icòniques recolzades per text. http://vizua.sk/en

64

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Figura 37: Il·lustracions icòniques recolzades per text. https://www.formlets.com/#relax

3.3.1.2.3. Referents animació Les animacions hauran d’ésser simples i amb moviments que connotin naturalitat i fluïdesa. La seva funció serà la de donar suport al discurs narratiu, facilitant i agilitzant la velocitat de compressió dels conceptes explicats.

65

10segons Oriol ValentĂ­ SolĂ

Tutora: Isadora Guardia

Figura 37: Exemple de plana web amb animacions simples i descriptives. http://www.nowaynsa.com/

Figura 38: Exemple de plana web amb transicions suas i naturals. http://desiign.de/

66

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

3.3.2. Proves Per realitzar una proposta de plana web, s’han realitzat proves en cerca de l’estructura, l’estil i el to adequat, per tal de generar una proposta que compleixi amb els objectius creatius plantejats.

Durant les proves d’estructura, es va utilitzar l’estructura i la primera versió de guió, de forma que cada apartat aparegués separat per un gran titular i un color pla de fons. Aquesta idea perd força després de veure el resultat, ja que crea una separació de pantalles molt definida, i en conseqüència dificulta la unitat narrativa i el concepte creatiu del projecte.

Figura 39: Proves d’estructura amb guió.

Les proves d’estil es varen elaborar amb la intenció d’escollir un estil i una cromàtica adequada al concepte creatiu. En les primeres proves, la intenció era crear una interfície gràfica que simules tenir vida, per tal de crear una experiència més immersiva.

67

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

.

Figura 40: Proves d’estil d’interfície.

Figura 41: Proves d’estil d’interfície i de cromàtica.

68

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Quant a l’estil d’il·lustració, des de l’inici els referents han estat clars, però tot i amb això, la forma s’ha hagut d’anar perfeccionant, intentant buscar el grau idoni d’iconicitat, amb la finalitat d’ésser usades com a suport per al text, però sense entrar en massa detalls que puguin distreure l’usuari de seguir explorant per la plana.

Figura 41: Proves d’estil iconicitat de les il·lustracions.

3.3.3. Estructura web El contingut estarà ordenat i separat per titulars. El text no ocuparà el 100% de la pantalla, tindrà una amplada màxima de 960px. L’amplada general serà del 100%, amb la intenció de poder cobrir tot l’ample de pantalla. A la pantalla principal trobarem el títol del projecte i un petit descriptor. A la part superior de la pantalla es mostraran dues opcions, la primera serà la d’escollir l’idioma de la plana web, la segona serà la d’obtenir més informació sobre el projecte.

Al llarg de la plana web la informació estarà disposada de forma vertical i ordenada per punts.

Cada punt oferirà informació essencial i de forma addicional contindrà un botó que al prémer-lo desplegarà una finestra que cobrirà tota la pantalla i oferirà més informació al voltant del tema tractat.

69

10segons Oriol Valentí Solà

Figura 42: Disseny d’estructura de la web.

Figura 43: Disseny d’estructura de la web.

70

Tutora: Isadora Guardia

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

3.3.4. Desenvolupament web El procés de planificació de les tasques de programació, s’ha elaborat a partir dels objectius principals del projecte, els quals requerien en primer lloc, que el disseny fos responsiu, és a dir, concebut de forma que es pogués visualitzar de forma correcta, des d’un ordinador, tauleta o telèfon intel·ligent. Per fer-ho, des de l’inici s’ha plantejat una estructura matriu, la qual pot ésser fragmentada per poder redistribuir el contingut de forma ordenada en qualsevol dispositiu. Aquesta tècnica es realitzarà mitjançant la utilització de Media Queries, una coneguda regla de CSS, que permet discriminar els estils de la plana web i mostrar-ne un concret per qualsevol dimensió de pantalla.

El següent requeriment obligatori a tenir en compte, ha estat la funció de traducció que hauria d’oferir la plana web. L’objectiu de plantejar una plana web preparada per ser traduïda, planteja preparar la plana web per poder ésser traduïda per qualsevol persona, no cal tenir coneixements de codi per fer-ho. Per fer-ho possible, s’ha utilitizat el llenguatge de programació PHP, que permet introduir elements dinàmics en una plana estàtica d’HTML, permeten entre altres coses, poder crear una sola plana base, que pugui ésser traduïda des d’un altra fulla, facilitant així la creació d’un lloc multiidioma. Com es pot apreciar en l’exemple de la figura 44, aquesta és la forma de “cridar” a una traducció des d’un altra fulla a través de PHP.

Figura 44: Exemple de crida a traducció amb llenguatge PHP.

3.4. Proposta creativa 3.4.1. Disseny A continuació s’observen algunes de les il·lustracions creades, totes dissenyades utilitzant la síntesi visual i la tècnica del “flat design”, que consisteix en crear un disseny minimalista,

71

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

enfocat en la facilitat d’ús del mateix, ja que el projecte ho requeria. Destaca per les seves il·lustracions bidimensionals.

Figura 45: Disseny generat utilitzant la tècnica del “flat design”

Figura 46: Disseny generat utilitzant la tècnica del “flat design”

Figura 47: Disseny generat utilitzant la tècnica del “flat design”

72

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

3.4.2 Guió Per elaborar el contingut textual de la plana web s’ha elaborat un guió narratiu. Les directrius alhora de crear-ho, han estat clares, la informació havia d’ésser sintètica i amena, oferint contingut més específic dins els apartats de més informació. Per fer la tria d’informació, s’han escollit cinc conceptes amb les quals poder desenvolupar les il·lustracions i el text. Els conceptes escollits són els següents: enfoca, simplifica, dirigeix, sorprèn i converteix. Tots ells s’utilitizen a manera de petits consells.

El to escollir per a l’elaboració del text, s’ha elaborat amb la intenció d’ésser proper, divertit, apassionat, però sense deixar de banda certa formalitat.

-----------------------------------------------------------------------------------------------------------------------Portada -----------------------------------------------------------------------------------------------------------------------cat-cast-en

sobre el projecte 10segons Et quedes o marxes, tu decideixes?

Descobrir (botó cap a escena1) Contingut de text al apartat sobre el projecte: Aquesta plana web forma part d’un projecte universitàri. L’objectiu de la seva creació és explorar sobre les formes de comunicació gràfiques i textuals existents, per tal d’oferir un conjunt de consells sobre com millorar una plana web d’aterratge o “landing page” a través d’una experiència il·lustrativa, breu i lleugera. La web, no pretén ésser un tutorial sobre com crear una plana web, sinó més bé un exemple pràctic, on mitjançant una metàfora visual, l’usuari es podrà endinsar fins al fons del mar i entendre la importància del recorregut d’una landing page.

73

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

-----------------------------------------------------------------------------------------------------------------------Escena 1 -----------------------------------------------------------------------------------------------------------------------Et resulta familiar He fet una plana web i...

No obtinc els resultats esperats No arriben a fer clic al final No duren més de deu segons a la web -----------------------------------------------------------------------------------------------------------------------Escena 2 -----------------------------------------------------------------------------------------------------------------------No et preocupis, tenim la solució Obsessiona’t amb el teu públic objectiu ●

Edat (petit, jove, gran)

●

Gustos i interessos (sushi, fotografia, lectura)

●

Feina (Metge, policia, Professor)

(Imatges tipus polaroid amb les diferentes classificacions de tipus de públic) Botó +informació: Per definir el teu públic objectiu, és fonamental analitzar que estàs oferint, què ofereix la competència i sobretot quin tipus de persona estarà interessat en allò que ofereixes. El públic objectiu es pot desglossar per edat, localització, gènere, nivell d’ingresos, nivell educatiu, professió, origen ètnic, tipus de personalitat, valors, interessos i aficions, estils de vida… Com més concreta sigui la informació més podràs ajustar el to del discurs, l’estil de disseny, i el contingut.

74

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

-----------------------------------------------------------------------------------------------------------------------Escena 3 -----------------------------------------------------------------------------------------------------------------------Simplifica el contingut “Menys es més” Si et penses que pots comunicar una idea a través d’un text llarg i avorrit vas molt equivocat.

Segons Jakob Nielsen, els usuaris no llegeixen paraula per paraula, sinó que escanejen la plana en busca de paraules o frases rellevants. Per tant si vols que algú llegeixi el teu pàrraf hauràs de remarcar el contingut rellevant, mitjançant el qual el visitant podrà fer-se una idea de que estàs explicant, sense haver de llegir tot el text. Per tant, només cal que escriguis pensant en conservar nomes el contingut.

(Paràgraf amb frases tatxades, només es conserven paraules claus per entendre la idea del text) (botó)+informació: Els usuaris no llegeixen, escanejen. Val, és cert que en ocasions tothom s’ha hagut d’aturar a llegir, però quasi sempre per obligació. Segons un estudi realitzat per Weinreich, Obendorf, Herder i Mayer al 2008, l’escaneig és el comportament més habitual davant d’un o varis paràgrafs de text. Per tant, treu-te del cap explicar les parts més importants del teu producte a través de text, i si no tens més remei, intenta incloure paraules clau en negreta per facilitar l’escaneig visual.

-----------------------------------------------------------------------------------------------------------------------Escena 4 -----------------------------------------------------------------------------------------------------------------------Dirigeix al visitant (Animació de balena que dirigeix un submarí per les profunditats de l’oceà)

75

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

(botó)+informació: El visitant ha de sentir que és lliure d’explorar el recorregut, però el recorregut ha d’estar estructurat i dissenyat per portar-lo cap al teu únic objectiu, que arribi a baix i que faci clic. Per fer-ho, el disseny haurà d’ésser molt dirigit.

-----------------------------------------------------------------------------------------------------------------------Escena 5 -----------------------------------------------------------------------------------------------------------------------Sorprèn “Demostra perquè hauria de provar el que m’ofereixes” FRASE 1: “Utilitza frases i imatges de clients reals, que destaquin els punts forts del que ofereixes” Client important 1 FRASE 2: “Les opinions dels clients són molt importants” Client important 2 FRASE 3: “Encara no l’has provat? a què esperes, 10segons és superior en tots els sentits” Client important 3 (botó)+informació: Les opinions dels clients importen molt. De moment, tot el que el visitant sap del teu producte o servei, li has dit tu. Descobrir que hi ha més gent que parla bé sobre el que vens, l’ajudarà a prendre una decisió.

-----------------------------------------------------------------------------------------------------------------------Escena 6 ------------------------------------------------------------------------------------------------------------------------

76

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

5- Crida el visitant a la acció “Ara és la teva, que no se’t escapin!”

Ja ets a terra, Assegura’t que el visitant no es desorienti al aterrar i recorda-li perquè ha arribat fins aquí.

PROVAR EL NOSTRE PRODUCTE/SERVEI

PROVA’L ARA (botó que direcciona cap al producte o servei ofertat)

3.4.3. Generació de nom “Naming” Pluja d’idees: La

seducció,

webduit,

webducido,

lookatme,

first

impression,

peacock,

impressed,

webimpression, firstimpression, impressed, a few seconds, odia’m o estima’m, deusegons, tenseconds, 10segons, tensec, binnaris, amor o odi, de l’amor a l’odi hi ha un pas, love me or hate me, Característiques del nom: -Ha de tenir relació amb el concepte creatiu.

-Ha de deixar marca -Ha de ser en català -Ha de poder ser relacionat amb els ordinadors Proposta: 10segons

77

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

El nom compleix amb tots els requisits. S’utilitzarà de forma numèrica per fer referència al llenguatge binari format per uns i zeros, que s’utilitza en els sistemes informàtics.

El nom s’utilitzarà per encapçalar el projecte funcionant a manera de logotip que anirà acompanyat d’un descriptor, “Et quedes o marxes, tu decideixes?”. Aquest ajudarà a emfatitzar el propòsit del projecte, que vol explorar sobre les formes de comunicació gràfica i textual, per demostrar que la primera impressió és clau en el plantejament d’un disseny web, i pot determinar si l’usuari prendrà la decisió de seguir a la plana web o marxar.

3.4.4. Tipografia i color La primera tipografia escollida serà la “Open Sans” (Tota la família), una tipografia sense serifa que destaca per la seva legibilitat i la seva versatilitat, ja que que té una família molt àmplia.

Figura 48:Tipografia Open Sans Extra Bold, Normal i Light http://www.fontsquirrel.com/fonts/open-sans

La segona tipografia escollida s’anomena “Satisfy”. És una tipografia amb estil cal·ligràfic, sense cap mena de variant. S’utilitzarà com a llegenda per les fotografies de tipus “polaroid”.

78

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Figura 49:Tipografia Satisfy Normal. http://www.fontsquirrel.com/fonts/open-sans

La cromàtica escollida tindrà els següents colors, un conjunt de colors primaris, acompanyats dels seus complementaris (figura 43).

79

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Figura 50:Conjunt de cromàtica escollida per al projecte.

3.4.5. Animació L’animació pot ser una eina poderosa per ajudar als nostres visitants a entendre i treure partir del nostre disseny. En aquest projecte s’utilitzarà l’animació per facilitar i agilitzar la comprensió de les idees exposades al llarg del lloc web. Per fer-ho s’utilitzarà un plugin anomenat skrollr, que permetrà vincular les animacions a la rodeta del ratolí, és a dir, que els elements animats es mouran quan l’usuari es desplaci per la plana web.

3.4.6. Anàlisi i modificacions Per tal de millorar la interfície, un cop presentat el projecte de forma oficial, començarà el procés de difusió, on s’intentarà arribar al màxim nombre de persones possibles, per tal d’obtenir informació sobre la navegació dels usuaris, i així poder millorar l’experiència.

Per fer l’anàlisi de dades, s’utilitzarà en primer lloc el google analytics, una coneguda eina de Google que permet descobrir d’on provenen les visites, quina és la seva duració, quin tipus de dispositiu utilitza i amb quin navegador web ha accedit. Una informació molt valuosa per extreure conclusions sobre l’enfoc plantejat a l’inici del projecte.

En segon lloc, s’utilitzarà Hotjar, una eina enfocada en la millora de l’experiència d’usuari.

Permet veure en vídeo tots els moviments que fa l’usuari durant la seva visita, genera mapes de calor que destaquen els punts més resseguits pel cursor, i ofereix la possibilitat de crear embuts o “funnels”, que són objectius definits de forma concreta, com per exemple quantificar quants usuaris arriben al final de la plana web i fan clic al botó.

Per últim, s’utilitizarà Optimizely, una eina enfocada a la realització de tests A/B, que permet crear dues variants de la mateixa plana web, amb diferent text, imatges, disposició d’elements, color dels botons… i mostrar-los de forma aleatòria als diferents visitants. Al final, permet

80

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

quantificar quina de les dues variants ha esdevingut més exitosa, per tal de deixar-la com a definitiva.

Aquest conjunt d’eines són molt freqüents en el camp del disseny d’experiència d’usuari, sobretot per detectar els “pains”, un terme que traduït significa dolor, i que fa referència als punts de la web que són menys comprensibles i que en conseqüència, generen més pèrdues de visites.

4. Llenguatges expressius 4.1. Millora del treball Durant la fase de maquetació de la plana web, han aparegut dificultats inesperades, que han obligat a modificar el contingut per tal de seguir assolint els objectius plantejats.

Les animacions han estat en constant modificació des de la primera versió, degut a la seva importància dins la comprensió adequada del discurs. S’han millorat en fluïdesa i en adaptació, per tal d’oferir una experiència igual de satisfactòria en més d’un navegador web. El principal problema ha estat la falta de fluïdesa obtinguda amb el mètode d’animació utilitzat.

Després de recercar altres formes d’animar el contingut, s’ha aconseguit millorar molt la fluïdesa de la plana. A més, s’han hagut de modificar algunes il·lustracions, amb l’objectiu de poder ésser visibles des de diverses dimensions de pantalla. Vinculat a les animacions, la composició també ha anat variant a mesura que avançava la fase de maquetació, per tal de poder ajustar el contingut a diverses resolucions de pantalla.

Quant al rendiment, s’han hagut d’optimitzar les imatges ofertes al llarg de la plana web, per tal de reduir el temps de càrrega, millorar la fluïdesa de navegació i evitar generar una experiència imprevista. Els degradats del fons de pantalla, s’han hagut de crear amb tots els prefixos per poder ésser compatibles amb tots els navegadors actuals.

81

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

A nivell de comprensió lectora, s’han hagut de modificar titulars i explicacions, ja que un cop presentat en pantalla, no s’obtenia la uniformitat esperada. També s’han realitzat petites modificacions de text per igualar el to utilitzat durant tot el discurs i facilitar la seva comprensió.

4.2. Prospectiva 10segons, no és només una web, és un concepte més ampli, que vol reivindicar la importància de generar una primera impressió positiva, com a mètode per aconseguir millors resultats.

Aquest projecte ha estat creat a partir d’una inquietud personal, i vol exemplificar alguns punts rellevants alhora de crear o millorar una plana web de tipus “landing page”. En cap cas, els punts escollits per explicar són els únics a tenir en compte alhora de crear una plana web, per tant el projecte està preparat per ésser ampliat o modificat en cas que es volgués elaborar una experiència il·lustrativa més àmplia i complexe.

10segons, serà utilitzat a tall de projecte personal, que permeti demostrar a una empresa, la importància de crear una plana web. A més, serà difós a través de planes web que s’utilitzen a manera d’exposició, i que permeten als seus visitants qualificar la qualitat del resultat final.

4.3. Conclusions Des de l’inici de la realització del projecte, la recerca ha estat enfocada en explorar l’evolució d’Internet i la tecnologia, vinculada a l’àmbit de la creació web. L’elecció de la temàtica es va realitzar amb la intenció d’aprofundir en coneixements web en general.

A l’inici, ha estat necessari realitzar una introducció sobre la comunicació i el mass media, que permetés contextualitzar i ajudar a entendre els diferents processos comunicatius i la seva importància al llarg de la història més recent. A més, ha calgut fer una introducció sobre Internet i el seu naixement, vinculat directament als nous processos de comunicació, que han permès simplificar el procés comunicatiu. La definició del terme Internet, sovint es confon amb la web.

Ha calgut per tant, aprendre a diferenciar-los per poder treballar-hi.

82

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Durant la fase de recerca documental ha estat clau conèixer autors com Hassan o Garret, que han aportat una visió molt clara i global de la temàtica escollida, i han permès alhora, conèixer altres autors amb diversitat d’opinions, tots ells centrats en estudiar i explicar la relació que existeix entre els humans i la tecnologia, per tal de poder-la millorar.

Tal com s’ha esmenat durant la primera fase del projecte, el procés d’interacció que existeix entre una persona i un ordinador, es produeix a través d’un maquinari físic, encarregat de codificar i transmetre ordres. Aquest procés ha estat en constant evolució degut a la creixent necessitat d’acostar la tecnologia a més gent. Degut a la seva rellevància ha calgut, doncs, ferne un anàlisi explorant temes com la interfície gràfica i la seva importància com a punt de partida entre l’usuari i el producte això com dels camps d’estudi que es dediquen a millorar-la per tal de facilitar els processos de navegació, cerca d’informació i comunicació.

L’anàlisi ha permès obtenir una visió global sobre el significat de l’experiència d’usuari, la usabilitat i l’accessibilitat, tots ells vinculats a la interfície gràfica, i interrelacionats en un fi comú, proporcionar la màxima facilitat i satisfacció alhora d’usar un producte interactiu.

Durant la recerca, també ha calgut aprofundir en el disseny gràfic i de continguts aplicat a la interfície, amb la intenció d’obtenir directrius i criteris formals i funcionals per elaborar una interfície gràfica que compleixi amb els requisits.

Per últim, en la fase documental, s’ha dut a terme una recerca sobre la tipologia de web escollida “Landing page” o pàgina d’aterratge, en la que s’ha descobert que les landing page, siguin de la forma que siguin, només tenen; o haurien de tenir; un objectiu principal, convertir les visites en clients potencials.

Pel que fa a la fase creativa del projecte, ha estat fonamental per establir un plantejament formal definitiu. El concepte creatiu apareix durant la recerca documental sobre la importància de la primera impressió en el disseny web, on es descobreix un estudi elaborat pel departament de recerca de google, que permet definir el concepte creatiu del projecte. A partir d’aquest, es treballa sobre una idea, elaborar una web que permeti a través d’una experiència il·lustrativa, 83

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

aportar informació i consells sobre com millorar la creació d’una plana web de tipus landing page, o sobre com millorar-la. Escollir els consells, ha estat un repte, pel fet que hi ha moltes directrius alhora de crear una plana web. Es podria enfocar des d’un punt de vista més tècnic i provar d’aprofundir en temes de programació, però actualment existeixen molts blogs i planes web amb contingut didàctic sobre programació web, per tant, des d’un punt de vista d’innovació el projecte perdria molta solidesa. Per aquest fet, s’ha optat per oferir petits consells més genèrics, que permetin escanejar el text i les il·lustracions i obtenir-ne una idea, però sense aprofundir en la matèria.

Per tant, haurem de considerar la plana web com una experiència interactiva que ofereix petites càpsules d’informació, que oferiran consells sobre com elaborar i/o millorar una plana web de tipus “landing page”.

El nom del projecte escollit, té relació amb la capacitat d’atenció que té un usuari respecte una plana web, en aquest sentit, i per justificar el concepte creatiu, cada apartat del projecte ha estat ideat per ésser entès en un màxim de deu segons, deixant de banda la informació addicional oferta en alguns casos, que complementa amb informació més específica, la informació oferta.

Un cop finalitzada la fase de realització de la plana web, no ha estat difícil trobar-hi aspectes a retocar i millorar. La manca d’experiència en animació i programació, ha fet que el procés de desenvolupament i maquetació, s’allargués més de l’esperat.

En el plantejament teòric, la plana web es plantejava amb un disseny web adaptatiu, amb la intenció de poder oferir la mateixa experiència si consultaves la plana des d’una tauleta tàctil, o des d’un telèfon intel·ligent. En la pràctica, només s’ha pogut garantir una experiència igual de satisfactòria, en alguns dispositius, prioritzant l’elecció en aquells més utilitzats pel públic objectiu del projecte.

Per tant, un aspecte pendent de millora seria l’adaptació de la plana web a una gamma més amplia de dispositius electrònics amb accés a internet, permeten així evitar que algú pugui obtenir una mala experiència amb la plana web.

84

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Durant tota la plana web, les animacions són utilitzades com a suport del text central, reforçant la idea i agilitzant la comprensió del consell. Les animacions estan subjectes a millora, ja que durant el treball s’ha adquirit coneixement per realitzar-les, faltaria millorar-les en aspectes de moviment, així com d’optimització gràfica.

Cal destacar que el projecte s’ha creat per explorar sobre les formes de comunicació gràfica i textual, i un cop presentat de forma pública, el projecte es sotmetrà a proves d’interfície, per tal d’observar si s’obté el comportament esperat, o si existeixen errors que eviten complir amb l’objectiu d’arribar a la part inferior de la web i fer clic al botó.

El projecte 10segons no queda tancat, i a mesura que comenci a rebre visites, s’intentarà ajustar tant en contingut com en composició, per respondre a les possibles mancances que apareguin durant la interacció dels usuaris.

85

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

5. Bibliografia LLIBRES

●

Castells, M., (2009) Comunicación y poder. Primera edició. Madrid, Alianza.

●

Briggs, A. i Burke, P. (2002) De Gutemberg a Internet. Primera edició. Madrid, Taurus Santillana.

●

Hassan, Y., (2015) Experiencia de usuario: principios y métodos. Primera edició. ebook.

●

Gothelf, J., Seiden, J., (2013) Lean UX appyling lean principles to improve user experience. Primera edició. USA, O’Reilly.

●

Arhippainen, L., (2009) Studing users experience: issues and problems of mobile services. Primera edició. Linnanmaa, Oulu 2009.

●

James, J., (2011) The elements of user experience. Segona edició. Berkeley (USA).

●

UXPin, (2015) Web UI design for the human eye. Primera edició. UXPin.

●

Treder, M., Warych, R. i Witman, S.,(2013-2014) Web design book of trends 2013-2014.

Primera edició. UXPin.

●

UXPin, Webs IU trends Present&future, dramatic typography.

●

UXPin, User Testing and Design, Improving Yelp’s website.

●

UXPin, Interaction Design Best Practices: Mastering Words, Visuals, Space.

●

UXPin, The Guide to UX design Process & Documentation.

●

Mcluhan, M., (2013) Understanding Media: The Extensions of Man. Primera edició.

Berkeley, Gingko Press.

●

86

Abril, G., (1997) Teoria general de la información. Primera edició. Madrid, Cátedra.

10segons Oriol Valentí Solà

●

Tutora: Isadora Guardia

TODOROV, T. (2008). La peur des barbares, Au-delà du choc des civilisations. París, Biblio Essais.

●

Norman, D. (2005). Human-Centered Design considered harmful. Preimera edició. USA, Interactions.

●

Glushko, R. J. (2013). The discipline of organizing. The MIT Press.

●

Rosenfeld, L., Morville, P. (2002). Information Architecture for the World Wide Web. Segona edició. USA, O’Reilly.

REVISTES, ARTICLES I DOCUMENTS ON-LINE ●

Freidenberg, F., (2004) Los medios de comunicación de masas: ¿también son actores?

Recuperat de http://www.essrl.wustl.edu/~jao/itrg/shannon.pdf

●

Bevan, Kirakowski, i Maissel (1991) What is Usability? Recuperat de http://www.nigelbevan.com/papers/whatis92.pdf

●

Folmer E., Bosch J., (2001) Abstract Usability Patterns in Software Architecture Recuperat de http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.86.5298&rep=rep1&type=pd

●

Revista Española de Documentación Científica, (2004) Vol. 27-No3 Recuperat de http://www.yusef.es/DCU_accesible.pdf

●

Hassan, J., Fernández, M., (2015) ¿Qué es la Accesibilidad Web? Recuperat de http://www.nosolousabilidad.com/articulos/accesibilidad.htm

●

Shneiderman, B., (2000) Communication of ACM Recuperat de http://www.cs.umd.edu/~ben/p84-shneiderman-May2000CACMf.pdf

87

10segons Oriol Valentí Solà

●

Tutora: Isadora Guardia

Cabezas Mena, V., Sabaté Mojca, A., Vendrell Vilafruela, A., Marcos, M., (2014) Experiencia de usuario y captchas, explorando la semiótica visual Recuperat de http://nosolousab lidad.com/articulos/usab lidad captchas.html

●

Farber, D. (2006). Google's Marissa Mayer: Speed wins Recuperat de http://www.zdnet.com/blog/btl/googles-marissa-mayer-speed-wins/3925

●

Norman, D.A (2003). Emotional Design Recuperat de http://www.jnd.org/dn.mss/CH01.pdf

●

Ralph, P., Wand, Y (2009). A Proposal for a Formal Definition of the Design Concept Recuperat de

http://www.kathrynpieplow.pwrfaculty.org/wp-

content/uploads/2010/01/Ralph-Wand-definition-design.pdf ●

Laaja, P. (2014) First Impressions Matter: The Importance of Great Visual Design Recuperat de http://conversionxl.com/first-impressions-matter-the-importance-of-greatvisual-design/

●

Nielsen, J., (2011) How long do users stay on a web pages? Recuperat de http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/

●

ACM, (2008) ACM Transactions on the Web, Article nº5 Recuperat de http://dl.acm.org/citation.cfm?doid=1326561.1326566

●

Nielsen, J., (2008) How little do users read? Recuperat de http://www.nngroup.com/articles/how-little-do-users-read/

●

Garrett, J., (2000) Elements de l’experiència d’usuari en imatges Recuperat de http://www.jjg.net/elements/translations/elements_es.pdf

88

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

VÍDEOS ●

The paradox of choice. Video de Barry Schwartz, EEUU, TED.com [http://www.ted.com/talks/barry_schwartz_on_the_paradox_of_choice?language=en#t18937]

●

Are we in control of our own decisions. Video de Dan, EEUU. TED.com [Arielyhttp://www.ted.com/talks/dan_ariely_asks_are_we_in_control_of_our_own_decisi ons]

●

Welcome to transparent banking [https://www.youtube.com/watch?v=178a3bl-2vU]

●

Sergio Luján Mora (mooc) [https://www.youtube.com/watch?v=cCHzhQVqEyI]

WEB ●

Comunicacion.idoneos.com, (2015). Teoría de la comunicación. [online] Disponible a: http://comunicacion.idoneos.com/teoria_de_la_comunicacion/ [Accedit el 15 de Març de 2015].

●

Comunicacion.idoneos.com, (2015). Un modelo para el proceso de la comunicación. [online] Disponible a: http://comunicacion.idoneos.com/teoria_de_la_comunicacion/un_modelo_para_el_proce so_de_la_comunicacion/ [Accedit el 31 d’Abril de 2015].

●

popular, C. (2015). Consumo y mass media: la imagen especular del pasado en la cultura popular. [online] Academia.edu. Disponible a: http://www.academia.edu/6957239/Consumo_y_mass_media_la_imagen_especular_del _pasado_en_la_cultura_popular [Accedit el 3 d’Abril de 2015].

89

10segons Oriol Valentí Solà

●

Tutora: Isadora Guardia

Media, T. (2015). The Internet as Medium of the Mass Media. [online] Academia.edu.

Disponible a: http://www.academia.edu/4598480/The_Internet_as_Medium_of_the_Mass_Media [Accedit el 6 d’Abril de 2015].

●

Ec.europa.eu, (2015). G8. [online] Disponible a: http://ec.europa.eu/archives/ISPO/ecommerce/g8/g8pp.html [Accedit el 4 de Març de 2015].

●

Internetsociety.org, (2015). Brief History of the Internet - Internet Timeline | Internet Society. [online] Disponible a: http://www.internetsociety.org/internet/whatinternet/history-internet/brief-history-internet [Accedit el 6 d’Abril de 2015].

●

Internetlivestats.com, (2015). Number of Internet Users (2015) - Internet Live Stats. [online] Disponible a: http://www.internetlivestats.com/internet-users/ [Accedit el 4 de Març de 2015].

●

W3c.es, (2015). Ayuda y preguntas frecuentes - W3C España. [online] Disponible a: http://www.w3c.es/ayuda/#webinternet [Accedit el 4 de Març de 2015].

●

Upf.edu, (2015). Diseño Web Centrado en el Usuario: Usabilidad y Arquitectura de la Información - Hipertext - ( UPF ). [online] Disponible a: http://www.upf.edu/hipertextnet/numero-2/diseno_web.html#2 [Accedit el 6 d’Abril de 2015].

●

Brad Myers, R. (2015). Past, Present and Future of User Interface Software Tools. ACM TRANSACTIONS ON COMPUTER-HUMAN INTERACTION. [online] Disponible a: http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.45.9491 [Accedit el 15 de Març de 2015].

90

10segons Oriol Valentí Solà

●

Tutora: Isadora Guardia

Hassan Montero, Y. and Mart&iacute;n Fern&aacute;ndez, F. (2005). La Experiencia del Usuario. No Solo Usabilidad, [online] (4). Disponible a: http://www.nosolousabilidad.com/articulos/experiencia_del_usuario.htm [Accedit el 17 de Març de 2015].

●

Goktórk, M. (2015). Fitts's Law. The Glossary of Human Computer Interaction, [online] Disponible a: https://www.interactiondesign.org/encyclopedia/fitts_law.html?refresh=true#referencesOnPage [Accedit el 20 de Març de 2015].

●

Uxmovement.com, (2015). Form Label Proximity: Right Aligned is Easier to Scan - UX Movement. [online] Disponible a: http://uxmovement.com/forms/form-label-proximityright-aligned-is-easier-to-scan/ [Accedit el 15 de Març de 2015].

●

Jnd.org, (2015). Error Messages Are Evil - jnd.org. [online] Disponible a: http://www.jnd.org/dn.mss/error_messages_are_e.html [Accedit el 15 de Març de 2015].

●

Co.Design, (2014). From Google Ventures: 5 Rules For Writing Great Interface Copy. [online] Disponible a: http://www.fastcodesign.com/3026463/from-google-ventures-5rules-for-writing-great-interface-copy [Accedit el 15 de Març de 2015].

●

Alexpoole.info, (2008). Which Are More Legible: Serif or Sans Serif Typefaces? | Alex Poole. [online] Disponible a: http://alexpoole.info/blog/which-are-more-legible-serif-orsans-serif-typefaces/ [Accedit el 25 de Març de 2015].

91

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

6. Anexos 6.1. Briefing BRIEFING 10 SEGONS 10 segons és un projecte experimental, que planteja crear una plana web que permeti convertir el màxim nombre de visites en posteriors visites a un blog, per tal de reflexionar sobre la importància de la persuasió web.

Missió: “Convertir els visitants en possibles futurs lectors d’un blog”

Concepte creatiu: La primera impressió genera en l’espectador una idea quasi instantània sobre el que veu.

Segons un estudi, els primers 10 segons d’una visita a una plana web, són els que determinaran si el visitant es queda o marxa.

Objectius específics del portal: -Oferir informació de qualitat, lleugera i sintètica, evitant i substituint l’excés de text per imatges.

-Oferir contingut informatiu de forma clara i concisa.

-Ensenyar quelcom al visitant de forma divertida i desenfadada.

-Aconseguir que el màxim nombre de visitants arribi al final de la plana.

- Aconseguir que el màxim nombre de visitants faci clic al botó d’anar al blog.

-Augmentar el nombre de visites del blog.

92

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Públic al que es dirigeix: -Homes: Edat: 25-35 anys Interessos: tecnologia, tendències web i disseny d’interfície.

Perfil cultural: Nivell educatiu mitg-alt.

Perfil d’usuari: Molt habituat a navegar per internet, gasta moltes hores davant l’ordinador y acostuma a freqüentar planes web com ( www.thenextweb.com; www.graffica.com; https://dribbble.com/;).

Perfil d’equip informàtic: Acostuma a utilitzar productes d’apple i utilitza més d’un dispositiu per navegar (sobretaula-portatil-tableta-smartphone) Lloc d’accés: A la feina, durant un petit descans o mentre busca idees i/o referents gràfics.

Freqüència de visites: Molt baixa, la navegació haurà d’ésser molt fàcil ja que l’usuari haurà d’aprendre a navegar cada cop que la visiti.

Expectactives de disseny: perfil d’usuari exigent.

Guia de referència per elaborar públic objectiu: https://www.hosteurope.es/blog/identifica-atu-publico-objetivo/

6.2. Versions de guió prèvies Versió nº1 del guió elaborat per la plana web: 1------------------PLANA INICIAL-------------------------10 segons"és tot el temps que tinc per evitar que marxis" video o gif de gatet

93

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

<botó>Accedir</boto> 2-----------------INTRODUCCIÓ A PROJECTE-----------------Gràcies per no marxar.

10 segons és una plana web, una idea, una realitat.

Internet és global, forma part de nosaltres.

Internet és el canal de venta més potent que existeix.

Internet és per molts una oportunitat.

Internet és per molts una ruïna.

Internet és present.

Internet és futur.

Internet és entrar i comprar.

Internet és entrar i no tornar.

Tu decideixes. <crida a l'acció>Descobreix com millorar les teves ventes a través de les planes web d'aterratge.<crida a l'acció> <crida alternativa>Descobreix com deixar de perdre clients<crida alternativa> <botó cridaner>Descobrir</botó> <botó gris>No descobrir</botó> *no em cal millorar les ventes (anotació alternativa) vull seguir perdent clients (anotació alternativa) 3------------------INICI LANDING PAGE-----------------<logo>10 segons<logo> <titol>de l'amor a l'odi hi ha un pas<titol> Coneixes el que vens? Doncs ara centrat en conèixer a qui et dirigeixes. <imatge>ilustració d'home + dona + gatet</imatge> Tot producte o servei té un públic concret <imatge>Diagrama amb tipus de públic( per edat, per interesos, per coneixements...)</imatge>

94

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

4-----------------ESTIL I TACTE-----------------------<titol>"Mira'm toca'm i enamora't de mi" </titol> <subtitol>l'estil i la interacció determinaràn l'emoció que el possible comprador sentirà<subtitol> <animacio>Com et sents (:) :\ :( 3cares amb 3 emocions) *el fons canvia de color al pujar-hi sobre</animacio> 5--------------------ESTIL I TACTE - COLOR---------------<menu><ul><li>color</li><li>espaiat</li><li>contrast</li></ul></menú> <subtitol>El color té emocions implicites, aprofita-les<subtitol> Idea: incloure roda de color (al clicar una tonalitat t'explica quelcom sobre el color) Vermell: poder, importància (és estimulant, representa passió) S'ha de mesurar Taronja: Amistat, energia (crea sensació de moviment i energia) Groc: felicitat, entusiasme, antiguetat Verd: creixement, estabilitat, medi ambient blau: Calma, seguretat, sensació d'amplitud lila: luxe, romantic(lila clar), misteri( lila fosc) negre: poder, sofisticació, innovació blanc: netedat, simplicitat, virtud (ajuda a accentuar els altres colors) gris: neutralitat, formalitat, melancolia beix: destaca els colors que l'envolten font info colors:http://thenextweb.com/dd/2015/04/07/how-to-create-the-right-emotionswith-color-in-web-design/ 6--------------------ESTIL I TACTE-ESPAIAT------------------------<menu><ul><li>color</li><li>espaiat</li><li>contrast</li></ul></menú> <subtitol>L'espai negatiu és positiu<subtitol> <animacio o img> - x - = + <animacio o img> Ajuda a equilibrar la composició i a destacar elements, generant harmonia.

95

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

7-------------------ESTIL I TACTE-CONTRAST------------------<menu><ul><li>color</li><li>espaiat</li><li>contrast</li></ul></menú> <subtitol>Contrastar per explicar<subtitol> contrastar fa evitar errors de comprensió i ajuda a focalizar. Ex de botó amb fons transparent i botó amb fons ple. <animacio o img> blur img per demostrar la prova del blur<animació o img>

8-----------------FES PROVES Heatmap---------------------------<subtitoL><Alea iacta est...>"tatxat"><img daus o galeta de la sort> <Deixa la sort per als jugadors> <paragraf>Descobreix les zones calentes de la web i accentua-les</paragraf> idea(jugar amb temperatura del fons (a dalt vermell a baix blau)

idea: video background z-index a davant. Mostrar exemple de mapa de calor. imatge de noi o noia mirant a algun objecte.

9-----------------FES PROVES test-a/b---------------------------<quote>"Molt pocs encerten abans d'errar"-Seneca</quote> <ul>Utilitza eines d'ànalisi del comportament de l'usuari, i donali: 1-el que vol, 2-on ho vol i 3-com ho vol</ul> <tagcloud>google analytics, hotjar, crazyegg</tagcloud> <paragraf>On tindrà més acceptació aquest botó? </paragraf> idea: animacio "gif o svg" de test a/b per demostrar com funciona.

10----------------Tens ganes de més?----------------------------<subtitol>Descobreix</subtitol>

96

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Versió nº2

10segons-Una història de primeres impressions

La teva landing page no funciona?

No et preocupis, tenim la solució

solució ------------------------------------------------------------------------------------------------------------------------

Tots ens hi hem trobat…

El meu dissenyNo crida l’atenció No transmet bé la seva finalitat No transforma visitants en clients (el NO es tatxa i converteix les frases en positives) ------------------------------------------------------------------------------------------------------------------------

La solució (píndola?)

1-Obsessiona’t amb el teu públic objectiu

●

● Edat (petit, jove, gran) ● Gustos (sushi, cine, lectura) Feina (oficina, manual, sense feina)

------------------------------------------------------------------------------------------------------------------------

2- Simplifica el contingut “Menys es més”

97

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

Conserva només el contingut imprescindible ------------------------------------------------------------------------------------------------------------------------

3-Afegeix un element de sorpresa

badang!

(Imatge d’un ou kinder que s’obra)

4-Dirigeix al visitant (Carretera de color llampant amb cotxe que baixa recte. Elements als dos costats de color gris casi blanc, que no dificultin la distracció hi ha desviacions pero el cotxe segueix recte)

5-Et vull clicar, et vull clicar!

Ara només falta que cridis al visitant “a l’acció”.

PROVA EL MEU MEGA:(PRODUCTE)(el text canvia 1-producte,2-servei) PROVAR

Versió nº3

98

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

10segons Una història de primeres impressions

La teva landing page no funciona?

No et preocupis, tenim la...

Solució ------------------------------------------------------------------------------------------------------------------------

Tots ens hi hem trobat…

El meu dissenyNo crida l’atenció No transmet bé la seva finalitat No transforma visitants en clients

(el NO es tatxa i converteix les frases en positives) -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

La solució (píndola?)

1-Obsessiona’t amb el teu públic objectiu

●

● Edat (petit, jove, gran) ● Gustos (sushi, cine, lectura) Feina (oficina, manual, sense feina)

------------------------------------------------------------------------------------------------------------------------

99

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

+INFO: Si vols que la plana web que has dissenyat sigui eficaç, esforçat en descobrir a qui vas dirigit. Un cop coneguis el tipus de públic, identifica les seves necessitats i planteja un disseny que demostri que el teu producte o servei, pot ésser útil per a solucionar-li.

------------------------------------------------------------------------------------------------------------------------

2- Simplifica el contingut “Menys es més” Si et penses que pots comunicar una idea a través d’un text llarg i aborrit vas molt equivocat. Segons Jakob Nielsen, els usuaris no llegeixen paraula per paraula, sinó que escanejen la plana en busca de paraules o frases rellevants. Per tant si vols que algú llegeixi el teu pàrraf hauràs de remarcar el contingut rellevant, mitjançant el qual el visitant podrà fer-se una idea de que estàs explicant, sense haver de llegir tot el text. Per tant, només cal que escriguis pensant en consevar nomes el contingut

Conserva només el contingut imprescindible -----------------------------------------------------------------------------------------------------------------------+info: Si no ho sabies, gravat-ho amb foc o tatua’t-ho. Els usuaris no llegeixen, escanejen. Val, és cert que en ocasions tothom s’ha hagut d’aturar a llegir, però quasi sempre per obligació.

Segons un estudi realitzat per Harald Weinreich, Hartmut Obendorf, Eelco Herder, and Matthias Mayer el 2008 anomenat Not quite the average: An empirical study of Web use , l’escaneig és el comportament més habitual davant d’un o varis paràgrafs de text.

Per tant, treu-te del cap explicar les parts més importants del teu producte a través de text, i si no tens més remei, intenta incloure paraules clau en negreta per facilitar l’escaneig visual.

------------------------------------------------------------------------------------------------------------------------

3-Afegeix un element de sorpresa Aquest apartat cau

-----------------------------------------------------------------------------------------------------------------------+info: Si vols que el visitant quedi inmers en la teva plana, l’has d’ajudar, ofereix-li quelcom inesperat, un efecte visual, un video, una imatge curiosa… qualsevol cosa que pugui cridar-li l’atenció (recorda que has de conèixer al teu usuari per saber que podria cridar-li l’atenció).

-----------------------------------------------------------------------------------------------------------------------100

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

4-Dirigeix al visitant (Línia animada que marca un recorregut visual sobre la il·lustració de fons)

-----------------------------------------------------------------------------------------------------------------------+info: El visitant ha de sentir que és lliure d’explorar el recorregut, però el recorregut ha d’estar estructurat i dissenyat per portar-lo cap al teu únic objectiu, que arribi a baix i que faci clic. Per fer-ho, el disseny haurà d’ésser molt dirigit.

------------------------------------------------------------------------------------------------------------------------

5-Et vull clicar, et vull clicar!

Ara només falta que cridis al visitant “a l’acció”.

PROVA EL NOSTRE (PRODUCTE)(el text canvia 1-producte,2-servei)

PROVAR

Versió nº 4 -----------------------------------------------------------------------------------------------------------------------Portada -----------------------------------------------------------------------------------------------------------------------10segons Una història de primeres impressions La teva landing page no funciona?

No et preocupis, tenim ...

La Solució (botó cap a escena1) -----------------------------------------------------------------------------------------------------------------------Escena 1 101

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

-----------------------------------------------------------------------------------------------------------------------Tots ens hi hem trobat…

El meu dissenyNo crida l’atenció No transmet bé la seva finalitat No transforma visitants en clients -----------------------------------------------------------------------------------------------------------------------Escena 2 -----------------------------------------------------------------------------------------------------------------------La solució 1-Obsessiona’t amb el teu públic objectiu ● ● ●

Edat (petit, jove, gran) Gustos (sushi, cine, lectura) Feina (oficina, manual, sense feina)

Botó +info: Si vols que la plana web que has dissenyat sigui eficaç, esforçat en descobrir a qui vas dirigit. Un cop coneguis el tipus de públic, identifica les seves necessitats i planteja un disseny que demostri que el teu producte o servei, pot ésser útil per a solucionar-li.

-----------------------------------------------------------------------------------------------------------------------Escena 3 -----------------------------------------------------------------------------------------------------------------------2- Simplifica el contingut “Menys es més” Si et penses que pots comunicar una idea a través d’un text llarg i aborrit vas molt equivocat.

Segons Jakob Nielsen, els usuaris no llegeixen paraula per paraula, sinó que escanejen la plana en busca de paraules o frases rellevants. Per tant si vols que algú llegeixi el teu pàrraf hauràs de remarcar el contingut rellevant, mitjançant el qual el visitant podrà fer-se una idea de que estàs explicant, sense haver de llegir tot el text. Per tant, només cal que escriguis pensant en conservar nomes el contingut.

102

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

(Paràgraf amb frases tatxades, només es conserven paraules claus per entendre la idea del text) “Conserva només el contingut imprescindible”

(botó)+info: Si no ho sabies, gravat-ho amb foc o tatua’t-ho. Els usuaris no llegeixen, escanejen. Val, és cert que en ocasions tothom s’ha hagut d’aturar a llegir, però quasi sempre per obligació. Segons un estudi realitzat per Harald Weinreich, Hartmut Obendorf, Eelco Herder, and Matthias Mayer el 2008 anomenat Not quite the average: An empirical study of Web use, l’escaneig és el comportament més habitual davant d’un o varis paràgrafs de text.

Per tant, treu-te del cap explicar les parts més importants del teu producte a través de text, i si no tens més remei, intenta incloure paraules clau en negreta per facilitar l’escaneig visual.

-----------------------------------------------------------------------------------------------------------------------Escena 4 -----------------------------------------------------------------------------------------------------------------------3-Sorprèn (botó)+info: Si vols que el visitant quedi inmers en la teva plana, l’has d’ajudar, ofereix-li quelcom inesperat, un efecte visual, un video, una imatge curiosa… qualsevol cosa que pugui cridar-li l’atenció (recorda que has de conèixer al teu usuari per saber què podria cridar-li l’atenció).

-----------------------------------------------------------------------------------------------------------------------Escena 5 -----------------------------------------------------------------------------------------------------------------------4-Dirigeix al visitant (Línia animada que marca un recorregut visual sobre la il·lustració de fons) (botó)+info: El visitant ha de sentir que és lliure d’explorar el recorregut, però el recorregut ha d’estar estructurat i dissenyat per portar-lo cap al teu únic objectiu, que arribi a baix i que faci clic. Per fer-ho, el disseny haurà d’ésser molt dirigit.

-----------------------------------------------------------------------------------------------------------------------Escena 6 ------------------------------------------------------------------------------------------------------------------------

5- Crida el visitant a la acció “Ara és la teva, que no se’t escapin!”

Ja ets a terra, Assegura’t que el visitant no es desorienti al aterrar i recorda-li perquè ha arribat fins aquí.

103

10segons Oriol Valentí Solà

Tutora: Isadora Guardia

PROVAR EL NOSTRE PRODUCTE/SERVEI (el text canvia 1-producte,2-servei) PROVAR (botó que direcciona cap al producte o servei ofertat)

104