cliw 2014—2015 (3/12): design web. interacţiune, utilizabilitate & metodologii de proiectare

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Dezvoltarea aplicațiilor Webla nivel de client

▣design Web

interacțiune, utilizabilitate & metodologii de proiectare

Dr.

Sab

in B

ura

ga


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


co

Scop

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

Dr.

Sab

in B

ura

ga


co

Scop

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

product as functionalityversus

product as information

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


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


co

Goal

Alan Cooper et al., 2007

Dr.

Sab

in B

ura

ga


co

Realitate:numeroase idiomuri de interacțiune

Jenifer Tidwell, 2006

Dr.

Sab

in B

ura

ga


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


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


co

Realitate:eterogenitatea platformelor actuale

calculatoare de tip desktop (personale)dispozitive portabile: smart-phones, tablete, ceasurisoluț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

Dr.

Sab

in B

ura

ga


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


co


acasă

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

Dr.

Sab

in B

ura

ga


co


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


co


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


co

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


co

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

Dr.

Sab

in B

ura

ga


co

discipline și specializări (Challis Hodge)

Dr.

Sab

in B

ura

ga


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


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


co


de obicei, utilizatorul este ignorat

Dr.

Sab

in B

ura

ga


co


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

Dr.

Sab

in B

ura

ga


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


co


un aspect important îl reprezintă utilizabilitatea

Dr.

Sab

in B

ura

ga


co


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

Dr.

Sab

in B

ura

ga


co

“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 processand dictates the needs of the user should be foremost

in any design decisions.”

MSDN, User Interface Design & Development

Dr.

Sab

in B

ura

ga


co

Modelul utilizatorului (user model)versus

modelul de implementare (implementation model)

Alan Cooper, 1995, 2007

Dr.

Sab

in B

ura

ga


co

Modelul utilizatorului (user model)versus

modelul de implementare (implementation model)

cel mai simplu model trebuie să primeze

Dr.

Sab

in B

ura

ga


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


co

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

Rogers, 2007

Dr.

Sab

in B

ura

ga


co

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

Rogers, 2007

Dr.

Sab

in B

ura

ga


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


co

Design values

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

(Peter Morville)

Dr.

Sab

in B

ura

ga


co

Ce reprezintă utilizabilitatea?

Dr.

Sab

in B

ura

ga


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


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


co

Dr.

Sab

in B

ura

ga


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


co

Firefox – o parte dintre combinațiile de taste

Dr.

Sab

in B

ura

ga


co

Utilizabilitatea

memorability

cât de facil este pentru utilizatorsă-și amintească interacțiunea cu un sistem?

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


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


co

exemplu: utilizarea edit-in-placepentru modificarea datelor introduse

Dr.

Sab

in B

ura

ga


co

Utilizabilitatea

satisfaction

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

Dr.

Sab

in B

ura

ga


co

www.flickr.com/groups/insults/

Dr.

Sab

in B

ura

ga


co

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

Jenifer Tidwell

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

Există anumite metodologii de proiectare?

Dr.

Sab

in B

ura

ga


co

Se preferă metodologii de proiectare iterative

“washing machine”

Dr.

Sab

in B

ura

ga


co

ideas

build

pro-duct

mea-sure

data

learn

metoda lean startup (Eric Ries, 2011)

Dr.

Sab

in B

ura

ga


co

Methodologies

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

faze conceptuale de design

Dr.

Sab

in B

ura

ga


co

Methodologies

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

Dr.

Sab

in B

ura

ga


co

Metodologiile se pot baza pe diverse modele

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


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


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


co

Dr.

Sab

in B

ura

ga


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


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


co

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

Dr.

Sab

in B

ura

ga


co

Prototipizare (prototyping)

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

Dr.

Sab

in B

ura

ga


co


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

Dr.

Sab

in B

ura

ga


co


poate avea un caracter dinamic

oferă maniere de experimentare

Dr.

Sab

in B

ura

ga


co


încurajează atragerea utilizatorilorîn procesul de proiectare

poate avea un rol important și în testare

Dr.

Sab

in B

ura

ga


co


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

Dr.

Sab

in B

ura

ga


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


co

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

Dr.

Sab

in B

ura

ga


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


co

Models & Methodologies

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

Dr.

Sab

in B

ura

ga


co

Storyboard

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

Dr.

Sab

in B

ura

ga


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


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


co


Dr.

Sab

in B

ura

ga


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


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


co

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


Dr.

Sab

in B

ura

ga


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


co

Asistent de interfață (wizard)

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

interactive prototyping

Dr.

Sab

in B

ura

ga


co

Studiu de cazproiectarea interfeței Web pentru Apricado Music

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

Dr.

Sab

in B

ura

ga


co

pasul 1: prototip pe hârtie (sketch)

formular de înscriere

Dr.

Sab

in B

ura

ga


co

pasul 2: wireframe

Dr.

Sab

in B

ura

ga


co

pasul 3: mockup

Dr.

Sab

in B

ura

ga


co

pas 4: implementare

interfața Web concretă

(HTML+CSS+JS)

Dr.

Sab

in B

ura

ga


co

Studiu de cazproiectarea interfeței unei aplicații iPhonepentru managementul bugetului personal

Andrei Potorac, 2011 (absolvent FII)

Dr.

Sab

in B

ura

ga


co

storytelling – include notițe utile proiectantului/dezvoltatorului

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

Standarde

impuse de organisme (inter)naționale

www.w3c.org

Dr.

Sab

in B

ura

ga


co

Reglementări

mai detaliate și sugestive

pot rezolva anumite conflicte de proiectare

Dr.

Sab

in B

ura

ga


co

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 GuidelinesWeb Content Accessibility Guidelines

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

accessibility (ARIA)

interactivity (JavaScript)

design (CSS)

semantics (HTML + RDFa)

content (text & HTTP)

adaptare după Aaron Gustafson, 2012

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

Cine este utilizatorul?

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

Dr.

Sab

in B

ura

ga


co


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

Dr.

Sab

in B

ura

ga


co


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

Dr.

Sab

in B

ura

ga


co


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

Dr.

Sab

in B

ura

ga


co


persoană care ia decizii privind achiziția unui produs/serviciu

Dr.

Sab

in B

ura

ga


co


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

Dr.

Sab

in B

ura

ga


co

Utilizatorul: caracteristici ce trebuie identificate

factori demografici

vârstă, gen, etnicitate+

profil psihologic

Dr.

Sab

in B

ura

ga


co


educație

școală primară vs. studii de masterat

Dr.

Sab

in B

ura

ga


co


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


co


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)

Dr.

Sab

in B

ura

ga


co


deprinderi (skills)

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

interpretarea rezultateloretc.

Dr.

Sab

in B

ura

ga


co


experiența în domeniul specific aplicației

Dr.

Sab

in B

ura

ga


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


co


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


co

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

exemplificare

Dr.

Sab

in B

ura

ga


co


Care e populația de utilizatori (beneficiarii)?

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

exemplificare

Dr.

Sab

in B

ura

ga


co


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


co


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


co


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


co


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


co

Knowing users…

a se studia și http://alistapart.com/topic/user-research

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

Folosind modele abstracte,putem specifica diverse clase de utilizatori

personas

Dr.

Sab

in B

ura

ga


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


co

Persona

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

Blomkvist, 2002

Dr.

Sab

in B

ura

ga


co

Persona

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

Dr.

Sab

in B

ura

ga


co

Persona

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

fiecărei categorii de utilizatori

Dr.

Sab

in B

ura

ga


co

Persona

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

Dr.

Sab

in B

ura

ga


co


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


co


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


co

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

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


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


co

www.vincentbroquaire.com

Dr.

Sab

in B

ura

ga


co

episodul viitor: proiectarea interacțiunii Web

gracefuldegradation

progressiveenhancement

responsiveWeb design

mobile first

cliw 2014—2015 (3/12): design web. interacţiune, utilizabilitate & metodologii de proiectare

Technology

good design is problem

aciuni i reprezentri

2009detalii n cursul

orgnetbusacogoalalan

user experience uxdr

existena contextelor

anumite probleme disabilities

advertising screen etc