Page 1


Í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)

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/


Ribastur paquita mitjans practica  

Pràctica de l'assignatura de Mitjans Interactius del Grau en Multimèdia de la UOC

Advertisement
Read more
Read more
Similar to
Popular now
Just for you