CLIW 2014—2015 (1/12): Interacţiune Web: concepte, context, studii de caz

Dr.SabinBuragawww.purl.org/net/busaco
Dezvoltarea aplicațiilor Web
la nivel de client
⍝
interacțiune Web – HCI, UI, UX

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

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

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

fotografii preluate de la wikimedia.org

Computer
rulează aplicații – software

primul joc implementat pe PDP (anii 1960)

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

Interaction
„dialog” între om și calculator

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

Interacțiunea dintre utilizator(i) și software
se realizează via o interfață (user interface)
API (Application Programming Interface)
versus
UI (User Interface)

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

Graficon (Douglas Engelbart, 1963)

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

human-computer interaction
Bryce (Kai Krause, 1997)

interfața Web

280slides (2010)sistemul WorldWideWeb (Tim Berners-Lee, ~1990)
25 de ani de Web – www.slideshare.net/busaco/25-de-ani-de-web

interfața Web
browser – interacțiune limitată via controale (X)HTML
hipertext/hipermedia
RIA (Rich Internet Applications): în prezent, HTML5
interacțiune facilitată de transfer (a)sincron: Ajax/Comet
recurgerea la standarde deschise
audiență globală

wireframe.cc (2014)

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

provocare:
proiectarea interacțiunii în contextul multi-device UI
responsive design
www.punchcut.com/perspectives

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
emoție & persuasiune

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ă

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)

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

Context
http://garrettdimon.com/pages/improving_interface_design

“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

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

Punerea problemei

interactiune web

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

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

Necesitatea organizării
conținutului (datelor) prezentat(e) utilizatorilor

IA – Information Architecture

IA – Information Architecture
context: vizualizarea datelor (data visualization)
How Music Travels
http://www.thomson.co.uk/blog/wp-content/uploads/infographic/interactive-music-map/

de la reprezentări vizuale la infografice
(Alecsandru Grigoriu – Open Data Visualization, Mozilla Labs, 2010)

Ce aspecte vizează
proiectarea interacțiunii cu utilizatorul?

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

Interaction Design
are o natură contextuală

Interaction Design
existența a numeroase mijloace & metodologii

Interaction Design
caracter aplicativ

Interaction Design
nu trebuie să implice direct calculatoarele

„Interzis virajul la dreapta?”
sau
„Mergi la dreapta, nu la stânga?”
www.baddesigns.com

Interaction Design
focalizare spre utilizatori (user centered design)

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

www.veen.com/nextgen.pdf

Interaction Design
inovare + prototipizare

exemplu: interacțiune cu dispozitive Arduino
Ștefan Negru

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

Interaction Design
crearea de soluții specifice – deseori, unice

interactiune web
domenii înrudite (Dan Saffer, 2006)

Cum am caracteriza interacțiunea Web?

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

arhitectura tradițională a unei aplicații Web
a se revedea cursul „Tehnologii Web”
tinyurl.com/tehnologii-web

Uzual, implică trei strate (3-tier application)
Internet
(Web)
Client Server de aplicații Stocare
(interface) (application) (persistence)

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/

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!

Realitate
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

Ce tipuri de aplicații Web există?

Centrate pe documente
Interactive
Tranzacționale
Colaborative
Orientate spre portaluri
De tip ubicuu
Web social
Web semantic
evoluția în timp
a complexității

Centrate pe documente – document centric
conținut/pagini static(e):
situri de companii, personale

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

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

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

Orientate spre portaluri
localizare unitară a informațiilor
tehnice, de afaceri, guvernamentale,…
specie: Web-ul cetățenesc

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

Web social
mediatizare (syndication)
filtrare colaborativă pe baza tagging-ului
spații de lucru virtuale
divertisment social
social (game) computing

Web semantic (Web of Data)
modelarea cunoștințelor
pentru a fi „înțelese” de calculatoare
dateinformațiicunoștințe

Aspecte specifice aplicațiilor Web
lipsa unei structuri reale (tangibile)

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:
“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ă)

episodul viitor: arhitectura navigatorului Web

CLIW 2014—2015 (1/12): Interacţiune Web: concepte, context, studii de caz

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (16)

Semelhante a CLIW 2014—2015 (1/12): Interacţiune Web: concepte, context, studii de caz

Semelhante a CLIW 2014—2015 (1/12): Interacţiune Web: concepte, context, studii de caz (20)

Mais de Sabin Buraga

Mais de Sabin Buraga (20)

CLIW 2014—2015 (1/12): Interacţiune Web: concepte, context, studii de caz