Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare

Dr. Sabin Buragawww.purl.org/net/busaco

design Web

interacțiune, utilizabilitate & metodologii de proiectare

Jeff Veen


“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.”

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


Scop

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


aspecte privind interacțiunea Web

Alan Cooper et al., 2007


Goal

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


Realitate:
numeroase idiomuri de interacțiune

multimedia players
charts
immersive games
Web documents
social (virtual) environments
e-business applications

maniere tipice de interacțiune cu utilizatorul


forms
text editors
graphic editors
spreadsheets
Web browsers
calendars

calculatoare de tip desktop (personale)
dispozitive portabile: smart-phones, tablete, automobile
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:
eterogenitatea platformelor actuale

la lucru

exemple:
aplicații de birou/afaceri,
medii de dezvoltare (IDEs), utilitare etc.


Realitate:
existența contextelor multiple de interacțiune

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:


googlemobileads.blogspot.com/2012/08/navigating-new-multi-screen-world.html


Realitate:
volumul & diversitatea utilizatorilor

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


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


discipline și specializări (Challis Hodge)

Creative Director, Information Architect, Interaction Designer,
Visual Designer, User Researcher, Usability Engineer


discipline și specializări (Challis Hodge)

axată asupra scopurilor dezvoltatorului:
usurința implementării, utilizarea tehnologiei,…


Proiectare focalizată pe sarcinile de efectuat
(task-centered interface design)

de obicei, utilizatorul este ignorat



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



proiectarea trebuie să ia în considerație
așteptările utilizatorului (user expectations)


Proiectare focalizată pe necesitățile utilizatorului
(user-centered interface design)

un aspect important îl reprezintă utilizabilitatea



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




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

no matter how complex the overall system,
there is no excuse for not keeping simple tasks simple

Jef Raskin, 2000


Keep the Simple Simple

Rogers, 2007


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

pe baza comportamentului perceput al utilizatorilor

Rogers, 2007


Activitățile “naturale” trebuie anticipate

an interface is humane if it is responsive to
human needs and considerate of human frailties


User InterfaceHumane Interface
(Raskin, 2000)


Design values

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

Ce reprezintă 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?


Utilizabilitatea


Firefox – o parte dintre combinațiile de taste

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


Utilizabilitatea


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

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


Utilizabilitatea

www.flickr.com/groups/insults/

Jenifer Tidwell


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


Există anumite metodologii de proiectare?

“washing machine”


Se preferă metodologii de proiectare iterative

evaluate
design

build


study

evaluate

build

study

design

Richard Harper et al. (Eds.), Being Human, Microsoft Research, 2008


understand


Methodologies

fazele principale ale design-ului Web (Jesse Garrett)


Metodologiile se pot baza pe diverse modele


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

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.


QOC (Questions, Options, Criteria)

A. Berilă, A. Bulai, C. Chiric & M. Pleșca, 2012

patientmo.wordpress.com


exemplificare: QOC pentru interacțiunea tactilă
cu o aplicație de monitorizare a pacienților

aceste persoane pot evalua interfața
din primele etape de dezvoltare


Proiectarea interativă poate atrage utilizatorii
în diferitele stagii ale proiectului


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

oferă o vedere generală a interfeței aplicației Web


Prototipizare (prototyping)

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




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/

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


Storyboard


Models & Methodologies

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

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


Storyboard

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


Wireframe

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



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

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/


Mockup

ajută utilizatorii să creeze în mod dinamic interfața

interactive prototyping


Asistent de interfață (wizard)

proiectarea interfeței Web pentru Apricado Music

http://jeff.io/posts/user-interface-wireframes


Studiu de caz

formular de
înscriere


pasul 1: prototip pe hârtie (sketch)

pasul 2: wireframe

pasul 3: mockup

pas 4: implementare


interfața Web
concretă
(HTML+CSS+JS)

proiectarea interfeței unei aplicații iPhone
pentru managementul bugetului personal

Andrei Potorac, 2011


Studiu de caz


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

impuse de organisme (inter)naționale

www.w3c.org


Standarde

mai detaliate & sugestive
pot rezolva anumite conflicte de proiectare


Reglementări


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

interactivity (JavaScript)
design (CSS)
semantics (HTML + RDFa)
content (text & HTTP)

adaptare după Aaron Gustafson, 2012


accessibility (ARIA)


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


Ce putem afirma despre utilizatorii aplicației
pe care o vom dezvolta?

probabil, nu-l vom agrea (inițial)


Cine este utilizatorul?

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)



factori demografici
vârstă, gen, etnicitate
+
profil psihologic


Utilizatorul: caracteristici ce trebuie identificate

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ă țintă – e.g., tabletă



deprinderi (skills)



citire
mânuirea unor dispozitive: 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)




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

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



din punct de vedere al abilităților cognitive
(Card, Moran & Newell, 1983; Wickens, 1984)


modelul (abstract) al utilizatorului


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



personas


Folosind modele abstracte,
putem specifica diverse clase de utilizatori

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.


Persona

Name
Age
Location

Social Life

Work Life

Goals

Tourist

Single (wo)man


Student

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


Name
Age
Location

Social Life

Work Life

Goals

Tourist

Single (wo)man


Student

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


http://profs.info.uaic.ro/~stefan.negru/personas/


persona – un template HTML5


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

graceful
degradation

progressive
enhancement
mobile first

episodul viitor: proiectarea interacțiunii Web


responsive
Web design

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (15)

Destacado

Destacado (8)

Similar a Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare

Similar a Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare (20)

Más de Sabin Buraga

Más de Sabin Buraga (20)

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare