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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Dezvoltarea aplicațiilor Webla nivel de client

⍝interacțiune Web – HCI, UI, UX

Dr.

Sab

in B

ura

ga


co

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

Eugene Ionesco

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

Human

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

Dr.

Sab

in B

ura

ga


co

fotografii preluate de la wikimedia.org

Dr.

Sab

in B

ura

ga


co

Computer

rulează aplicații – software

Dr.

Sab

in B

ura

ga


co

primul joc implementat pe PDP (anii 1960)

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

http://www.habbo.com/news/sneakpeek.html


Dr.

Sab

in B

ura

ga


co



Dr.

Sab

in B

ura

ga


co



Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

Computer

rulează aplicații – i.e. software

local – eventual, cu rol de clientversus

la distanță – e.g., solicită serviciide la server(e) ori alte entități

Dr.

Sab

in B

ura

ga


co

Interaction

„dialog” între om și calculator

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

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

API (Application Programming Interface)versus

UI (User Interface)

Dr.

Sab

in B

ura

ga


co

Tipuri de interfețe

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

Dr.

Sab

in B

ura

ga


co

Graficon (Douglas Engelbart, 1963)

Dr.

Sab

in B

ura

ga


co

Tipuri de interfete

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

paradigma WIMP (Window Icon Menu Pointer)interacțiune via tastatură & mouse + alte dispozitivereprezentări (abstracte) grafice: raster vs. vectorial

suport oferite de nucleul SO vs. desktop systemmulti-tasking

Dr.

Sab

in B

ura

ga


co

human-computer interaction

Bryce (Kai Krause, 1997)

Dr.

Sab

in B

ura

ga


co


interfața Web

Dr.

Sab

in B

ura

ga


co


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

Dr.

Sab

in B

ura

ga


co


interfața Webbrowser – interacțiune limitată via controale (X)HTML

hipertext/hipermediaRIA (Rich Internet Applications): în prezent, HTML5

interacțiune facilitată de transfer (a)sincron: Ajax/Cometrecurgerea la standarde deschise

audiență globală

Dr.

Sab

in B

ura

ga


co

wireframe.cc (2014)

Dr.

Sab

in B

ura

ga


co


interacțiune facilitată de un dispozitiv mobil

Dr.

Sab

in B

ura

ga


co


interacțiune facilitată de un dispozitiv mobil

resurse/facilități limitate:rezoluție, memorie, I/O, energie etc.

mono-tasking vs. multi-taskingoff-line vs. on-line

servicii bazate pe context (context awareness)model diferit de businessapp-stores

Dr.

Sab

in B

ura

ga


co

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

responsive design

www.punchcut.com/perspectives

Dr.

Sab

in B

ura

ga


co


interfața naturală

Dr.

Sab

in B

ura

ga


co


interfața naturală

paradigme noi de interacțiune + noi așteptăriinterfețe haptice, bazate pe gesturi, vocale, locomotorii

augmented and virtual realityphysical & wearable computing

ambient intelligence – AmIemoție & persuasiune

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

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

parte a aplicației – desktop, Web, miniaturală,… –care permite utilizatorilor să-și exprime intențiilede operare asupra software-ului și să interpreteze

rezultatele acțiunilor efectuate de mașină

Dr.

Sab

in B

ura

ga


co


Dr.

Sab

in B

ura

ga


co

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

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

Dr.

Sab

in B

ura

ga


co


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


co


utilitate (utility)

oferirea facilităților dorite de utilizator

Dr.

Sab

in B

ura

ga


co


utilizabilitate (usability)

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

Dr.

Sab

in B

ura

ga


co


utilă (useful)

usability + utility

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

(auto-)învățare/instruire

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

UX (User Experience)

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

Dr.

Sab

in B

ura

ga


co

Context

http://garrettdimon.com/pages/improving_interface_design

Dr.

Sab

in B

ura

ga


co


“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


co


experience = expectationuser is satisfied

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co


experience > expectationuser is delighted

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co


experience < expectationuser is dissatisfied

Dr.

Sab

in B

ura

ga


co

www.buigallery.com

Dr.

Sab

in B

ura

ga


co

UX în contextul interacțiunii cu dispozitive mobile

studiu de caz

Dr.

Sab

in B

ura

ga


co

Punerea problemei

Dr.

Sab

in B

ura

ga


co

interactiune web

Dr.

Sab

in B

ura

ga


co

Categorii primare de interacțiuni (la nivel mobil)Application Centric

Activity CentricTimeline Centric

Context (Location) CentricProcess/Task Centric

Emotion CentricPeople/Identity Centric

Rahul Sen, 2010: http://tinyurl.com/23586xg

Dr.

Sab

in B

ura

ga


co

Necesitatea organizăriiconținutului (datelor) prezentat(e) utilizatorilor

Dr.

Sab

in B

ura

ga


co

Necesitatea organizăriiconținutului (datelor) prezentat(e) utilizatorilor

IA – Information Architecture

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

IA – Information Architecturecontext: vizualizarea datelor (data visualization)

How Music Travelshttp://www.thomson.co.uk/blog/wp-content/uploads/infographic/interactive-music-map/

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

Ce aspecte vizeazăproiectarea interacțiunii cu utilizatorul?

Dr.

Sab

in B

ura

ga


co

Interaction Designfacilitarea interacțiunilor dintre oameni

via produse & servicii (software)

Dr.

Sab

in B

ura

ga


co



are o natură contextuală

Dr.

Sab

in B

ura

ga


co



existența a numeroase mijloace & metodologii

Dr.

Sab

in B

ura

ga


co



caracter aplicativ

Dr.

Sab

in B

ura

ga


co



nu trebuie să implice direct calculatoarele

Dr.

Sab

in B

ura

ga


co

„Interzis virajul la dreapta?”sau

„Mergi la dreapta, nu la stânga?”

www.baddesigns.com

Dr.

Sab

in B

ura

ga


co



Dr.

Sab

in B

ura

ga


co



focalizare spre utilizatori (user centered design)

Dr.

Sab

in B

ura

ga


co



uzual, există alternative de proiectare

exemplu:diverse maniere de afișare a datelor

Dr.

Sab

in B

ura

ga


co

www.veen.com/nextgen.pdf

Dr.

Sab

in B

ura

ga


co



inovare + prototipizare

Dr.

Sab

in B

ura

ga


co

exemplu: interacțiune cu dispozitive Arduino

Ștefan Negru

Dr.

Sab

in B

ura

ga


co



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

Dr.

Sab

in B

ura

ga


co



crearea de soluții specifice – deseori, unice

Dr.

Sab

in B

ura

ga


co

interactiune web

domenii înrudite (Dan Saffer, 2006)

Dr.

Sab

in B

ura

ga


co

Cum am caracteriza interacțiunea Web?

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


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


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


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


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


co

Aplicație Web = Interfață + Conținut (Date) + Program

mitul 1: cea mai importantă este interfațamitul 2: cel mai important este programulmitul 3: cele mai importante sunt datele

Dr.

Sab

in B

ura

ga


co



Dr.

Sab

in B

ura

ga


co



Dr.

Sab

in B

ura

ga


co



fapt: sunt importante toate!

Dr.

Sab

in B

ura

ga


co

Realitate

multitudinea mijloacelor de interacțiune cu utilizatorul

Dr.

Sab

in B

ura

ga


co

Realitate

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

Dr.

Sab

in B

ura

ga


co

Realitate

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

Dr.

Sab

in B

ura

ga


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


co

Realitate

neadaptare la cerințele de tip business

development vs. marketing vs. management

Dr.

Sab

in B

ura

ga


co

Realitate

lipsa funcționalității

Dr.

Sab

in B

ura

ga


co

Realitate

calitatea precară a aplicației

Dr.

Sab

in B

ura

ga


co

Ce tipuri de aplicații Web există?

Dr.

Sab

in B

ura

ga


co

Centrate pe documenteInteractiveTranzacționaleColaborativeOrientate spre portaluriDe tip ubicuuWeb socialWeb semantic

evoluția în timpa complexității

Dr.

Sab

in B

ura

ga


co

Centrate pe documente – document centric

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

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

Interactive

expoziții virtualesituri de știri

sisteme de facilitare a călătoriilor (e-travel)chioșcuri informative

…

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

Tranzacționale

online bankingsoluții B2B (business-to-business)

fluxuri de activități (workflow-uri)

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

Colaborative

tele-conferințe Webaplicații Web de tip wiki

servicii e-learningaplicații Web peer-to-peer

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

Orientate spre portaluri

localizare unitară a informațiilortehnice, de afaceri, guvernamentale,…

specie: Web-ul cetățenesc

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

De tip ubicuu

servicii bazate pe locația utilizatorului, disponibile pe mai multe plaforme:

desktop, telefon mobil, ceas, tabletă, TV,…

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

Web social

mediatizare (syndication)filtrare colaborativă pe baza tagging-ului

spații de lucru virtualedivertisment social

social (game) computing

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

Web semantic (Web of Data)

modelarea cunoștințelorpentru a fi „înțelese” de calculatoare

dateinformațiicunoștințe

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

Aspecte specifice aplicațiilor Web

lipsa unei structuri reale (tangibile)

Dr.

Sab

in B

ura

ga


co


multi-disciplinaritate

Dr.

Sab

in B

ura

ga


co


necunoașterea publicului-țintă real

Dr.

Sab

in B

ura

ga


co


volatilitatea cerințelor + constrângerilor

Dr.

Sab

in B

ura

ga


co


mediu de operare impredictibil

Dr.

Sab

in B

ura

ga


co


impactul sistemelor traditionale (legacy)

Dr.

Sab

in B

ura

ga


co


aspecte calitative diferite

Dr.

Sab

in B

ura

ga


co


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

Dr.

Sab

in B

ura

ga


co

Situl Web al unui muzician – cerințe:

“To maintain and develop lasting relationships with fansof 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 updatedaudio and visual stimuli that encourage repeated visits

from fans.”

discuție (pentru acasă)

Dr.

Sab

in B

ura

ga


co

episodul viitor: arhitectura navigatorului Web

Technology

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