[Pràctiques] PAC 3: Pràctiques a Groupiest

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



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






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.


http://www.groupiest.com/



http://www.incub.io/








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.





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.





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.





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





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.


http://notedlinks.com/



http://ludicum.com/

http://ludicum.com/

http://ludicum.com/

http://ludicum.com/





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:





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ó.





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”.





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.





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.





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.





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.





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.





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.





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.





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.





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.





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.





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.





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.





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ú.





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ú.





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.





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:





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”.





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:





• 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.





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





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.





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.





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.





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.


http://www.nngroup.com/articles/ten-usability-heuristics/


http://www.mockflow.com/







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.





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.





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.





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.





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.





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


http://www.the-eshow.com/barcelona/







Discover > Edit content

Abans Maqueta

Després





My contents

Abans Maqueta

Després





Username

Abans Maqueta

Després

Documents

[Pràctiques] PAC 3: Pràctiques a Groupiest