Dezvoltarea aplicaţiilor Web la nivel de client (cursul #1): Interacţiune Web: concepte, context,...
125
Dr. Sabin Buragawww.purl.org/net/busaco interacțiune Web – HCI, UI, UX
-
Upload
sabin-buraga -
Category
Technology
-
view
660 -
download
2
description
Dezvoltarea aplicaţiilor Web la nivel de client — detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Transcript of Dezvoltarea aplicaţiilor Web la nivel de client (cursul #1): Interacţiune Web: concepte, context,...
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
interacțiune Web – HCI, UI, UX
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
“It is not the answer that enlightens, but the question.”
Eugene Ionesco
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Care sunt mijloacele de interacțiune dintre utilizatori și o aplicație?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Human
persoană care încearcă să îndeplinească un scop
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
wikimedia.org
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Computer
rulează aplicații – software
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
primul joc implementat pe PDP (anii 1960)
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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Computer
rulează aplicații – software
local – eventual, cu rol de client versus
la distanță – e.g., solicită servicii de la server(e)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Interaction
“dialog” între om și calculator
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
Interacțiunea dintre utilizator(i) şi software se realizează via o interfață (user interface)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Interacțiunea dintre utilizator(i) şi software se realizează via o interfață (user interface)
API (Application Programming Interface) versus
UI (User Interface)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Tipuri de interfețe
convențională (clasică) – e.g., desktop
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Graficon (Douglas Engelbart, 1963)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Tipuri de interfete
convențională (clasică) – e.g., desktop
paradigma WIMP (Window Icon Menu Pointer) interacțiune via tastatură & mouse + alte dispozitive reprezentări (abstracte) grafice: raster vs. vectorial
suport oferite de nucleul SO vs. desktop system multi-tasking
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
human-computer interaction
Bryce (Kai Krause, 1997)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Tipuri de interfețe
interfața Web
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
human-computer interaction
280slides (2010) sistemul WorldWideWeb (Tim Berners-Lee, ~1990) www.w3.org/History/1989/proposal.html
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Tipuri de interfețe
interfața Web browser – interacțiune limitată via controale (X)HTML
hipertext/hipermedia RIA (Rich Internet Applications): Flash, Silverlight, HTML5 interacțiune facilitată de transfer (a)sincron: Ajax/Comet
recurgerea la standarde deschise audiență globală
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
human-computer interaction
wireframe.cc (2013)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Tipuri de interfețe
interacțiune facilitată de un dispozitiv mobil
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Tipuri de interfețe
interacțiune facilitată de un dispozitiv mobil
resurse/facilități limitate: rezoluție, memorie, I/O, energie etc.
mono-tasking vs. multi-tasking off-line vs. on-line
servicii bazate pe context (context awareness) model diferit de businessapp-stores
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
provocare: proiectarea interacțiunii în contextul multi-device UI
responsive design
www.punchcut.com/perspectives
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Tipuri de interfețe
interfața naturală
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Tipuri de interfețe
interfața naturală
paradigme noi de interacțiune + noi așteptări interfețe haptice, bazate pe gesturi, vocale, locomotorii
augmented and virtual reality physical & wearable computing
ambient intelligence – AmI
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
Interfaţa – desktop, Web,… – cu utilizatorul
parte a aplicației – desktop, Web, miniaturală,… – care permite utilizatorilor să-și exprime intențiile de operare asupra software-ului și să interpreteze
rezultatele acțiunilor efectuate de mașină
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
human-computer interaction
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Interfaţa – desktop, Web,… – cu utilizatorul
percepută nu doar ca parte vizuală a software-ului
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Interfaţa – desktop, Web,… – cu utilizatorul
percepută nu doar ca parte vizuală a software-ului
din punctul de vedere al utilizatorului, reprezintă întregul sistem – aplicația per se
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Interfaţa – desktop, Web,… – cu utilizatorul
utilitate (utility)
oferirea facilităților dorite de utilizator
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Interfaţa – desktop, Web,… – cu utilizatorul
utilizabilitate (usability)
cât de ușor și de plăcut pot fi folosite facilitățile?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Interfaţa – desktop, Web,… – cu utilizatorul
utilă (useful)
usability + utility
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Oricine utilizează un instrument (software) o face cu o motivație
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
găsirea unei entități: informație, obiect, utilizator etc.
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
(auto-)învățare/instruire
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
realizarea unui proces – e.g., tranzacție
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
interacțiuni sociale – la nivel real și/sau virtual
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
crearea unui artefact: însemnare, imagine, articol, soluție de design, cod-sursă,…
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
divertisment propriu şi/sau la nivel de grup (comunitate)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
UX (User Experience)
modul de percepție a produsului/serviciului de către persoanele care-l folosesc și plăcerea/satisfacția înregistrată
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Context
http://garrettdimon.com/pages/improving_interface_design
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
UX (User Experience)
“Every product that is used by someone has a user experience: newspapers, ketchup bottles,
reclining armchairs, cardigan sweaters.”
James Jesse Garrett, 2003
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
UX (User Experience)
experience = expectationuser is satisfied
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
UX (User Experience)
experience > expectationuser is delighted
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
UX (User Experience)
experience < expectationuser is dissatisfied
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
www.buigallery.com
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
UX în contextul interacțiunii cu dispozitive mobile
de vizitat și http://smallsurfaces.com/
studiu de caz
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Punerea problemei
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
interactiune web
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Categorii primare de interacțiuni (la nivel mobil) Application Centric
Activity Centric Timeline Centric
Context (Location) Centric Process/Task Centric
Emotion Centric People/Identity Centric
Rahul Sen, 2010: http://tinyurl.com/23586xg
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Necesitatea organizării conținutului (datelor) prezentat(e) utilizatorilor
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Necesitatea organizării conținutului (datelor) prezentat(e) utilizatorilor
IA – Information Architecture
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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
IA – Information Architecture
context: data visualization
visual representation
infographics
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
de la vizualizarea datelor la infografice (Alecsandru Grigoriu, Mozilla Labs – Open Data Visualization, 2010)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Ce aspecte vizează proiectarea interacțiunii cu utilizatorul?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Interaction Design facilitarea interacțiunilor dintre oameni
via produse & servicii (software)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Interaction Design facilitarea interacțiunilor dintre oameni
via produse & servicii (software)
are o natură contextuală
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Interaction Design facilitarea interacțiunilor dintre oameni
via produse & servicii (software)
existența a numeroase mijloace & metodologii
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Interaction Design facilitarea interacțiunilor dintre oameni
via produse & servicii (software)
caracter aplicativ
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Interaction Design facilitarea interacțiunilor dintre oameni
via produse & servicii (software)
nu trebuie să implice direct calculatoarele
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
“Interzis virajul la dreapta?” sau
“Mergi la dreapta, nu la stânga?”
www.baddesigns.com
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Interaction Design facilitarea interacțiunilor dintre oameni
via produse & servicii (software)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Interaction Design facilitarea interacțiunilor dintre oameni
via produse & servicii (software)
focalizare spre utilizatori (user centered design)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Interaction Design facilitarea interacțiunilor dintre oameni
via produse & servicii (software)
uzual, există alternative de proiectare
exemplu: diverse maniere de afișare a datelor
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
www.veen.com/nextgen.pdf
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Interaction Design facilitarea interacțiunilor dintre oameni
via produse & servicii (software)
inovare + prototipizare
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
exemplu: interacțiune cu dispozitive Arduino
Ștefan Negru
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Interaction Design facilitarea interacțiunilor dintre oameni
via produse & servicii (software)
caracter colaborativ și de mediere (e.g., a constrângerilor)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Interaction Design facilitarea interacțiunilor dintre oameni
via produse & servicii (software)
crearea de soluții specifice – deseori, unice
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
interactiune web
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Cum am caracteriza interacțiunea Web?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Aplicații (Web) sisteme software complexe, în evoluție permanentă
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
arhitectura tradițională a unei aplicații Web
a se revedea cursul “Tehnologii Web” tinyurl.com/tehnologii-web
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Uzual, implică trei strate (3-tier application)
Internet (Web)
Client Server de aplicații Stocare (interface) (application) (persistence)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Sponge / Database
Jelly / Business Logic
Custard / Page Logic
Cream / Markup
Fruit / Presentation
C. Henderson, “Scalable Web Architectures”, Web 2.0 Expo, 2007: iamcal.com/talks/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Sponge / Database
Jelly / Business Logic
Custard / Page Logic
Cream / Markup
Fruit / Presentation
C. Henderson, “Scalable Web Architectures”, Web 2.0 Expo, 2007: iamcal.com/talks/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Aplicație Web = Interfață + Conținut (Date) + Program
mitul 1: cea mai importantă este interfața mitul 2: cel mai important este programul mitul 3: cele mai importante sunt datele
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Aplicație Web = Interfață + Conținut (Date) + Program
mitul 1: cea mai importantă este interfața mitul 2: cel mai important este programul mitul 3: cele mai importante sunt datele
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Aplicație Web = Interfață + Conținut (Date) + Program
mitul 1: cea mai importantă este interfața mitul 2: cel mai important este programul mitul 3: cele mai importante sunt datele
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Aplicație Web = Interfață + Conținut (Date) + Program
mitul 1: cea mai importantă este interfața mitul 2: cel mai important este programul mitul 3: cele mai importante sunt datele
fapt: sunt importante toate!
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Realitate
multitudinea mijloacelor de interacțiune cu utilizatorul
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Realitate
suportul oferit de hardware: procesor, video, audio, acces la rețea,…
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Realitate
proliferarea interacțiunilor naturale, mai ales via dispozitive mobile ori senzori
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Realitate
creșterea masei de utilizatori, având așteptări tot mai mari din partea software-ului
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Realitate
neadaptare la cerințele de tip business
development vs. marketing vs. management
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Realitate
lipsa funcționalității
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Realitate
calitatea precară a aplicației
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Ce tipuri de aplicații Web există?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Centrate pe documente Interactive Tranzacționale Colaborative Orientate spre portaluri De tip ubicuu Web social Web semantic
evoluția în timp a complexității
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Centrate pe documente – document centric
conținut/pagini static(e): situri de companii, personale
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
Interactive
expoziții virtuale situri de știri
sisteme de facilitare a călătoriilor (e-travel) chioșcuri informative
…
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
Tranzacționale
online banking soluții B2B (business-to-business)
fluxuri de activități (workflow-uri)
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
Colaborative
tele-conferințe Web aplicații Web de tip wiki
servicii e-learning aplicații Web peer-to-peer
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
Orientate spre portaluri
localizare unitară a informațiilor tehnice, de afaceri, guvernamentale,…
specie: Web-ul cetățenesc
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
De tip ubicuu
servicii bazate pe locația utilizatorului, disponibile pe mai multe plaforme: desktop, telefon mobil, tabletă, TV,…
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
Web social
mediatizare (syndication) spații de lucru virtuale
filtrare colaborativă divertisment social
social (game) computing
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
Web semantic (Web of Data)
modelarea cunoștințelor pentru a fi “înțelese” de calculatoare
dateinformațiicunoștințe
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
Aspecte specifice aplicațiilor Web
lipsa unei structuri reale (tangibile)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Aspecte specifice aplicațiilor Web
multi-disciplinaritate
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Aspecte specifice aplicațiilor Web
necunoașterea publicului-țintă real
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Aspecte specifice aplicațiilor Web
volatilitatea cerințelor & constrângerilor
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Aspecte specifice aplicațiilor Web
mediu de operare impredictibil
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Aspecte specifice aplicațiilor Web
impactul sistemelor traditionale (legacy)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Aspecte specifice aplicațiilor Web
aspecte calitative diferite
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Aspecte specifice aplicațiilor Web
lipsa de experiență a publicului (audienței)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Situl Web al unui muzician – cerințe:
“To maintain and develop lasting relationships with fans of Tyler’s music. In addition to being visually and
emotionally appealing and appropriate to Tyler’s fan base, the site should be a reliable source for current information
on Tyler’s activities and provide consistently updated audio and visual stimuli that encourage repeated visits
from fans.”
discuție (pentru acasă)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
episodul viitor: arhitectura navigatorului Web
