Dezvoltarea aplicaţiilor Web la nivel de client (cursul #1): Interacţiune Web: concepte, context, studii de caz

Dr. Sabin Buragawww.purl.org/net/busaco

interacțiune Web – HCI, UI, UX

Eugene Ionesco


“It is not the answer that enlightens,
but the question.”


Care sunt mijloacele de interacțiune
dintre utilizatori și o aplicație?

persoană care încearcă să îndeplinească un scop


Human

wikimedia.org


rulează aplicații – software


Computer


primul joc implementat pe PDP (anii 1960)

rulează aplicații – software
local – eventual, cu rol de client
versus
la distanță – e.g., solicită servicii de la server(e)


Computer

“dialog” între om și calculator


Interaction


Interacțiunea dintre utilizator(i) şi software
se realizează via o interfață (user interface)

API (Application Programming Interface)
versus
UI (User Interface)


Interacțiunea dintre utilizator(i) şi software
se realizează via o interfață (user interface)

convențională (clasică) – e.g., desktop


Tipuri de interfețe

Graficon (Douglas Engelbart, 1963)

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


Tipuri de interfete


human-computer interaction

Bryce (Kai Krause, 1997)

interfața Web





280slides (2010)
sistemul WorldWideWeb (Tim Berners-Lee, ~1990)
www.w3.org/History/1989/proposal.html

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ă



wireframe.cc (2013)

interacțiune facilitată de un dispozitiv mobil



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 businessapp-stores



www.punchcut.com/perspectives


provocare:
proiectarea interacțiunii în contextul multi-device UI
responsive design

interfața naturală



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




Richard Harper et al. (Eds.), Being Human, Microsoft Research, 2008

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ă


Interfaţa – desktop, Web,… – cu utilizatorul

percepută nu doar ca parte vizuală a software-ului



percepută nu doar ca parte vizuală a software-ului
din punctul de vedere al utilizatorului,
reprezintă întregul sistem – aplicația per se



utilitate (utility)
oferirea facilităților dorite de utilizator



utilizabilitate (usability)
cât de ușor și de plăcut pot fi folosite facilitățile?



utilă (useful)
usability + utility




Oricine utilizează un instrument (software)
o face cu o motivație


găsirea unei entități: informație, obiect, utilizator etc.

(auto-)învățare/instruire


realizarea unui proces – e.g., tranzacție


interacțiuni sociale – la nivel real și/sau virtual


crearea unui artefact:
însemnare, imagine, articol, soluție de design, cod-sursă,…


divertisment propriu şi/sau la nivel de grup (comunitate)

modul de percepție a produsului/serviciului
de către persoanele care-l folosesc
și plăcerea/satisfacția înregistrată


UX (User Experience)

http://garrettdimon.com/pages/improving_interface_design


Context

“Every product that is used by someone has
a user experience: newspapers, ketchup bottles,
reclining armchairs, cardigan sweaters.”

James Jesse Garrett, 2003



experience = expectationuser is satisfied



experience > expectationuser is delighted



experience < expectationuser is dissatisfied



www.buigallery.com


studiu de caz
UX în contextul interacțiunii cu dispozitive mobile

de vizitat și http://smallsurfaces.com/


Punerea problemei


interactiune web

Application Centric
Activity Centric
Timeline Centric
Context (Location) Centric
Process/Task Centric
Emotion Centric
People/Identity Centric
Rahul Sen, 2010: http://tinyurl.com/23586xg


Categorii primare de interacțiuni (la nivel mobil)


Necesitatea organizării
conținutului (datelor) prezentat(e) utilizatorilor



IA – Information Architecture


Necesitatea organizării
conținutului (datelor) prezentat(e) utilizatorilor

context:
data visualization
visual representation
infographics


IA – Information Architecture


de la vizualizarea datelor la infografice
(Alecsandru Grigoriu, Mozilla Labs – Open Data Visualization, 2010)


Ce aspecte vizează
proiectarea interacțiunii cu utilizatorul?


Interaction Design
facilitarea interacțiunilor dintre oameni
via produse & servicii (software)

are o natură contextuală


Interaction Design

existența a numeroase mijloace & metodologii


Interaction Design

caracter aplicativ


Interaction Design

nu trebuie să implice direct calculatoarele


Interaction Design

www.baddesigns.com


“Interzis virajul la dreapta?”
sau
“Mergi la dreapta, nu la stânga?”

focalizare spre utilizatori (user centered design)


Interaction Design

uzual, există alternative de proiectare
exemplu:
diverse maniere de afișare a datelor


Interaction Design

www.veen.com/nextgen.pdf

inovare + prototipizare


Interaction Design

Ștefan Negru

exemplu: interacțiune cu dispozitive Arduino

caracter colaborativ
și de mediere (e.g., a constrângerilor)


Interaction Design

crearea de soluții specifice – deseori, unice


Interaction Design


Cum am caracteriza interacțiunea Web?


Aplicații (Web)  sisteme software complexe,
în evoluție permanentă

a se revedea cursul “Tehnologii Web”
tinyurl.com/tehnologii-web


arhitectura tradițională a unei aplicații Web

Internet
(Web)

Client
(interface)

Server de aplicații
Stocare
(application) (persistence)


Uzual, implică trei strate (3-tier application)

Cream / Markup

Custard / Page Logic

Jelly / Business Logic

Sponge / Database

C. Henderson, “Scalable Web Architectures”, Web 2.0 Expo, 2007:
iamcal.com/talks/


Fruit / Presentation


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


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!

multitudinea mijloacelor de interacțiune cu utilizatorul


Realitate

suportul oferit de hardware:
procesor, video, audio, acces la rețea,…


Realitate

proliferarea interacțiunilor naturale,
mai ales via dispozitive mobile ori senzori


Realitate

creșterea masei de utilizatori,
având așteptări tot mai mari din partea software-ului


Realitate

neadaptare la cerințele de tip business
development vs. marketing vs. management


Realitate

lipsa funcționalității


Realitate

calitatea precară a aplicației


Realitate


Ce tipuri de aplicații Web există?

evoluția în timp
a complexității


Centrate pe documente
Interactive
Tranzacționale
Colaborative
Orientate spre portaluri
De tip ubicuu
Web social
Web semantic

conținut/pagini static(e):
situri de companii, personale


Centrate pe documente – document centric

expoziții virtuale
situri de știri
sisteme de facilitare a călătoriilor (e-travel)
chioșcuri informative
…


Interactive

online banking
soluții B2B (business-to-business)
fluxuri de activități (workflow-uri)


Tranzacționale

tele-conferințe Web
aplicații Web de tip wiki
servicii e-learning
aplicații Web peer-to-peer


Colaborative

localizare unitară a informațiilor
tehnice, de afaceri, guvernamentale,…

specie: Web-ul cetățenesc


Orientate spre portaluri

servicii bazate pe locația utilizatorului,
disponibile pe mai multe plaforme:
desktop, telefon mobil, tabletă, TV,…


De tip ubicuu

mediatizare (syndication)
spații de lucru virtuale
filtrare colaborativă
divertisment social

social (game) computing


Web social

modelarea cunoștințelor
pentru a fi “înțelese” de calculatoare

dateinformațiicunoștințe


Web semantic (Web of Data)

lipsa unei structuri reale (tangibile)


Aspecte specifice aplicațiilor Web

multi-disciplinaritate



necunoașterea publicului-țintă real



volatilitatea cerințelor & constrângerilor



mediu de operare impredictibil



impactul sistemelor traditionale (legacy)



aspecte calitative diferite



lipsa de experiență a publicului (audienței)



Situl Web al unui muzician – cerințe:


discuție (pentru acasă)

“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.”


episodul viitor: arhitectura navigatorului Web

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #1): Interacţiune Web: concepte, context, studii de caz

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Dezvoltarea aplicaţiilor Web la nivel de client (cursul #1): Interacţiune Web: concepte, context, studii de caz

Similar a Dezvoltarea aplicaţiilor Web la nivel de client (cursul #1): Interacţiune Web: concepte, context, studii de caz (18)

Más de Sabin Buraga

Más de Sabin Buraga (20)

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #1): Interacţiune Web: concepte, context, studii de caz