Gestió de continguts i Usabilitat en Mitjans Interactius

Generats pels Usuaris

Correu: celina.navarro@uab.cat

Contingut:
- continguts i cultura general
- algoritmes
- disseny, usabilitat i arquitectura de la informació
- tecnologies de publicació
- analítica web
- atracció de trànsit d’usuaris (SEO i SMO)
- visualització de dades

Seminaris:
- Ressenya tema actualitat cultura digital (individual) - 14 octubre
- Infografia tema actualitat cultura digital (individual)

Treball pràctic:
- Gestió d’una publicació digital (en grup)

Evaluació:
- Projecte web (40%)
- Examen (30%)
- Seminaris (30%)

1 octubre - decidit grup, títol i tema (4 persones)

- 30 entrades (Website)
- 80 visites diàries (Website)
- 1000 interaccions (multiplataforma, suma de tots els dies)

Examen: 9 desembre

1. CULTURA DIGITAL

Què és la cultura?

Al llarg de la història s’han generat diferents tipus de definició de cultura des de disciplines
diferents. Però es poden dividir en dues vessants:

1
 - Humanística
Visió de la cultura que inclou tot tipus de producció cultural, incloent les arts
com la literatura, la música o les arts visuals i plàstiques. (més d’arts)

- Antropològica
La cultura és qualsevol manifestació humana i el producte d’una forma
específica de viure, sentir i de fer.

Internet és part de la cultura. O sigui que no ho hem de veure només com a tecnologia
sinó també com a algo cultural, ja que a més té impacte en la cultura de la societat.

Per tant, les tecnologies no només transformen el món, sinó que influeixen en la percepció
que els subjectes tenen d’aquest món.

Internet no és només ni principalment una tecnologia, sinó que és una producció cultural.
(Castells, 2002). → Té un impacte cultural.

Des de que les tecnologies de la informació i la comunicació (TIC) van entrar en la nostra
visa, han inspirat tecnòfils i utopíes de tot tipus.

Inicialment es partia d’aquest criteri → Tot positiu, cap a bé:

● “Determinisme tecnològic”:
- La tecnologia, per si sola, pot millorar la societat i la cultura
- Efecte democratitzador
- Comunicació horitzontal no jeràrquica → Tots som iguals.

Sí que és cert que té un efecte democratitzador perquè en general tots podem accedir a tot,
menys Onlyfans per exemple que has de pagar. La resta no és cert.

Comunicació horitzontal no jeràrquica, és fals perquè sí que és horitzontals però hi ha

moltes traves. És com el cas dels influencers, potser ho és 1 de 100.

Una altra manera de veure la tecnologia més neutral:

● “Constructivisme tecnològic”:
- La societat empeny el desenvolupament tecnològic
- La innovació és el resultat de la cerca activa de solucions per un problema o
conflicte social
- La tecnologia no evoluciona d’una forma literal → Hi ha moments de molts
avenços i d’altres menys. Ara, per exemple, hi ha més avenços que fa uns
anys. És el cas d’Apple, a partir del IPhone 6 al d’ara no ha canviat gaire
cosa. Ha canviat algo de disseny però poc més.

● “Nihilisme tecnològic”: → Aquí ja ens anem a la visió negativa de la tecnologia

- Res pot canviar

- La tecnologia ens allunya més del coneixement

2
 2. CARACTERÍSTIQUES DE LA CULTURA DIGITAL

A partir dels anys 90 que va sorgir internet.

- Passa de vertical a horitzontal → No s’han substituit, sinó que co-existeixen.

- Hierarchy (sistema jeràrquic) a Network → Abans era emissor, líder d’opinió

(periodistes, amics d’un grup social amb influència…) i després els espectadors. Ara
accedim directament nosaltres a qualsevol informació. No necessitem a cap
interlocutor pel mig, podem accedir-hi directament nosaltres als continguts.

“Aldea Global” : (buscar en què consisteix)

- Planning a Serendipity → Abans, la cultura clàssica era planejar. Planejes anar al

cine, que el programa sigui dilluns a les 10. En canvi, a internet pots donar un clic
aquí, un allà, i acabes veient qualsevol cosa que no havies planejat.

- Creation a Reuse → Crear una cosa i que la gent ho vegi. Un contingut creat per un
professional i ho ensenya. Ara, la majoria de coses que trobem a internet és
contingut aprofitat d’altres.

“Els memes es poden entendre millor com a trossos d’informació cultural que
passen de persona a persona, però poc a poc es converteixen en un fenomen social
compartit. Encara que es difonen amb una base micro, el seu impacte és a nivell
macro.”

- Property a Open Source → Abans era privat tot, i ara passa a ser tot públic. Un
exemple és el cas de Instagram, que ara casi tothom té en públic la seva vida.

CULTURA HACKER

“Cultura hacker” : Els hackers, amb la seva manera de relacionar-se amb el treball i amb
la vida en general, proposem una nova ètica per a la Societat de la Informació.

1. La Passió Creativa és el motor de la innovació. Per un Hacker la frontera entre

diversió i treball no existeix.

2. La curiositat i la diversió són els motors de la innovació enlloc dels diners.

3. La Informació vol ser lliure, el coneixement es comparteix i dona peu a la

col·laboració.

4. La Creativitat és més important que la Productivitat.

5. Son meritocràtics (tothom té accés però és necessari reconèixer l’autoria de la

persona que ho ha fet o ha donat accés al contingut)

3
 6. L’accés als ordinadors (i a qualsevol cosa que et pugui ensenyar alguna cosa sobre
el funcionament del món. Ha de ser il·limitat i total)

7. Tota la informació ha de ser lliure (eliminar els sistemes de pagament, al principi

internet es va plantejar així)

8. Desconfia de l’autoritat: promou la descentralització.

9. Pots crear art i bellesa en un ordinador.

10. La tecnologia pot millorar la teva vida.

Però totes aquestes idees es van anar desintegrant.

- Solution a Contribution → Abans per exemple teniem els diccionaris, en canvi ara
no buscariem en un. Entrem a la RAE o tal.

“Cultura participativa”: → Tots tenim la possibilitat de participar

- Convergència Cultural
- No hi ha barreres per crear i compartir continguts
- No tots els membres contribueixen però es senten lliures de fer-ho
- Els membres senten algun tipus de connexió social amb els altres membres
→ mateixes opinions, temes que interessen, ideals, continguts, etc.

“Intel·ligència col·lectiva”:→ No tothom sap fer tot però sí que tothom sap fer alguna cosa. A
internet, la gent utilitza els seus coneixements per al comú i amb objectius compartits.

- Privacy a Exposure

- Value of information a Value of sharing → Ara la gràcia és compartir la informació,

no guardar-t’ho. Intentes ser tu el protagonista d’aquella informació que es
comparteix.

- Memorization a Fact-checking → Abans et podies apuntar les coses i tal o tiraves

de memòria, però ara pots mirar-ho tot al telèfon.

- Status legitimacy a Content legitimacy → Qui té la influència? Abans podien ser

els polítics. Ara, no s’ha perdut del tot però les persones amb influència són aquelles
que creen un contingut d’interés.

- Editorial a Visual → Abans llegiem diferent. Abans eren llibres i coses físiques, i ara
tot és més visual, amb imatge. Poques vegades ens llegim el text total de les
imatges. La forma de redactar ha canviat molt. Per tant, és molt important la
visualització de la informació.

4
Llistat resum:
- Horitzontal → no ho és 100% però no és vertical
- En xarxa (sense jerarquies)
- Serendipitat → veiem coses que no pensavem a partir de diferents links
- Reutilització → memes
- Codi obert (open source)
- Cultura participativa i inteligencia colectiva → No tots sabem fer tot però si coses
concretes
- Exposició personal
- Valor de compartir
- Verificació dels continguts
- Legitimació dels continguts
- Visual

“ GAFAM ”: Google + Apple + Facebook + Amazon + Microsoft → Emrpreses que dominen

el mercat tecnològic.

De la societat de la informació a la societat dels càlculs:

- Societat dels càlculs

- Aquest concepte posa l’atenció en com la revolució dels càlculs a partir del big data
està canviant la nostra societat
- Funció clau dels algoritmes (seguit d’instruccions que permeten obtenir un càlcul a
partir de gigantesques masses de dades (big data)

ESTÈTICA I FUNCIONALITAT

Usabilitat web: Facilitar l’ús d’una pàgina web. Això inclou molts elements. Exemple: Twitter i
el 3 # (va canviar perquè al principi no estava ordenada).

Contradicció dels temes dins de la usabilitat:

- Estètica
- Funcionalitat

Les pàgines web han de ser atractives però també han de tenir una utilitat. La forma d’estudi
d’aquests pols oposats que s’han d’entendre és la usabilitat.

Què és la usabilitat?

- El concepte d’usabilitat web fa referència al nivell de dificultat de l’ús d’un lloc o

pàgina web per a l’usuari de la mateixa, és a dir,

------

5
Una altra definició:

- Segons Yussef Hassan… la usabilitat web és la disciplina que estudia la forma de

dissenyar webs perquè els usuaris puguin ----

Definició del ISO:

- la usabilitat web fa referència al grau en que un producte pot ser usat …..

L’experiència estètica és “nostra” → cadascú tenim uns gustos.

No és una qualitat de l’objecte, d’una pàgina web → és una qualitat de l’usuari, és
subjectiva.

Per tant, hem de tenir molt clar a qui ens estem dirigint, no podem agradar a tothom però sí
a la majoria del nostre target.

És imprescindible saber l’objectiu de la pàgina web per a començar a pensar en la

usabilitat. → Pensar en l’objectiu

Els usuaris NO llegeixen la totalitat de les pàgines. Només es fixen en els elements que
criden l’atenció. Per ex., articles amb imatges i que no durin 10 pàgines, necessitem cridar
l’atenció dels nostres usuaris.

Per tant, el contingut d’una pàgina web s’ha d’organitzar de manera que es guanyi l’atenció
del lector. Per exemple, ficar un banner a dalt de tot que em porti a un link.

Només calen 5 individus per detectar el 85% de problemes d’usabilitat de qualsevol pàgina
web.

Un notable 80% de les troballes dels estudis d’usabilitat de la década de 1990 continuen
sen vàlids.

Principis de la usabilitat

1. Facilitat d’aprenentatge:

Com s’enfronten els usuaris per primera vegada a un disseny? Poden realitzar les
tasques bàsiques?

- Familiaritat: Sempre tendim a ser molt creatius, però en el cas de webs i aplicacions
això s’ha d’evitar. La creativitat és important però hem de seguir uns estàndards.
Han de trobar una certa familiaritat encara que sigui la primera vegada que hi entren.

- Consistència (consultar m)

- Ús d’estàndards
- Predictibilitat

6
 - Simplicitat: Com més simple millor.

2. Eficiència

- La velocitat amb la que una interfície permet a un usuari completar amb precisió i
èxit una tasca. → Que es carregui ràpid

- No només és important la velocitat de l’usuari sinó la consistència de la resposta. →

Que totes les pàgines es carreguin de la mateixa manera.

3. Capacitat de ser recordat

- El sistema ha de ser fàcil de recordar, de manera que l’usuari ocasional sigui

capa´de tornar al sistema després de no haver-lo utilitzat durant un temps, sense
tenir que -----

4. Eficàcia

- El sistema ha de tenir una baixa tassa d’errors, de manera que els usuaris cometin
pocs errors durant el seu ús, i si els comenten, que puguin corregir-los.

Ex. Que ens carregui X secció. Un aspecte important serà l’etiquetatge, que ajudarà
a que l’usuari s’orienti per la web.

5. Satisfacció

- El sistema ha de ser agradable d’usar, de manera que els usuaris quedin satisfets
quan l’utilitzin.

- És la part més subjectiva de la usabilitat

- El disseny ha de ser agradable, colors suaus
- Però pot agradar a la majoria, tot i que no a tots

Per tant, es va començar a pensar en la usabilitat en referència a doncs fa falta un telèfon

o tal, i es va passar a la user experience, que és el que pensa l’usuari a l’hora de consumir
un producte.

USER EXPERIENCE (UX)

Inclou moltes disciplines. Multidisciplinar:

- Disseny
- Psicologia
- Ergonomia

7
 - Màrqueting
- Enginyeria
- Art
- …

Comparativa entre usabilitat i UX:

Usabilitat:
- Menys esforç mental → Que executi el més ràpid possible
- Menos freqüència d’errors
- És més “productiu”, pots fer menys coses més ràpid
- Més fàcil d’aprendre
- Avorrida

UX:
- Vol que hi hagi més sensacions
- Dona importancia colors i estat d’ànim (de la persona)
- Audio
- Ajudes visuals
- Marca
- Emocional
- Complicada

El que tenen en comú les dues coses és:

- El disseny centrat en l’usuari és un procés interactiu que situa els usuaris i el seu
context com a punt de partida……

(ficar foto docu DISSENY PENSAT EN L’USUARI)

ARQUITECTURA DE LA INFORMACIÓ / RESPONSIVE DESIGN

Com ordenar la informació d’una pàgina web.

Lo primer és que els objectius dels usuaris s’adaptin a les necessitats dels usuaris. foto cv

un cop que sabem quantes seccions hi haurà, passem a l’arquitectura de la informació →

com ho organitzem.

Per tant, l’arquitectura de la informació és l’art i la ciència d’organitzar i etiquetar els llocs
web, intranets, comunitats online i software per afavorir la usabilitat i la findability (l’usuari
troba la info que està buscant, tant clics en la web com en el buscador)

8
 - Per tant, l’objectiu d’una arq de la info és donar accés a la informació.
- El contingut és inútil si no es pot trobar.

De què s’ocupa:

- Estructura → entre seccions

- Navegació → cap dels menus de la pag web
- Etiquetat → per l’apartat del seo
- Buscador → intern, extern…

Problemes:

- El llenguatge és ambigu → hi ha seccions molt definides, com política i viatges. Però

hem d’anar en compte que potser en una banda del país una paraula es diu d’una
manera i en una altra banda de diferent manera.

- La organització és subjectiva → com el disseny, l’experiencia. Pot funionar per

algunes persones i per d’altres no.

- Els objectius són complexes → poques vegades tindrem un objectiu clar

- Abstracció, detallada, sistemàtica

Per tant, hem d’intetnar que quedi tot ordenat i que no agradarà a tothom però al 90% si.

Hi ha 3 formes d’organitzar aquesta informació:

- Estructural: Connecta una pàgina amb una altra basant-se en una jerarquia del
website. O sigui, d’una més general a una més específica.

- Associativa: Connecta pàgines de continguts similars amb independència de la

seva localització dins l’estructura del website.

- Utilitària: Connecta pàgines i elements que ajuden a utilitzar el website, amb

independència de la seva localització a la jerarquia. → Et porta a una altra pàgina
web perquè gaudeixis d’una utilitat. Per exemple, un cop apretes a clic comprar libro,
et portarà a una pàgina de pagar.

ORIENTACIÓ I LOCALITZACIÓ

Els links ens ajuden a situar-nos.

On sóc?
On puc anar? → Correcte
On he estat?

Intentar seguir els estàndards que tothom entén.

9
“Principi de mínima fricció”

- Un dels objectius de l’arquitecte de la informació és dissenyar un sistema de

navegació que permeti anar d’un punt del lloc web a qualsevol altre amb el mínim
número de clicks.

- Es diu que més de 3 clicks de separació entre pàgines és excessiu.

Hi ha 3 formes diferents de mostrar aquesta arquitectura al nostre equip:

Site map: Un cop tenim clara l’estructura, la passem a un mapa conceptual. Màxim 6
seccions principals … (fotoo m)

Flow Chart: diagrama de la seqüència de moviments o accions dels usuaris. Ex., com
arribar a la pàgina de llops i quines opcions tindrà per seguir. Aixì que en podem pensar
molts, hem d’anticipar una mica les necessitats dels usuaris i comprovar que l’estructura
està funcionant.

Wireframe: Un cop tenim clara l’estructura i els continguts, pensem en el disseny

estructural, els blocs d’informació que hi ha. El contacte sempre a la dreta del tot. A veure
com l’rganitzo segons les meves prioritats.

És una forma de dissenyar un servei web a nivell estructural, els ossos de la pag web.
(posar foto cv).

Un wirefire s’utilitza …..

EYE TRACK (COM LLEGIM LES PAG WEB)

Patró d’exploració visual d’una pàgina web. Variarà en funció del contingut de la web.

- Els titulars situats a la part superior esquerra atrauen ---- → A dalt a l’esquerra el
logo. Els titulars sota del logo és el que tendirem més a llegir.

Coses a tenir en compte:

- L’ull sempre busca negre sobre blanc.

- La tipografia gran atrau la visió exploratòria.
- La tipografia petita atrau la visió enfocada. És millor per llegir. → pel text

La majoria de la gent només mira el terç esquerre de titulars i entradetes. Només

continuarà llegint si el contingut li crida l’atenció.

Un titular atrau la nostra atenció una mitjana d’un segon. → Molt llarg no pot ser

10
Les dues primeres paraules de titulars i entradetes són la clau per captar l’atenció.

La navegació horitzontal funciona millor a les pàgines principals. → Als ulls tenim
informació tant a la dreta com a l’esquerra.

La navegació lateral funciona fins de les pàgines de notícies. → Arrastres cap als costats
ja que hi ha columnes i sempre hi ha anuncis a la dreta. Els nostres ulls tendeixen a llegir
fins abans dels anuncis perquè ho tenim molt assumit. O sigui es concentra tot a l’esquerra.

Gràcies al Eye Track, podem saber si les pàgines estan funcionant o no.

JERARQUIA VISUAL

És important el com mirem les coses.

- Les notícies amb paràgrafs curts es llegeixen el doble que les que tenen paràgrafs
llargs.

Variables visuals:

- Forma
- Tamany
- Textura
- Intensitat (del color)
- Matiz / Color → que combinin bé entre ells
- Orientació (de tots els elements)
- Posició

“Retícula” → Les imatges no tenen el mateix tamany però es pot dividir en columnetes que
tenen la mateixa distància entre una cosa i una altra . Foto cv

“Barra de navegació”
- Si és un lloc on els continguts són els protagonistes la destinarem a les catagories /
seccions. I no barrejarem altres apartats (quienes somos, contacte, etc.)

- Si no la norma diu que d’esquerra a dreta posarem ….

LLISTES

- Faciliten la lectura ràpida

- Numerar NOMÉS si l’ordre és important, sinó no ho fem mai
- Posar en negreta l’inici dels ítems
- No més de 10 ítems
- El més llarg al final → Que visulament sigui agradable la llista
HTML

11
Les etiquetes sempre s’han d’obrir i tancar. foto cv

INTERTÍTOLS

h1,h2,h2,h2…

- Faciliten la lectura ràpida → Si el text és molt llarg, anar-lo trencant ficant intertítols
- Permeten saber si val la pena llegir
- Amb `paraules clau (h1,h2,h3)
- Concrets i amb significat → que indiquin al usuari si val la pena o no

ENLLAÇOS

- El text enllaçat ha de descriure el contingut enllaçat.

- EL text enllaçat ha de contenir les paraules clau del contingut enllaçat.
- ----
- ---

- Preferentment al final del text.

- No posar “haz clic aquí”, posar paraules clau
- No posar http:blabla, posar abreviat
- Comprovar que està ben enllaçat
- No fer experiments amb el color
- Fer servir escurçadors d’urls: goo.gl
- Imatges enllaçades, ben enllaçat

IMATGES

- GIF, JPG
- Sense text incrustat
- Optimitzades (20-40K) → que no pesin molt
- Amb contingut
- Amb peu de foto
- Amb text alternatiu (paraules clau) → descriure la imatge. Per si es queda la pàgina
clavada i per les persones cegues, ja que utilitzen robots alteratius que ho llegeixen.
- ---
- --

VIDEOS I AUDIO

- Recomanable de penjar primer a una plataforma de videos (youtube, vimeo,

soundcloud) → del pes se’n encarreguen els altres servidors, perquè ocupen molt
d’espai.
- Després els incrustarem dins el contingut

12
 - Peu de foto (explicatiu i font)

DISSENYADOR/A VISUAL O D’INTERACCIÓ

Fa una feina semblant al de l’arquitectura de la informació.

És el responsable de definir el comportament del site o de l’aplicació ….

ENTREGABLES

-
- Hi Fi: Projectes amb bastant pressupost. Mostres en una pàgina com funcionarà el
web.

A) Els prototips de baixa fidelitat implementen aspectes generals del sistema sense
entrar en detalls. Permeten abarcar un espectre major de la interacció que s’ha de
realitzar.

B) Amb els prototips → Logo, possibles imatges de cada secció…

POSAR TAULA VENTAJAS E INCONVENIENTES

RESPONSIVE DESIGN

El disseny web sensible o adaptatiu és una tècnica de disseny web que busca la correcta
visualització d’una mateixa pàgina en diferents dispositius. Des d’ordinadors d’escriptori a
tablets i mòbils. → La mateixa informació s’adapta d’una pantalla a una altra.

Pros:

- Experiència d’usuari consistent en diferents resolucions.

- Un únic codi és suficient per a totes les pantalles.
- Redueix el cost de manteniment.
- Millor visibilitat en tots els dispositius.

Contres:

- El temps de descàrrega és més lent ja que es carreguen totes les imatges i

elements.
- El cost inicial de desenvolupament és més elevat.
- Els usuaris no tenen perquè voler la mateixa experiència en cada dispositiu.

13
 - No té perquè eliminar la necessitat de dissenys específics per a totes les
resolucions. → mateix color, lletra… necessitariem un codi paral·lel.

ACCESSIBILITAT

- És la part de la usabilitat que es centra en que el contingut sigui accessible per a les
persones amb una discapacitat.

Per què els dissenys accessibles encara son una minoria?

- Les empreses sovint consideren….

Què podem fer nosaltres per fer la nostra web (parcialment) accessible?

- Posar sempre descripció a les imatges.

- dddd

14