dezvoltarea aplicaţiilor web la nivel de client (cursul #3): design web. interacţiune,...
DESCRIPTION
Dezvoltarea aplicaţiilor Web la nivel de client — detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.htmlTRANSCRIPT
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
design Web
interacțiune, utilizabilitate & metodologii de proiectare
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
“I’ve been amazed at how often those outsidethe discipline of design assume that
what designers do is decoration.Good design is problem solving.”
Jeff Veen
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Scop
dezvoltarea de produse digitale(recurgând la tehnologii Web)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
aspecte privind interacțiunea Web(Christian Crumlish & Erin Malone, 2009)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
aspecte privind interacțiunea Web(Christian Crumlish & Erin Malone, 2009)
detalii în cursul de la master“Interacțiune om-calculator”
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Goal
Alan Cooper et al., 2007
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Realitate:numeroase idiomuri de interacțiune
Jenifer Tidwell, 2006
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Realitate:eterogenitatea platformelor actuale
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 boothplatforme de amuzament – e.g., Blu-ray player, Wii, XBox
adaptare după Jean Vanderdonckt, 2006
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Realitate:existența contextelor multiple de interacțiune
la lucru
exemple: aplicații de birou/afaceri,
medii de dezvoltare (IDEs), utilitare etc.
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Realitate:existența contextelor multiple de interacțiune
acasă
exemplificări: software pentru amuzament personal/familial, player-e multimedia, aplicații sociale, jocuri,…
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Realitate:existența contextelor multiple de interacțiune
during travelling
exemple: management de informații personale, planificatoare, comunicare instantanee, servicii bazate
pe locația geografică, sisteme de recomandare,…
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Realitate:existența contextelor multiple de interacțiune
contexte/locații specificelocație de concert, spital, mall, restaurant, muzeu,…
exemplificări: aplicații/servicii “smart” oferite deplatforme mobile sau de chioșcuri informaționale
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
googlemobileads.blogspot.com/2012/08/navigating-new-multi-screen-world.html
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Realitate:volumul & diversitatea utilizatorilor
utilizatori tradiționalipersoane, comunitate de interes, populația unei țări,…
+utilizatori speciali
segment de vârstă (copii, vârstnici), profesiune,cu anumite probleme – disabilities: motorii, senzoriale etc.
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
De ce anume avem nevoiepentru a proiecta o interfață Web?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
discipline și specializări (Challis Hodge)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
discipline și specializări (Challis Hodge)
Creative Director, Information Architect, Interaction Designer,
Visual Designer, User Researcher, Usability Engineer
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Proiectare focalizată pe sarcinile de efectuat(task-centered interface design)
axată asupra scopurilor dezvoltatorului:usurința implementării, utilizarea tehnologiei,…
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Proiectare focalizată pe sarcinile de efectuat(task-centered interface design)
de obicei, utilizatorul este ignorat
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Proiectare focalizată pe sarcinile de efectuat(task-centered interface design)
feature-centric software (aplicații mamut)multe facilități, unele niciodată folosite
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Proiectare focalizată pe necesitățile utilizatorului(user-centered interface design)
proiectarea trebuie să ia în considerațieașteptările utilizatorului (user expectations)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Proiectare focalizată pe necesitățile utilizatorului(user-centered interface design)
un aspect important îl reprezintă utilizabilitatea
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Proiectare focalizată pe necesitățile utilizatorului(user-centered interface design)
aplicațiile Web trebuie să simplifice task-urilepe care le are de îndeplinit utilizatorul
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Modelul utilizatorului (user model)versus
modelul de implementare (implementation model)
Alan Cooper, 1995, 2007
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Modelul utilizatorului (user model)versus
modelul de implementare (implementation model)
cel mai simplu model trebuie să primeze
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Keep the Simple Simple
no matter how complex the overall system,there is no excuse for not keeping simple tasks simple
Jef Raskin, 2000
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Există puține cazuri în care utilizatoriichiar știu ceea ce doresc să realizeze
Rogers, 2007
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Activitățile “naturale” trebuie anticipatepe baza comportamentului perceput al utilizatorilor
Rogers, 2007
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
User InterfaceHumane Interface(Raskin, 2000)
an interface is humane if it is responsive tohuman needs and considerate of human frailties
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Design values
așteptările utilizatorilor referitoare la interfața Web
(Peter Morville)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Ce reprezintă utilizabilitatea?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizabilitatea
se referă la cât de “bine” utilizatoriipot exploata funcționalitatea unui sistem
Jakob Nielsenwww.useit.com/alertbox/20030825.html
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizabilitatea
learnability
cât de ușor o persoană poate învățasă utilizeze un sistem (interfața sa)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizabilitatea
efficiency
după ce utilizatorul a învățat interfața,cum poate s-o folosească în mod optim?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Firefox – o parte dintre combinațiile de taste
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizabilitatea
memorability
cât de facil este pentru utilizatorsă-și amintească interacțiunea cu un sistem?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizabilitatea
errors
numărul de erori potențiale trebuie să fie minimal
greșelile utilizatoruluitrebuie să poate fi ușor detectate/corectate
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
exemplu: utilizarea edit-in-placepentru modificarea datelor introduse
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizabilitatea
satisfaction
utilizatorului îi place să folosească aplicația/serviciul?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
www.flickr.com/groups/insults/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
“The applications that are easy to useare designed to be familiar.”
Jenifer Tidwell
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Există anumite metodologii de proiectare?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Se preferă metodologii de proiectare iterative
“washing machine”
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
study
design
build
evaluate
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
understand
study
designbuild
evaluate
Richard Harper et al. (Eds.), Being Human, Microsoft Research, 2008
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Methodologies
fazele principale ale design-ului Web (Jesse Garrett)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Metodologiile se pot baza pe diverse modele
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
modele conceptuale privind proiectarea interfeței Web (Robert Baxley, 2003)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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.
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Proiectarea interativă poate atrage utilizatoriiîn diferitele stagii ale proiectului
aceste persoane pot evalua interfațadin primele etape de dezvoltare
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
evoluția dezvoltării de aplicații software(Cooper et al., 2007)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Prototipizare (prototyping)
oferă o vedere generală a interfeței aplicației Web
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Prototipizare (prototyping)
propune o soluție de proiectareși nu funcționalitatea completă
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Prototipizare (prototyping)
poate avea un caracter dinamic
oferă maniere de experimentare
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Prototipizare (prototyping)
încurajează atragerea utilizatorilorîn procesul de proiectare
poate avea un rol important și în testare
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
prototipul pe hârtie al paginii principale a sitului FII(Sergiu Dumitriu, Marta Gârdea, Sabin Buraga, 2006)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Twitter – conceptul inițialhttp://www.flickr.com/photos/jackdorsey/182613360/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Storyboard
oferă descrierea manierei (concrete) de prezentarea informațiilor, fără a lua în considerație funcționalitatea
http://storyboardcentral.blogspot.com/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Models & Methodologies
A. Stanciu, I. Șchiopu, A. Grigoriu, I. Lazăr (2011) – aisquared.wordpress.com
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Storyboard
în contextul proiectării Web, constă uzual în wireframes
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Wireframe
oferă o vedere generală a structurii interfeței Webși relațiile dintre pagini
wireframe-based design
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Wireframe
creat în prima etapă de dezvoltare a proiectului
oferă indicații designer-ilor și programatorilorprivind înfățișarea și comportamentul interfeței
conceptual page layouts
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
A. Stanciu, I. Șchiopu, A. Grigoriu, I. Lazăr (2011) – aisquared.wordpress.com
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Mockup
oferă un prototip low-fidelityla dimensiuni naturale sau scalate:
ilustrații pe hârtie, capturi-ecran etc.
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Mockup
oferă un prototip low-fidelityla dimensiuni naturale sau scalate:
ilustrații pe hârtie, capturi-ecran etc.
utilizat pentru demonstrații, evaluare, învățare,…
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
mockup-uri pentru o aplicație oferind recomandăribazate pe locația geografică
A. Stanciu, I. Șchiopu, A. Grigoriu, I. Lazăr (2011) – aisquared.wordpress.com
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Mockup
exemple de instrumente software:Balsamiq Mockups – www.balsamiq.com
HotGloo – www.hotgloo.comMockFlow – mockflow.com
Mocking Bird – gomockingbird.com/mockingbird/Moqups – moqups.com
Proto.io – http://proto.io/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Asistent de interfață (wizard)
ajută utilizatorii să creeze în mod dinamic interfața
interactive prototyping
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Studiu de cazproiectarea interfeței Web pentru Apricado Music
http://jeff.io/posts/user-interface-wireframes
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
pasul 1: prototip pe hârtie (sketch)
formular de înscriere
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
pasul 2: wireframe
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
pasul 3: mockup
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
pas 4: implementare
interfața Web concretă
(HTML+CSS+JS)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Studiu de cazproiectarea interfeței unei aplicații iPhonepentru managementul bugetului personal
Andrei Potorac, 2011
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
storytelling – include notițe utile proiectantului/dezvoltatorului
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
de la mockup la prototipul interfeței(folosirea emulatorului de dispozitiv iPhone)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
În vederea asigurării calității interfeței proiectate,trebuie urmate diverse standarde & reglementări
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Standarde
impuse de organisme (inter)naționale
www.w3c.org
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Reglementări
mai detaliate & sugestive
pot rezolva anumite conflicte de proiectare
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
ARIA (Accessible Rich Internet Applications) în contextulWeb Accessibility Initiative – www.w3.org/WAI/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
accessibility (ARIA)
interactivity (JavaScript)
design (CSS)
semantics (HTML + RDFa)
content (text & HTTP)
adaptare după Aaron Gustafson, 2012
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
evaluarea accesibilității unui sit cu instrumentul WAVE(Web Accessibility Evaluation Tool)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Ce putem afirma despre utilizatorii aplicațieipe care o vom dezvolta?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Cine este utilizatorul?
probabil, nu-l vom agrea (inițial)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Cine este utilizatorul?
acea persoană care interacționează direct cu produsul/serviciul (software)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Cine este utilizatorul?
acel individ care determină alte persoane să utilizeze produsul/serviciul
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Cine este utilizatorul?
obține rezultate – de dorit, cele scontate –de la un produs/serviciu specific
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Cine este utilizatorul?
persoană care ia decizii privind achiziția unui produs/serviciu
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Cine este utilizatorul?
entitate care folosește produsul/serviciul oferit de competitor(i)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizatorul: caracteristici ce trebuie identificate
factori demografici
vârstă, gen, etnicitate+
profil psihologic
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizatorul: caracteristici ce trebuie identificate
educație
școală primară vs. studii de masterat
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizatorul: caracteristici ce trebuie identificate
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.
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizatorul: caracteristici ce trebuie identificate
abilități referitoare la utilizarea calculatoarelor
cunoștințe generale vs. avansate de informatică
eventual, vizând o platformă țintă – e.g., tabletă
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizatorul: caracteristici ce trebuie identificate
deprinderi (skills)
citiremânuirea unor dispozitive: tastatură, mouse, telecomandă
interpretarea rezultateloretc.
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizatorul: caracteristici ce trebuie identificate
experiența în domeniul specific aplicației
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizatorii fără cunoștințe anterioare privind Web-ul semantic pot înțelege
și exploata aplicația?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizatorul: caracteristici ce trebuie identificate
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)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Proiectarea unei aplicații Web oferind servicii de comunicare online în contextul jocurilor olimpice de iarnă
exemplificare
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Proiectarea unei aplicații Web oferind servicii de comunicare online în contextul jocurilor olimpice de iarnă
Care e populația de utilizatori (beneficiarii)?
categorii principale: atleți, rudele & prietenii lor, personal administrativ, publicul, reporteri sportivi,…
exemplificare
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Proiectarea unei aplicații Web oferind servicii de comunicare online în contextul jocurilor olimpice de iarnă
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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Proiectarea unei aplicații Web oferind servicii de comunicare online în contextul jocurilor olimpice de iarnă
Care sunt tipurile de conținuturi dorite?
date disponibile în formate multiplegrafice (charts)
date/interacțiuni limitate vs. complexeposibilități de căutare
filtrare – eventual, multicriterialăreutilizare – e.g., partajare în alte aplicații/servicii
exemplificare
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizatorul: caracteristici ce trebuie identificate
abordări:
chestionare completate de utilizatori (user surveys)interviuri
observații (in)directe (user tracking, feedback)testare bazată pe utilizatori reali (user testing)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizatorul: caracteristici ce trebuie identificate
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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
modelul (abstract) al utilizatoruluidin punct de vedere al abilităților cognitive
(Card, Moran & Newell, 1983; Wickens, 1984)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Cum putem proiecta interfețele Webîn cazul în care nu știm care e audiența reală?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Folosind modele abstracte,putem specifica diverse clase de utilizatori
personas
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Persona
oferă o descriere precisă a utilizatorului unui sistemși ceea ce dorește acesta să realizeze
user archetype
Alan Cooper, 1999www.cooper.com/journal/personas/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Persona
deși nu substituie utilizatorul real,îl reprezintă pe parcursul fazelor de proiectare
Blomkvist, 2002
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Persona
facilitează crearea profilului concretal unui utilizator tipic al aplicației Web
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Persona
proiectarea trebuie realizatăconform necesităților și scopurilor
fiecărei categorii de utilizatori
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Persona
aspecte de considerat:vârstă, abilități, etnicitate, aspecte sociale etc.
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
A. Stanciu, I. Șchiopu, A. Grigoriu, I. Lazăr (2011) – aisquared.wordpress.com
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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
A. Stanciu, I. Șchiopu, A. Grigoriu, I. Lazăr (2011) – aisquared.wordpress.com
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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
persona – un template HTML5http://profs.info.uaic.ro/~stefan.negru/personas/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
personas pentru proiectul PaMI (Patient Monitoring Interface)A. Berilă, A. Bulai, C. Chiric & M. Pleșca, 2012
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
S.T.U.P.I.D. userStressed 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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
www.vincentbroquaire.com
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
episodul viitor: proiectarea interacțiunii Web
gracefuldegradation
progressiveenhancement
responsiveWeb design
mobile first