Disseny d'interficies d'usari, Universitat de Vic, Curs 2014-2015

1. Ruth S. Contreras Espinosa
Disseny d'interfícies d'usuari
Grau Multimèdia

2. Experiència
que
ob0ngui
l'usuari
Disseny

3. La
imatge
de
marca
està
relacionada
fonamentalment
amb
l'experiència
que
ob0ngui
l'usuari.
Una
interacció
deficient
arruïnarà
la
imatge
de
marca,
encara
que
el
concepte
central
i
el
disseny
visual
siguin
excel·∙lents.

4. Públic
objecCu
Imatge
de
marca

5. Experiència
que
ob0ngui
l'usuari

6. Desenvolupament
/
Equip
Project
Manager
Programador
UI
Gràfic

7. El
brífing
és
un
document
que
conté
la
informació
que
guiarà
un
projecte
de
disseny,
exposant
els
seus
objecCus
i
idenCficant
el
públic
o
usuari
objecCu,
i
també
el
seu
context.
La
seva
uClitat
es
refereix
tant
al
context
intern
de
l'empresa
com
a
l'extern.

8. Brífing
–
ComparCr
els
mateixos
objecCus,
–
Revisar-­‐lo
durant
el
desenvolupament
del
projecte,
per
a
mantenir
presents
els
objecCus
i
comprovar
si
es
compleixen
adequadament.
Ha
de
contenir
respostes
a
les
qües0ons
que
es
puguin
plantejar
durant
el
desenvolupament.

9. Interficies
VS
RESPONSIVE
ADAPTATIVE

10. VS
Adapta0ve
(%)
PROS
Una
bona
experiència
per
a
tots.
Temps
de
càrrega
ràpida.
Ofereix
fins
a
la
millor
usabilitat
OS.
CONTRA
URL’s
diferents.
Experiència
d'usuari
diferent
en
cada
plataforma.
Es
requereix
desenvolupar
i
mantenir
llocs
web
separats
HTML
/
CSS
codi.
SEO,
enllaços,
conCnguts,
etc.
es
requereix
fer
de
nou.
Responsive
(mix)
PROS
La
mateixa
experiència
a
través
de
disposiCus.
La
mateixa
adreça
URL
para
totes
les
pàgines.
Google
friendly.
Baix
manteniment.
CONTRA
Rendiment
web.
Temps
de
càrrega
en
el
disposiCu.
Cal
reconstruir
el
front-­‐end
del
lloc.
Restringit
en
futures
actualitzacions
de
la
pàgina
web.

17. Interficies
VS
FLATDESIGN
SKEUOMORPHISM

19. iOS
8

20. www.brandingmagazine.com

21. Disseny
pla
vs
skeumorfisme
ConCngut
clar

22. Disseny
pla
vs
skeumorfisme
Proporcionar
claredat

23. Disseny
pla
vs
skeumorfisme

24. Interficies
de
ELEMENTS
NAVEGACIÓ

25. 1)
Metàfora.
Va
de
l'abstracte
(la
idea
representada)
al
concret
(objecte
amb
el
qual
es
representa).
És
la
figura
retòrica
més
u0litzada
en
el
disseny
d'inter]cies.
Metàfora
de
l'escriptori
i
la
paperera
en
el
Mac
i
el
Windows.
Disseny
pla
vs
skeumorfisme

27. 2)Metonímia.
Consisteix
en
la
subs0tució
d'un
concepte
o
objecte
per
un
altre
relacionat.
La
subsCtució
pot
ser
causal,
espacial
o
cronològica.
Per
exemple,
es
pot
uClitzar
un
pot
de
pintura
per
a
representar
una
eina
d'aplicació
de
color.
Disseny
pla
vs
skeumorfisme

29. 3)
Sinècdoque.
La
part
subs0tueix
el
tot.
Per
exemple
en
una
web
educaCva,
el
botó
d'accés
a
materials
didàcCcs
es
pot
representar
mitjançant
la
icona
d'un
llibre.
Disseny
pla
vs
skeumorfisme

31. 4)Jocvisual.
Consisteix
en
la
u0lització
de
signes
que
suggereixen
dos
o
més
significats
diferents
per
a
una
mateixa
imatge.
Per
exemple,
una
caixa
amb
un
Interrogant
pot
ser
una
opció
posiCva
o
negaCva.
Disseny
pla
vs
skeumorfisme

33. 5)Personificació.
S'assignen
qualitats
humanes
a
objectes
inanimats
o
a
animals.
És
un
recurs
uClitzat
per
a
dotar
a
una
interacie
d'un
to
humorísCc
o
desenfadat,
i
s'uClitza
amb
freqüència
en
aplicacions
orientades
a
un
públic
infanCl.
Disseny
pla
vs
skeumorfisme

35. Interficies
en
RETICLES
PANTALLA

37. Re0cles
en
pantalla
El
reCcle
s'uClitza
per
a
establir
una
estructura
de
disseny
conenua
i
coherent
en
suports
que
hagin
d'allotjar
tot
Cpus
de
conCnguts.
En
suport
digital,
l'usuari
ha
de
poder
iden0ficar
una
aplicació
o
una
web
com
un
conjunt
unitari,
encara
que
l'aspecte
general
sigui
diferent
en
cada
pantalla.
El
reCcle
actua
de
manera
similar
a
l'estructura
d'un
edifici,
preservant
la
relació
entre
tots
els
elements
que
conformen
el
conjunt
i
garanCnt-­‐ne
l'estabilitat
i
consistència.

39. Lineal
Es
basen
en
una
estructura
que
esmanté
al
llarg
de
tota
l'aplicació/web.
Generalment
s'assigna
una
zona
als
elements
de
navegació,
que
roman
estàCca,
i
una
zona
als
conCnguts,
que
és
la
que
conté
informació
variable.
La
zona
de
conCnguts
pot
contenir
una
subreecula,
desCnada
a
emplaçar
els
elements
que
previsiblement
hi
poden
aparèixer:
•
text
•
imatges
fixes
•
animacions
o
seqüències
•
elements
de
navegació
de
conCngut
(paginació,
etc.)
Per
a
interacCus
amb
gran
volum
de
con0nguts,
prioritzar
l'orientació
de
l'usuari,
i
també
agilitar
la
producció.

40. Jeràrquica
Mantenen
una
estructura
bàsica
de
zones,
encara
que
l'estructura
par0cular
de
cadas
cuna
d'aquestes
zones
de
pantalla
potcanviar,
depenent
de
l'apartat
en
què
es
trobi
l'usuari.
Evita
la
sensació
de
monotonia
en
la
navegació,
resulta
indicada
per
a
aplicacions
amb
un
volum
de
con0ngut
no
excessivament
extens,
i
en
les
quals
no
imporC
que
la
lectura
sigui
completament
aleatòria.

41. Re0cles
fluïts
En
els
reCcles
fluïts
l'estructura
és
dinàmica,
de
manera
que
els
mòduls
del
reCcle
es
poden
presentar
en
múlCples
combinacions
diferents,
al
llarg
de
l'aplicació.
Resulta
important
mantenir
la
consistència
mitjançant
l'establiment
de
codis
de
color
evidents,
i
la
repeCció
d'elements
que
reaccionin
de
manera
similar
a
les
accions
de
l'usuari.

45. Interficies
i
DISSENY
EINES

49. Grid
960
-­‐
CSS
estándar
x
web
1024
x
768
px
o
+
01
col
-­‐
60px
02
col
-­‐
140px
03
col
-­‐
220px
04
col
-­‐
300px
05
col
-­‐
380px
06
col
-­‐
460px
07
col
-­‐
540px
08
col
-­‐
620px
09
col
-­‐
700px
10
col
-­‐
780px
11
col
-­‐
860px
12
col
-­‐
940px

54. Frameworks
/Responsive
site
Bootstrap
Simple,
fluid
HTML/CSS/JS,
framework
Twiter
Goldilocks
Fixed
medium
&
large
screens,
fluid
single
column,
small
devices
Founda0on
Flexible
6
/
12-­‐grid
framework
Skeleton
Minimal
responsive
framework.
WordPress
theme

56. Ruth
S.
Contreras
Espinosa
@ruthsoxia