Usabilitat, interfície d'usuari i experiència d'usuari aplicada a un portfoli creatiu by Victor Piella Fernandez

ÍNDEX Resum 6 Resumen 6 Abstract 6 Introducció 7 Objectius 8 3.1. Objectius generals 8 3.2.

Objectius específics

FASE I. Idea i elecció del tema

4.1.

Identificar el tema

4.2

Marc teòric

Màrqueting 10 5.1 Contextualització actual 10 5.2 Tècniques web/Màrqueting 2.0 11 5.2.1 SEO 12 5.2.2 SEM 13

Tecnologies 15 6.1

La presència de la web avui en dia

6.2 CMS 15 6.3 Perquè l’ús de Wordpress 17 6.4 Portafolis online 18

GUI / UX / UI o Arquitectura de la informació

7.1

Arquitectura de la informació

7.2

UI (Interfície d’usuari)

7.3

GUI (Interfície gràfica d’usuari)

Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

7.4

UX (Experiència d’usuari)

7.5

Usabilitat

7.6

Estudi pràctic de portafolis creatius (interfície)

Accessibilitat 29 8.1

Responsiu

8.2

Crossplatform

Monetització 31 9.1

Estratègies de Venta actuals

9.2

Com fer un pas més

10.1

Crear i comunicar noves idees i propostes

10.1.1 Procés de creació

10.1.2 Factor de fluïdesa

10.1.3 Factor de flexibilitat

10.1.4 Factor d’elaboració 34 10.1.5 Factor de la innovació 34

FASE II. Planificació i realització 11.1

Establiment dels objectius que orientin l’operativa del treball 36

11.1.1. Plantejament inicial

11.1.2. Plantejament final

Desenvolupament

11.2.1 Arquitectura de la informació

11.2

11.2.1.1 Pàgina principal

11.2.1.2 Altres estils de pàgines 40 11.2.1.3 Pàgines individuals 41 11.3.2 GUI 43 11.3.2.1 Color 43

11.3.2.2 Tipografia

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

11.3.2.3 Imatge

11.3.2.4 Textura 46

11.3.2.5 Composició

11.3.3 UX 47 11.3.4 Responsive 48 11.3.5 Panel intern 50 11.3.6 Tecnologia 50 11.3.6.1 Foundation 50 11.3.6.2 Metabox 50

11.3.6.3 Redux Framework

11.3.6.4 Sliders 51 11.3.6.5 Page Builder 51 11.3.6.6 All in one SEO 51

Fase III. Autoavaluació, millora i prospectiva

12.1. Autoavaluació i prospectiva 52

Conclusions 53 Bibliografia

Webgrafía 55 Agraïments 56 Annex 58

Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Resum La usabilitat, la experiència d’usuari i la interfície gràfica són les disciplines que cuiden la interacció entre home i màquina. Els darrers anys, aquestes tècniques, han guanyat importància i s’han consolidat en el món d’internet, però encara no s’ha pres consciència que és un pilar fonamental igual que la programació i el disseny. En aquest treball s’ha realitzat una recerca sobre aquestes temàtiques per posar-les en ús a la part pràctica. La part pràctica consisteix en el disseny i desenvolupament d’una plantilla de Wordpress. Paraules clau: Usabilitat; Experiència d’usuari; Interfície gràfica; Wordpress.

Resumen La usabilidad, la experiencia de usuario y la interfaz gráfica son las disciplinas que cuidan la interacción entre hombre y máquina. En los últimos años, estas técnicas, han ganado importancia y se han consolidado en el mundo de internet, pero aún no se ha tomado conciencia de que es un pilar fundamental al igual que la programación y el diseño. En este trabajo se ha realizado una investigación sobre estas temáticas para ponerlas en uso en la parte práctica. La parte práctica consiste en el diseño y desarrollo de una plantilla de Wordpress. Palabras clave: Portfolio; Usabilidad; Experiencia de usuario; Interfaz gráfica; Wordpress.

Abstract Usability, user experience and user interface are the disciplines that take care of the interaction between man and machine. In recent years, these techniques have gained importance and have been consolidated in the Internet world, however people don’t believe that are as fundamental as programming or design. In this project has been done a research of these issues to put them in practice. The practice part of this project involves the design and development of a Wordpress Template. Keywords: Portfolio; Usability; User experience; Graphic user interface; Wordpress.

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

Introducció Gràcies a Tim Berners-Lee gaudim d’internet en les nostres llars. El 1993 es va estandarditzar el World Wide Web i va sorgir Hypertext Markup Language (HTML). Des de llavors la tecnologia ha evolucionat a un ritme frenètic fins a arribar a l’actualitat. Actualment tothom està a internet i el que no hi és, ho té com a assignatura pendent. Internet s’ha convertit en una font molt important de reconeixement i d’exposició de la feina realitzada, tan o més important que un currículum, una targeta de visita o un portfoli. Aquest treball tracte sobre la recerca de les tècniques i disciplines actuals a l’hora de crear una pàgina web. Gràcies a aquestes s’assegura un correcte ús i una bona experiència pel nostre usuari. L’arquitectura de la informació, la usabilitat, la interfície d’usuari, la interfície gràfica i l’experiència d’usuari són tècniques que procuren millorar la navegació dins de les interfícies. Tots els coneixements adquirits mitjançant la recerca documental han estat emprats a la construcció del portfoli digital. Aquest va dirigit al professional de les arts gràfiques, audiovisual o multimèdia. La construcció de la plantilla s’ha realitzat amb la tecnologia emergent i puntera Wordpress. La raó intrínseca d’aquest treball neix de la necessitat d’evolucionar amb coneixements en aquest sector i de poder assolir un resultat professional tant d’ús propi com d’ús comercial. Un altre objectiu a assolir és la creativitat amb el producte resultant. Aquesta és la proposta de valor, el tret diferenciador, gràcies a aquest s’aconsegueix un segment de mercat.

Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Objectius 3.1.

Objectius generals

Reunir i documentar els coneixements més actuals per la creació d’una bona plataforma web i facilitar la informació a altres usuaris penjant-la de forma gratuïta a internet. Oferir una proposta de valor original i creativa amb punts diferencials perquè els usuaris consumeixin el producte desenvolupat. Assolir un nivell de qualitat suficient per comercialitzar-lo dins plataformes de venda de wordpress themes.

3.2.

Objectius específics

Realitzar un anàlisis de les tendències actuals en quant a tecnologia, usabilitat, experiència d’usuari i interfície gràfica. Desenvolupar una proposta formal amb tots els coneixements adquirits a la documentació Realitzar proves amb usuaris i modificar alguns aspectes depenent de les necessitats

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

FASE I. Idea i elecció del tema 4.1.

Identificar el tema

El punt de partida d’aquest treball va ser el plantejament del treball de fi de grau. Decidida la temàtica amb la qual es volia treballar, es va realitzar una recerca sobre les disciplines que cuiden la interacció entre home i màquina. Un cop realitzada la recerca es va decidir en aplicar els coneixements en un portfoli per creatius a causa de la seva creixent demanda. Els objectius interns d’aquest projecte són el treball amb una nova tecnologia no treballada dins del pla formatiu del grau. Amb aquest venia implícit un treball de disseny web que és on s’han aplicat els processos creatius.

4.2

Marc teòric

La recerca del marc teòric d’aquest treball de final de grau, s’ha basat en cinc temàtiques. Primerament, el màrqueting digital. En segon lloc, les tecnologies que actualment disposem. Seguidament, GUI / UX / UI o Arquitectura de la informació, aquestes són les disciplines que es cuiden de la relació entre usuari i maquina. Per altra banda també s’han tractat l’Accessibilitat, per germanitzar la correcta visualització del contingut. Finalment s’ha investigat sobre la Monetització per poder donar una sortida al projecte. Alguns d’aquests apartats s’han tractat amb més rellevància, donada la seva importància a la part pràctica.

Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Màrqueting 5.1

Contextualització actual

“me sorprendió averiguar durante la investigacion y la documentación preliminares a este libro que no todos los cursos universitarios incorporavaban necesariamente dentro de su programa de estudiós la construcción de un sitio web personal. Si bien no se considera una necessidad insoslayable contar con un sitio web, no pasara mucho antes de que sea imprescindible.” (Fig Taylor, 2010) Actualment la societat té dependència tecnològica digital; depèn d’una segona realitat, la virtual. Qualsevol disciplina o tècnica té la necessitat de constar a la xarxa com per exemple una pàgina de contactes i adreces, una pàgina web, una botiga online... Recentment ha sorgit una necessitat pel professional en mitjans audiovisuals i multimèdies per poder exposar els seus treballs des de la xarxa. El portfoli físic s’ha modernitzat i ha passat a la xarxa per aconseguir arribar a més al públic objectiu. El portfoli constitueix un mostrari del teu propi treball i adopta diferents formes depenent de l’estat de desenvolupament que es troba la carrera de l’artista que representa.1 La gent té tota la xarxa d’internet a l’abast dels seus dits i sovint salten d’un lloc web a un altre per completar la seva tasca.2 Els últims deu o dotze anys han suposat una autèntica revolució en tot el món del màrqueting. A partir dels 90 han començat a aparèixer una sèrie de noves tecnologies com les pàgines web, els correus electrònics, la telefonia mòbil, les xarxes socials els missatges instantanis i les geolocalitzacions que han desbancat els tradicionals d’aquest món. De cop han sortit un pilot de nous perfils professionals i noves estratègies comercials per arribar a la gent.3 Però tots aquests canvis cap a noves tecnologies no volen dir que els mètodes tradicionals quedin obsolets. Els fulletons, els cartells, els anuncis publicitaris, les promocions i molts més es segueixen usant i continuen donant el seu resultat. L’única diferencia, recau en el canal. Internet i les noves tecnologies ha permès arribar a l’usuari d’una manera més directe i poder-ne treure una resposta. 4 L’any 2006 va significar un canvi en l’era de les pàgines web, aquest any van sorgir les webs 2.0. 1 2 3 4

Taylor, F. (2010) Cómo crear un portfolio y adentrarse en el mundo professional. p21 Taylor, F. op. cit., p34 Taylor F. op. cit., p26 Taylor, F. op. cit., p30 Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

Aquestes permeten una interacció entre l’emissor i el receptor. Aquesta comunicació funciona de manera bidireccional i permet al receptor participar en la creació de contingut. Posem per exemple la web d’un restaurant: el propietari escriu a la seva pàgina web una recomanació sobre un producte. El receptor en aquest cas el client veu l’oferta i decideix posar una crítica valorant el producte. Gràcies a aquesta opinió molts altres futurs clients podran gaudir d’un punt de vista neutral. A causa d’aquest canvi en les interfícies web i la popularització dels ordinadors en les llars el nombre d’usuaris i amb conseqüència el nombre de llocs web van ascendir d’una manera vertiginosa.5

5.2 Tècniques web/Màrqueting 2.0

Figura 1 Comparativa web 1.0 web 2.0

El màrqueting 2.0 són totes les estratègies de comercialització portades a terme en els mitjans digitals. En l’àmbit digital apareixen noves possibilitats tal com la immediatesa o la possibilitat de monitoratge a temps real. A causa d’aquesta necessitat s’han creat nous perfils de treball i amb aquest la forta necessitat de tenir presència a la xarxa. A continuació es presenten els mètodes més importants segons el màrqueting 2.0. 5

Maciá, F. (2014) Marketing Online 2.0. p37-38

Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

5.2.1 SEO Al principi de l’era d’internet no existien els buscadors que ara existeixen, llavors es cercaven les pàgines web a través de directoris (Altavista, Yahoo, ...). Aquests funcionaven com a llistats de portals agrupats segons temàtica. No va ser fins al 1997 quan Google va canviar el paradigma de la cerca de les pàgines web cap a cerques a partir de paraules clau. Un robot rastrejava el contingut d’una pàgina i a partir de les coincidències que trobava amb les necessitats de cerca d’un usuari les indexava amb un ordre correlatiu segons la pregnància del contingut. A partir de llavors neix la necessitat d’escalar a dins del rànquing de Google.6 El posicionament en buscadors o optimització en motors de cerca és el procés que millora la visibilitat d’una pàgina web en els resultats orgànics dels diferents buscadors. També el reconeixem com a SEO per la seva abreviació amb Anglès (Serch Engine Optimization). Els diferents motors de cerca treballen de diferents maneres i amb diferents algoritmes però comparteixen una sèrie de regles a l’hora de mostrar-nos els resultats. Primer de tot s’analitza tota la pàgina web en cerca d’errors de programació o desordre en el codi. Aquests defectes són penalitzats i per tant envien el vincle més avall del llistat. Seguidament analitza la quantitat d’enllaços que existeixen d’altres planes web cap a aquesta. Aquest indicador dóna punts positius al nostre web. Finalment fa una anàlisi de les pàgines més i ens posiciona les que poden ser més interessants.7 Factors de rellevància per un millor posicionament • Una correcta expressió escrita amb coherència i ressaltant les paraules clau amb negreta. • Un títol, descripció i paraules clau de cada article o pàgina del portal web. • Un nom de domini amb una rellevància important sobre el tema del portal. • Articles amb vincles per saltar d’una pàgina a l’altre. • Un correcte ús de les etiquetes de títols en l’HTML.8 Un altre tema important a tenir en compte en termes de posicionament és el PageRank.. Aquest és un dels factors que Google té més en compte. El PageRank funciona de la següent manera, Goo6 Historia de los buscadores de Internet. Alberto Iglesias Fraga (2014). Recuperat el 27 de Març del 2015, http://blogthinkbig.com/buscadores-de-internet/ 7 Definición de SEO. (2010). Recuperat el 18 de Febrer del 2015, http://www.v2p-online. es/2010/10/15/definicion-de-seo/ 8 Maciá, F. (2014) Marketing Online 2.0. p221

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

gle analitza quantes pàgines externes tenen vincles cap a la nostra pàgina web, depenent del resultat assigna un nombre o un altre. Com més vincles tinguem cap al nostre portal més ens premiarà Google i si els vincles procedeixen d’una pàgina amb un alt PageRank més serà la puntuació pel nostre portal. Aquesta puntuació és de domini públic i la podríem consultar per qualsevol portal web dedicat això tal com http://www.calcularpagerank.com/9 Finalment, falta esmentar les diferents eines que ens ofereix Google Webmaster Tools. Per una banda, tenim el Sitemap, que automàticament ens realitza un mapa del nostre portal i penjant aquest arxiu al nostre portal aconseguim facilitar la feina del robot rastrejador de Google. Per altra banda, disposem d’eines per detectar problemes d’indexació del nostre contingut. Gràcies a tots aquests serveis podrem aconseguir no tenir errors en el nostre portal i estar millor posicionats dins de Google. 5.2.2 SEM Es coneix el SEM com el màrqueting de la cerca. Les seves sigles amb Anglès (Serch Engine Marketing) representen els resultats patrocinats pels motors de cerca. Una plataforma molt coneguda és Adwords. Aquesta permet aconseguir un millor posicionament a partir d’un pagament per clic en el vincle patrocinat.10

Figura 2 Exemplificació del SEO i del SEM 9 10

Maciá, F. (2014) Marketing Online 2.0. p222 SEM vs SEO ¿cuáles son las diferencias?. (2013). Recuperat el 18 de Febrer del 2015, http://www. ideaschicago.com/sem-vs-seo-cuales-son-las-diferencias/

Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Les diferències del SEM al SEO són moltes i són dos serveis que es complementen però gràcies al pagament d’aquest servei podem aconseguir immediatesa, mentre que el SEO és un treball constant i de paciència. Adwords funciona de la següent manera. Primer de tot et registres en la seva plataforma web i et demanen que vinculis una targeta de crèdit per poder realitzar el cobrament. Seguidament et demanen que realitzis un llistat de paraules claus les quals vols patrocinar, recomanen que en siguin cinc, ja que és el nombre perfecte per dirigir una campanya de màrqueting en línia. Llavors et demanen que seleccionis un import per cada paraula clau. Depenent de l’import sortiràs més amunt o més avall del llistat d’enllaços patrocinats, depenent del preu que han posat la teva competència. Finalment el cobrament s’efectua quan algun usuari clica el vincle promocionat. Tots els resultats assolits Google ens els mostra amb forma d’analítica, quantitat d’impressions, nombre de clics... Finalment tot això es pot modificar a temps real per aconseguir la millor estratègia per arribar de manera més directe al consumidor final.11 El SEM ens ofereix diferents avantatges com ara: • Genera tràfic de manera immediata. • És modulable i personalitzable segons les necessitats en temps real. • Accessible per tots els pressupostos. • Els resultats són fàcils de mesurar. • Permeten generar reconeixement de la marca. • Permeten una segmentació molt precisa del públic al qual volem arribar. • Sabem que busca l’usuari i sabem com oferir el que busca al nostre usuari • Aconseguim analítiques molt més professionals i profundes dels nostres usuaris. Altres serveis de SEM a part de ”Adwords” són ”Facebook ads, Twitter ads, Linkedin ads, ... ”. Funcionen amb el mateix procediment, a partir d’un pagament permet oferir més visibilitat al contingut de l’usuari. Les maneres de pagament funcionen a partir d’impressions de l’anunci o a partir de clics en l’anunci. Actualment és un servei que es fa servir molt degut a la seva eficiència i a la capacitat d’adaptabilitat que ofereix a l’hora de buscar un públic destinatari. 12 11

Com funciona AdWords. Recuperat el 18 de Febrer del 2015, https://support.google.com/adwords/ answer/2497976?hl=ca 12 What I Do SEO, SEM, SMM, PPC...and Other Fun Acronyms. . Recuperat el 27 de Març del 2015, http://www.chadgookin.com/web-services

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

Tecnologies 6.1

La presència de la web avui en dia

L’any 1980, Tim Berners-Lee, en el seu temps lliure investigava un sistema de difusió descentralitzada de la informació basat en l’hipertext i en el que cooperaven amb besants centres d’investigació. Durant el 1989 Tim Berners-Lee proposa el CERB (Centre Européen de Reserche Nucléaire) utilitzant un sistema de comunicació basat amb hipertext per tal d’aconseguir un flux de comunicació entre científics. Amb aquest sorgeixen uns protocols de connexió TCP/IP. El novembre del 1990 es posa en marxa el sistema d’hipertext Enquire que permet emmagatzemar informació i l’accés a aquesta per diversos usuaris simultàniament. El 1991 Tim Berners-Lee escriu el primer programa de visualització d’hipertext per a servidor i usuari, aquesta va ser l’origen del World Wide Web tal com el coneixem. No és fins el 1993 que s’estandarditza com a Hypertext Markup Language (HTML). El gener de 1993 existien 50 plataformes web i dos tipus de navegadors: el original gràfic que només funcionava amb plataformes NeXT, i el navegador amb línia, disponible per totes les plataformes però amb moltes limitacions i poc atractiu. Aquell mateix any, al mes de Febrer, Marc Andreesen, un estudiant de 22 anys, llança la versió alfa del navegador Mosaic for X. Aquest permetia la navegació per la xarxa mitjançant clics de ratolí. L’any 1994 el nombre de servidors ja arribava als 10.000 amb 10 milions d’usuaris, tres anys després la xifra de servidors ja superava els 650.000. Des de llavors s’han produït nombrosos avenços sobre aquesta tecnologia. S’han millorat les interfícies gràfiques de les mateixes planes web i dels seus navegadors, s’han donat múltiples usos a les pàgines web, fins i tot el comercial electrònic. Finalment l’ús de la web com a enciclopèdia.13 Actualment qualsevol pot participar amb la creació de contingut, ja no són necessaris coneixements de programació. Existeixen sistemes de gestió de continguts (CMS) que mitjançant editors de text i unia interfície molt bàsica permeten crear i gestionar contingut dins d’una plataforma web.

6.2 CMS Un CMS és un sistema de gestió de continguts tal com les seves sigles indiquen (Content Management Systems o CMS). Aquest és un software que s’utilitza per facilitar la gestió i creació de 13

Historia de la WWW. Recuperat el 1 de Març del 2015, http://www.hipertexto.info/documentos/h_ www.htm

Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

contingut per a portals webs sense tenir uns coneixements tècnics elevats. Gràcies als sistemes de gestió de continguts l’usuari pot actualitzar la seva pàgina web sense necessitat de conèixer codis de programació web. Mitjançant editors de text i menús intuïtius es poden modificar les característiques d’un portal. Un CMS normalment està format per un backend i un frontend. 14 Entenem com a frontend la part de la pàgina on l’usuari pot interactuar, la cara pública del portal. Per altra banda, el backend representa tota la part de gestió del contingut. És des del backend on el propietari de la pàgina web pot editar la configuració, pot escriure el contingut i pot gestionar els comentaris.15 Existeixen diversos motors de gestió de continguts i cada un té les seves característiques, però darrerament hem vist un gran creixement de nombre d’usuaris en la plataforma Wordpress fins a arribar a superar amb majoria tots els altres serveis.

Figura 3 Gràfic de sistemes de gestió de continguts i el seu ús

A l’annex es pot veure una taula de contingut on es mostren els avantatges i inconvenients sobre els 3 sistemes de gestió de continguts més usats avui en dia. A partir d’aquesta s’ha arribat a les següents conclusions: El predomini de Wordpres sobre tots els altres serveis és evident donades les seves característiques. Tant la seva facilitat d’ús com la seva adaptabilitat, segons les necessitats, permet que 14 Introducción a los Sistemas de Gestión de Contenidos (CMS) de código abierto (2004).Recuperat el 19 de Febrer del 2015, http://mosaic.uoc.edu/2004/11/29/introduccion-a-los-sistemas-de-gestion-de-contenidos-cms-de-codigo-abierto/ 15 Frontend vs. Backend (2012).Recuperat el 14 de Març del 2015, http://skillcrush.com/2012/04/17/ frontend-vs-backend-3/

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

l’usuari aconsegueixi les seves expectatives amb aquest servei. La gran oferta de possibilitats des del punt de vista estètic fan la interfície personalitzable i atractiva. Finalment és un CMS que es compromet amb el SEO i això ens permet un millor posicionament en buscadors.

6.3

Perquè l’ús de Wordpress

WordPress és un sistema de gestió de continguts (CMS) de codi obert. Aquest ens permet penjar blogs o pàgines web a Internet i no requereix grans coneixements tècnics informàtics. Els sistemes per la publicació de blogs a la xarxa estar format per fitxers PHP i scripts, de manera que utilitzen una base de dades per tal d’autentificar l’usuari i poder emmagatzemar totes les entrades i els arxius mensuals del blog, així com els comentaris. Wordpress permet afegir funcionalitats per mitjà de plugins i també és possible canviar l’aparença per mitjà de plantilles. Finalment també ens ofereix la possibilitat de modificar els arxius mitjançant un editor de codi. En primer lloc, Wordpress és per naturalesa open source això vol dir que es manté gràcies als esforços de voluntaris que cooperen i treballen per aconseguir fer créixer aquesta comunitat. Un altre avantatge de ser programari lliure és la facilitat d’aconseguir informació. Per una banda, cal esmentar la facilitat d’ús i d’aprenentatge que suposa aquest software. Qualsevol persona pot accedir a informació per fer servir aquest motor. Wordpress permet a tot tipus d’usuaris fer ús de la seva interfície. Depenent dels coneixements de cada usuari es poden modificar i treballar diferents aspectes més o menys complexos. La disponibilitat de plugins o temes predeterminats és molt grossa, gràcies a això podem donar estil i forma al nostre portal d’una manera senzilla i atractiva. Per altra banda, Wordpress ofereix molta seguretat contra atacs informàtics i està molt optimitzat pels motors de cerca. Podríem dir que és Search Engine Friendly. Una altra característica important és que Wordpress té en compte la seguretat dels seus usuaris i estar molt ben preparat contra spam. Finalment podríem parlar de la flexibilitat que ens ofereix Wordpress com a portal web. Dins d’aquest, amb plugins i temes, podem donar la forma que volem al nostre portal. Les possibilitats són il·limitades. Des d’un portfoli professional fins a una xarxa social, passant pel tradicional blog, una botiga online o un fòrum d’opinions.16 16 10 Reasons Why You Should Use WordPress To Run Your Business Website. (2014). Recuperat el 18 de Febrer del 2015, http://wpapprentice.com/blog/10-reasons-use-wordpress-run-business-website/ Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

6.4

Portafolis online

Actualment el portfoli online és més que un maletí ple de projectes ordenats de manera cronològica. El portfoli és la teva primera carta que ensenyes en voler entrar a una empresa i al oferir els teus serveis. Per aquesta raó, el portfoli ha d’estar tan o més pensat que el teu currículum o la teva entrevista de feina. El portfoli ha de tenir la capacitat de ser entès amb facilitat, tenir pregnància i ser atractiu per si sol, ja que els usuaris el visitaran sol i sense la teva ajuda. És important conèixer el públic destinatari al qual vols arribar, d’aquesta manera podràs conèixer la millor forma de fer arribar el teu producte. Cal crear un orde amb el qual presentar els projectes amb una raó concreta. Gràcies a aquesta tàctica es poden potenciar les fortaleses de determinades feines. Un cop realitzat aquest itinerari cal oferir alternatives, ja que l’usuari potser vol ometre algun pas. Per altra banda, és molt important la informació. Cal donar missatges clars i descripcions concises. Finalment, recomanen buscar un tema creatiu i potent per treballar-lo en tot el portal. D’aquesta manera, s’aconsegueix captar l’atenció de l’usuari i aconseguir una millor experiència d’usuari.17 És molt important aconseguir una arquitectura de la informació correcta, ja que la bona disposició del contingut pot resultar una visualització del teu treball. En cas que siguis un artista multidisciplinari és recomanable que ofereixis diverses vies d’entrada a les diferents tècniques que domines. És molt important que l’usuari pugui seguir veient projectes relacionats amb el que l’hi agrada. Posem per cas que un usuari entra a la teva secció de fotografies i arriba a una fotografia de paisatge, si el seu interès són els paisatges i l’hi ofereixes més paisatges estarà content, si no és el cas i l’hi ofereixes retrats pot ser que perdis l’usuari.18 Un cop tenim l’arquitectura de la informació, ens hem de preocupar amb el disseny de la navegació. Com farem que el nostre usuari es mogui per dins de la interfície. Amb un simple gest de resplendor o una petita animació sobre els vincles podem aconseguir millorar l’experiència d’usuari i convidar a navegar més estona pel nostre portal. Finalment vigilar molt el tema de les descripcions del treball i oferir l’oportunitat de provar si és el cas d’un portal web o d’oferir prototipatge si es tracta d’una disciplina més gràfica. L’usuari necessita l’experiència de provar i de veure en context la feina realitzada.

17 18

Clazie, I. (2014) Cómo crear un portfolio digital. p12-40 Clazie, I. op. cit., p48 Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

GUI / UX / UI o Arquitectura de la informació 7.1

Arquitectura de la informació

L’arquitectura de la informació és la disciplina que s’encarrega de l’estructura, l’organització i l’etiquetatge dels sistemes d’informació. L’objectiu d’aquesta és optimitzar l’experiència de l’usuari. Tota informació ha de tenir un ordre i una coherència amb el que es vol ser presentat. D’aquesta manera, aconseguirem un discurs ordenat i lògic per la nostra informació. Dins de l’Arquitectura de la informació trobem els esquemes d’organització i navegació, Aquests ens ajuden de manera esquemàtica a ordenar el contingut dins del nostre portal. 19

7.2

UI (Interfície d’usuari)

Entenem per interfície d’usuari l’espai pel qual es poden comunicar persones i màquines. Aquesta disciplina s’encarrega de gestionar les demandes de l’usuari per oferir el que busca. L’èxit en la interfície d’usuari radica en la rapidesa del sistema i el fàcil ús per part de l’usuari.20

7.3

GUI (Interfície gràfica d’usuari)

La interfície gràfica d’usuari consisteix en l’aplicació de forma al sistema operatiu. Tots els elements gràfics, icones, imatges i vídeos formen part d’aquesta representació del sistema. Gràcies a aquesta la navegació és amena i entretinguda per l’usuari.21

7.4

UX (Experiència d’usuari)

L’experiència d’usuari és el conjunt de factors i elements relatius a la interacció de l’usuari amb un entorn o dispositius concrets. Totes les emocions, expectatives i reaccions de l’usuari formen part de l’experiència d’usuari.22

7.5 Usabilitat La usabilitat és una característica relacionada amb la facilitat d’ús. Més específicament es relaciona amb la rapidesa que pots aprendre a utilitzar una cosa, l’eficiència a l’hora d’utilitzar-lo, la 19 Arquitectura de la información. Recuperat el 13 d’Abril del 2015, http://gestioninformacion.idec.upf. edu/~i1258/ganadores/i76441/arquitectura20.html. 20 Interfaz de Usuario (2009). Recuperat el 13 d’Abril del 2015, http://dismul.blogspot.com.es/2009/08/ interfaz-de-usuario.html. 21 Definición de GUI. Recuperat el 13 d’Abril del 2015, http://www.mastermagazine.info/termino/5194.php. 22 La Experiencia del Usuario (2005).Recuperat el 13 d’Abril del 2015, http://www.nosolousabilidad. com/articulos/experiencia_del_usuario.htm

Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

capacitat de ser memorable, quin és el grau de ser propens a l’error i quan l’hi agrada a l’usuari. Si una característica no es pot utilitzar o no s’utilitza, és com si no existís. “Los usuarios Web son extremadamente impacientes: en nuestro estudio, permanecían una media de 27 segundos en cada página Web. ¿Por qué tanta prisa? Porque hay demasiado basura inservible en Internet. Si la gente estudiase con atención todo lo que se encuentra en la red, nunca conseguiría desconectarse y disfrutar de la vida.” (Jakob Nielsen, 2007) És molt important aconseguir la satisfacció de l’usuari, ja que d’això pot dependre la seva estança a dins de la pàgina web. Només hi ha un 12% de probabilitats que un usuari torni a visitar la mateixa plana web i si aquesta no és usable, el perdrem automàticament. Un usuari ha de saber com navegar dins de la plataforma, si per un sol instant perdem aquest domini per part de l’usuari, ell tancarà la plana i en buscaran una altra. Tant en les pàgines principals com a les interiors acostumem a dir el màxim de coses per definir bé el nostre producte. Cal dir que l’usuari a l’hora de percebre tanta informació comença a fer una lectura dels textos ressaltats o una lectura amb diagonal. Això vol dir que centrem molts esforços a redactar i posicionar una informació que el més probable és que no es percebi per l’usuari. Nielsen, desenvolupa un estudi molt exhaustiu de l’ús de les pàgines web però en destaca 10 normes que són les més famoses i que tota web ha de complir per gaudir d’una bona usabilitat. • Visibilitat de l’estat del sistema. Durant un procés com una enquesta o un formulari és important mostrar el punt en el qual ens trobem per tenir a l’usuari tranquil i conscient del temps que l’hi falta. • Mantenir una relació entre el sistema i el món real. S’ha d’aconseguir que la relació entre l’home i la màquina sigui una cosa normal i no sigui complicat d’entendre. • L’usuari és lliure i té el control. No pretenguis obligar a l’usuari a seguir un recorregut per arribar on tu vols. Has de donar carta blanca que l’usuari investigui i navegui per on ell vol. • Consistència i estàndards. No pots fer un menú diferent en cada pàgina interior de la teva plataforma. De la mateixa manera no pots realitzar un menú diferent i revolucionari envers les altres pàgines webs perquè els teus usuaris es perdran. • Prevenció d’errors. No deixis que els teus usuaris percebin els errors i si no tens cap manera

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

d’evitar-los, avisa’ls amb antelació. • És millor que ho reconegui que no que ho memoritzi. L’usuari prefereix aconseguir la informació de manera intuïtiva que no haver de memoritzar un tutorial mostrat a l’inici. • Flexibilitat a l’ús. Permet que l’usuari es mogui saltant parts de la teva plataforma. Aquest comportament el necessitarem quan l’usuari sàpiga on trobar els continguts que l’hi interessen dins la nostra plataforma. Si no l’hi facilitem el moviment, avorrirem a l’usuari. • Disseny estètic i minimalista. Un disseny simple i estètic ens ajuda a la millor interpretació del contingut. • Ajuda a l’usuari a diagnosticar el seu error. En el cas d’entrar un nom d’usuari o una contrasenya no l’hi diguis simplement error donar-l’hi pistes amb què ha fallat. • Ajuda a l’usuari. Sempre tingues un apartat de preguntes o una guia per l’usuari.

Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

7.6

Estudi pràctic de portafolis creatius (interfície)

Figura 4 http://lama-media.com/us/career/

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

Arquitectura de la informació Per començar trobem el logotip del portal a la part superior esquerra. Se’ns permet canviar d’idioma a partir d’un menú amb els diferents idiomes a la part superior dreta, aquest estan representats amb les inicials de cada idioma. Just a sota trobem un menú que ens permet navegar per la interfície. A primera vista sembla una landing page amb tot el contingut en una mateixa plana, però a mesura que anem navegant el portal. A l’inici el que trobem és una mica d’explicació dels diferents apartats de la web per poder captar l’usuari. Cada apartat ve acompanyat d’una explicació o imatge per facilitar la interpretació de l’usuari. Finament trobem un footer bastant ample amb les dades fiscals, les seves xarxes socials i la manera de contactar amb ells. A l’apartat de portfoli només se’ns mostren 3 columnes de fotografies dels projectes amb el logotip de l’empresa que ha encarregat el servei. Un cop passem per sobre, ens apareix una breu descripció i un vincle per obrir la fitxa completa del projecte. Finalment trobem totes les altres pàgines que comparteixen les mateixes característiques de pàgines simples. En aquestes es distribueix la informació amb diferents columnes depenent de l’ocasió. GUI En aquesta plantilla trobem una paleta de color molt senzilla. Aquesta està composta pel blanc el negre i un gris clar. Gràcies a la contraposició d’aquests colors s’aconsegueix l’efecte de ressaltar els elements segons el seu context. Per altra banda, trobem les fotografies que apareixen amb els colors originals i quan es passa per sobre seu s’atenua la imatge fins a acabar amb negre. Dins la fitxa de cada projecte del portfoli apareix una franja amb una imatge de fons, aquesta està atenuada i amb un color sobreposat i efecte de parallax. Pel que fa l’estil gràfic es juga amb dues tipografies, una és la mateixa del logotip amb cos i tot amb majúscules, l’altra és més fina i amb majúscules i minúscules per marcar contrast amb l’altre. Les icones són simples amb un requadre o línies molt simples. UX Només entrar al portal ja s’ofereix una breu descripció de cada apartat i un vincle actiu per poder accedir a la secció desitjada. Per altra banda, el menú superior s’amaga quan fem scroll cap a baix però quan fem scroll cap a dalt ens apareix, d’aquesta manera permet visualitzar millor el contingut. Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Figura 5 http://lama-media.com/us/career/ A la fitxa individual de cada servei ens apareix unes fletxes al lateral per poder passar d’un projecte a l’altre sense necessitat de tirar enrere. Finalment a sobre el footer ens apareix tres projectes relacionats amb el que estem observant per permetre a l’usuari una navegació fluïda per tots els projectes.

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

Figura 6 http://demo.themebeans.com/wonder/ Arquitectura de la informació Per començar trobem el logotip del portal a la part superior al centre. Just a sota, també centrat, trobem un menú que ens permet navegar per la interfície. Seguidament trobem una breu descripció en aquest cas l’autor, ha aprofitat per presentar les funcionalitats de la plataforma i donar la benvinguda. A la part superior esquerra trobem un símbol de suma. El cos de la pàgina principal Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

es forma a partir d’un collage d’imatges, també trobem un botó per realitzar un filtratge de les imatges. Finalment trobem una barra en acabar la pàgina, allà es pot llegir informació de l’autor i el copyright. A la cantonada inferior esquerra trobem una fletxa cap a dalt. Per altra banda, ofereixen la funcionalitat de pàgina normal i de blog per completar aquest portfoli. Quan accedim a la fitxa de cada projecte se’ns mostra el nom del projecte les seves característiques i una breu descripció. Just a sota es presenta el contingut del projecte. En aquesta plantilla igual que l’anterior també s’ofereixen les dues fletxes per canviar de projecte i els projectes relacionats a la part final. GUI En aquesta plantilla trobem una paleta de color molt senzilla. Aquesta està composta pel blanc, el negre i un gris clar. Per completar la paleta es fa ús d’un color més viu per ressaltar diferents botons o elements interactius. Les imatges es tenyeixen de verd mentre es fa un zoom in quan passem per sobre d’aquestes, aquesta acció es porta a terme per donar a entendre que existeix una interactivitat com a vincle en aquella imatge. Pel que fa les tipografies, juga amb la mateixa combinació que la plantilla anterior, majúscules amb cos i lletra més fina pel contingut. Pel que fa la part de portfoli i les pàgines de cada projecte es treballa amb un disseny full width mentre que dins del blog trobem marges. UX L’ús de la plantilla és molt fàcil i intuïtiu. Quan fem scroll i deixem de veure el menú, ens apareix una franja a la part superior amb els diferents apartats de la pàgina. Al final de la plantilla apareix una fletxa, aquesta ens permet accedir ràpidament a la part superior del portal. Una de les particularitats que té aquesta plantilla és la posició del footer a simple vista sembla que no hi és, però és quan premem el símbol de suma a la part superior que apareix. Aquest apareix a la part superior de la pàgina. Des d’un punt de vista no és gaire atractiu veure primer el footer que no pas el contingut, estem massa acostumats a trobar-lo al final de la pàgina i això desconcerta. Per altra banda, es pot analitzar dient que gràcies a això fem que la gent hi presti atenció.

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

Figura 8 http://demo.rocknrolladesigns.com/wordpress/jarvis/

Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Arquitectura de la informació En iniciar la pàgina ens apareix un comptador per indicar el punt de la càrrega en què es troba el portal. Seguidament ens apareix una imatge a pantalla completa amb un títol molt gros i una petita fletxa per baixar cap a baix. A continuació trobem el menú amb el logotip a l’esquerra i els elements navegables a la dreta. Just a sota se’ns mostra un títol una descripció i amb tres columnes els projectes. Tots els diferents continguts estan separats per diferents franges. Més avall trobem un comptador i una graella de quatre columnes on se’ns mostren les funcionalitats. Finalment trobem una franja per subscriure’ns en el butlletí i el footer. En el footer apareix el logotip del portal, informació del copyright, les diferents xarxes socials i la fletxa per tornar al principi de la pàgina. GUI En aquesta plantilla trobem una paleta de color més arriscada. En aquest cas es fa servir el groc com a color principal, des de les opcions de personalització del tema es pot escollir altres colors. Aquest color principal es fa servir tant en color de fons per les seccions com en títols com en botons. Pel que fa la forma, en aquest cas podem parlar d’una langing page a full width, ja que tenim tot el contingut en una mateixa plana. Per separar les diferents seccions es fa ús de seccions amb el fons de color blanc, seccions de color groc i seccions amb imatge de fons i efecte parallax. Pel que fa les tipografies, es fa ús d’una sola tipografia. Amb majúscules pel text important com menús i títols, i majúscules i minúscules en el cas del text. UX El menú, en aquesta plantilla, ens apareix amb una franja a la part superior mentre anem navegant. Al final de la plantilla apareix una fletxa, aquesta ens permet accedir ràpidament a la part superior del portal. La navegació amb aquesta plantilla és molt fluida i atractiva, ja que mitjançant les imatges de fons aconsegueix captar l’atenció de l’espectador. Aquest format de construcció a partir de franges dóna molta versatilitat al propietari i a la navegació.

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

Accessibilitat L’accessibilitat web té com a objectiu aconseguir que les pàgines web siguin utilitzades pel nombre més gran de persones des de qualsevol plataforma possible. El disseny responsiu és un mètode de disseny i programació web que permet adaptar el nostre portal a qualsevol dimensió de pantalla. Això s’aconsegueix mitjançant media-queries dins del CSS, gràcies a aquest definim una resolució i adaptem els diferents elements de la nostra pàgina web.

8.1 Responsiu

Figura 9 Imatge representativa de disseny responsiu

Entenem per responsiu la capacitat d’adaptació a tots els tipus de suports que poden suportar aquest portal web. Actualment trobem tres tipus de dispositius, Ordinador, tableta i telèfons intel· ligents. Cada dispositiu gaudeix d’una dimensió de pantalla diferent i cada model de producte sol tenir dimensions diferents, ja que cada fabricant decideix les mides de la pantalla segons el target que té. Les plataformes web, durant els darrers anys estan començant a convertir el seu portal en responsiu. D’aquesta manera, aconsegueixen que tots els usuaris puguin gaudir d’una correcta visualització del portal sigui en el dispositiu que sigui. Per realitzar això es pot assolir a partir de diferents maneres. Per una banda, tenim la manera tradicional que suposa modificar el CSS depenent de la pantalla per la qual es visualitza. Per altra banda. tenim l’ús de frameworks com Bootstrap o Foundation entre d’altres que ens permeten aconseguir un portal responsiu amb menys esforç. A partir d’un sistema de columnes ja preestablertes marquem l’amplada del nostre contingut cridant dites columnes i aquestes s’adapten Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

segons el dispositiu i dimensió de pàgina que ho visualitzem.

8.2

Crossplatform

Figura 10 Imatge dels diferents motors de navegació

Actualment disposem de diverses eines per navegar per la xarxa i totes elles són gratuïtes. És l’usuari el que escull en quin dels navegadors utilitzar segons les seves necessitats. Cada un d’aquests funcionen de diferent manera i tenen particularitats concretes que poden causar errors durant la càrrega de la pàgina web. A l’hora de programar una plataforma web s’ha de tenir en compte les seves diferències, ja que si no es vigila, poden aparèixer problemes en la visualització del contingut. Els principals problemes apareixen en el CSS3 on podem trobar animacions i transformacions dels objectes definits al HTML. Per prevenir aquests erros existeixen unes etiquetes per cada navegador que permeten el correcte funcionament del nostre codi.

Figura 11 Imatge del diferents motors de navegació amb les seves etiquetes per css3

Aquestes van variant a partir de les actualitzacions dels navegadors, però actualment estan en l’estat actual. De mica en mica s’han anat normalitzant i en un futur s’arribarà a un punt on no es necessitaran les diferents etiquetes, ja que el codi s’haurà unificat. 23

23 CSS3 Animations. Recuperat el 18 de Febrer del 2015, http://www.w3schools.com/css/css3_animations.asp

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

Monetització La monetització és el procés de conversió d’un producte o servei a diners. En aquest apartar s’ha realitzat un petit estudi de mercat per comercialitzar el producte creat amb aquest projecte. Per altra banda, s’han buscat alternatives per poder comercialitzar la plantilla de manera més tradicional.

9.1

Estratègies de Venta actuals

Com ja s’ha esmentat anteriorment l’objectiu d’aquest treball és assolir una qualitat professional i si s’assoleix, és convenient pensar en quines sortides pot tenir el projecte. Per aquesta raó s’ha realitzat una recerca de les diferents possibilitats. Estratègies de Venta actuals. Actualment el que més trobem en venda de plantilles de Wordpres són botigues online on després de superar un seguit de proves et permeten comercialitzar el teu producte. • Themforest: Themforest és el portal més gros de plantilles de Wordpress i amb més autors. Es podria dir que tothom va allà quan vol comprar una plantilla de Wordpress. El percentatge de benefici per l’autor oscil·la entre un 50% i un 70%. • Mojo Themes: Es basen en l’exclusivitat. Si només penges el treball a la seva plataforma, negocien el percentatge que t’endús entre un 50% i un 70%. Si no els hi ofereixes exclusivitat, només et permeten un 50%. • WP Eden: És una plataforma bastant nova i els percentatges que es queden ells no pugen més del 20%. • ThemSnap: Les comissions que guanyen ells en cada venda oscil·len sobre el 75%. • WP Sphop: En aquesta plataforma es permet penjar dues versions de plantilla la versió gratuïta i la de pagament aconseguint així un model de venda freemium. • Creative Market: Permeten un 70% dels beneficis per l’autor i ofereixen la possibilitat de venda de diferents articles, ja siguin plantilles, vectors, fonts, etc.24 Wordpress Unit Test és una eina que es recomana passar a la plataforma abans d’enviar-la a qualsevol pàgina web de venda. Aquest el que fa és fer un estudi exhaustiu si tots els documents estan 24 8 Marketplaces to sell Wordpress theme(2013). Recuperat el 19 de Febrer del 2015, https://www. competethemes.com/sell-wordpress-themes-plugins-marketplaces/

Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

amb regla i llestos per ser usats per altres usuari. Seguidament la plataforma on comercialitzes el teu producte fan diferents anàlisis i proves per determinar la qualitat del teu treball i en funció del resultat et permeten o no la comercialització de la plantilla. Aquests són uns dels ítems que s’aconsellen a l’hora de presentar una plantilla: • Un bon disseny personalitzable. • Suport online i una bona guia d’usuari. • Possibilitat de canvi d’idioma. • SlideShows i efectes visuals. • Integració de les xarxes socials. • Possibilitat de compartir el contingut de dins de la plataforma.25 Una característica molt important d’aquestes botigues online és que funcionen com una xarxa social en la qual el comprador et pot consultar coses a partir de missatges interns. El venedor pot aconseguir estrelles i millor posicionament dins d’aquesta xarxa a partir del tracte amb els clients i de la qualitat dels seus productes.

9.2

Com fer un pas més

Per altra banda el producte creat es pot vendre com s’ha fet tota la vida, buscant el consumidor. D’aquesta manera, el que s’aconsegueix és un 100% del benefici i la possibilitat d’oferir un tracte més pròxim amb els clients. La meva idea es basa a construir un entorn al voltant del producte per aconseguir fer difusió. L’estratègia es basa amb 3 parts • Primer de tot, buscar a professionals i oferir la plantilla de manera gratuïta a canvi d’algun servei seu o promoció de la plantilla, després de sentir les seves valoracions o crítiques es pot realitzar una última iteració per assolir els seus objectius. Si s’aconsegueix que el producte el faci servir un o una artista important la repercussió pot ser molta. • Per altra banda, realitzar un portal web on anunciar la plantilla i oferir una versió beta per aconseguir nous clients amb el model de negoci freemium. En aquesta plataforma es podria mostrar tot l’estudi i procés de la creació de la plantilla, valoracions de diferents usuaris i xifres de visites que aconsegueixen.

25 What makes a premium Wordpress theme premium?. Recuperat el 19 de Febrer del 2015, http:// www.paulund.co.uk/what-makes-a-premium-wordpress-theme-premium

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

• Finalment oferir un servei de personalització en termes de programació pels clients més exigent. En definitiva, cada professional igual que cada persona té una sèrie de necessitats i aquestes com més ben cobertes estiguin, més satisfet estarà el client.

Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

10.1

Crear i comunicar noves idees i propostes

Per assolir el resultat final va ser necessari l’ús de diferents processos durant el desenvolupament del producte. 10.1.1 Procés de creació Després de la fase documental del projecte es va realitzar una recerca formal de què existia actualment al mercat i de com es resolien els diferents problemes de disseny d’interfície. Arribats a aquest punt es va començar a registrar totes les idees i necessitats en un logbook exclusivament dedicat al treball. Per veure aquest document visiteu www.victorpiella.com/logbook 10.1.2 Factor de fluïdesa En aquest estadi, es va procedir a enregistrar totes les necessitats o funcionalitats possibles que existien actualment. Des del responsive design fins als comportaments de botons o imatges. Durant aquest procés no es va posar cap filtre ni cap barret per tal d’aconseguir el nombre màxim d’idees a realitzar 10.1.3 Factor de flexibilitat Mitjançant totes les idees plasmades al logbook es va crear un ordre d’importància i a partir d’aquesta es va començar a treballar. Algunes de les idees al final no s’han formalitzat a causa de la tecnologia, ja que no les ha suportat o per inadequació amb el producte que es realitzava. Finalment hi ha diverses idees que es van decidir guardar per futures actualitzacions i per mantenir el projecte viu. 10.1.4 Factor d’elaboració Un cop realitzades les necessitats al logbook es va procedir a la realització dels esbossos i el prototipatge digital. Un cop aprovat aquest prototip es va començar la fase de programació amb tota la seva complexitat. Com ja s’ha esmentat moltes idees que en el paper es veien possibles, la programació no ho suportava. A partir del treball personal i de les reunions amb el tutor el projecte ha assolit la forma presentada. La intenció és de mantenir viu el producte per donar-li ús personal i comercial. 10.1.5 Factor de la innovació El valor diferencial d’aquesta plantilla és l’adaptabilitat que ofereix. El seu ús estar pensat per a

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

portfoli creatiu, però amb petites modificacions realitzades des del panell d’administrador, podem fer-la servir com a web d’un restaurant o com a web promocionant un producte. Les fotografies prenen molta importància amb aquesta plantilla i no es veuen amagades pel disseny de la interfície. D’aquesta manera, aconseguim que el client de la plantilla pugui exposar el seu treball de forma clara i concisa.

Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

FASE II. Planificació i realització 11.1

Establiment dels objectius que orientin l’operativa del treball

Per tal de realitzar aquest projecte amb el poc temps que hi havia es va haver de realitzar una calenderització dels processos. Gràcies a aquesta es va poder optimitzar el temps i portar un control exhaustiu de les tasques. El projecte es va dividir amb les següents tasques: • Documentació (Recerca documental i realització del treball) • Disseny de continguts (Elecció dels continguts o possibilitats de la plantilla) • Disseny de la interfície (Prototipatge digital de l’aparença gràfica) • Programació (Realització del projecte amb programació) • Testing (Realització de proves per verificar el funcionament) • Autoavaluació, millora i prospectiva • Preparació de la presentació • Lliurament i presentació pública 11.1.1. Plantejament inicial

Figura 12 Calendarització

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

11.1.2. Plantejament final

Figura 13 Calendarització

Finalment es va haver d’optar per la segona convocatòria per falta de temps. Les expectatives de compaginar el projecte grupal de 4t i el treball de fi de carrera no van ser possibles. A conseqüència d’això es va haver de tornar a distribuir les tasques dins del calendari. Mirant enrere prefereixo haver presentat al Setembre, ja que he pogut posar-me amb el projecte al 100% i treure’n el màxim rendiment.

Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

11.2

Desenvolupament

A partir de l’estudi de casos i de la recerca documental es va realitzar la següent proposta formal. Aquesta s’ha dividit amb els següents apartats per poder assolir i aplicar les temàtiques de la recerca documental.

Figura 13 Pàgina d’inici

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

11.2.1 Arquitectura de la informació

11.2.1.1 Pàgina principal

La pàgina principal està construïda a partir de mòduls amb els quals l’administrador pot ordenar segons les seves preferències. Aquests funcionen com un resum, és a dir que es mostraran les últimes entrades o els últims treballs. En una altra pàgina es llisten totes les entrades i treballs per complet. En primera instància, trobem una barra superior on trobem les dades de l’empresa o del professional i les xarxes socials. Seguidament trobem una barra de menú amb fons transparent, on a través d’aquesta es veu el fons. Just a sota trobem un slider en el qual podem afegir les imatges que desitgem des del panell d’administrador. També hi ha la possibilitat de posar una frase descriptora a sobre del slider, també està dotada d’animacions. El següent mòdul que trobem és el de portfoli, aquest està format per dues files de tres o quatre columnes, depenent de la dimensió de la pantalla, on es mostren els treballs de l’administrador de la pàgina. Seguidament, un mòdul de testimonials on es mostren les diferents recomanacions de persones externes. En aquest apartat, terceres persones poden fer recomanacions de la feina o l’experiència de treball de l’administrador de la pàgina. Just a sota, trobem les quatre últimes entrades del blog. Amb el seu la imatge corresponent a l’entrada, el títol i les seves etiquetes descriptives de l’entrada. Finalment un mòdul de comptador per diferents valors. Tant els valors, com la icona, com el text descriptiu són personalitzables. Per concloure, trobem el footer, aquest està dividit amb 2 apartats. Un és l’apartat on l’administrador pot posar quatre widgets. L’altre apartat està format d’una petita barra amb el copright i les xarxes socials.

Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Figura 14 Pàgina de portfoli

11.2.1.2 Altres estils de pàgines

Per complir totes les necessitats dels usuaris s’han programat altres estils de pàgines com són la de portfoli, la de blog i les pàgines simples personalitzables. A la pàgina de portfoli trobem la mateixa capçalera de totes les pàgines formada del logotip i el menú de navegació. A continuació, trobem uns botons que ens permeten filtrar els projectes segons la categoria. Finalment, trobem tots els projectes amb tres o quatre columnes depenent de la dimensió de la pantalla. L’apartat del blog està format per dos blocs, el contingut i el sidebar. En el contingut trobem una imatge de l’entrada, el títol, les dades de l’entrada i una breu descripció. El contingut del sidebar és totalment personalitzable per l’administrador, per defecte s’ha escollit una barra de cerca, les últimes entrades i un núvol de tags. Per concloure, cal esmentar les pàgines simples, aquestes estan formades per la mateixa estructura que totes, capçalera i footer, però afegeixen funcions

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

personalitzables per posar imatge de fons, títol de la pàgina i opcions de visualització.

Figura 15 Pàgina simple

11.2.1.3 Pàgines individuals

Entenem per pàgines individuals aquelles que estan formades a partir d’un treball o una entrada de blog. Per diferenciar aquestes dues s’han creat dos estils. En l’apartat de treballs, les pàgines individuals que trobem estan formades pel contingut visual que està situat a l’esquerra i una barra informativa del projecte a la dreta. En aquesta podem trobar tota la informació sobre el projecte com el nom del projecte, un vincle cap al lloc on es troba, l’equip que ha fet possible el projecte i una breu descripció. Finalment trobem les categories i uns botons per canviar de projecte. Pel que fa les pàgines individuals del blog segueixen la mateixa composició que la pàgina de blog. A l’esquerra trobem el contingut i a la dreta el sidebar. Just en finalitzar el contingut trobem uns botons que ens permeten la navegació i un formulari per deixar un comentari.

Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Figura 16 Pàgina del blog individual

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

11.3.2 GUI

11.3.2.1 Color

En aquesta plantilla trobem una paleta de color predeterminada formada a partir dels següents colors. En la primera fila trobem els colors de la paleta i en la segona trobem els mateixos sobre exposats per denotar la interactivitat dels botons. Cal afegir que els colors també es poden escollir obertament des del panell d’administrador.

Figura 17 Paleta de colors del projecte

Un cop escollit un d’aquests colors, aquest es repeteix al llarg de la plantilla amb diferents elements com els botons, la top bar, els separadors, etc. Un altre lloc on trobem el color seleccionat és quan passem per sobre d’un treball. Llavors a sobre la imatge se sobreposa un fons amb degradat del mateix color que s’ha seleccionat. Finalment, trobem les seccions de comptador i testimonials on apareix un color sobreposat a la imatge. Aquest no té relació amb els colors de la plantilla, ja que són totalment personalitzables per l’administrador. Pels testimonials s’ha escollit un blau clar, ja que denota tranquil·litat i confiança. En canvi, pel comptador, s’ha escollit un vermell granat per cridar l’atenció.

Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Figura 18 Pàgina del projecte individual

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

11.3.2.2 Tipografia

Tipogràficament la plantilla està dissenyada per utilitzar dues tipografies, no obstant dins del panell d’administrador es permet l’opció de seleccionar una tipografia per cada estil de títol i pel cos del text. Per defecte es va fer una selecció tipogràfica de dues fonts i amb la conjunció d’aquestes dues s’ha donat forma a tot el projecte.

Figura 19 Tipografia utilitzada pels títols

La tipografia escollida pel contingut va ser la Gotham Black. També es fa ús d’ella pels títols dels mòduls o per la topbar o el footer. La raó per escollir aquesta tipografia era la necessitat d’una tipografia amb pes i sans-serif. També es va detectar la necessitat que fos sans-serif per encaixar amb els altres elements de la proposta formal.

Figura 20 Tipografia del text de cos

En primer lloc s’ha escollit la Nexa Light pel menú, pels títols d’entrades, treballs i pàgines. La raó per escollir aquesta tipografia era la necessitat d’una tipografia amb fina i agradable a la lectura.

Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

11.3.2.3 Imatge

Dins de la plantilla pren molt protagonisme el treball de l’autor, per aquesta raó s’ha decidit projectar imatges a gran escala per captar l’atenció dels visitants del portfoli. Només entrar tenim un slider que ocupa tota la finestra on es poden posar les imatges que es desitgin des del panell d’administrador. En el mòdul de testimonials i el de comptador també trobem una imatge de fons totalment personalitzable. Finalment també trobem imatges de fons a les pàgines simples.

11.3.2.4 Textura

La textura dins la plantilla es tracta molt discretament. Tot són colors plans o amb opacitat a sobre d’imatges. Pel que fa textura la trobem sobreposada al slider inicial. Aquest son els diferents motius que es poden escollir des del panell d’administrador.

Figura 21 Paleta de textures del projecte

11.3.2.5 Composició

La plantilla, en la seva major part, està estructurada seguint una composició a full width. La plantilla funciona amb la reticulació de dotze columnes que solem trobar en tota pàgina web. A vegades trobem elements com el slider o els testimonials. En altres ocasions seguim la composició a partir de 3 columnes i dues files en el cas del portfoli o 4 columnes i una fila en el cas de les últimes entrades del blog. Ha pres molta importància el nombre de projectes que es mostra en pantalla i com es fa. Els treballs prenen més importància i n’apareixen més, ja que la intenció de la plantilla és exposar el treball. Pel que fa l’apartat de portfoli treballa de la mateixa manera que el mòdul de la pàgina principal. Finalment les pàgines simples s’ha observat la necessitat de ser personalitzables, per denotar diferència entre totes aquestes. Més endavant se citaran totes les opcions de personalització, però a trets generals hi ha dos tipus de composició; una és quan posem el títol de la pàgina i imatge de fons a la part superior de la pàgina ocupant tota l’amplada; l’altre tipus és 46

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

quan posem els mateixos elements a un costat ocupant així un 30% de l’amplada. En contraposició a totes les altres seccions el blog no està compost amb tota l’amplada de la pantalla. La raó d’aquesta composició rau en l’experiència d’usuari. Així doncs, es compon amb un ample màxim i deixant com a fons blanc els laterals. Altres plantilles tenen l’opció de canviar la sidebar de costat, però s’ha considerat millor deixar-la a la dreta per potenciar la velocitat de lectura del contingut. 11.3.3 UX Només entrar l’usuari es trobarà amb un slider a mida completa, automatitzat i amb una frase animada sobre d’ell. En el capçal de la pàgina trobem el logotip i el menú amb negatiu per ressaltar a sobre del fons. Quan comencem a fer scroll el menú amb negatiu desapareix, però en el punt que passem del slider ens apareix amb positiu i amb un fons blanc fix a la part superior de la finestra. Pel que fa els projectes del portfoli, en passar per sobre, apareixerà el títol i la categoria amb un fons de degradat sobreposat a la imatge. Seguidament, l’apartat de comptador tal com l’apartat de testimonials estan dotats d’una imatge de fons amb un comportament parallax per aconseguir dinamisme. L’apartat de testimonials es forma a partir d‘un slider per poder mostrar el contingut de cada recomanació d’un en un. L’apartat del portfoli trobem tots els projectes plantejats de la mateixa manera que la pàgina principal però afegint un filtratge per categories. Gràcies a aquest podem filtrar els projectes a temps real. Dins de l’apartat del blog trobem un altre plantejament. Com ja s’ha esmentat el contingut es troba a l’esquerra ocupant un 70% de l’àrea del contingut. El 30% restant és empleat pel sidebar. El posicionament dret del sidebar no és gratuït. Segons les normes d’usabilitat, les zones de més atenció són la banda esquerra, per aquesta raó s’ha col·locat el contingut a la banda esquerra per potenciar la captació de l’atenció de l’usuari. Pel que fa les pàgines individuals segueixen la mateixa estètica que el blog amb el contingut a l’esquerra i un espai per informació o pel sidebar a la dreta. També trobem dos botons que permeten moure’ns al contingut anterior o al posterior. L’objectiu principal de la plantilla és ressaltar el contingut de l’autor i, per això, aquestes pàgines les trobem simples i intuïtives.

Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

11.3.4 Responsive Per assegurar la correcta visualització del contingut del portfoli aquest ha d’experimentar canvis de forma per adequar-se als diferents dispositius. Depenent de l’amplada de la pantalla els elements es distribueixen de diferent manera. Un exemple són, els treballs i les entrades dels blogs amb una pantalla normal en veiem files de tres i quatre columnes, des d’un Ipad veurem files de dues columnes i des d’un smarthphone veurem files d’una columna. Un altre canvi important és la reticulació del footer. En pantalles normals trobem 4 columnes, en Ipads 2 columnes i en smartphones una columna. Per altra banda, trobem que en dispositius com el smartphone perdem elements com el top bar, ja que no podem gaudir d’una correcta visualització. Tota la informació d’importància s’ha decidit mantenir-la i reestructurar-la. Finalment a l’annex es troben les diferents visualitzacions segons les pantalles més importants.

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

Figura 22 Vista d’un projecte en versió mòbil

Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

11.3.5 Panel intern Per poder realitzar totes aquestes funcionalitats de personalització de la plantilla s’ha hagut de crear un panell d’administració des d’on es poden personalitzar moltes opcions. A grans trets es poden modificar des de colors de la plantilla, passant per tipografies, imatges, ordre dels continguts fins a comportaments de determinades seccions. S’han organitzat de tal manera que l’administrador trobi ràpid les opcions i les modifiqui sense problemes. Per altra banda, molts paràmetres ja porten opcions per defecte, així que només instal·lar la plantilla ja s’apreciaran canvis. A l’annex trobaran un esquema detallat de totes les funcionalitats que es poden modificar de manera esquemàtica i molt detallada. 11.3.6 Tecnologia Un cop realitzada la fase documental es va optar per Wordpress com a tecnologia de CMS per la seva recent popularitat i la seva facilitat d’ús per l’usuari final. Per complementar la plantilla i oferir el màxim de possibilitats pel futur administrador i per destacar amb estètica ha estat necessària la incorporació de plugins externs i fragments de codi de tercers.

11.3.6.1 Foundation

Per aconseguir que la plantilla sigui responsive és necessari un framework que reticuli el contingut amb 12 columnes. Foundation permet aconseguir dit resultat, i gràcies a aquesta amb una simple crida de CSS aconseguim que el contingut s’organitzi. Foundation fa 5 diferències per aconseguir encaixar el contingut amb diversos dispositius: Small (com a màxim 640px) es fa servir amb mòbils en vertical. Medium (de 641px a 1024px) es fa servir des de mòbils en horitzontal fins a Ipads. Large (de 1025px a 1440px) La majoria de pantalles d’ordinador portàtil. XLarge (de 1441px a 1920px) Pantalles d’ordinador de sobretaula. XLarge (més de 1921px) Pantalles retina o de gran resolució.

11.3.6.2 Metabox

Metabox permet la creació d’opcions o camps, personalitzables pel programador dins de cada entrada o treball. Un exemple seria el que trobem a les pàgines simples. Gràcies a aquest plugin l’administrador pot seleccionar l’estil de la pàgina que està realitzant. Un altre exemple, seria la que trobem a cada treball, gràcies a metabox tenim un camp on posem el client, l’any i la descrip-

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

ció del treball.

11.3.6.3 Redux Framework

Gràcies a aquest la plantilla té un panell de personalització. El paper de redux framework és molt important, gràcies a ell, trobem totes les opcions de personalització estètiques de la pàgina. Des de canviar els logotips

11.3.6.4 Sliders

El slider que apareix a l’inici està realitzat amb vegas.js, un slider que funciona com a imatge de fons. Per altra banda, trobem el slider dels testimonials. En aquest s’ha utilitzat JSslider, ja que aquest permet realitzar un slider amb contingut, paginació i botons per tirar endavant i enrere. Per tal d’oferir més possibilitats de personalització per l’usuari, la plantilla està dotada de uns plugins que s’instal·len automàticament.

11.3.6.5 Page Builder

Page Builder és un editor visual pel contingut de les pàgines. Aquest permet a l’usuari fer columnes adjuntar petits widgets i col·locar imatges dins d’una pàgina simple.

11.3.6.6 All in one SEO

Aquest plugin permet afegir paraules clau i descripció a cada entrada. Aquesta funcionalitat es molt important si és vol tenir rellevància dins de Google.

Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Fase III. Autoavaluació, millora i prospectiva 12.1.

Autoavaluació i prospectiva

Pel que fa els objectius de caràcter documental han estat assolits, i en un futur es maquetarà i es distribuirà la informació recol·lectada com s’havia proposat. Per altra banda, la proposta de producte ha tingut bona rebuda i actualment ja hi ha quatre persones que volen adquirir la plantilla per a ús personal. La qualitat assolida amb el projecte, ha estat satisfactòria tant pel realitzador del treball com per tots els companys que han pogut testejar-la. Finalment el criteri de qualitat de la programació no està verificat directament per Themeforest, ja que es va decidir acabar d’afegir les funcionalitats plantejades al loogbook per poder tenir millor presència dins de les botigues virtuals.

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

Conclusions Un cop realitzat el projecte se’n poden extreure diverses conclusions. En primer lloc, la planificació temporal, és molt complicat planificar a llarg termini i més quan es desconeix la complexitat del producte que es realitza. Per altra banda, tots els coneixements adquirits durant la recerca documental s’han implementat amb el treball realitzat. Gràcies a aquesta s’ha pogut treballar de manera molt més concisa i ordenada, cada element del treball té un raonament i està posicionat o dissenyat amb una finalitat. Cal esmentar que tot i fer una entrega del projecte amb format acadèmic, el projecte no es queda aquí, ja que existeix la necessitat de continuar amb el projecte per assolir idees que s’havien plantejat. Es continuarà treballant per oferir actualitzacions i noves funcionalitats pels usuaris. Aquest és un indicador que demostra la passió pel projecte i el constant desenvolupament. Finalment, citar una frase que resumeix perfectament els coneixements adquirits amb aquest treball “Doneu-me sis hores per tallar un arbre i passaré les quatre primeres afilant la destral” Abraham Lincoln. Tota la fase de documentació i preparació del projecte són indispensables pel desenvolupament del projecte.

Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Bibliografia Taylor, F. (2010) Cómo crear un portfolio y adentrarse en el mundo professional. Barcelona: Gustavo Gili. Maciá, F. (2014). Marketing Online 2.0. Madrid: Anaya Multimedia. Clazie, I. (2014). Cómo crear un portfolio digital. Barcelona: Gustavo Gili Nielsen, J; Loranger, H. (2007). Usabilidad Prioridad en el diseño Web. Madrid: Anaya Multimedia. Valls, J. (2014). Estrategias y tácticas de marketing. Barcelona: Profit editorial. Escribano, J. (2012). Vender en Internet Las claves delécito. Madrid: Anaya Multimedia. Royo, J. (2004). Diseño digital. Barcelona: Ediciones Paidós Ibérica,

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

Webgrafía Definición de SEO. (2010). Recuperat el 18 de Febrer del 2015, http://www.v2p-online. es/2010/10/15/definicion-de-seo/ SEM vs SEO ¿cuales son las diferencias?. (2013). Recuperat el 18 de Febrer del 2015, http:// www.ideaschicago.com/sem-vs-seo-cuales-son-las-diferencias/ Com funciona AdWords. Recuperat el 18 de Febrer del 2015, https://support.google.com/adwords/ answer/2497976?hl=ca Introducción a los Sistemas de Gestión de Contenidos (CMS) de código abierto (2004).Recuperat el 19 de Febrer del 2015, http://mosaic.uoc.edu/2004/11/29/introduccion-a-los-sistemas-de-gestion-decontenidos-cms-de-codigo-abierto/ WordPress vs Joomla! vs Drupal, ¿cuál es el mejor gestor de contenidos (CMS)? (2013), http:// mongemalo.es/wordpress-joomla-drupal-mejor-gestor-contenidos-cms/ Why you should use Wordress?. (2014). Recuperat el 18 de Febrer del 2015, http://www.wpbeginner.com/why-you-should-use-wordpress/ 10 Reasons Why You Should Use WordPress To Run Your Business Website. (2014). Recuperat el 18 de Febrer del 2015, http://wpapprentice.com/blog/10-reasons-use-wordpress-run-business-website/ CSS3 Animations. Recuperat el 18 de Febrer del 2015, http://www.w3schools.com/css/css3_animations.asp 8 Marketplaces to sell Wordpress theme(2013). Recuperat el 19 de Febrer del 2015, https://www.competethemes.com/sell-wordpress-themes-plugins-marketplaces/ What makes a premium Wordpress theme premium?. Recuperat el 19 de Febrer del 2015, http:// www.paulund.co.uk/what-makes-a-premium-wordpress-theme-premium ¿Cumple tu web los 10 principios heurísticos de la usabilidad?. (2013). Recuperat el 21 de Febrer del 2015, http://www.socialancer.com/los-10-principios-heuristicos-de-la-usabilidad-en-tu-web/

Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Agraïments En primer lloc fer menció especial a en Jordi Marquez, ja que sense ell el projecte no hagués assolit aquesta dimensió tant en l’àmbit formal com en l’àmbit tecnològic. Fer especial menció a Idoia Iriarte i Carla Font que han cedit imatges per omplir la plantilla de contingut per la presentació i futura posada en escena del producte. Per altra banda també agrair a totes les persones del GAM que van respondre l’enquesta per tenir dades significatives. Gràcies a aquestes dades, s’han pogut extreure gràfiques i conclusions que han complementat la presentació del treball Finalment, agrair a amics, familiars i parella per ajudar amb tot el que han pogut i més. Gràcies a tots ells han fet possible que aquest projecte hagi arribat a produir-se de manera satisfactòria. Gràcies a tots.

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Annex

Taula 1 Taula de diferències dels gestors de contingut

26 WordPress vs Joomla! vs Drupal, ¿cuál es el mejor gestor de contenidos (CMS)? (2013), http:// mongemalo.es/wordpress-joomla-drupal-mejor-gestor-contenidos-cms/

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

Figura 23 Esquema de l’estructura d’opcions del tema

Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Figura 24 Esquema de l’estructura d’opcions del tema

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15

Figura 25 Esquema de l’estructura d’opcions del tema

Victor Piella Curs: 2014/15

Usabilitat, interfície d’usuari i experiència d’usuari aplicada a un portfoli creatiu.

Victor Piella Curs: 2014/15