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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Dezvoltarea aplicațiilor Webla nivel de client

⎚design Web

interacțiune, utilizabilitate și metodologii de proiectare

Dr.

Sab

in B

ura

ga


“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


Scop

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

Dr.

Sab

in B

ura

ga


Scop

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

product as functionalityversus

product as information

Dr.

Sab

in B

ura

ga


adaptare după Crumlish & Malone, 2009

scopuripsihologie

comportament

interacțiunecontroale

limbi naturale

funcționalitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

Dr.

Sab

in B

ura

ga


Goal„ingrediente umane”

designerstechnologistsmanagement

Alan Cooper et al., About Face (4th Edition), 2014

Dr.

Sab

in B

ura

ga


Realitate:numeroase idiomuri de interacțiune

Jenifer Tidwell, 2006

Dr.

Sab

in B

ura

ga


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


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


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

Dr.

Sab

in B

ura

ga


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



acasă

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

Dr.

Sab

in B

ura

ga



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



contexte/locatii specificelocație de concert, spital, mall, restaurant, muzeu,…

exemplificări: aplicații/servicii “smart” oferite deplatforme/aparate mobile și/sau de tip wearable

Dr.

Sab

in B

ura

ga

www.purl.org/net/busacoÎn ce context, calculatoarele de tip tablet

(și dispozitivele înrudite) pot reprezenta cea mai bună soluție de interacțiune cu utilizatorul?

discuție

Dr.

Sab

in B

ura

ga


Realitate:volumul & diversitatea utilizatorilor

utilizatori tradiționalipersoane, comunitate de interes, populația unei țări etc.

+utilizatori speciali

segment de vârstă (copii, vârstnici), profesiune,cu anumite probleme – disabilities: motorii, senzoriale,…

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


discipline și specializări (Challis Hodge)

Dr.

Sab

in B

ura

ga


discipline și specializări (Challis Hodge)

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

Dr.

Sab

in B

ura

ga


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

axată asupra scopurilor dezvoltatorului:ușurința implementării, utilizarea tehnologiei,…

Dr.

Sab

in B

ura

ga



de obicei, utilizatorul este ignorat

Dr.

Sab

in B

ura

ga



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

Dr.

Sab

in B

ura

ga


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



un aspect important îl reprezintă utilizabilitatea

Dr.

Sab

in B

ura

ga



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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco“User experience and interface design in the context of

creating software represents an approach that putsthe user, rather than the system, at the center of the process.

This philosophy, called user-centered design,incorporates user concerns and advocacy fromthe beginning of the design process and dictates

the needs of the user should be foremostin any design decisions.”

MSDN, User Interface Design & Development section

Dr.

Sab

in B

ura

ga


Modelul utilizatorului (user model)versus

modelul de implementare (implementation model)

Alan Cooper et al., 2014

Dr.

Sab

in B

ura

ga


Modelul utilizatorului (user model)versus

modelul de implementare (implementation model)

cel mai simplu model trebuie să primeze

Dr.

Sab

in B

ura

ga


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


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

Rogers, 2007

Dr.

Sab

in B

ura

ga


Activitățile „naturale” trebuie anticipatepe baza comportamentului perceput al utilizatorilor

Rogers, 2007

Dr.

Sab

in B

ura

ga


User InterfaceHumane Interface(Jef Raskin, 2000)

“an interface is humane if it is responsive tohuman needs and considerate of human frailties”

Dr.

Sab

in B

ura

ga


Design values

așteptările utilizatorilor referitoare la interfața Web

(Peter Morville)

Dr.

Sab

in B

ura

ga


Ce reprezintă utilizabilitatea?

Dr.

Sab

in B

ura

ga


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


Utilizabilitatea

learnability

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

Dr.

Sab

in B

ura

ga


Dr.

Sab

in B

ura

ga


Utilizabilitatea

efficiency

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

Dr.

Sab

in B

ura

ga


navigatorul Firefox – o parte dintre combinațiile de taste

Dr.

Sab

in B

ura

ga


Utilizabilitatea

memorability

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

Dr.

Sab

in B

ura

ga


usability

Dr.

Sab

in B

ura

ga


Utilizabilitatea

errors

numărul de erori potențiale trebuie să fie minimal

greșelile utilizatoruluitrebuie să poate fi facil detectate/corectate

Dr.

Sab

in B

ura

ga


exemplu: utilizarea edit-in-placepentru modificarea datelor introduse

Dr.

Sab

in B

ura

ga


Utilizabilitatea

satisfaction

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

Dr.

Sab

in B

ura

ga


www.flickr.com/groups/insults/

Dr.

Sab

in B

ura

ga


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

costcompa-tibility

relia-bility

etc.

Jako

bN

ielsen

Dr.

Sab

in B

ura

ga


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

Jenifer Tidwell

Dr.

Sab

in B

ura

ga


Există anumite metodologii de proiectare?

Dr.

Sab

in B

ura

ga


Se preferă metodologii de proiectare iterative

“washing machine”

Dr.

Sab

in B

ura

ga


ideas

build

pro-duct

mea-sure

data

learn

metoda lean startup (Eric Ries, 2011)

Dr.

Sab

in B

ura

ga


Methodologies

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

faze conceptuale de design

(bottom-up)

Dr.

Sab

in B

ura

ga


Methodologies


Dr.

Sab

in B

ura

ga


Methodologies


Dr.

Sab

in B

ura

ga


Metodologiile se pot baza pe diverse modele

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


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



exemplu

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

Dr.

Sab

in B

ura

ga



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

Dr.

Sab

in B

ura

ga



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ță, folosind doar tastatura,

interacțiune exclusiv naturală (e.g., tactilă) etc.

Dr.

Sab

in B

ura

ga


Dr.

Sab

in B

ura

ga


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


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

aceste persoane pot evalua interfațadin primele etape de dezvoltare

Dr.

Sab

in B

ura

ga


evoluția manierei de dezvoltare a produselor

digitale (software)Alan Cooper et al., 2014

Dr.

Sab

in B

ura

ga


de la idee la produsul software complet

Dr.

Sab

in B

ura

ga


Prototipizare (prototyping)

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

Dr.

Sab

in B

ura

ga



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

Dr.

Sab

in B

ura

ga



poate avea un caracter dinamic

oferă maniere de experimentare

Dr.

Sab

in B

ura

ga



încurajează atragerea utilizatorilorîn procesul de proiectare

poate avea un rol important și în testare

Dr.

Sab

in B

ura

ga



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

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


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/

Dr.

Sab

in B

ura

ga


Models & Methodologies

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

Dr.

Sab

in B

ura

ga


Models & Methodologies

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

Dr.

Sab

in B

ura

ga


Storyboard

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

Dr.

Sab

in B

ura

ga


Wireframe

oferă o vedere generală a structurii interfeței sitului Webși relațiile dintre pagini

wireframe-based design

Dr.

Sab

in B

ura

ga


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



Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


Mockup

oferă un prototip low-fidelityla dimensiuni naturale sau scalate:

ilustrații pe hârtie, capturi-ecran etc.

Dr.

Sab

in B

ura

ga


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


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


Dr.

Sab

in B

ura

ga


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/

Dr.

Sab

in B

ura

ga


Asistent de interfață (wizard)

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

interactive prototyping

Dr.

Sab

in B

ura

ga


Studiu de cazproiectarea interfeței Web

pentru un sit de promovare a muzicienilor

http://www.jeff.io/posts/sketches-wireframes-css

alte exemplificări lapxdotpt.com/blog/2015/6/19/human-computer-interaction-best-in-class-2015

Dr.

Sab

in B

ura

ga


pasul 1: prototip pe hârtie (sketch)

formular de înscriere

Dr.

Sab

in B

ura

ga


pasul 2: wireframe

Dr.

Sab

in B

ura

ga


pasul 3: mockup

Dr.

Sab

in B

ura

ga


pas 4: implementare

interfața Web concretă

(HTML+CSS+JS)

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


Standarde

impuse de organisme (inter)naționale

de pildă, recomandările Consorțiului Webwww.w3.org/TR/

Dr.

Sab

in B

ura

ga


Reglementări

mai detaliate și sugestive

pot rezolva anumite conflicte de proiectare

Dr.

Sab

in B

ura

ga


Reglementări

câteva exemplificări:

BBC GEL (Global Experience Language)http://www.bbc.co.uk/gel

Firefox OS Guidelineswww.mozilla.org/styleguide/products/firefox-os/

Google Material Designhttps://design.google.com/

Universal Windows Platform (UWP) UX Guidelineshttps://dev.windows.com/design

Web Content Accessibility Guidelineswww.w3.org/TR/WCAG20/

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


(în loc de) pauză

http://dilbert.com/strip/2002-09-23

Dr.

Sab

in B

ura

ga


http://buffalobillgates.tumblr.com/

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

Dr.

Sab

in B

ura

ga


Cine este utilizatorul?

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

Dr.

Sab

in B

ura

ga



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

Dr.

Sab

in B

ura

ga



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

Dr.

Sab

in B

ura

ga



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

Dr.

Sab

in B

ura

ga



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

Dr.

Sab

in B

ura

ga



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

Dr.

Sab

in B

ura

ga


Utilizatorul: caracteristici ce trebuie identificate

factori demografici

vârstă, gen, etnicitate+

profil psihologic

Dr.

Sab

in B

ura

ga



educație

școală primară vs. studii de masterat

Dr.

Sab

in B

ura

ga



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



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)

Dr.

Sab

in B

ura

ga



deprinderi (skills)

citiremânuirea unui dispozitiv: tastatură, mouse, telecomandă

interpretarea rezultatelorși altele

Dr.

Sab

in B

ura

ga



experiența în domeniul specific aplicației

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga



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

www.purl.org/net/busacoProiectarea interfeței unei aplicații Web oferind servicii de

comunicare online în contextul jocurilor olimpice de iarnă

exemplificare

Dr.

Sab

in B

ura

ga



Care e grupul de utilizatori-țintă (beneficiarii)?

categorii principale: atleți, rudele și prietenii lor, personal administrativ, publicul, reporteri sportivi,…

exemplificare

Dr.

Sab

in B

ura

ga



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

Dr.

Sab

in B

ura

ga



Care sunt tipurile de conținuturi dorite?

date disponibile în formate multiplegrafice (charts)

date/interacțiuni limitate vs. complexeposibilități de căutare – eventual, via interacțiune vocală

filtrare – de dorit, multi-criterialăreutilizare – e.g., partajare în alte aplicații/servicii

exemplificare

Dr.

Sab

in B

ura

ga



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



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


Knowing users…

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

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


Folosind modele abstracte,putem specifica diverse clase de utilizatori

personas

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


Persona

deși nu substituie utilizatorul real,îl reprezintă pe parcursul fazelor de proiectare

(Blomkvist, 2002)

Dr.

Sab

in B

ura

ga


Persona

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

Dr.

Sab

in B

ura

ga


Persona

proiectarea trebuie realizatăconform necesităților și scopurilor

fiecărei categorii de utilizatori

Dr.

Sab

in B

ura

ga


Persona

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

Dr.

Sab

in B

ura

ga



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


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


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

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


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


episodul viitor: proiectarea interacțiunii Web