Resum dels materials de l'assignatura Disseny d'Interfícies Multimèdia, del Grau Multimèdia de la UOC.

1. DISSENY D’INTERFÍCIES
DISSENY CENTRAT EN L’USUARI
Estils d’interacció
- Estils lingüístics – Introducció de dades mitjançant el teclat alfanumèric (MS-
DOS)
- Estils contextuals – Actuen en referència al context de l’usuari.
o Finestres de diàleg. Ex. Alertes
o Menús. Ex. Desplegables
o Formularis
- Manipulació directa – Els objectes són seleccionats i manipulats directament
amb el punter. Representen el món real. Resposta immediata.
Fases del procés de disseny centrat en l’usuari
- Anàlisi
o Es reuneix informació
 Gènere i suport de l’aplicació (CD-ROM, web, etc)
 Usuari objectiu, edat, estil
 Equip de producció
 Temps de vida del producte
 Actualització dels continguts
- Disseny
o Modelatge de l’usuari
 Persones (focal, secundària, no prioritària, involucrada,
promotors, exclòs)
 Característiques de la persona: geogràfiques, edat, gènere,
Relació entre la persona i el producte.
 Escenaris – Casos específics d’utilització: quan duu a terme la
tasca, amb qui, limitacions de l’equip, etc.
o Disseny conceptual – Arquitectura de la informació, esquemes de
navegació i relacions entre els apartats
 Sistemes de classificació de la informació
Exactes: alfabètica, cronològica i geogràfica
Ambigus: per categories, tasques o audiència
 Estructura de navegació
Jeràrquica: arbre (és recomanable no superar 3 nivells)
Lineal: informació seqüencial
En xarxa: sense ordre aparent
 Etiquetatge: títol de l’enllaç, etiquetes alt, etc.
 Sistemes de cerca

2.  Card Sorting – Targetes individuals. Els participants les agrupen
de forma que tinguin sentit per a ells.
o Disseny decontinguts – Redacció dels contingut
 Brevetat i fragmentació de textos
 Lectura en diagonal. Dos o tres nivells de titulars.
 Llistes amb pics
o Disseny visual – característiques gràfiques:Documentació gràfica,
disseny del reticle, gamma cromàtica, elecció de la tipografia
- Prototip
o De baixa fidelitat – Wireframes, a mà o amb ordinador
o De alta fidelitat. Es fa per ordinador
 Prototip horitzontal: pantalles clau d’alta fidelitat
 Prototip funcional o vertical: L’usuari pot navegar pel sistema
- Avaluació
o Es pot dur a terme durant el procés de desenvolupament o després
o Depèn del pressupost, el calendari i l’adequació al tipus de projecte
GÈNERES
RANG D’EDAT DE L’USUARI
Nens de 0-13 anys
So, animacions, colors Diferenciar els grups d’edat
Navegació senzilla i directa Evitar càrregues lentes
Metàfores (habitacions, pobles, mapes) Actualitzar amb freqüència el lloc
Implicació emocional de l’usuari Llenguatge breu però no massa infantil
Recursos divertits i creatius Botons amb grandària més gran
Tipus de lletra atractiu Els botons han de canviar quan l’usuari
passa per sobre
Adolescents 12-17 anys
No els agrada el llenguatge infantil Temps breu de càrrega
Presten atenció a l’aparença visual Aplicacions estimulants i interactives
Colors saturats Pocs textos
Majors de 65 anys
No solen tenir experiència en TIC Lletra gran i de pal sec
Evitar la proximitat dels colors groc, blau i Evitar enllaços desplegables
verd. Els costa diferenciar-los Botons grans
Contrast entre fons i contingut Diferenciar enllaços visitats i no visitats
Evitar fons decorats Icones amb etiqueta clara
Text alternatiu per a imatges i opcions Mapes de lloc

3. PRINCIPALS ÀMBITS DE PRODUCCIÓ D’APLICACIONS INTERACTIVES
Portals d’informació Portals corporatius
Són de tipus diaris i periòdics Pàgines web d’empreses
Actualitzar freqüentment Missatge unificat i coherent
Titulars explicatius Coherènciacorporativa
Emfatitzar les paraules clau en negreta Conèixer el que necessita l’usuari
Organitzar els continguts en nivells de Ser honest amb el que s’ofereix
profunditat Innovació en els disseny
Comerç electrònic Educació a distància
Compra o venda de productes o serveis El centre del procés és l’estudiant
La confiança és molt important L’estudiant avança quan ha entès la
Garantir la privadesa informació
Temps breu de càrrega Creen situacions reals
Disseny professional i actualitzat Permeten avaluar el nivell d’assimilació
Disseny que transmet solidesa Informació del progrés i resultats
Limitar la publicitat externa Múltiples rutes: índex, cerca, enllaços
Comoditat i rapidesa Navegació intuïtiva.
Catàleg de productes Mostrar missatge d’estat en processos
Eines de cerca llargs
Producte amb enllaços i especificacions Possibilitat de desfer errors
Procés de compra en qualsevol moment Opcions fàcilment accessibles
Incloure totes les taxes Opció d’ajuda en totes les pàgines
Cistella de comandes Les imatges s’han de referir directament
S’ha de poder anul·lar la comanda als conceptes desenvolupats en el text
No s’ha d’obligar al client a registrar-se
Preguntes freqüents
Política de privadesa
Intranet Administració electrònica E-government
Xarxa interna d’una empresa Els ciudatans poden resoldre gestions
Conté informes, memòries, etc amb organismes oficial
Orientada a tasques És complexa amb molts de departaments
Ha d’estar sempre actualitzada Guia general
Motor de cerca Eines de cerca i indexamentcompartines
Notícies d’actualitat de la empresa en la entre tots els departaments
pàgina d’inici Disseny centrat en el ciudatà
Breadcrums Estructurar la informació de manera
Organigrama amb els departaments intuÏtiva
Títols descriptius S’ha de poder trobar la informació
fàcilment
Les gestions s’han de fer de manera
ràpida.

4. Web 2.0 Xarxes socials
Dissenyat per a la participació i Estructura composta per individus
l’intercanvi lliure i gratuït connectats
Facilita la comunicació massiva i multi- En hi ha obertes i tancades
direccional Oberta: Amb Gmail l’usuari és reconegut
Grau de simplicitat en el calendari de google, docs, picassa,
blogspot, etc
Tancada: Facebook, twiter...
Efectivitat com a eina de màrqueting
DISSENY
- Briefing
o Document que conté la informació que guiarà un projecte de disseny
o El director d’art guia el procés de producció, genera les idees i
determina el concepte central
o Defineix amb el client els objectius abans del desenvolupament
o Es distribueix a tot l’equip de producció
o Es revisa periòdicament
o Ha de contenir respostes a les qüestions plantejades durant el
desenvolupament
o És una guia d’orientació
o Defineix pressupost i calendari
o Indica el nombre de prototips
o Descriu: El producte, l’objectiu de l’aplicació, el target, l’estratègia, el
pressupost i el calendari
- Tècniques que creativitat
o Pluja d’idees
 Grup de 4 a 7 persones.
 Tots aporten idees. Ninguna és absurda
 Les idees dels companys es poden millorar o completar
 Ambient relaxat
 Hi ha un moderador
o Mètode 635
 Es reuneixen 6 persones
 Anoten 3 idees en 5 minuts
 Passen el full al company del costat i aquest anota 3 idees en 5
minuts influenciat.
 Es repeteix fins a completar el cicle

5. o Preguntes creatives
 Formular preguntes que estimulin la creativitat
 Qui? Què? Quan? On? Per què? Com?
o Sinèctica
 Unió d’elements aparentment no relacionats
- Tipografia
o Recta per a llegir en pantalla
o La lletra regular és més llegible
o Les minúscules són més llegibles que les majúscules
o Grandària a partir de 9 en pantalla
- Formats gràfics
o Gif – Algorisme compressió LZW, no té pèrdues, il·lustracions, text,
colors plans
o Gif89a – Transparències, animacions senzilles
o JPEG – Té pèrdues, diversos nivells de compressió, paleta 24 bits
o PNG - Molta compressió a diferents nivells, transparències, 8 o 24 bits,
ombres, es descomprimeix + ràpid que el GIF
- Preparació i integració d’elements gràfics
o Retallada d’imatges ajustada al màxim
o Els estats dels botons amb la mateixa mida
o Carpeta amb els gràfics comuns per a cada idioma
o El nom de l’arxiu no ha de superar els 8 caràcters
o Nom i extensió en minúscules, sense accents o espais en blanc
- Optimització d’arxius
o Els colors plans generen arxius menors
o Les corbes i contorns augmenten la grandària
o Retallar les àrees innecessàries de les fotografies
USABILITAT
PRINCIPIS
- Visibilitat de l’estat del sistema
o L’usuari ha de tenir informació contínua sobre l’estat del sistema
- Consistència
o El comportament dels elements ha de ser constant i predictible
o Per a tasques similars = mateixa seqüència d’accions
o S’ha de mantenir al llarg de tota l’aplicació: terminologia, elements
gràfics
- Control de l’usuari
o El sistema s’ha d’adaptar a l’usuari

6. - Prevenció d’errors
o Els camps numèrics no han d’acceptar alfabètics
o Ajuda disponible
o No s’ha de permetre sortir sense desar els canvis
- Estructura visible
o Índex i mapes
- Interfície explorable
o L’usuari ha de tenir llibertar per a navegar
o Les accions han de ser reversibles
- La llei de fitts
o Les opcions més importants han de tenir més grandària o ser més
visibles
o Els quatre costats d’una finestra són les zones més accessibles
- Modalitat
o Les finestra de diàleg que suspenen temporalment les accions han
d’aparèixer en processos breus.
- Metàfores
o El dissenyador ha de conèixer el target abans de utilitzar les metàfores
- Missatges d’error
o Termes senzills i positius
o Preguntes clares i breus
o Evitar signes d’exclamació o lletres majúscules
o Evitar la paraula “error”
o S’ha de poder tancar la finestra
- Temps de resposta
o Resposta visual immediata
o L’usuari ha de poder cancel·lar els procés
o En processos llargs, s’ha d’indicar el temps de durada, una barra
animada o indicador de percentatge.
o Missatges textuals que indiquen la tasca que està duent a terme
- Contrastadequat per a la lectura
- Lletra de 9 punts o més
- Línies de 40/50 caràcters
- Marges amplis
- Brevetat en els textos
- Dos o tres nivells de titulars
- Llistes amb pics
- Destacar paraules clau amb negreta
- Fragmentar els textos
- Títols de pàgina explicatius

7. AVALUACIÓ DE LA USABILITAT
Es pot dur durant el procés de disseny i desenvolupament o després.
Poden recollir dades d’usuaris reals o es poden dur a terme sense usuaris reals
- Anàlisi de tasques – Es fa sempre des de la perspectiva de l’usuari.
- Reunions de grup / Focus groups
o S’obtenen opinions dels usuaris i es comproven les reaccions inicials al
disseny. El conductor redacta els comentaris i impressions del grup.
- Goms
o Objectius de l’usuari
o Operacions que cal fer per a arribar als objectius
o Mètodes per aconseguir un objectiu
o Regles de selecció per a decidir quin mètode.
- Inspecció d’usabilitat o avaluació heurística
o Es realitza per a experts en usabilitat
o Llista detallada de cadascun dels problemes d’usabilitat trobats amb
referències als principis que no s’han respectat i les opinions dels
avaluadors.
o Dos revisions: una visió de conjunt i una de detall
o De 3 a 5 avaluadors que examinen individualment
o Principis heurístics
 Els sistema ha de mantenir sempre informat l’usuari
 Ha d’utilitzar el llenguatge de l’usuari
 La informació ha d’aparèixer en ordre lògic
 L’usuari ha de poder abandonar, desfer o repetir una acció
 Prevenció d’errors i missatges d’error adequats
 Disseny pràctic i senzill sense informació innecessària
- Passeig cognitiu
o De baix cost. Es pot validar des de les primeres fases de
desenvolupament.
o Cada participant rep una carpeta amb les tasques que s’ahn de
completar i les pantalles (una per full)
o El participant anota de forma individual, en cada full quines accions creu
que hauria de fer en cada pantalla per a executar la tasca descrita.
o Després es comenta en grup i el moderador registra els comentaris
o Al final es distribueix un qüestionari anònim per a comprovar que els
participants encaixen en el perfil demogràfic requerit.
- Test amb usuaris
o Es pot fer sobre prototips, però es recomana després d’una avaluació
heurística.

8. o Es fa amb un ordinador
o Cinc participants amb el perfil similar al de l’usuari focal, fan la prova
per separat
o L’observador va anotant les observacions i el temps que tarda en
completar les tasques.
o No s’han d’explicar les característiques de l’aplicació
o L’usuari ha d’expressar en veu alta els problemes
o L’observador no pot ajudar a l’usuari
ENTORNS
- CD-ROM
o Es basa amb el format de pantalla estàndard dels ordinadors personals
(1024x768px)
o Imatges en RGB i 72dpi (bitmap o vectorials)
o Arxiu gràfic integrat en una sola capa
o Les imatges amb canal Alfa augmenten la mida del fitxer
o Si es treballa amb Flash, utilitzar PNG
o Text: estàtic, dinàmic, introducció de text, bitmap, text font
- Web
o Canal de distribució: Internet
o Forma vertical de les pàgines
o Format visible de 100x 600 pixels si es dissenya per la resolució estàndard de
1024 x 762
o Mapa web, retorn a l’inici
o Utilitzar webfonts
o HTML5 + CSS3
- Punts d’informació
o Exemple: Caixers automàtics
o Atracció de l’usuari
o Interfície clara amb informació introductòria atractiva
o Selecció d’idioma
o Sistema d’ajuda
o Disseny per a usuaris amb baix nivell d’experiència o discapacitats
o Ha de retornar a l’estat inicial
- Dispositius mòbils
o Diversos formats de pantalla
o El temps de connexió té un cost econòmic
o Escriptura clara i concisa
o Separació de paràgrafs mitjançant guionets
o Evitar banners i animacions i finestres emergents
o Pocs nivells
o Pàgina comprensible sense gràfics
o Sempre hi ha d’haver marxa enrere
o És recomanable no usar menús desplegables

9. o Paràgrafs curts
o Utilitzar una font genèrica con Geneva o Verdana
o El text d’un enllaç hauria de cabre en una sola línia
o El més freqüent en primer lloc
o Poques imatges
- Televisió interactiva
- Realitat Virtual
o Immersiva: L’usuari s’introdueix en l’entorn virtual (cascos, guants)
o No immersiva: Es manté fora de l’escena (SecondLife)
- Realitat augmentada
o Mirar un edifici singular a través del nostre dispositiu i aquest afegiria
informació sobre la història, característiques, etc.
o Necessita un dispositiu amb capacitat de llegir imatges, un software i
connectivitat a Internet.