CLIW 2014—2015 (3/12): 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 & 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

aspecte privind interacțiunea Web
(Christian Crumlish & Erin Malone, 2009)

aspecte privind interacțiunea Web
(Christian Crumlish & Erin Malone, 2009)
detalii în cursul de la master
“Interacțiune om-calculator”

Goal
Alan Cooper et al., 2007

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 portabile: smart-phones, tablete, ceasuri
soluții de redare: printer, fax, advertising screen etc.
home appliances – e.g., (smart) TV, washing machine,…
dispozitive sociale: ATM, info kiosk, photo booth
platforme de amuzament – e.g., Blu-ray player, Wii, XBox
adaptare după Jean Vanderdonckt, 2006

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/locații specifice
locație de concert, spital, mall, restaurant, muzeu,…
exemplificări: aplicații/servicii “smart” oferite de
platforme mobile sau de chioșcuri informaționale

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

Proiectare focalizată pe sarcinile de efectuat
(task-centered interface design)
axată asupra scopurilor dezvoltatorului:
usurinț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 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

Modelul utilizatorului (user model)
versus
modelul de implementare (implementation model)
Alan Cooper, 1995, 2007

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
(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 o persoană poate învăța
să utilizeze un sistem (interfața sa)

Utilizabilitatea
efficiency
după ce utilizatorul a învățat interfața,
cum poate s-o folosească în mod optim?

Firefox – o parte dintre combinațiile de taste

Utilizabilitatea
memorability
cât de facil este pentru utilizator
să-și amintească interacțiunea cu un sistem?

Utilizabilitatea
errors
numărul de erori potențiale trebuie să fie minimal
greșelile utilizatorului
trebuie să poate fi ușor 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/

“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

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

QOC (Questions, Options, Criteria)
Maclean et al., 1991
exemplu
întrebare: cum alege utilizatorul o locație de livrare?
opțiuni: listă de locații, câmp de intrare text,
folosirea unei hărți,…
criterii de evaluare: eficiență, 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 interativă poate atrage utilizatorii
în diferitele stagii ale proiectului
aceste persoane pot evalua interfața
din primele etape de dezvoltare

evoluția dezvoltării de aplicații software
(Cooper et al., 2007)

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)
adaptare după Amrita Aviyente, 2013

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

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

Wireframe
oferă o vedere generală a structurii interfeței 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

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 Apricado Music
http://jeff.io/posts/user-interface-wireframes

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)

Studiu de caz
proiectarea interfeței unei aplicații iPhone
pentru managementul bugetului personal
Andrei Potorac, 2011 (absolvent FII)

storytelling – include notițe utile
proiectantului/dezvoltatorului

de la mockup la prototipul interfeței
(folosirea emulatorului de dispozitiv iPhone)

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

Standarde
impuse de organisme (inter)naționale
www.w3c.org

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

Reglementări
BBC GEL (Global Experience Language)
GNOME HIG – Human Interface Guidelines
Samsung Smart TV UX Guideline
UX Design Guidelines for Windows Phone
iOS Human Interface Guidelines
Web Content Accessibility Guidelines

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

accessibility (ARIA)
interactivity (JavaScript)
design (CSS)
semantics (HTML + RDFa)
content (text & HTTP)
adaptare după Aaron Gustafson, 2012

evaluarea accesibilității unui sit cu instrumentul WAVE
(Web Accessibility Evaluation Tool)

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 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 generale vs. avansate de informatică
eventual, vizând o platformă specifică
(e.g., tabletă, consolă de jocuri)

deprinderi (skills)
citire
mânuirea unui dispozitiv: tastatură, mouse, telecomandă
interpretarea rezultatelor
etc.

experiența în domeniul specific aplicației

Utilizatorii fără cunoștințe anterioare
privind Web-ul semantic pot înțelege
și exploata 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 unei aplicații Web oferind servicii de
comunicare online în contextul jocurilor olimpice de iarnă
exemplificare

Care e populația de utilizatori (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,…
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
filtrare – eventual, multicriterială
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…
a se studia și http://alistapart.com/topic/user-research

Cum putem proiecta interfețele Web
în cazul în care nu știm care e 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 acesta să realizeze
user archetype
Alan Cooper, 1999
www.cooper.com/journal/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 Web

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

www.vincentbroquaire.com

episodul viitor: proiectarea interacțiunii Web
graceful
degradation
progressive
enhancement
responsive
Web design
mobile first

CLIW 2014—2015 (3/12): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (8)

Semelhante a CLIW 2014—2015 (3/12): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare

Semelhante a CLIW 2014—2015 (3/12): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare (20)

Mais de Sabin Buraga

Mais de Sabin Buraga (20)

CLIW 2014—2015 (3/12): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare