Service Oriented Architectures

(1)

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Service Oriented Architectures

⎚

aspecte privind proiectarea interacțiunii Web

(2)

“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

(3)

Scop

dezvoltarea de produse digitale

(recurgând la tehnologii Web)

(4)

Scop

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

product as functionality versus

product as information

(5)

Goal

„ingrediente umane”

designers technologists management

Alan Cooper et al.,

About Face (4^th Edition), 2014

(6)

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

(7)

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

(8)

Realitate:

eterogenitatea platformelor actuale

calculatoare de tip desktop (personale)

dispozitive mobile: smart-phones, tablete, drone,…

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 altele – e.g., mijloace de transport

(9)

Realitate:

existența contextelor multiple de interacțiune

la lucru

exemple:

aplicații de birou/afaceri,

medii de dezvoltare (IDEs), utilitare etc.

(10)

Realitate:

existența contextelor multiple de interacțiune

acasă

exemplificări:

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

(11)

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

(12)

Realitate:

existența contextelor multiple de interacțiune

contexte/locatii specifice

locație de concert, spital, mall, restaurant, muzeu,…

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

(13)

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

(14)

De ce anume avem nevoie

pentru a proiecta o interfață Web?

(15)

discipline și specializări (Challis Hodge)

(16)

discipline și specializări (Challis Hodge)

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

(17)

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

(18)

Modelul utilizatorului (user model) versus

modelul de implementare (implementation model)

Alan Cooper et al., 2014

(19)

Modelul utilizatorului (user model) versus

modelul de implementare (implementation model)

cel mai simplu model trebuie să primeze

(20)

Keep the Simple Simple

no matter how complex the overall system,

there is no excuse for not keeping simple tasks simple

Jef Raskin, 2000

(21)

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

Rogers, 2007

(22)

Activitățile „naturale” trebuie anticipate

pe baza comportamentului perceput al utilizatorilor

Rogers, 2007

(23)

User InterfaceHumane Interface (Jef Raskin, 2000)

“an interface is humane if it is responsive to

human needs and considerate of human frailties”

(24)

Design values

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

(25)

Ce reprezintă utilizabilitatea?

uxchecklist.github.io

(26)

Utilizabilitatea

se referă la cât de „bine” utilizatorii

pot exploata funcționalitatea unui sistem

Jakob Nielsen

www.useit.com/alertbox/20030825.html

(27)

Utilizabilitatea learnability

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

(28)

(29)

Utilizabilitatea efficiency

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

(30)

navigatorul Firefox – o parte dintre combinațiile de taste

(31)

Utilizabilitatea memorability

cât de ușor este pentru utilizator

să-și amintească interacțiunea cu aplicația/sistemul?

(32)

usability

(33)

Utilizabilitatea errors

numărul de erori potențiale trebuie să fie minimal greșelile utilizatorului

trebuie să poate fi facil detectate/corectate

(34)

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

(35)

Utilizabilitatea satisfaction

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

(36)

www.flickr.com/groups/insults/

(37)

system accepta-

bility

social accepta-

bility

practical accepta-

bility

useful- ness

utility usability

easy to

learn efficient to use

easy to remem-

ber

errorsfew

jectivelysub- pleasant

cost compa-

tibility relia-

bility etc.

JakobNielsen

(38)

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

Jenifer Tidwell

(39)

Există anumite metodologii de proiectare?

(40)

Se preferă metodologii de proiectare iterative

“washing machine”

(41)

ideas

build

duct pro- mea- sure

data learn

metoda lean startup (Eric Ries, 2011)

(42)

proiectarea iterativă bazată pe scenarii (Alistair G. Sutcliffe, 2014)

(43)

Methodologies

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

faze conceptuale de design

(bottom-up)

(44)

Methodologies

(45)

Methodologies

(46)

Metodologiile se pot baza pe diverse modele

(47)

modele conceptuale privind proiectarea interfeței Web

(Robert Baxley, 2003)

(48)

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

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

(49)

evoluția manierei de dezvoltare a produselor

digitale (software)

Alan Cooper et al., 2014

(50)

http://buffalobillgates.tumblr.com/

Ce putem afirma despre utilizatorii

aplicației pe care o vom dezvolta?

(51)

Cine este utilizatorul?

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

(52)

Cine este utilizatorul?

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

(53)

Cine este utilizatorul?

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

(54)

Cine este utilizatorul?

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

(55)

Cine este utilizatorul?

persoană care ia decizii

privind adoptarea și/sau achiziția unui produs/serviciu

(56)

Cine este utilizatorul?

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

(57)

Utilizatorul: caracteristici ce trebuie identificate

factori demografici

vârstă, gen, etnicitate +

profil psihologic

(58)

Utilizatorul: caracteristici ce trebuie identificate educație

școală primară vs. studii de masterat

(59)

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.

(60)

Utilizatorul: caracteristici ce trebuie identificate

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)

(61)

Utilizatorul: caracteristici ce trebuie identificate

deprinderi (skills)

citire

mânuirea unui dispozitiv: tastatură, mouse, telecomandă interpretarea rezultatelor

și altele

(62)

Utilizatorul: caracteristici ce trebuie identificate

experiența în domeniul specific aplicației

(63)

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

(64)

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)

(65)

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

exemplificare

(66)

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

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

exemplificare

(67)

Care sunt manierele de interacțiune?

tipuri de dispozitive: PC-uri, laptopuri, telefoane mobile, chioșcuri informaționale, ecrane publice,

dispozitive oferind acces la Web: smart-phones, tablete, dispozitive wearable + senzori etc.

exemplificare

(68)

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 – eventual, via interacțiune vocală filtrare – de dorit, multi-criterială

reutilizare – e.g., partajare în alte aplicații/servicii

exemplificare

(69)

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)

(70)

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

(71)

Knowing users…

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

(72)

Cum putem proiecta interfețele Web

în cazul în care nu știm care-i audiența reală?

(73)

Folosind modele abstracte,

putem specifica diverse clase de utilizatori

personas



(74)

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

(75)

Persona

deși nu substituie utilizatorul real,

îl reprezintă pe parcursul fazelor de proiectare

(Blomkvist, 2002)

(76)

Persona

facilitează crearea profilului concret

al unui utilizator tipic al aplicației/serviciului

(77)

Persona

proiectarea trebuie realizată

conform necesităților și scopurilor fiecărei categorii de utilizatori

www.interaction-design.org/encyclopedia/personas.html

(78)

Persona

aspecte de considerat:

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

(79)

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

(80)

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 A. Stanciu, I. Șchiopu, A. Grigoriu, I. Lazăr (2011) – aisquared.wordpress.com

(81)

persona – un template HTML5

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

(82)

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

(83)

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

(84)

Pașii de la idee la produsul software complet?

(85)

A. Micallef, “Wireframing, Prototyping, Mockuping – What’s the Difference?” (2015)

speckyboy.com/2015/04/20/wireframing-prototyping-mockuping-whats-the-difference/

(86)

Prototipizare (prototyping)

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

(87)

Prototipizare (prototyping)

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

(88)

Prototipizare (prototyping)

poate avea un caracter dinamic oferă maniere de experimentare

(89)

Prototipizare (prototyping)

încurajează atragerea utilizatorilor în procesul de proiectare

poate avea un rol important și în testare

(90)

Prototipizare (prototyping)

fidelitate instrument

prototip pe hârtie hârtie + creion

scăzută – wireframe Framebox, Gliffy, MS Visio, OmniGraffle, UXPin

medie Axure, Adobe Illustrator, FlairBuilder, ForeUI, InVision, Moqups

înaltă cod (e.g., HTML + CSS + JS), eventual folosind un framework specific

a se studia și „Sketching, Wireframing, Mockups & Prototyping”

(Alecsandru Grigoriu, 2016)

http://pxdotpt.com/hci/2015/3/23/week-6-sketching-wireframing-mockups-prototyping

(91)

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

(92)

Twitter – conceptul inițial

http://www.flickr.com/photos/jackdorsey/182613360/

(93)

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/

(94)

Models & Methodologies

(95)

Models & Methodologies

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

(96)

Storyboard

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

(97)

Wireframe

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



wireframe-based design

(98)

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

(99)

(100)

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

(101)

Mockup

oferă un prototip low-fidelity

la dimensiuni naturale sau scalate:

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

(102)

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

(103)

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

(104)

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/

(105)

Asistent de interfață (wizard)

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



interactive prototyping

(106)

Studiu de caz

proiectarea interfeței Web

pentru un sit de promovare a muzicienilor

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

(107)

pasul 1: prototip pe hârtie (sketch)

formular de înscriere

(108)

pasul 2: wireframe

(109)

pasul 3: mockup

(110)

pas 4: implementare

interfața Web concretă

(HTML+CSS+JS)

(111)

Alte exemplificări:

Cele mai bune proiecte la disciplina Human-Computer Interaction – 2015, Facultatea de Informatică, UAIC

http://pxdotpt.com/blog/2015/6/19/human-computer-interaction-best-in-class-2015

Designing a tablet interface for children (Grapefruit, 2015)

http://www.grapefruit.ro/work/noriel-pad-tablet-interface/

Secrets behind the success of Monument Valley (2015)

blog.invisionapp.com/secrets-behind-the-success-of-monument-valley/

Designing a zero-gravity apartment (2016)

http://tinyurl.com/j6ysabg

(112)

În vederea asigurării calității interfeței proiectate,

trebuie urmate diverse standarde și reglementări

(113)

Standarde

impuse de organisme (inter)naționale

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

(114)

Reglementări

mai detaliate și sugestive

pot rezolva anumite conflicte de proiectare

(115)

Reglementări

câteva exemplificări:

BBC GEL (Global Experience Language)

http://www.bbc.co.uk/gel

Google Material Design

https://design.google.com/

Gov.uk Design Principles

https://www.gov.uk/design-principles

Universal Windows Platform (UWP) UX Guidelines

https://dev.windows.com/design

(116)

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