[pràctiques] pac 3: pràctiques a groupiest
TRANSCRIPT
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 1/45
Pràctiques a
Groupiest
Octubre 2013 – Gener 2014
Alumne: Jordi Llonch Esteve
Consultora: Ivette Garcia Manuel
Cc by-nc-sa
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 2/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
Índex
Índex .............................................................................................................................. 1
1. Introducció ............................................................................................................ 2
2. Objectius de les pràctiques ................................................................................. 4
3. Continguts .............................................................................................................. 6
3.1 Nova interfície ................................................................................................ 9
3.1.1 Menú principal ...................................................................................... 10
3.1.2 Sub-menú .............................................................................................. 11
3.1.3 Contingut ............................................................................................... 12
3.2 Pantalles ........................................................................................................ 14
3.2.1 Pantalla “Add” ...................................................................................... 14
3.2.2 Pantalla “Discover” ............................................................................... 15
3.2.3 Pantalla “My contents” ........................................................................ 20
3.2.4 Pantalla “My page” .............................................................................. 24
3.2.5 Pantalla “Username” ............................................................................ 25
3.3 Tutorial ........................................................................................................... 26
4. Anàlisi i tecnologia .............................................................................................. 31
5. Calendari i lliuraments ........................................................................................ 33
6. Valoració personal .............................................................................................. 34
7. Bibliografia i altres recursos ................................................................................ 35
Annex 1: Test d’usuaris (en castellà) ........................................................................ 36
Annex 2: Evolució de la web www.groupiest.com ................................................ 41
Jordi Llonch Esteve CC BY-NC-SA Pàg. 1/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 3/45
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 4/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
Treballar en una empresa de nova creació (o start-up en anglès) és
interessantíssim. No hi ha res segur ni res que duri per sempre; l’empresa està en
constant evolució, una evolució que a més succeeix de manera ràpida i fluïda.
Els seus integrants hi aporten les quantitats necessàries de talent i dedicació amb
l’esperança que algun dia aconsegueixin el seu objectiu, ja sigui aconseguir unabase d’usuaris prou elevada com per ser rendibles, ser comprats o rebre una
injecció de capital per part d’algun fons d’inversió d’alt risc o un inversor privat.
A Groupiest tinc la sort de treballar amb un equip liderat per un jove emprenedor
que té una visió molt clara del que vol fer amb la seva empresa: oferir un
producte de qualitat i que la seva qualitat esdevingui el motiu central de perquè
l’utilitzen els seus usuaris, un grup ben definit que se centra inicialment en els
curadors de continguts.
Aquest jove, en Guillem Cuberes, m’ha obert les portes de la seva empresa,
Groupiest (www.groupiest.com), per on m’hi passejo de manera confiada però
amb molt de respecte i m’ha permès ser un membre més del seu equip. M’ha
deixat treballar colze a colze amb ell, la qual cosa m’ha permès entendre les
necessitats de Groupiest des de dins, quelcom que m’ha servit per a poder dur
a terme la meva feina entenent les necessitats de l’empresa des d’una
perspectiva interna.
A més de l’acompanyament que m’ha ofert el Guillem, també he tingut la sort
de comptar amb la guia i experiència del Simon Lee, el mentor i expert en
experiència d’usuari d’Incubio (www.incub.io), la incubadora que promou
propostes com la del Guillem i que s’encarrega de donar suport durant els
primers anys de vida de les empreses de nova creació.
A les pàgines següents mostro una definició clara del treball que he portat a
terme a Groupiest durant aquest semestre a partir dels objectius marcats a l’inici
del semestre i les tasques que he portat a terme fins al dia d’avui. També he
inclòs una anàlisi de les eines i tecnologia utilitzada per a portar a terme aquestafeina i un calendari de lliuraments.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 3/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 5/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
2. Objectius de les pràctiques
Com vaig comentar a les PACs 1 i 2, l’objectiu de les meves pràctiques aGroupiest s’engloba dins el desenvolupament continuat del producte, on
m’encarrego de guiar a l’equip de desenvolupadors i dissenyadors per a
construir un producte que compleixi amb els requisits del seu fundador i que, al
mateix temps, resulti fàcil d’entendre i d’usar per als seus usuaris.
Després de revisar la feina feta, els meus objectius han variat una mica des de
la meva entrada a l’empresa. A l’inici vaig definir els següents objectius, que
consideraven la meva feina com a analista:
• Avaluar la usabilitat del lloc webo Coherència
o Interacció
o Informació, comunicació i retroalimentació
o Control
o Opcions
• Avaluar el disseny centrat en l’usuari del lloc web
• Avaluar la usabilitat i l’experiència d’usuari del lloc web
Després d’aquest temps treballant, he observat que la meva feina ha anat mésenllà del simple anàlisi, ja que també he realitzat tasques de disseny, com ara:
• Dissenyar la nova interfície de Groupiest
• Dissenyar el tutorial (o primers passos)
Per a valorar i quantificar aquesta feina aplico a cada tasca que se
m’encomana els 10 principis heurístics d’usabilitat proposats per Jacob Nielsen:
1. Visibilitat de l’estat del sistema. el lloc web ha de mantenir sempre
informat l’usuari del que està ocorrent i proporcionar-li una resposta en untemps raonable.
2. Adequació entre el sistema i el món real. El lloc web ha d’utilitzar el
llenguatge de l’usuari, amb expressions i paraules que li resultin familiars.
La informació ha d’aparèixer en un ordre lògic i natural.
3. Llibertat i control per part de l’usuari. En cas d’elegir alguna opció del lloc
web o aplicació per error, l’usuari ha de disposar d’uns “sortida
d’emergència” clarament delimitada per a abandonar l’estat no volgut
en què es troba sense haver de mantenir un diàleg llarg amb el lloc, aixícom opcions de desfer o repetir una acció duta a terme.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 4/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 6/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
4. Consistència i estàndards. Els usuaris no cal que sàpiguen que diferents
paraules, situacions o accions signifiquen el mateix. És convenient seguir
convencions.
5. Prevenció d’errors. És important prevenir l’existència d’errors mitjançant
un disseny adequat. Tot i així, els missatges d’error han d’incloure una
confirmació abans d’executar les accions de correcció.
6. Reconeixement abans que record. Fer visibles objectes, accions i opcions
perquè l’usuari calgui que recordi informació entre diferents seccions o
parts del lloc web o aplicació. Les instruccions d’ús han de ser visibles o
fàcilment localitzables.
7. Flexibilitat i eficiència en l’ús. Els acceleradors o dreceres de teclat poden
fer més ràpida la interacció per a usuaris experts, de tal manera que el
lloc web sigui útil tant per a usuaris novells com avançats. S’ha de
permetre als usuaris configurar accions freqüents amb dreceres de teclat.
8. Disseny estètic i minimalista. Les pàgines no han de contenir informació
irrellevant o innecessària. Cada informació extra competeix amb la
informació rellevant i en disminueix la visibilitat.
9. Ajuda els usuaris a reconèixer i diagnosticar els errors i recuperar-se’n. Els
missatges d’error s’han d’expressar en un llenguatge comú i senzill, que
indiqui amb precisió el problema i suggereixi les possibles alternatives o
solucions.
10. Ajuda i documentació. Encara que és millor que el lloc web pugui ser usat
sense documentació, pot ser necessari proveir cert tipus d’ajuda. En
aquest cas, l’ajuda ha de ser fàcil de localitzar, ha d’especificar els passo
necessaris i no ha de ser gaire extensa.
Després de dur a terme aquestes avaluacions he dissenyat el model de la nova
interfície d’usuari i el tutorial i he redactat la documentació relacionada que hecompartit amb l’equip de Groupiest i que un cop validades pel Guillem
Cuberes, s’envien als dissenyadors per a posar-les en pràctica.
Durant l’últim mes de feina he treballat de manera presencial a temps complet
durant dues setmanes seguides, cosa que m’ha permès conèixer la resta de
l’equip en profunditat i treballar de manera col·laborativa. Això ha permès
accelerar el meu ritme de feina i la qualitat dels resultats obtinguts.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 5/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 7/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
3. Continguts
Durant la meva estança a Groupiest m’he encarregat d’executar quatretasques en el següent ordre:
1. Primera aproximació al lloc web
a. Procés d’alta
b. Creació de grups
c. Anàlisi de la interfície
2. Anàlisi en profunditat del tauler
3. Disseny del nou tauler
4. Disseny del tutorial
La primera aproximació ha consistit a trobar problemes i proposar solucions des
de la perspectiva d’un nou usuari que es registra al lloc web fins que el comença
a utilitzar de manera habitual.
Un dels problemes detectats en el procés d’alta és que el sistema demana la
contrasenya tres cops, sense deixar clar quina s’ha de repetir i quina és l’actual
(current ). La solució més fàcil és demanar-la només dos cops.
Pel que fa a la creació de grups, el problema més gran que he trobat és que
l’usuari és fàcil que es confongui entre escollir el nom de la comunitat i el dels
grups, ja que el procés no ho indica fins l’últim pas. Una solució proposada va
ser explicar amb antelació el significat de comunitat i de grups, mentre que una
altra consistia a substituir el nom de la comunitat pel nom de l’usuari.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 6/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 8/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
La majoria de problemes i solucions proposats durant aquesta primera tasca van
ser confirmats i validats a posteriori quan Groupiest va portar a terme un test amb
usuaris (adjunt com a annex al final d’aquest document).
L’anàlisi en profunditat ha consistit a millorar el disseny i la interacció del
contingut de la seva pàgina principal, anomenada “tauler”, que es mostra a la
imatge següent i que va ser dissenyat abans que jo entrés a formar part de
l’equip de disseny i avaluació de la usabilitat.
Com es pot veure, es tracta d’una interfície amb diferents àrees de contingut i
informació que, a simple vista, esdevé complexa i requereix d’un llarg procés
d’aprenentatge per arribar a entendre totes les opcions que ofereix.
El que no es veu a simple vista és l’enorme desplegament de tecnologia que
han utilitzat per a fer-ho possible. L’equip de programadors ha realitzat un treball
excel·lent per a fer que la web s’adapti al dispositiu des del qual es visualitza i nocalguin barres de desplaçament vertical externes al lloc web.
En general, el meu anàlisi del tauler conclou que els seus continguts es divideixen
en tres àrees, de les quals n’he avaluat la usabilitat i a partir de l’anàlisi resultant
he dut a terme propostes de millora de:
• Menús superiors
• Menú lateral
• Formes d’inserció de contingut
Jordi Llonch Esteve CC BY-NC-SA Pàg. 7/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 9/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
A l’entrega de la PAC 2 vaig mostrar la nova interfície que vaig proposar a
l’equip de Groupiest i que va agradar. És la imatge següent.
De totes maneres, aquesta no és la interfície final, ja que poc després de
presentar la PAC 2 vaig parlar amb en Marc Noguera, emprenedor en sèrie
(Notedlinks, Ludicum.com) i expert en experiència d’usuari i màrqueting; i em va
proposar una estructura orientada a usuaris menys experts a partir de la qual
vaig redistribuir el contingut segons les seves directrius.
La imatge següent és una de les diapositives que em va proposar just després
de veure la interfície anterior.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 8/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 10/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
3.1 Nova interfície
A partir de la seva proposta i les reunions que vaig mantenir amb en Guillem
Cuberes (director general de Groupiest), Simon Lee (experiència d’usuari imentor) i Xavier Ruiz (Scrum Master) vaig unir el millor de les tres interfícies i vaig
dissenyar el tauler de Groupiest definitiu, inspirant-me en les pàgines web
d’Spotify, Netvibes, Feedly i Blogger i altres de menys importants.
El resultat ha esdevingut la nova interfície, formada per una graella de dues o
tres columnes (depenent de la pàgina on es trobi l’usuari), cadascuna de les
quals disposa de més opcions que l’anterior (per això cadascuna és
significativament més gran que l’anterior) i que requereix que s’hi interactuï per
ordre d’esquerra a dreta per a utilitzar correctament el lloc web.
Aquestes columnes són:
1. Menú principal
2. Sub-menú (opcional)
3. Contingut
La imatge següent mostra una maqueta de la nova interfície amb dues
columnes: la de menú principal i la de contingut:
La imatge següent mostra una maqueta de la nova interfície amb tres columnes:
Jordi Llonch Esteve CC BY-NC-SA Pàg. 9/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 11/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
3.1.1 Menú principal
El menú principal és la primera columna i és la que ocupa menys espai a la
pantalla.
Aquest menú està format pels elements següents:
➔ Logotip de Groupiest: aporta visibilitat a la marca i actua debotó d’inici.
➔ Botó “Add”: Serveix per a afegir contingut.
➔ Botó “Discover”: Serveix per a mostrar el contingut provinentdels tòpics i RSS.
➔ Botó “My contents”: Serveix per a revisar el contingut publicat,eliminat o programat, i altres estadístiques més detallades.
➔ Botó “My page”: Conté les opcions del tauler.
➔ Botó “Username”: Conté les opcions de l’usuari.
➔ Botó “Logout”: Desconnecta la sessió.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 10/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 12/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
3.1.2 Sub-menú
El sub-menú és la segona columna i ocupa el doble d’espai que el menú
principal. El seu contingut varia segons l’opció escollida al menú principal.Es tracta d’una columna opcional i només es mostra quan l’opció escollida a la
primera columna té més nivells de personalització.
La imatge següent mostra un exemple de pàgina amb sub-menú, en aquest cas
es tracta de la pàgina “My contents”.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 11/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 13/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
3.1.3 Contingut
El contingut és la tercera columna i ocupa la resta d’espai de la pantalla. És el
quadre de comandament de Groupiest, on l’usuari durà a terme la majoria deles seves activitats, com ara afegir contingut des de diferents fonts, revisar el que
ha publicat o té pendent de publicar, o gestionar les opcions de control, entre
d’altres.
Seguint l’exemple utilitzat a la pàgina anterior, la imatge següent mostra la
columna de contingut de la pàgina d’estadístiques.
3.1.3.1 Panell de notificacions
A la cantonada superior dreta hi ha el panell de notificacions, una àrea de colordiferent a la resta de la columna de contingut que informa a l’usuari d’accions
i novetats del seu interès amb l’objectiu d’aconseguir compromís amb l’eina i
augmentar-ne, així, el seu ús.
La imatge següent mostra un detall del panell de notificacions.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 12/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 14/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
La imatge següent mostra el panell de notificacions a la pàgina “Add”.
Aquest panell està format per petites icones i números per a ocupar el mínim
espai possible i resultar el menys intrusiva possible. Com que l’usuari no sap (al
principi) el significat d’aquestes icones i números en fer clic a qualsevol de les
notificacions, aquestes es despleguen per a informar-lo del seu significat.
Després de varis cicles d’ús, l’usuari entendrà el significat de les notificacions
sense haver de desplegar-les.
La imatge següent mostra un exemple de les notificacions que es poden arribar
a mostrar desplegades per complet.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 13/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 15/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
3.2 Pantalles
A continuació es mostren exemples de les pantalles més importants de la nova
interfície.
3.2.1 Pantalla “Add”
En fer clic al botó “Add” es mostra la pantalla següent.
Aquesta pantalla és la més senzilla de totes, ja que és la primera a què l’usuari
accedeix després de registrar-se.
Inclou una breu descripció dels continguts que es poden afegir (que estan
disposats de més a menys importància) i permet afegir-los fent clic als botons de
cadascun.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 14/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 16/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
3.2.2 Pantalla “Discover”
En fer clic al botó “Discover” es mostra la pantalla següent.
Un cop l’usuari ha afegit tòpics i/o RSS, l’aplicació el redirecciona al panell
“Discover”, on pot descobrir notícies provinents d’aquestes fonts.
Per defecte es mostren totes les publicacions (tòpics i RSS), però l’usuari potnavegar a través del sub-menú (segona columna) per a escollir tots els tòpics,
un de sol, tots els RSS o un de sol.
En aquesta segona columna l’usuari també pot gestionar els seus tòpics i RSS, ja
sigui eliminant els que no necessita o afegint-ne de nous. Quan l’usuari prem el
botó d’afegir (+), es redirecciona a la pantalla “Add” a la variant especificada
(tòpic o RSS).
3.2.2.1 Filtres
La columna de contingut (la de la dreta del tot) disposa d’una sèrie de filtres a
la zona adjacent al panell de notificacions. La majoria d’aquests filtres estan
replegats per a descongestionar la zona superior de la pantalla i només es
mostren quan l’usuari els clica.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 15/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 17/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
La imatge següent mostra el panell de filtres de la pantalla “Discover”.
La imatge següent mostra un detall del panell de filtres replegats.
La imatge següent mostra un detall del panell de filtres desplegats.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 16/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 18/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
3.2.2.2 Ítems a “Discover”
La columna de contingut està formada pels ítems, caixes de petites dimensions
que inclouen un resum de les publicacions suggerides.Aquestes caixes poden tenir mides diferents depenent de si l’article té imatge (o
vídeo) o no. En cas de no tenir imatge té l’aparença següent.
En cas de tenir imatge o vídeo (com la majoria de publicacions), la imatge o el
vídeo guanya protagonisme i té l’aparença següent.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 17/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 19/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
Les dues caixes tenen els mateixos elements:
Títol de la caixa:
Favicon de la web d’origen
Nom de la web d’origen (enllaça a la web en una pestanya nova)
Títol de la notícia
Data de publicació de l’article original
Element multimèdia:
Imatge petita de l’usuari de Twitter.
Imatge o vídeo ocupant l’amplada sencera de la caixa.
Primeres línies de l’article.
Botó “Expand” per a ampliar la mida de la caixa.
Botó “Discard” per a descartar l’article.
Botó “Pick” per a escollir l’article que es vol editar abans de publicar.
En fer clic sobre el botó “Expand”, la caixa amplia la seva mida una mica per a
permetre llegir més informació de l’article. En el cas que l’article sigui molt llarg,
aquest no es mostra sencer, ja que l’objectiu de Groupiest no és convertir-se en
un lector de continguts, sinó en una eina per a publicar-ne.
Quan s’amplia la mida de la caixa, la resta de caixes es reorganitza tal i com ho
fa l’actual tauler de Groupiest.La imatge següent mostra la mida dels ítems petits abans i després d’expandir-
se.
Un cop l’article s’ha expandit, el botó “Expand” es converteix en “Contract” i
permet a l’usuari tornar a la mida anterior.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 18/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 20/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
La imatge següent mostra la mida dels ítems grans abans i després d’expandir-
se.
Un cop l’article s’ha expandit, el botó “Expand” es converteix en “Contract” i
permet a l’usuari tornar a la mida anterior.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 19/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 21/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
3.2.3 Pantalla “My contents”
En fer clic al botó “My coments” es mostra la pantalla següent.
Aquesta pantalla recull les accions que l’usuari ha portat a terme a les pàgines
“Add” i “Discover” i és el lloc des d’on navegar pels continguts publicats,
programats i descartats, així com accedir a un tauler d’estadístiques més
elaborat.
Com es pot veure a la imatge, s’utilitza una estructura de tres columnes i la
tercera (la de contingut) és exactament igual a la de “Discover”. L’única
diferència entre ambdues es troba a la forma dels ítems, que segueix una
estructura similar, però incorpora certs matisos en aquesta pantalla.
3.2.3.1 Ítems a “My contents”
La forma que adopten els ítems a la pantalla “My contents” és molt similar a la
que hi ha a “Discover”. Es tracta del mateix funcionament i només es diferencien
entre sí perquè a la pantalla “My contents” disposen de més informació, aquellarelacionada amb el comportament estadístic dels elements publicats.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 20/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 22/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
La imatge següent mostra un ítem petit publicat:
La imatge següent mostra un ítem gran publicat:
Les diferències amb els ítems de “Discover” són:
• La zona de títol inclou informació estadística de l’article.
• Sota el títol de la notícia s’inclou el text “Published”, que és la data en què
l’usuari va republicar l’article a la seva pàgina (enlloc de la data de
publicació de l’article original).
• El botó “Pick” ha canviat per “Edit”, per a permetre a l’usuari editar
l’article.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 21/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 23/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
La imatge següent mostra la mida dels ítems petits abans i després d’expandir-
se.
La imatge següent mostra la mida dels ítems grans abans i després d’expandir-
se.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 22/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 24/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
3.2.3.2 Formulari d’edició de contingut
En fer clic a “Pick” es mostra la següent pantalla.
El contingut del formulari depèn de la publicació escollida, però manté una sèrie
d’elements comuns:• Títol: s’emplena automàticament agafant el títol de l’origen.
• Cos: s’emplena automàticament agafant el text de l’origen.
• El panell de configuració de la dreta és un acordió complex, és a dir, pot
haver-hi més d’una pestanya desplegada:
o Els articles amb imatge (o vídeo o altres elements multimèdia) ho
carreguen automàticament.
o En cas que no hi hagi imatge (o altre element multimèdia) el
desplegable es mostra replegat.o Les opcions “Schedule” i “Share also on” es mostren replegades
per defecte, però el sistema recorda l’última acció de l’usuari per
a mostrar-li el proper cop.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 23/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 25/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
3.2.4 Pantalla “My page”
En fer clic al botó “My page” es mostra la pantalla següent.
La columna de contingut mostra les opcions de cada sub-menú.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 24/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 26/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
3.2.5 Pantalla “Username”
La paraula “Username” se substitueix pel nom de cada usuari i en cas de ser
massa llarg i no cabre a l’espai designat, es mostrarà l’inici del nom d’usuari tallatpel final amb punts suspensius.
En fer-hi clic es mostra la pantalla següent.
La columna de contingut mostra les opcions de cada sub-menú.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 25/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 27/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
3.3 Tutorial
Després de registrar-se a Groupiest, l’usuari accedeix a la següent pantalla.
En fer clic a “Start!” (o a qualsevol altra zona de la pantalla), es mostra la
següent.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 26/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 28/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
En fer clic al botó “Add your first keyword” es mostra la següent pantalla:
Tan bon punt l’usuari comença a escriure, es mostra la següent:
Jordi Llonch Esteve CC BY-NC-SA Pàg. 27/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 29/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
En quan l’usuari fa clic a la primera paraula clau suggerida, es mostra la següent:
Quan l’usuari fa clic a “Add”, es redirecciona a la pantalla de “Discover”.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 28/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 30/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
En fer clic a “Go ahead!” (o a qualsevol altra zona de la pantalla) es mostra el
següent:
En aquesta pantalla es permet fer clic a “Discard”, “Pick” i “Expand”, així com
als filtres. Els botons “Pick” s’iluminen aleatòriament per a que l’usuari entengui
que hi ha de clicar. Quan li fa clic a un “Pick” es mostra el següent:
Jordi Llonch Esteve CC BY-NC-SA Pàg. 29/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 31/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
• Els botons “Preview” i “Cancel” estan deshabilitats.
• En fer clic sobre la icona “i” del botó “Preview” es mostra un desplegable
indicant que en fer clic a “Preview” s’obrirà una pestanya nova amb una
previsualització de l’article.
• Els articles amb imatge la carreguen automàticament al panell deconfiguració de la dreta. En cas que no hi hagi imatge el desplegable es
mostra replegat.
• El panell de configuració de la dreta és un acordió complex, és a dir, pot
haver-hi més d’una pestanya desplegada.
Quan l’usuari fa clic a “Publish” es mostra la següent pantalla:
En fer clic a “Check it out!”, s’obre una pestanya nova amb la pàgina web de
l’usuari i en fer clic a “OK”, el tutorial s’acaba i es redirecciona l’usuari a la
pàgina “Add”.
Informació addicional important
Si l’usuari no completa el tutorial fins a l’OK de l’última pantalla, es considera
com si no l’hagués dut a terme i el proper cop que entri a la web, el comença
des del principi.
Un cop completat el tutorial inicial existiran tutorials del mateix estil per a: NewRSS i New post / URL.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 30/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 32/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
4. Anàlisi i tecnologia
La meva feina a Groupiest consisteix a aplicar els 10 principis d’usabilitatproposats per Jacob Nielsen (exposats al principi d’aquest document) i proposar
les millores que consideri necessàries per a crear una experiència d’usuari el més
còmode possible i usable per als usuaris del lloc web. Per portar a terme aquesta
tasca faig servir dos tipus d’eines ben diferenciades:
• Paper i llapis
• Ordinador
La feina que requereix més abstracció és aquella relacionada amb la realització
de mapes mentals i diagrames de flux i acostumo a treballar-la en paper, ja quepermet una velocitat de plasmació d’idees més elevada que qualsevol eina
ofimàtica virtual coneguda.
Un cop he creat els esbossos pertinents, utilitzo un parell d’eines ofimàtiques i de
disseny per a conceptualitzar-los i presentar-los amb un mínim d’elegància i
qualitat. Es tracta del servei de creació de maquetes de pàgines web MockFlow
i el processador de textos de Google Drive, que em permeten crear maquetes i
redactar informes amb explicacions de les decisions preses, respectivament.
MockFlow
Jordi Llonch Esteve CC BY-NC-SA Pàg. 31/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 33/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
Processador de textos de Google Drive
El processador de textos té varis avantatges. Per una banda, puc compartir els
documents que genero amb la resta de l’equip i aquests coneixen en tot
moment l’estat actual de la meva feina. Per una altra banda, aquest servei
permet una enorme interacció amb la resta de l’equip, al qui he atorgat
permisos per a comentar i que, a partir d’aquests comentaris, establim les basesdel que acabarà convertint-se en properes tasques per a següents entregues.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 32/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 34/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
5. Calendari i lliuraments
Com vaig comentar a les PACs 1 i 2, Groupiest (i Incubio) utilitza la metodologiaScrum per a gestionar els seus projectes. Es tracta d’una marc de treball força
estès entre la comunitat de desenvolupadors d'aplicacions i programari que
permet adaptar les tasques i entregues segons les necessitats de l’equip en
cada moment i el ritme d’implantació d’aquestes a l’empresa.
Tot i la meva elevada mobilitat laboral he definit un calendari de treball adaptat
a les meves possibilitats amb la supervisió d’en Guillem Cuberes.
Aquest calendari s’ha dividit en dues modalitats de treball: presencial i a
distància. La modalitat a distància ha consistit a dur a terme les tasquesencomanades al meu ritme sempre i quant les presentés en dates d’entrega
raonables i ajustades als requisits de cada tasca.
La presencial va consistir a dur a terme reunions personals a la seu de Groupiest
al menys una vegada durant els dies que estic a Barcelona i per a que l’empresa
conegués la meva disponibilitat vaig compartit el meu calendari de
disponibilitat amb ells.
Octubre 2013 Novembre 2013 Desembre 2013 Gener 2014
De totes maneres, les últimes dues setmanes de feina vaig anar-hi en persona
per a treballar amb l’equip de forma més personal.
Aquestes tasques són l’eix principal en que es basa la meva feina feta durant
aquestes pràctiques, ja que són documents oficials dins de Groupiest que es
tenen en compte per a implementar les millores que proposo.
Cal remarcar que tot el material presentat en aquesta última PAC ja es troba en
mans de l’equip de disseny, que s’encarregarà d’implementar-ho com a solució
permanent de la propera versió de Groupiest, quelcom que demostra la seva
confiança en mi, ja que m’han concedit una capacitat de decisió prou elevada
com per a orientar el projecte en el rumb que crec més convenient.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 33/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 35/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
6. Valoració personal
Crec que l’estança en pràctiques a qualsevol empresa relacionada amb el mónde la multimèdia durant la realització del Grau en Multimèdia és fonamental per
a superar satisfactòriament els estudis i preparar-se per al món laboral, però
aquelles persones que vulguin anar un pas més enllà i gaudir d’una experiència
diferent i que els permeti desviar-se de les tasques habituals, és imprescindible
que realitzin les pràctiques en una empresa de nova creació.
Aquest ha estat el meu cas i aquests quatre mesos a Groupiest han significat un
abans i un després a la meva etapa universitària a la UOC, ja que he tingut
l’oportunitat de conèixer el món de les empreses de nova creació des de dins
mentre treballava en un àmbit de coneixement directament relacionat amb els
meus estudis.
El que va començar com una assignatura més va acabar convertint-se en la
més important per a mi i a la qual hi vaig dedicar més temps i esforç per a assolir
els objectius marcats, tant els requerits per l’empresa com els que em vaig
proposar de manera personal.
Durant aquesta estança he conegut un equip de persones molt professionals
amb les quals m’agradaria treballar en un futur proper. De fet, tot just acabar lespràctiques he dut a terme una reunió amb el Simon Lee, que a part de ser expert
en experiència d’usuari és soci d’Icubio, per a proposar-li un projecte que
m’agradaria portar a terme a la seva incubadora, el qual li ha semblat molt
interessant i que comentarà a l’altre soci per a valorar la seva viabilitat i el tipus
de suport que em podran oferir.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 34/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 36/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
7. Bibliografia i altres recursos
Calvo-Fernández Rodríguez, Amaia. Ortega Santamaría, Sergio. Valls Saez,Alicia. Zapata Lluch, Mònica. Avaluació de la usabilitat . Barcelona. Fundació per
a la Universitat Oberta de Catalunya, 2011.
Gil Rodríguez, Eva Patricia. De Lera Tatjer, Eva. Monjo Palau, Antònia. Usuaris i
sistemes interactius . Barcelona: Eureca Media, S.L., 2010.
Morville, Peter i Rosenfeld, Louis. Arquitectura de la informació per al World Wide
Web. Barcelona: Fundació per a la Universitat Oberta de Catalunya, 2012.
Benítez García, Laura. Chávez Galiana, Patrícia. De Vilar Font, Eugènia. FelipBengochea, Begoña. Ferrer Brotons, Alejandra. Folch Mola, Jordi. Sanabre Vives,
Carles. Metodologia i desenvolupament de projectes a la xarxa . Barcelona.
Fundació per a la Universitat Oberta de Catalunya, 2010.
Antònia Monjo Palau. Disseny d’interfícies multimèdia . Barcelona. Fundació per
a la Universitat Oberta de Catalunya, 2011.
Ramón Rodríguez, José. Mariné Jové, Pere. Gestió de projectes . Barcelona.
Fundació per a la Universitat Oberta de Catalunya, 2010.
Nielsen Norman Group. 10 Usability Heuristics for User Interface Design.
http://www.nngroup.com/articles/ten-usability-heuristics/ [data de consulta:
novembre 2013]
MockFlow. WireFrame Pro. http://www.mockflow.com/ [data de consulta:
novembre 2013]
Cuberes, Guillem. Test d’usuaris. Incubio S.L. 2013 (Annex 1).
El logotip de la UOC és propietat de la Universitat Oberta de Catalunya, les
fotografies de l’annex 1 són propietat d’Incubio S.L. i s’acullen al dret a cita; i la
resta d’imatges d’aquest document són captures de pantalla i maquetes decreació pròpia que s’acullen a la mateixa llicència que aquest document.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 35/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 37/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
Annex 1: Test d’usuaris (en castellà)
Darse de altaEl proceso se entiende y todo el mundo lo ha hecho a la primera. No deberíamos
tocar los pasos ni el proceso. Dan gracias por no pedir validación de e-mail des del
primer momento. Solo una persona ha comentado que es un poco lento.
Los community managers reclaman que se pueda hacer login con Twitter, lo cual
explicaría el bajo uso que se les está dando actualmente a los botones de login con
redes sociales.
Crear un tópico o GrupoA algunos les ha costado encontrar el botón de creación pero una vez lo han
encontrado el proceso de creación es sencillo de seguir. Al final todos lo han
encontrado y no han salido ideas sobre cómo hacerlo más visible. Ahí va una tarea
para interacción.
Algunos se han pensado más de la cuenta el nombre de los topics por culpa de no
tener claro si eran públicos o no o qué. Creen que es más un tema conceptual de
no saber des del principio qué es un topic y que en los pasos del test pusimos creary no añadir.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 36/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 38/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
En este apartado descubrimos un par de bugs con palabras concretas que frenó
en seco a uno de los testers . Ya está reportado y se solucionará en breve.
Una vez creados los topics no ven del todo clara la barra de progreso de creación.
Algunos no se han dado cuenta de su aparición y se quedan buscando los topics ,
se ven caras de desconcierto una vez elegidos los topics . Intentan hacer clic en labarra de progreso. Es muy posible que no se den cuenta de que es una barra de
progreso ya que realmente cuando va por cero de X no lo parece. Una solución a
esto podría ser mostrar los topics que se están creando en gris sin ser clicables, con
un title que indique que estamos en ello, además habría que hacer que la barra de
progreso mostrase alguna animación y el cero no fuese tener la barra de progreso
vacía, sino con algo de progreso.
Nadie se ha quejado expresamente pero mientras esperaban que se añadiesen
topics incluso han intentado añadir más, lo cual me hace pensar que se piensanque se ha quedado colgado por lo que tarda. Creo que es culpa de lo
anteriormente mencionado con la barra de progreso.
Además cuando los topics acababan de crearse el usuario no se da cuenta y sigue
haciendo otras cosas, habría que avisar al usuario de un modo más llamativo.
Destacamos que nadie se ha perdido en la interfaz de tres columnas de añadir
topics , todos han entendido que había que buscar, seleccionar del centro y hacer
clic en aceptar.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 37/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 39/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
Publicar en la comunidadEl proceso de publicación es muy práctico una vez se entiende, pero cuesta un
poco la primera vez.
En primer lugar ven demasiados botones. Coinciden que el botón de one-click , publish y discard no deberían estar al mismo nivel i no ven bien la diferencia de cada
uno (no se han leído el tutorial de inicio).
Hay alguno que ha dicho que le gusta el tema del one-click , pero a la vez se queja
de que no se ven claros los diferentes path de la aplicación al publicar (add item,
publish y one click-publish). Ya estamos trabajando con interacción para ver cómo
resolverlo.
Después en la ventana de publicación algunos veían antes el botón de schedule
que el de publish. A parte de un bug en algunas resoluciones que ya está reportadohabría que mirar que los botones secundarios como el headline o el schedule no
tuviesen tanto protagonismo.
Algunos han probado añadiendo una url también y a uno le ha costado un poco el
tema de si con www, https, etc. Cree que si se especificara que lo mejor es copiar
y pegar de la fuente no habría ningún problema ya que los navegadores ya lo
hacen bien por defecto.
Una persona ha identificado la similitud con Wordpress y le ha gustado. Ven que
habría que reordenar los botones de la barra lateral ya que no le dan tantaimportancia al 'write' como para que esté el primero. Creo que sería interesante
hacer tests A/B con esto.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 38/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 40/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
Publicar a través de las redes socialesEn general este proceso no se ha entendido. Les ha gustado mucho que se pueda
editar el texto que se va a publicar en vez de ser tan automatizado, pero es confuso.
En primer lugar el emparejamiento con una red social se debería poder hacermientras escribes en vez de tener que ir hasta settings , activarlo y luego volver. Es
algo especialmente complejo a nivel técnico pero veremos qué podemos hacer.
Luego una vez emparejado correctamente no se han dado cuenta de que había
que hacer clic en el botón de Facebook o Twitter para que se publicase y pensaban
que ya se publicaría automáticamente siempre. Esto bien explicado puede ser un
punto a favor nuestro.
Luego no acaban de ver la diferencia entre compartir des de la ventana de
publicación y compartir luego una vez publicado. Una vez explicada la idea les hagustado, pero no han entendido como utilizarla sin una explicación.
Quién lo ha llegado a mejorar ha notado que se podían poner fechas pasadas al
publicar. No nos queda claro si es bueno o malo.
Coinciden en que habría que añadir más redes. Facebook y twitter se queda corto.
Han visto que en el frontend las urls no se acortan. Eso es más cosa del addthis , por
lo que habría que ver si podemos hacerle algo.
En definitiva hay que rediseñar todo el proceso.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 39/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 41/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
Personalizar la páginaHay uno que si no se lo hubiésemos dicho no encontraba el desplegable que
llevaba a settings y al logout . En los procesos de mejora de interacción ya
identificamos el tema y coinciden que mostrando el e-mail en la barra se soluciona.
No ven claro qué cambiará de la página. Coinciden que hace falta algún tipo de
preview , o mejor editar directamente sobre la comunidad.
Hay diferencia de opiniones en si lo que hay es suficiente o no. Algunos dicen que
es suficiente y otros que solo se pueden cambiar unos colores y el logo. Básicamente
los más técnicos echan de menos la opción de subir un CSS.
Les ha gustado el tema de poder recortar las imágenes des de la propia aplicación.
Comentarios generalesEn la barra lateral faltan iconos en las acciones. Esto coincide con lo que nos ha
dicho el de experiencia de usuario, por lo que en cuando quede claro el sidebar
nos ponemos a diseñarlos.
Nos han confirmado que el idioma debería ir por topic. Es decir en los topics poder
configurar el idioma y a lo sumo poder elegir uno por defecto des de settings .
Les ha gustado el poder filtrar el contenido por tipo.
No queda claro a dónde va el contenido publicado, uno incluso ha acabado el
test entero sin ver el frontend . Proponen añadir un botón dentro del mensaje queaparece una vez has publicado algo para llegar.
Tot el que he ressaltat en groc són aspectes que coincideixen amb la meva
anàlisi i proposta de millora de la feina feta fins al moment o aspectes en els
quals he treballat en la proposta del nou tauler de Groupiest.
Em reconforta observar que la majoria dels problemes que he detectat
coincideixen amb el test d’usuaris i, com he comentat anteriorment en aquest
document, l’equip de disseny ha tingut molt en compte les meves aportacions i
ja estan treballant en una nova versió de la web que millori tots els aspectes
proposats per mi juntament amb els obtinguts a través del test d’usuaris.
Jordi Llonch Esteve CC BY-NC-SA Pàg. 40/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 42/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
Annex 2: Evolució de la web de
Groupiest
Els dies 12 i 13 de març de 2014 Groupiest va participar a l’eShow de Barcelona
(http://www.the-eshow.com/barcelona/) on va presentar la seva nova
interfície, basada en la feina que vaig portar a terme durant les pràctiques.
A continuació es presenta un recull de les pàgines més importants de la interfície
d’usuari abans i després del meu pas per l’empresa.
Discover
Abans Maqueta
Després
Jordi Llonch Esteve CC BY-NC-SA Pàg. 41/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 43/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
Discover > Edit content
Abans Maqueta
Després
Jordi Llonch Esteve CC BY-NC-SA Pàg. 42/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 44/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
My contents
Abans Maqueta
Després
Jordi Llonch Esteve CC BY-NC-SA Pàg. 43/44
8/12/2019 [Pràctiques] PAC 3: Pràctiques a Groupiest
http://slidepdf.com/reader/full/practiques-pac-3-practiques-a-groupiest 45/45
Pràctiques en empresa PAC 3: Memòria final de les pràctiques
Username
Abans Maqueta
Després