ÍNDEX
ÍNDEX
Pàg
QUÈ ÉS CERCATOP?
4
4
Objectius, justificació i context
EVOLUCIÓ DE LA IDEA DEL PROTOTIP
6
EL LOGOTIP
8
EL FUNCIONAMENT DE CERCATOP
9
PROTOTIPATGE DE LES PRINCIPALS PANTALLES DE LA PLATAFORMA
10
Aplicació CercaTop per a dispositius mòbils
10
Plataforma CercaTop per a web
17
Pantalla d’inici
17
Pantalla de cerca
20
Fitxa final
22
RELACIÓ DE CERCATOP AMB EL TERCER ENTORN
24
BIBLIOGRAFIA
28
2
PROTOTIPATGE D’UNA NOVA PLATAFORMA INTERACTIVA
PAQUITA RIBAS TUR, 2013 Pràctica, Mitjans Interactius, UOC
Llicència: Creative Commons: Reconeixement – No comercial – Sense obra derivada http://creativecommons.org/licenses/by-nc-nd/3.0/es/ 3
QUÈ ES?
Què és CercaTop?
Objectius, justificació i context
CercaTop és una plataforma que se
d’una
impressionant
situa dintre d’una de les temàtiques
informàtica
que engloba la cultura digital, que és
aquestes dades pràcticament en
Informació i dades, i té la finalitat de
temps real i poder extreure tot
cercar productes per Internet.
tipus de conclusions”
per
a
capacitat processar
La idea és poder trobar qualsevol servei, respecte al lloc de residència o respecte
I és, aquesta meravellosa capacitat per
la ubicació en temps real de l’usuari.
a
emmagatzemar
i
processar
dades
en temps real la que permet que la David Casacuberta, en el seu article “La
plataforma pugui ser possible.
filosofia del Big data” defineix molt bé el
Les modernes tecnologies aplicades a la
context en el qual encaixaria CercaTop:
comunicació han permès a la humanitat comunicar-se des d’una distància cada
“Per primera vegada en la història
vegada més gran. Es fa possible que
som capaços de generar bases de
determinada informació pugui arribar a
dades amb desenes de milions
un gran nombre de persones. És un efecte
d’entrades, ja sigui a partir de dades
comunicatiu que no s’esgota. Perdura en
de sensors per a obtenir informació
el temps. Per mor de les noves tecnologies
sobre processos naturals o per
a l’abast de tothom sorgeix un gran
l’acció combinada de cents i milers
ventall de racionalitats “locals”, minories
d’usuaris en processos de creació
que agafen el torn de paraula i que fan el
col·lectiva en Internet. Al mateix
receptor també sigui comunicador.
temps disposem 4
PROTOTIPATGE D’UNA NOVA PLATAFORMA INTERACTIVA
Vivim en l’era de la Infoxicació, terme batejat per Alfons Cornellà i que defineix l’excés d’informació que ens proporcionen les noves tecnologies de la comunicació, moltes vegades sense cap tipus de control ni referències fiables. En els seu article “Cómo sobrevivir a la Infoxicación” ens planteja que per a poder gestionar adequadament les dades, és necessari tenir
un
filtre
personal
d’informació
entrant.
CercaTop. Inspirats en el missatge de Alfons Cornellà, la plataforma va filtrant la informació inserida per l’usuari de manera que pugui anar perfilant la cerca fins a trobar el que realment necessita. Es concentra en aquella informació que realment li és útil. A més, la plataforma és tant senzilla i intuïtiva que l’usuari no se n’adona que
“La forma d’aconseguir una millora en la productivitat personal, en el treball, passa per rebre la informació adequada,
d’aquest context ha nascut la idea de
suficientment,
de
manera que la puguis aplicar [...]” Alfons Cornellà – Cómo sobrevivir a la Infoxicación.
realment existeix un dur treball de recopilació de dades, de programació, de disseny d’interfícies i d’usabilitat. L’objectiu és que l’usuari sigui capaç de manipular CercaTop sense coneixements previs de la plataforma.
Dintre d’aquest context definit abans, on la nostra societat pateix una gran explosió comunicativa, on tothom té alguna cosa que dir, afavorit per la vertiginosa intrusió dels smartphones, les tabletes, i altres dispositius, a més, tant senzills d’utilitzar que permeten apropar el món a l’abast de la mà de qualsevol persona; dintre 5
EVOLUCIÓ
Evolució de la idea del prototip
Com ja s’ha mencionat abans, CercaTop
que la plataforma funcioni correctament.
consisteix en una gran base de dades que
CercaTop no serà eficaç si no té introduïdes
emmagatzema el nom d’un establiment
la major quantitat de dades possibles:
i els serveis o productes que aquest
empreses,
ofereix, així com també la seva ubicació
marques, productes, serveis, etc. De fet,
exacta en el planeta i totes les seves
no té sentit que un usuari faci una cerca
dades de contacte. És una comunió entre
sobre, per exemple, on pot canviar els
les paraules clau que interessen a l’usuari
pneumàtics dels seu cotxe, si no estan
i la gran base de dades introduïda en la
introduïts tots els tallers i botigues de
plataforma.
recanvis de la seva ciutat, o al menys, la
categories,
activitats,
majoria d’elles. Perquè tot això sigui possible, es necessita un altra ingredient indispensable que és
No consisteix en cercar i comprar online,
conèixer la ubicació exacta de l’usuari,
ja que no es tracta d’una botiga més
sigui per codi postal, sigui per GPS.
de venda de productes per Internet;
CercaTop traçarà una circumferència al
l’objectiu principal és oferir un servei a
voltant d’aquesta ubicació englobant tots
l’usuari.
els establiments que es trobin a menys distància i que es concordin amb el
Des d’un primer moment pot semblar
producte/servei sol·licitat.
similar a Páginas Amarillas. Encara que
Cal mencionar que la tasca més tediosa
no són iguals. L’inconvenient de Páginas
és,
Amarillas és que la idea de servei/
sens
dubte,
introduir
l’enorme
quantitat de dades amb la finalitat de 6
producte d’aquesta plataforma és molt
PROTOTIPATGE D’UNA NOVA PLATAFORMA INTERACTIVA
limitada. És més, el que realment ha fet ha estat recollir les adreces i telèfons de les empreses que ja tenia en la versió de paper, i simplement les hi ha afegit l’adreça de correu electrònic i la pàgina web, i les ha organitzat en diferents (i poc específics) blocs d’activitats, descurant una part molt important: el servei que ofereix l’empresa que s’està cercant o el producte que aquesta ven. CercaTop, en canvi, s’integra totalment en el web 2.0, es deixa “modificar” pels usuaris. Aquests poden valorar, compartir, crear el seu perfil personal amb les seves tries, inserir la seva empresa en la base de dades. És un altre concepte de plataforma, més social, més humanitzada.
7
LOGOTIP
El logotip
El nom de CercaTop està format per
una cara somrient (que representa
dues paraules: “cerca” i “top”. La paraula
l’usuari) i unes fletxes dirigides a ella
“cerca” te dos significats: en català ve del
(que representa tota la informació que
verb “cercar”. En castellà “cerca” significa
rep quan aquest utilitza CercaTop.) La
“a prop”. L’aplicació ajuda a l’usuari a
simplicitat de las formes és equivalent a la
cercar el lloc més a prop per a aconseguir
simplicitat d’ús de la aplicació. La inclusió
el producte que necessita. “Top” en
d’una cara molt bàsica, que consta només
anglès significa “cim” la part més alta
d’un ampli somriure li ha acabat de donar
d’alguna cosa, CercaTop pot suggerir “el
frescor i proximitat.
millor cercador de serveis”.
S’han triat uns colors complementaris entre si. Un blau i un taronja clar. Un fred
Respecte al grafisme, s’ha triat una
i un càlid. Aquests dos colors ajuden a
tipografia de pal sec, neta i sense
diferenciar les dues paraules que formen
majúscules. Amb la mateixa simplicitat,
el nom CercaTop.
s’ha dissenyat una icona composta per
8
El funcionament de CercaTop
Existeixen dues versions diferents segons
Funcionament bàsic de CercaTop des
la interfície des d’on es realitzi la cerca:
d’un smartphone o una tablet
Un ordinador de sobretaula o un portàtil o
· Es pot accedir també des del web
un dispositiu mòbil de tipus smartphone.
mitjançant el navegador, però la millor manera és que l’usuari es descarregui
Funcionament bàsic de CercaTop des d’un
l’aplicació gratuïta CercaTop.
ordinador de sobretaula o un portàtil
·S’accedeix a un menú on es pot fer
· L’usuari necessita un servei/producte.
la cerca segons categories, serveis,
· Accedeix a la plataforma www.
marques, productes o paraules clau.
cercatop.com
·CercaTop identifica ràpidament la
des
d’un
navegador
d’Internet
posició i mostra una llista completa de
· Indica el seu codi postal o la ciutat
totes les empreses que coincideixen
i el tipus de establiment / categoria /
amb la categoria o el servei que
servei / marca que necessita.
necessita l’usuari. Facilita la posició
· Immediatament el motor de cerca
exacta dels establiments i la ubicació
indexa la llista d’establiments del
d’aquests a través de Google Maps,
tipus elegits que s’ubiquen dintre de
així com també la posició de l’usuari.
l’àrea del codi postal indicat. Aquesta llista s’acompanya amb un mapa de Google Maps amb totes les ubicacions senyalades. En el cas de que l’usuari s’indiqui la direcció exacta, aquesta també quedarà reflectida en el mapa . 9
FUNCIONAMENT
PROTOTIPATGE D’UNA NOVA PLATAFORMA INTERACTIVA
PROTOTIPATGE
Prototipatge de les principals pantalles de la plataforma Aplicació CercaTop per a dispositius mòbils CercaTop per a dispositius mòbils es pot descarregar de forma gratuïta des de iTunes (per a iPhone) o des de Google Play (per a Android). Una vegada instal·lada en el smartphone té un aspecte similar que qualsevol aplicació d’aquest tipus (fig. 1).
Fig. 1 10
PROTOTIPATGE D’UNA NOVA PLATAFORMA INTERACTIVA
En la primera pantalla (fig. 2) ja es pot seleccionar el producte desitjat segons la categoria, el servei, la marca i/o el producte. També s’ha incorporat una caixa de text per a introduir una paraula clau. En la versió per a dispositius mòbils no és necessari introduir les dades d’ubicació de l’usuari, ja que funciona mitjançant el GPS del smartphone.
Fig. 2 11
En la pantalla de “Categories” (fig. 3) es desplega la llista de categories per ordre alfabètic. Com que la llista és molt extensa, es facilita un cercador alfabètic en el peu. També es permet cercar la categoria des del buscador. Les pantalles de “Serveis” o “Marques” funcionen de la mateixa manera. Una vegada seleccionada la categoria desitjada, es desplega una nova llista de subcategories (fig. 4). Les subcategories sempre van relacionades amb la seva categoria. Per exemple, no té les mateixes subcategories “Vehicles” que “Animals domèstics”. Sota la llista es troben dos botons: Un per tornar al directori principal de categories i l’altre per tornar a inici i realitzar una nova cerca. Per a tornar a “Vehicles” basta seleccionar sobre el títol de la pantalla. La
següent
pantalla
(fig.
5)
té
característiques similars de funcionament i distribució que la figura 4. 12
Fig. 3
PROTOTIPATGE D’UNA NOVA PLATAFORMA INTERACTIVA
Fig. 4
Fig. 5 13
La
pantalla
final
agrupa
tots
els
establiments de corresponen a la tria de l’usuari, ordenats segons la proximitat amb el dispositiu. En la llista figura el nom de l’establiment, la direcció i la valoració general dels usuaris. El botó “Veure mapa” desplega una pantalla amb el mapa de la zona i tots els establiments de la llista senyalats en ell (fig. 7).
Fig. 6 14
PROTOTIPATGE D’UNA NOVA PLATAFORMA INTERACTIVA
La pantalla del mapa de la zona també hi figura la ubicació de l’usuari (marcat pel logotip de CercaTop) i totes les cerques de la llista). L’usuari
pot
accedir
a
l’establiment
senyalant sobre qualsevol de les fletxes de la fig. 7 o sobre qualsevol dels elements de la llista de la pantalla de la fig. 6.
Fig. 7 15
La
fitxa
de
l’establiment
seleccionat
és molt completa. Hi figura l’adreça, el telèfon, el correu electrònic, la web, el horari i explica també com arribar-hi. En el botó “Opinions” l’usuari pot llegir les opinions que altres usuaris tenen sobre l’establiment i a més, afegir la seva.
Fig. 8 16
PROTOTIPATGE D’UNA NOVA PLATAFORMA INTERACTIVA
Plataforma CercaTop per a web Pantalla d’inici La capçalera de la versió web de CercaTop és molt important. Des d’aquí es pot seleccionar un idioma de preferència. Els que estan més a ma són el català, el castellà i l’anglès; però també hi ha la posibilitat de triar-ne un de diferent en l’enllaç “Més idiomes”. Si l’usuari es registra a la web de CercaTop podrà
gaudir
d’avantatges,
com
per
exemple, tenir la possibilitat de valorar tots els establiments o crear una llista personalitzada d’establiments preferits. Encara que també, si no l’interessen aquestes opcions, pot navegar sense registrar-se. Si l’usuari es registra com empresa, la pot inserir dintre de la base de dades de CercaTop, seleccionant entre les moltes categories, serveis i marques establerts. L’apartat de producte és obert, igual que el de “Paraula clau” on es poden definir 17
totes
les
etiquetes
que
l’empresari
plataforma
permet
als
usuaris
consideri necessàries. El perfil d’empresa
registrats valorar les empreses. Des
es pot modificar en qualsevol moment.
d’aquest espai s’accedeix al directori d’empreses destacades pels usuaris
En l’apartat “Què necessites?” es pot
i separades per categories, segons la
definir de manera molt precisa el motiu
zona (codi postal, ciutat, província,
de la cerca. Categoria, servei i marca són
etc.)
menús desplegables on l’usuari pot triar el
· Ajuda – Aquest apartat constitueix
que més s’adapti a les seves necessitats.
una
ajuda
en
forma
de
vídeo
demostratiu per als usuaris que vulguin En l’apartat “On?” l’usuari indica el punt
familiaritzar-se més còmodament amb
de referència on vol concentrar el mapa.
la plataforma.
No és necessari reomplir tots els camps, però sí un de cada columna.
En el peu de la pàgina figuren tots els directoris de CercaTop, així com l’apartat
Més avall, dintre de la zona visual de la
d’àrea legal, d’atenció al client i el mapa
pantalla, es troben tres apartats:
web; també els enllaços amb les xarxes
· CercaTop aplicació – Un lloc des d’on connecta amb Google Play o amb iTunes i permet descarregar-se l’aplicació CercaTop per a smartphones i dispositius mòbils. · Les empreses + valorades – La 18
socials.
PROTOTIPATGE D’UNA NOVA PLATAFORMA INTERACTIVA
FINAL DE ZONA VISUAL DE PANTALLA
19
Pantalla de cerca
Una vegada s’ha iniciat la cerca, apareix el
El peu també figura sempre, de manera
mapa on figura la localització de partida,
que es pot accedir als directoris des de
marcada amb el logotip de CercaTop, i les
qualsevol pantalla de la plataforma.
cerques al voltant d’aquesta, senyalades amb una punta de fletxa. Sota el mapa es troben tots els resultats que coincideixen amb la cerca, des d’on es pot accedir a les seves fitxes. Quan el cursor s’apropa a una de les fletxes, es genera una finestra flotant que senyala el nom de l’establiment i la valoració dels usuaris. També es pot accedir a la fitxa de l’establiment des d’aquí. Els breadcrums sobre el mapa, ubiquen l’usuari en la web i faciliten la navegació. La capçalera apareix en totes les pàgines, de forma que en qualsevol moment, l’usuari pot canviar d’idioma, registrar-se o entrar com empresa. 20
PROTOTIPATGE D’UNA NOVA PLATAFORMA INTERACTIVA
FINAL DE ZONA VISUAL DE PANTALLA
21
Fitxa final
La fitxa final de l’establiment és molt
es realitzarà una nova cerca amb tots els
completa. L’usuari pot trobar l’adreça, el
establiments que continguin l’etiqueta
telèfon, el correu electrònic i la pàgina
“aventura”
web, però també el horari d’apertura.
apartats.
en
qualsevol
dels
seus
A més, com enllaçar amb els perfils que tenen els clients a Google Places, i
Sota el mapa es troben les valoracions
així, pot realitzar un recorregut virtual
dels usuaris ordenades segons la data
per l’establiment o visualitzar les seves
d’emissió. Si l’usuari està registrat podrà
fotografies.
valorar també l’empresa.
El mapa és el de Google maps, per tant funciona de la mateixa manera: es pot realitzar un zoom o traçar la ruta amb el botó “Com arribar-hi”. Al peu figuren les categories, els serveis, les marques, els productes i les etiquetes que pertanyen a aquesta fitxa. Funcionen a més com un hipertext que torna a realitzar una cerca relacionada amb la que ja es té. És a dir, si es prem sobre la paraula “aventura” de les etiquetes, 22
FINAL DE ZONA VISUAL DE PANTALLA
FINAL DE ZONA VISUAL DE PANTALLA
RELACIÓ AMB 3E
Relació de CercaTop amb el Tercer Entorn
24
PROTOTIPATGE D’UNA NOVA PLATAFORMA INTERACTIVA
25
26
PROTOTIPATGE D’UNA NOVA PLATAFORMA INTERACTIVA
27
BIBLIOGRAFIA
BIBLIOGRAFIA
RIUS OLIVA, LLUÍS i PARISI LORENZA (2012). Mitjans Interactius. Barcelona. UOC. MONJO PALAU, TONA (2011). Disseny d’Interfícies Multimèdia. Barcelona: UOC. DAVID CASACUBERTA (2012). La Filosofía del Big Data [en línia]. http://multimedia. uoc.edu/blogs/mi/ca/2012/06/24/la-filosofia-del-big-data/ [Abril/2013] ALFONS CORNELLA (2000). Cómo sobrevivier a la Infoxicación [en línia]. http:// www.infonomia.com/img/pdf/sobrevivir_infoxicacion.pdf [Abril/2013] Joshua Porter (2010). 10 Principles of UX [en línia] http://52weeksofux.com/ post/475093254/10-principles-of-ux [Abril/2013] PÁGINAS AMARILLAS (2013)[en línia]. http://www.paginasamarillas.es [Maig/2013]
28
PROTOTIPATGE D’UNA NOVA PLATAFORMA INTERACTIVA
IMATGES
Portada Dissenyada per Paquita Ribas Tur Model: Paquita Ribas Tur Fotografia: Albert Ribas Palerm Mapa: Ibiza Travel http://www.ibiza.travel/ca/
Imatges dels gràfics Base del mòbil per a confeccionar el prototipatge de CercaTop per a mòbils: http:// www.tuexperto.com/wp-content/uploads/2010/03/2010_03_25_Samsung-GalaxyS-3.jpg Icona de Flipboard: http://www.elblogdejesule.com/wp-content/uploads/2012/10/ flipboard-logo-featured.png Icones Dropbox i Facebook: http://blogs.lanacion.com.ar/movilandia/files/2012/10/htc-one-x-02-vista-aplicaciones.jpg Icona de WhatsApp: http://mimovilwindows.com/wp-content/uploads/2012/08/ WhatsApp-para-Windows-Phone-8.png Totes les imatges i gràfics de la pràctica, exceptuant les nomenades en el punt anterior estan dissenyades i dibuixades per Paquita Ribas, utilitzant l’Illustrator com a eina principal.
29
PAQUITA RIBAS TUR, 2013 Creative Commons: Reconeixement – No comercial – Sense obra derivada http://creativecommons.org/licenses/by-nc-nd/3.0/es/