CLIW 2015-2016 (3/13) Design Web. Interacțiune, utilizabilitate, metodologii de proiectare

Dr.SabinBuragawww.purl.org/net/busaco
Dezvoltarea aplicațiilor Web
la nivel de client
⎚
design Web
interacțiune, utilizabilitate și metodologii de proiectare

“I’ve been amazed at how often those outside
the discipline of design assume that
what designers do is decoration.
Good design is problem solving.”
Jeff Veen

Scop
dezvoltarea de produse digitale
(recurgând la tehnologii Web)

Scop
dezvoltarea de produse digitale
(recurgând la tehnologii Web)
product as functionality
versus
product as information

adaptare după Crumlish & Malone, 2009
scopuri
psihologie
comportament
    
interacțiune
controale
limbi naturale
funcționalități
tehnologii
algoritmi
indexare
structurare
meta-date
instrumente
metodologii
stimuli
utilizatori interfață software conținut creatori

Goal „ingrediente umane”
designers
technologists
management
Alan Cooper et al.,
About Face (4th Edition), 2014

Realitate:
numeroase idiomuri de interacțiune
Jenifer Tidwell, 2006

Realitate:
numeroase idiomuri de interacțiune
fiecare oferă propriul vocabular de elemente de interes,
acțiuni și reprezentări (vizuale, sonore, tactile,…)
user experience – UX

forms
text editors
graphic editors
spreadsheets
Web browsers
calendars
multimedia players
charts
immersive games
Web documents
social (virtual) environments
e-business applications
maniere tipice de interacțiune cu utilizatorul

Realitate:
eterogenitatea platformelor actuale
calculatoare de tip desktop (personale)
dispozitive mobile: smart-phones, tablete, automobile
soluții de redare: printer, fax, advertising screen etc.
home appliances – e.g., (smart) TV, washing machine,…
wearable devices: ceas, costum senzorial etc.
dispozitive sociale: ATM, info kiosk, photo booth
platforme de amuzament – e.g., Blu-ray player, Wii, XBox

Realitate:
existența contextelor multiple de interacțiune
la lucru
exemple:
aplicații de birou/afaceri,
medii de dezvoltare (IDEs), utilitare etc.

Realitate:
acasă
exemplificări:
software pentru amuzament personal/familial,
player-e multimedia, aplicații sociale, jocuri,…

Realitate:
during travelling
exemple: management de informații personale,
planificatoare, comunicare instantanee, servicii bazate
pe locația geografică, sisteme de recomandare,…

Realitate:
contexte/locatii specifice
locație de concert, spital, mall, restaurant, muzeu,…
exemplificări: aplicații/servicii “smart” oferite de
platforme/aparate mobile și/sau de tip wearable

În ce context, calculatoarele de tip tablet
(și dispozitivele înrudite) pot reprezenta
cea mai bună soluție de interacțiune cu utilizatorul?
discuție

Realitate:
volumul & diversitatea utilizatorilor
utilizatori tradiționali
persoane, comunitate de interes, populația unei țări etc.
+
utilizatori speciali
segment de vârstă (copii, vârstnici), profesiune,
cu anumite probleme – disabilities: motorii, senzoriale,…

De ce anume avem nevoie
pentru a proiecta o interfață Web?

discipline și specializări (Challis Hodge)

discipline și specializări (Challis Hodge)
Creative Director, Information Architect, Interaction Designer,
Visual Designer, User Researcher, Usability Engineer etc.

Proiectare focalizată pe sarcinile de efectuat
(task-centered interface design)
axată asupra scopurilor dezvoltatorului:
ușurința implementării, utilizarea tehnologiei,…

de obicei, utilizatorul este ignorat

feature-centric software (aplicații mamut)
multe facilități, unele niciodată folosite

Proiectare focalizată pe necesitățile utilizatorului
(user-centered interface design)
proiectarea trebuie să ia în considerație
așteptările utilizatorului (user expectations)

un aspect important îl reprezintă utilizabilitatea

aplicațiile (native, Web) trebuie să simplifice task-urile
pe care le are de îndeplinit utilizatorul

“User experience and interface design in the context of
creating software represents an approach that puts
the user, rather than the system, at the center of the process.
This philosophy, called user-centered design,
incorporates user concerns and advocacy from
the beginning of the design process and dictates
the needs of the user should be foremost
in any design decisions.”
MSDN, User Interface Design & Development section

Modelul utilizatorului (user model)
versus
modelul de implementare (implementation model)
Alan Cooper et al., 2014

Modelul utilizatorului (user model)
versus
modelul de implementare (implementation model)
cel mai simplu model trebuie să primeze

Keep the Simple Simple
no matter how complex the overall system,
there is no excuse for not keeping simple tasks simple
Jef Raskin, 2000

Există puține cazuri în care utilizatorii
chiar știu ceea ce doresc să realizeze
Rogers, 2007

Activitățile „naturale” trebuie anticipate
pe baza comportamentului perceput al utilizatorilor
Rogers, 2007

User InterfaceHumane Interface
(Jef Raskin, 2000)
“an interface is humane if it is responsive to
human needs and considerate of human frailties”

Design values
așteptările utilizatorilor referitoare la interfața Web
(Peter Morville)

Ce reprezintă utilizabilitatea?

Utilizabilitatea
se referă la cât de „bine” utilizatorii
pot exploata funcționalitatea unui sistem
Jakob Nielsen
www.useit.com/alertbox/20030825.html

Utilizabilitatea
learnability
cât de ușor se învață utilizarea sistemului (interfața sa)?

Utilizabilitatea
efficiency
după ce utilizatorul a învățat interfața,
care-i modul optim de utilizare a ei?

navigatorul Firefox – o parte dintre combinațiile de taste

Utilizabilitatea
memorability
cât de ușor este pentru utilizator
să-și amintească interacțiunea cu aplicația/sistemul?

usability

Utilizabilitatea
errors
numărul de erori potențiale trebuie să fie minimal
greșelile utilizatorului
trebuie să poate fi facil detectate/corectate

exemplu: utilizarea edit-in-place
pentru modificarea datelor introduse

Utilizabilitatea
satisfaction
utilizatorului îi place să folosească aplicația/serviciul?

www.flickr.com/groups/insults/

system
accepta-
bility
social
accepta-
bility
practical
accepta-
bility
useful-
ness
utility usability
easy to
learn
efficient
to use
easy to
remem-
ber
few
errors
sub-
jectively
pleasant
cost
compa-
tibility
relia-
bility
etc.
JakobNielsen

“The applications that are easy
to use are designed to be familiar.”
Jenifer Tidwell

Există anumite metodologii de proiectare?

Se preferă metodologii de proiectare iterative
“washing machine”

ideas
build
pro-
duct
mea-
sure
data
learn
metoda lean startup (Eric Ries, 2011)

Methodologies
Jesse Garrett, The Elements of User Experience (2nd Edition), New Riders, 2011
faze conceptuale
de design
(bottom-up)

Methodologies
Jesse Garrett, The Elements of User Experience (2nd Edition), New Riders, 2011

Metodologiile se pot baza pe diverse modele

modele conceptuale privind proiectarea interfeței Web
(Robert Baxley, 2003)

QOC (Questions, Options, Criteria)
Maclean et al., 1991
questions regarding design key issues
possible options to response to each question
evaluation criteria – e.g., ergonomics, accessibility,… –
concerning every option

exemplu
întrebare: cum alege utilizatorul o locație de livrare?

exemplu
opțiuni: listă de locații, câmp de intrare text,
folosirea unei hărți,…

exemplu
opțiuni: listă de locații, câmp de intrare text,
folosirea unei hărți,…
criterii de evaluare: eficiență, folosind doar tastatura,
interacțiune exclusiv naturală (e.g., tactilă) etc.

exemplificare: QOC pentru interacțiunea tactilă
cu o aplicație de monitorizare a pacienților
A. Berilă, A. Bulai, C. Chiric & M. Pleșca, 2012
patientmo.wordpress.com

Proiectarea iterativă poate atrage utilizatorii
în diferitele stagii ale proiectului
aceste persoane pot evalua interfața
din primele etape de dezvoltare

evoluția manierei de
dezvoltare a produselor
digitale (software)
Alan Cooper et al., 2014

de la idee la produsul software complet

Prototipizare (prototyping)
oferă o vedere generală a interfeței aplicației Web

propune o soluție de proiectare
și nu funcționalitatea completă

poate avea un caracter dinamic
oferă maniere de experimentare

încurajează atragerea utilizatorilor
în procesul de proiectare
poate avea un rol important și în testare

fidelitate instrument
prototip pe hârtie hârtie + creion
scăzută – wireframe OmniGraffle, Gliffy, MS Visio, UXPin
medie Axure RP, Adobe Illustrator
înaltă
cod (e.g., HTML + CSS + JS), eventual
folosind un framework specific
adaptare după Amrita Aviyente, 2013
a se studia și „Sketching, Wireframing, Mockups & Prototyping”
(Alecsandru Grigoriu, 2015)
http://pxdotpt.com/hci/2015/3/23/week-6-sketching-wireframing-mockups-prototyping

prototipul pe hârtie al paginii principale a sitului FII
(Sergiu Dumitriu, Marta Gârdea, Sabin Buraga, 2006)

Twitter – conceptul inițial
http://www.flickr.com/photos/jackdorsey/182613360/

Storyboard
planșă narativă ce oferă descrierea manierei (concrete)
de prezentare a informațiilor,
fără a lua în considerație funcționalitatea
http://storyboardcentral.blogspot.com/

Models & Methodologies
A. Stanciu, I. Șchiopu, A. Grigoriu, I. Lazăr (2011) – aisquared.wordpress.com

Models & Methodologies
Mirela Popoveniuc & Alexandrina Filimonov (2015) – draw-by-sound.weebly.com

Storyboard
în contextul proiectării Web, constă uzual în wireframes

Wireframe
oferă o vedere generală a structurii interfeței sitului Web
și relațiile dintre pagini

wireframe-based design

Wireframe
creat în prima etapă de dezvoltare a proiectului
oferă indicații designer-ilor și programatorilor
privind înfățișarea și comportamentul interfeței
conceptual page layouts

M. Baciu, M. Pinzariu, L. Țuca (2015) – https://github.com/EDU-Soft/hci-project

Mockup
oferă un prototip low-fidelity
la dimensiuni naturale sau scalate:
ilustrații pe hârtie, capturi-ecran etc.

Mockup
oferă un prototip low-fidelity
la dimensiuni naturale sau scalate:
ilustrații pe hârtie, capturi-ecran etc.
utilizat pentru demonstrații, evaluare, învățare,…

mockup-uri pentru o aplicație oferind recomandări
bazate pe locația geografică

Mockup
exemple de instrumente software:
Balsamiq Mockups – www.balsamiq.com
HotGloo – www.hotgloo.com
MockFlow – mockflow.com
Mocking Bird – gomockingbird.com/mockingbird/
Moqups – moqups.com
Proto.io – http://proto.io/

Asistent de interfață (wizard)
ajută utilizatorii să creeze în mod dinamic interfața

interactive prototyping

Studiu de caz
proiectarea interfeței Web
pentru un sit de promovare a muzicienilor
http://www.jeff.io/posts/sketches-wireframes-css
alte exemplificări la
pxdotpt.com/blog/2015/6/19/human-computer-interaction-best-in-class-2015

pasul 1: prototip pe hârtie (sketch)
formular de
înscriere

pasul 2: wireframe

pasul 3: mockup

pas 4: implementare
interfața Web
concretă
(HTML+CSS+JS)

În vederea asigurării calității interfeței proiectate,
trebuie urmate diverse standarde și reglementări

Standarde
impuse de organisme (inter)naționale
de pildă, recomandările Consorțiului Web
www.w3.org/TR/

Reglementări
mai detaliate și sugestive
pot rezolva anumite conflicte de proiectare

Reglementări
câteva exemplificări:
BBC GEL (Global Experience Language)
http://www.bbc.co.uk/gel
Firefox OS Guidelines
www.mozilla.org/styleguide/products/firefox-os/
Google Material Design
https://design.google.com/
Universal Windows Platform (UWP) UX Guidelines
https://dev.windows.com/design
Web Content Accessibility Guidelines
www.w3.org/TR/WCAG20/

ARIA (Accessible Rich Internet Applications) în contextul
Web Accessibility Initiative – www.w3.org/WAI/

(în loc de) pauză
http://dilbert.com/strip/2002-09-23

http://buffalobillgates.tumblr.com/
Ce putem afirma despre utilizatorii
aplicației pe care o vom dezvolta?

Cine este utilizatorul?
probabil, nu-l vom agrea (inițial)

acea persoană care interacționează direct
cu produsul/serviciul (software)

acel individ care determină alte persoane
să utilizeze produsul/serviciul

obține rezultate – de dorit, cele scontate –
de la un produs/serviciu specific

persoană care ia decizii
privind adoptarea și/sau achiziția unui produs/serviciu

entitate care folosește produsul/serviciul
oferit de competitor(i)

Utilizatorul: caracteristici ce trebuie identificate
factori demografici
vârstă, gen, etnicitate
+
profil psihologic

educație
școală primară vs. studii de masterat

abilități fizice
simțuri & percepție – e.g., acuitate vizuală
memorie (de scurtă/lungă durată)
caracteristici anatomice:
mărimea brațelor, înălțime, greutate, musculatură
etc.

abilități referitoare la utilizarea calculatoarelor
cunoștințe precare vs. generale vs. avansate de IT
eventual, vizând o platformă specifică
(e.g., tabletă, consolă de jocuri, bord auto)

deprinderi (skills)
citire
mânuirea unui dispozitiv: tastatură, mouse, telecomandă
interpretarea rezultatelor
și altele

experiența în domeniul specific aplicației

Utilizatorii fără cunoștințe despre
programare vor putea folosi aplicația?

mediul de lucru (contextul)
inclusiv alți factori sociali
(e.g., relații cu alte persoane,
moduri de comunicare – 1:1, 1:n, n:m)

Proiectarea interfeței unei aplicații Web oferind servicii de
comunicare online în contextul jocurilor olimpice de iarnă
exemplificare

Care e grupul de utilizatori-țintă (beneficiarii)?
categorii principale: atleți, rudele și prietenii lor,
personal administrativ, publicul, reporteri sportivi,…
exemplificare

Care sunt manierele de interacțiune?
tipuri de dispozitive: PC, telefoane mobile,
chioșcuri informaționale, ecrane publice,
dispozitive oferind acces la Web: smart-phones, tablete,
dispozitive wearable + senzori, etc.
exemplificare

Care sunt tipurile de conținuturi dorite?
date disponibile în formate multiple
grafice (charts)
date/interacțiuni limitate vs. complexe
posibilități de căutare – eventual, via interacțiune vocală
filtrare – de dorit, multi-criterială
reutilizare – e.g., partajare în alte aplicații/servicii
exemplificare

abordări:
chestionare completate de utilizatori (user surveys)
interviuri
observații (in)directe (user tracking, feedback)
testare bazată pe utilizatori reali (user testing)

abordări:
chestionare completate de utilizatori (user surveys)
interviuri
observații (in)directe (user tracking, feedback)
testare bazată pe utilizatori reali (user testing)
user research

Knowing users…
http://www.nngroup.com/articles/which-ux-research-methods/

Cum putem proiecta interfețele Web
în cazul în care nu știm care-i audiența reală?

Folosind modele abstracte,
putem specifica diverse clase de utilizatori

personas

Persona
oferă o descriere precisă a utilizatorului unui sistem
și ceea ce dorește să realizeze
user archetype
Alan Cooper
www.cooper.com/journal/2008/05/the_origin_of_personas

Persona
deși nu substituie utilizatorul real,
îl reprezintă pe parcursul fazelor de proiectare
(Blomkvist, 2002)

Persona
facilitează crearea profilului concret
al unui utilizator tipic al aplicației/serviciului

Persona
proiectarea trebuie realizată
conform necesităților și scopurilor
fiecărei categorii de utilizatori

Persona
aspecte de considerat:
vârstă, abilități, etnicitate, aspecte sociale etc.

Student Tourist Single (wo)man
Name Andreea G. Paul R. Ioana P.
Age 19 32 27
Location Iasi, Romania Paris, France Bucharest, Romania
Social Life
For her, going to university
was a challenge because she
had to leave home,
separate from her parents
and beginning the process
of finding her identity, as an
adult, and her place in the
world.
Because his earnings are
above average and because
he works at least 50 hours
per week, when he has
some free time he likes to
make the most of it.
She doesn’t have time for
dating wrong persons.
Work Life
She is a student in
her freshman year at
Computer Science.
He works as a software
developer, but now he
is on vacation.
She is a hard working
woman.
Goals
A new city meant new
people & new friends.
That is why she was glad to
take part of a Social Speed
event. From her point of
view, it’s a fun way to
He believes that the person
blesses the place. That is
way when he travels he
thinks it is very important
to know and understand
the residents. Because of
From her point of view, this
application is the perfect
combination between
online dating and real life
dating. She knew from the
start that this was not a

Student Tourist Single (wo)man
Name Andreea G. Paul R. Ioana P.
Age 19 32 27
Location Iasi, Romania Paris, France Bucharest, Romania
Social Life
For her, going to university
was a challenge because she
had to leave home,
separate from her parents
and beginning the process
of finding her identity, as an
adult, and her place in the
world.
Because his earnings are
above average and because
he works at least 50 hours
per week, when he has
some free time he likes to
make the most of it.
She doesn’t have time for
dating wrong persons.
Work Life
She is a student in
her freshman year at
Computer Science.
He works as a software
developer, but now he
is on vacation.
She is a hard working
woman.
Goals
A new city meant new
people & new friends.
That is why she was glad to
take part of a Social Speed
event. From her point of
view, it’s a fun way to
He believes that the person
blesses the place. That is
way when he travels he
thinks it is very important
to know and understand
the residents. Because of
From her point of view, this
application is the perfect
combination between
online dating and real life
dating. She knew from the
start that this was not a
unei persona i se atașează un nume,
fotografie, plus anumite date demografice

persona – un template HTML5
http://profs.info.uaic.ro/~stefan.negru/personas/

personas pentru proiectul PaMI (Patient Monitoring Interface)
A. Berilă, A. Bulai, C. Chiric & M. Pleșca, 2012

S.T.U.P.I.D. user
Stressed Tired Untrained Passive Independent Distracted

S.M.A.R.T. design
Simply Memorable Accept autopilot
Recovery Test in realistic situations
www.boxesandarrows.com/view/are-your-users-s-t-u

episodul viitor: proiectarea interacțiunii Web

CLIW 2015-2016 (3/13) Design Web. Interacțiune, utilizabilitate, metodologii de proiectare

Recommended

Recommended

More Related Content

What's hot

What's hot (8)

Viewers also liked

Viewers also liked (20)

Similar to CLIW 2015-2016 (3/13) Design Web. Interacțiune, utilizabilitate, metodologii de proiectare

Similar to CLIW 2015-2016 (3/13) Design Web. Interacțiune, utilizabilitate, metodologii de proiectare (20)

More from Sabin Buraga

More from Sabin Buraga (20)

CLIW 2015-2016 (3/13) Design Web. Interacțiune, utilizabilitate, metodologii de proiectare