el artistazoopenaccess.uoc.edu/webapps/o2/bitstream/10609/43243/6...el artistazo página 2 eines a...
TRANSCRIPT
EL ARTISTAZO
Javier Gómez Trallero
Projecte Posgrau Disseny Web.
Disseny Web, usuaris, interficies i mòbils.
Sergio Schvarstein Liuboschetz
16/06/2015
INDEX
Definició del Projecte ________________________________________________________ 1
Resum de la proposta _____________________________________________________ 1
Justificació i motivacio ___________________________________________________ 1
Objectius i avastos _______________________________________________________ 1
Eines a utilizar __________________________________________________________ 2
Planificació_____________________________________________________________ 2
Definició del producte ____________________________________________________ 2
Disseny del Producte ________________________________________________________ 3
guió interactiu __________________________________________________________ 3
Prototips de disseny en baixa resolució _______________________________________ 4
Perfils d’usuari __________________________________________________________ 6
Usabilitat ______________________________________________________________ 7
Prototips de disseny en alta resolució ________________________________________ 7
Conclusions ________________________________________________________________ 8
Línies de futur __________________________________________________________ 8
Conclusions ____________________________________________________________ 8
Bibliografia ________________________________________________________________ 9
Annexos __________________________________________________________________ 10
EL ARTISTAZO
Página 1
Definició del Projecte
RESUM DE LA PROPOSTA
La idea principal de la proposta és la d'un directori d’artistes. Realitzat en format web (tan
en versió mòbil com en versió d’escriptori), es visualitzarà una pàgina des d'on els artistes
podrien donar-se d’alta i omplir una fitxa amb informació personal i sobre el seu espectacle,
per poder promocionar-se.
Per una altra banda les persones que vulguin contractar a algun artista per alguna festa o
celebració, podran demanar informació, valorar o inclús comentar si els va agradar o no
l’espectacle d’un artista que ja han vist.
A més a més, es podrà fer una cerca per zona, per tipus d’espectacle… Etc. Per si les
persones que busquen, no coneixen un artista en concret i volen veure totes les possibles
opcions.
JUSTIFICACIÓ I MOTIVACIO
La motivació principal d’aquest projecte sorgeix a raó d’una mancança dins del mon artístic
i de la contractació d’artistes. La realitat és que falten opcions alhora de buscar algun tipus
d’animació en internet i no voler acudir a una agència d’esdeveniments a l’hora d’organitzar
alguna celebració.
Motiu per voler tenir aquest directori en comptes d’anar a una agència? Doncs que
d’aquesta manera l’usuari pot escollir, visualitzar i ajustar el seu pressupost a les seves
exigències. En canvi en una agència, no tindria una llibertat total, i de vegades no s’hi té
coneixement quin tipus d’artista et pot enviar l’agencia a la celebració.
OBJECTIUS I AVASTOS
En aquest projecte està previst realitzar:
• Fitxa de possibles usuaris que farien servir la plataforma
• Arbre de navegació
• Disseny en l'àmbit de wireframe
• Disseny en alta resolució.
No està previst baixar al nivell de la implementació de la web per qüestió de temps.
L’objectiu final és obtenir un prototip basat en la solució final de la web, i que simuli totes
les funcionalitats que hauria de tindre. El públic a qui està destinat és tant a l'artista que
pretén promocionar-se com a usuaris que estiguin organitzant una celebració i busquin
algun tipus d’animació.
EL ARTISTAZO
Página 2
EINES A UTILIZAR
Per realitzar l'arbre de continguts es fa servir l’eina Cacoo.
A l'hora dels wireframes es fa servir balsamiq, eina que ja s’ha fet servir durant el
postgrau.
Smartsheet s’utilitza a l’hora de crear el diagrama de Grant.
Mockflow per el disseny en alta resolució.
PLANIFICACIÓ
A l’hora de la planificació, es pot visualitzar un annex on es veu el diagrama de Grant. És
un document PDF anomenat Diagrama De Grant.pdf
DEFINICIÓ DEL PRODUCTE
S’ha optat per realitzar una pàgina web la qual es tracta d’un directori d’artistes. N’hi ha
tres tipus d’usuaris potencials els quals utilitzaran aquesta web, i sobre aquests s’ha basat la
definició de les seves funcionalitats.
Principalment, es tracta d’una web en la qual es pot buscar un artista, veure quin tipus
d’espectacle realitza, valorar o posar-se en contacte amb l'artista i contractar-lo. Per una
altra banda, un usuari també es pot donar d’alta com artista, pujar imatges o vídeos, explicar
espectacles i patrocinar-se esperant el contacte d’algun altre usuari.
Entre les seves prestacions, la web serà multi plataforma (web en versió d’escriptori i web
en versió mòbil), serà multi idioma (català, castellà i anglès), registre d’usuari o connexió
amb xarxes socials.
EL ARTISTAZO
Página 3
Disseny del Producte
GUIÓ INTERACTIU
En la imatge de la Figura 1 es pot veure el diagrama de navegació principal de la versió
d’escriptori de la web. Les planes principals són Buscar Artista, Els Artistes més Valorats o
Perfil d’Artista un cop s’ha fet Login.
Entre les funcionalitats principals estan les de contacte amb l’artista, visualització dels seus
continguts multimèdia, creació d’un perfil d’usuari o modificar les diferents dades, fer un
comentari d’un artista concret o donar una valoració concreta.
Figura 1.
En la imatge de la Figura 2 es pot veure un diagrama de navegació principal de la versió
mòbil de la web. Les planes principals són Buscar Artista, Artistes més valorats o Perfil
d’Artista un cop has fet Login. Com es pot comprovar, és una versió més simplificada que
la versió web ja que la usabilitat mòbil ha de ser molt mes senzilla. Per exemple, els últims
artistes s’han trobat prescindibles per aquesta versió.
EL ARTISTAZO
Página 4
Figura 2.
Per últim, cal indicar que les funcionalitats de cadascuna de les pàgines estaran detallades
als següents apartats, acompanyades amb dissenys en baixa i alta resolució que donaran una
visió més clara de cadascuna d’elles.
PROTOTIPS DE DISSENY EN BAIXA RESOLUCIÓ
Quan s’ingressa a la web elartistazo.com, s’obre la pàgina per defecte en la qual es poden
veure els últims artistes que s’han donat d’alta. De cada artista es podrà veure una imatge, el
nom artístic, una curta descripció i quins són els seus pròxims espectacles.
El menú superior permet cercar un artista (permet fer una cerca avançada per zona, per preu,
etc...) o veure quins són els artistes més valorats.
Per últim a la part superior hi ha una opció per ingressar com a usuari o registrar-se. Tot
això es pot visualitzar a la Figura 3, dels Annexos.
En la última secció, Figura 4, es pot veure un llistat dels artistes millor valorats per altres
usuaris, amb un llistat semblant al de la pàgina d’inici. Entre la informació disponible, està
el nom de l’artista, pròxims espectacles o valoració total dels tots usuaris (indicant també la
quantitat d’usuaris que han valorat).
En l’apartat de cercar un artista, es pot realitzar una cerca per nom d’artista i utilitzar alguns
filtres com ara la zona, el preu, el tipus d’espectacle o la valoració d’altres usuaris.
D’aquesta manera es pot tenir un llistat d’artistes amb imatges, descripció, preu o valoració.
El mockup pertanyent a aquesta secció es la Figura 5.
Possiblement la pàgina que es mostra a la Figura 6 sigui la mes important de tota la
plataforma ja que es la fitxa del artista. Des de aquesta pàgina es pot veure la imatge de
perfil, i tota la informació relacionada amb l’artista. Per exemple dades del espectacle,
zones d’actuació, preus dels espectacles, tota dada rellevant.
EL ARTISTAZO
Página 5
La següent secció, mostrada a la Figura 7 es una galeria d’imatges pujades per l’artista, ja
sigui dels seus espectacles, d’ell o cartells seus. Quan es clica a sobre d’una de les imatges
de la galeria de imatges, aquesta augmentarà en la seva mida com una “lightbox”
Similar a la plana anterior, tenim la galeria de vídeos (Figura 8). Al fer clic a sobre un dels
vídeos, aquest s’obre com “lightbox” a la mateixa plana. Els vídeos poden ser pujats
directament o afegits des de plataformes amb youtube.
En la següent plana, Figura 9, es podran veure quins tipus d’espectacles realitza l’artista,
veure quines diferencies de preus, duració, informació important o la descripció de
l’espectacle. Si s’escau, hi hauran imatges de cadascun dels espectacles.
Per poder contactar amb l’artista, hi ha un formulari de contacte en el que els visitants
poden demanar mes informació, posar-se en contacte amb l’artista o reservar una data per
realitzar un espectacle. La informació s’enviarà al correu electrònic que l’artista ha indicat
en el seu registre. Veiem el detall a la Figura 10.
En la secció de valoració, Figura 11, es poden veure les valoracions i els comentaris
d’altres usuaris que ja han vist l’espectacle. Si s’està registrat i ja s’ha ingressat com a
usuari, es poden valorar i comentar els diferents artistes de la plataforma. Per una altre
banda, si ja has valorat a un artista, ja no podràs tornar a valorar per evitar comentaris de la
competència per fer baixar la nota mitja dels altres artistes.
Una vegada s’han registrat o ingressat com a usuari, es pot crear el perfil com artista. Entre
la informació que s’ha d’omplir, està la informació de l’artista, la zona d’actuació, el preu,
etc. totes les dades esmentades anteriorment. També es podran afegir les imatges i els vídeos
necessaris per el perfil d’artista. Figura 12.
La última pàgina que s’esmentarà de la versió web és la Figura 13, la secció de
preferències , on canviar el nom d’usuari, el password, poder veure i administrar els
diferents comentaris o valoracions i donar-se de baixa de la plataforma.
En quant a la versió mòbil, quan s’ingressa a la web elartistazo.com, s’obre la pàgina per
defecte en la qual es poden veure els artistes millor valorats. De cada artista es pot veure
una imatge, el nom artístic, una curta descripció i quins són els seus pròxims espectacles. El
menú superior permet fer una cerca, tornar a inici o ingressar amb un nom d’usuari. Es pot
veure a la Figura 14.
En l’apartat de cercar un artista es pot una cerca per nom d’artista. D’aquesta manera es
veurà un llistat d’artistes amb imatges, descripció, preu o valoració. En aquest apartat, a
diferencia que en la versió web, s’ha afegit la cerca avançada en un botó dins de la pagina
de cerca normal. Es pot veure a la Figura 15.
Aquest botó obre la plana de cerca avançada (Figura 16). A la cerca avançada, n’hi ha
diferents filtres per els quals realitzar la cerca. Aquests poden ser la zona, el preu, el tipus
EL ARTISTAZO
Página 6
d’espectacle o la valoració dels altres usuaris. Quan cerques, es torna a la pàgina anterior
amb el llistat d’artistes resultants d’aquesta cerca.
S’ha decidit aquesta solució ja que tenir-ho tot a la mateixa pàgina obliga a l’usuari a
realitzar scroll per arribar al llistat, encara que no l’interessi fer una cerca avançada.
La següent pàgina és la fitxa del artista. Des de aquesta pàgina es poden veure la imatge de
perfil, i tota la informació relacionada amb l’artista. Per exemple dades del espectacle,
zones d’actuació, preus dels espectacles, tota dada rellevant. Tot i que tots els apartats estan
en la mateixa plana, amb un menú desplegable, A continuació s’esmentarà el contingut de
tots els apartats.
El de la descripció de l’artista queda reflexat a la Figura 17. A la Figura 18 es pot veure
com quedaria l’apartat d’imatges, on es poden veure totes les imatges de l’artista, dels seus
espectacles. Al clicar sobre la imatge, aquesta augmenta de mida per poder veure-la amb
mes detall. La pàgina de vídeos es exactament igual (Figura 19).
A la Figura 20 es pot veure una descripció dels espectacles que l’artista té, i poder
comparar-los en cas de que tingui més d’un. Entre la informació es pot saber preus,
condicions i requeriments per poder realitzar-ho.
Queden els dos últims apartats, valoració (Figura 21) i contacte (Figura 22). A la valoració
es tindrà un llistat de valoracions d’usuaris, on s’indica la nota, i si es precisa algun
comentari de l’usuari. En el del contacte es veu un formulari de contacte amb l’artista.
Per últim queden les pàgines relatives al perfil d’usuari: Crear perfil (Figura 23) i les
preferències d’usuari (Figura 24). En la creació de perfil es pot veure les diferents seccions
que són interessant sobre l’artista, com pot ser informació d’espectacles, preus, noms
artístic o pujada d’imatges o vídeos. En canvi, en les preferències es pot canviar el nom
d’usuari de Login de la plataforma, canviar la contrasenya o donar-se de baixa. Per poder
accedir a la plataforma es pot escollir entre Login o Registre (Figura 25). El registre a la
plataforma es pot veure clarament a la Figura 26.
PERFILS D’USUARI
Usuaris en cerca d’artistes: Són aquells usuaris que sense estar registrats, busquen un
artista per algun tipus de celebració i no tenen clar qui contractar o no volen anar a una
agència. Per una altra banda fan servir els comentaris i les valoracions per poder saber si un
espectacle o artista és apte pel tipus de celebració que volen organitzar o si el preu està dins
del seu pressupost. Normalment solen ser persones adultes, pares buscant algun tipus
d’animació per aniversaris o comunions dels seus fills. Això no vol dir que no n’hi hagi
d’altre tipus d'usuaris que compleixin aquest perfil, però una gran majoria si s’adapten a
aquesta descripció.
EL ARTISTAZO
Página 7
Usuari registrat: Són usuaris similars als anteriors, però que estan millor comunicats amb
les xarxes socials i que li agraden donar el seu feedback. Poden realitzar totes les funcions
esmentades al perfil anterior, però també poden comentar en espectacles que ja han vist,
valorar artistes o compartir les seves experiències en les xarxes socials. En aquest cas els
usuaris solen ser gent jove, més pròxims a una nova era de telecomunicacions on les xarxes
socials i el contacte permanent forma part de la vida quotidiana. Gent amb connexió a
internet ja sigui per ordinador o per dispositiu mòbil, cada vegada més comú
Usuari artista: Aquest és un cas concret dels usuaris registrats, ja que a més es volen oferir
com a artista i creen un perfil professional. Està pensat en aquells artistes que es volen
promocionar per internet, que volen tenir una millor relació amb els seus espectadors, tenint
un contacte més directe i poder mantenir una relació més propera. Poder rebre feedback o
promocionar-se de manera més global.
USABILITAT
S’ha intentat sempre encarar el projecte a una bona usabilitat per l’usuari. S’ha de tindre en
compte que els perfils d’usuaris van des de la gent mes jove, habituada a l’ús de les noves
tecnologies en el seu dia a dia, com a gent mes adulta, potser no tan familiaritzada amb les
cerques web.
Per aquest motiu s’ha donat màxima prioritat a la usabilitat i que la plataforma estigui
dissenyada de forma intuïtiva.
Per exemple, a l’hora de dissenyar en un primer esbós, es va pensar en introduir dos apartats
diferents que fossin la cerca i la cerca avançada. Finalment s’ha optat en incloure-ho en la
mateixa pàgina en el cas web (i així l’usuari no ha de navegar per diferents pàgines segons
la cerca que vulgui fer) per anar mes directe a la informació rellevant, i en dues pàgines en
el cas web, ja que tenint-ho tot en la mateixa, provocava que l’usuari hagués de fer scroll de
tota la pantalla per poder arribar a la informació.
PROTOTIPS DE DISSENY EN ALTA RESOLUCIÓ
En el cas des prototips de disseny en alta resolució per la versió web de la plataforma, de la
Figura 27 a la Figura 35 i els de la versió mòbil, de la Figura 36 a la Figura 46, el disseny
està basat i creat arrel dels mockups creats anteriorment. És per aquest motiu que no
s’entrarà a definir les seves funcionalitats en detall, ja que aquests detalls estan definits a la
secció dels dissenys en baixa resolució.
En aquests dissenys s’ha volgut entrar una mica mes en detall gràfic de les funcionalitats, en
el footer de la pàgina el qual tindrà accés directe a les pàgines de mes interès, a més de un
apartat de condicions i privacitat de dades.
EL ARTISTAZO
Página 8
Conclusions
LÍNIES DE FUTUR
De cara a un futur, caldria afegir les connexions a les xarxes socials, ja que com s’ha indicat
anteriorment és un dels punts claus d’aquesta aplicació web.
Per una altre banda, el disseny definitiu no serà el mostrat als dissenys en alta resolució ja
que serà un dissenyador gràfic el que s’encarregarà d’escollir les fonts i els colors més
adients a la plataforma.
També podria ser convenient acabant realitzant una aplicació per smartphone, ja que la
comoditat i la usabilitat milloraria considerablement al no dependre del navegador.
De cara a un futur i depenent de l’èxit de la plataforma, es podria realitzar un
desenvolupament alternatiu per afegir un sistema de membres Premium, amb prioritats a
l’hora de mostrar el seus anuncis o espectacles.
A l’hora de realitzar canvis, també podria ser interesant realitzar estudis d’analítica web
sobre la plataforma, per conèixer l’interès i l’ús dels usuaris a l’hora de realitzar les degudes
millores.
CONCLUSIONS
Durant el transcurs del projecte, s’ha pogut comprovar que l’abast de la idea inicial era molt
ample per un entregable. Potser es podria haver realitzat un projecte més simple i anar
afegint noves funcionalitats en diverses línies i versions en un futur.
Ha sigut un treball satisfactori, encara que no s’ha arribat a tots els passos que havien estat
previstos. Per exemple no s’ha arribat a la entrega del prototip, que estava previst segons el
diagrama de Grant realitzat a l’inici, ja que s’han realitzat diferents canvis de la idea inicial i
l’amplitud del projecte ja era bastant considerable.
A més s’han afegit canvis, com desaparicions de pàgines (per exemple la divisió entre cerca
i cerca avançada), la creació del footer .
Una altre dificultat a l’hora d’arribar als objectius d’aquest projecte, han sigut les eines, ja
que algunes eren conegudes per haver-les fet servir durant el curs, però la gran majoria eren
noves i en la planificació no s’havia tingut en compte la línia d’aprenentatge.
També, de cara a futurs projectes, s’ha de tenir en compte diferents qüestions com poden ser
la importància d’una bona planificació inicial, tenir en compte diversos aspectes com el
desconeixement del mercat (i a la planificació dedicar un temps a la investigació del mercat,
per no trobar sorpreses i canvis una vegada començat el disseny) o no voler assolir masses
funcionalitats inicialment i realitzar un primer entregable i anar entregant versions amb
millores al llarg del temps.
EL ARTISTAZO
Página 9
Bibliografia
Eina Cacoo: https://cacoo.com/
Eina Balsamiq: https://balsamiq.com/
Eina Mockflow: http://mockflow.com/
Eina Smartsheet: http://es.smartsheet.com/
Apunts del curs del postgrau: Diseño web: usuarios, interfícies y móviles
EL ARTISTAZO
Página 10
Annexos
Figura 3.
EL ARTISTAZO
Página 11
Figura 4.
Figura 5.
EL ARTISTAZO
Página 12
Figura 6.
Figura 7.
EL ARTISTAZO
Página 13
Figura 8.
Figura 9.
EL ARTISTAZO
Página 14
Figura 10.
Figura 11.
EL ARTISTAZO
Página 15
Figura 12.
Figura 13.
EL ARTISTAZO
Página 16
Figura 14. Figura 15.
EL ARTISTAZO
Página 17
Figura 16. Figura 17.
EL ARTISTAZO
Página 18
Figura 18. Figura 19.
Figura 20. Figura 21.
EL ARTISTAZO
Página 19
Figura 22. Figura 23.
Figura 24. Figura 25.
EL ARTISTAZO
Página 20
Figura 26.
EL ARTISTAZO
Página 21
Figures 27 y 28.
EL ARTISTAZO
Página 22
Figura 29.
EL ARTISTAZO
Página 23
Figura 30.
Figura 31.
EL ARTISTAZO
Página 24
Figura 32.
Figura 33.
EL ARTISTAZO
Página 25
Figura 34.
EL ARTISTAZO
Página 26
Figura 35.
EL ARTISTAZO
Página 27
Figura 36.
EL ARTISTAZO
Página 28
Figura 37.
EL ARTISTAZO
Página 29
Figura 38.
EL ARTISTAZO
Página 30
Figura 40.
EL ARTISTAZO
Página 31
Figura 41.
EL ARTISTAZO
Página 32
Figura 42.
EL ARTISTAZO
Página 33
Figura 43.
EL ARTISTAZO
Página 34
Figura 44.
EL ARTISTAZO
Página 35
EL ARTISTAZO
Página 36
Figura 45.
EL ARTISTAZO
Página 37
Figura 46.