cliw 2015-2016 (1/13) interacțiune web: concepte, context, studii de caz

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Dezvoltarea aplicațiilor Webla nivel de client

⍝interacțiune Web – HCI, UI, UX

Dr.

Sab

in B

ura

ga


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

Eugene Ionesco

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


Human

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

Dr.

Sab

in B

ura

ga


fotografii preluate de la wikimedia.org

Dr.

Sab

in B

ura

ga


Computer

rulează aplicații – software

Dr.

Sab

in B

ura

ga


primul joc implementat pe PDP (anii 1960)

Dr.

Sab

in B

ura

ga


Dr.

Sab

in B

ura

ga


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

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

Dr.

Sab

in B

ura

ga


Dr.

Sab

in B

ura

ga


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


Interaction

„dialog” între om și calculator

Dr.

Sab

in B

ura

ga


Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


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


Aplicații native

instalabile pe un calculator/dispozitiv (mobil)

rulate grație unui mediu de execuție– uzual, oferit de un sistem de operare

(e.g., Android, iOS, Linux, Windows,…) –pe un procesor real/virtual

Dr.

Sab

in B

ura

ga


Graficon (Douglas Engelbart, 1963)

Dr.

Sab

in B

ura

ga


Aplicații native

prezintă una/mai multe modalități de interacțiune cu utilizatorul:

linia de comandă (CLI – Command Line Interface)manipulare directă: WIMP (Window Icon Menu Pointer)naturală – e.g., gesturi, voce, mișcare, ubicuitate, 3D,…

Dr.

Sab

in B

ura

ga


Dr.

Sab

in B

ura

ga


Aplicații native

pot recurge la platforme/tehnologii/limbaje proprietare și/sau libere

pot fi utilizate conform unei licențe(proprietare sau deschise)

Dr.

Sab

in B

ura

ga


detalii despre licențele de utilizare a software-ului/datelor la tldrlegal.com

Dr.

Sab

in B

ura

ga


Aplicații Web

colecție interconectată de pagini Webcu conținut generat dinamic,

oferind o funcționalitate specifică

Dr.

Sab

in B

ura

ga


Aplicații Web

prezintă o interfață cu utilizatorul exploatabilă la nivel de client (i.e. navigator Web)

recurg la standarde/formate de date deschise(HTTP, URL, HTML, CSS, JSON, SVG, XML, RDF,…)

Dr.

Sab

in B

ura

ga


human-computer interaction

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


Aplicații Web

interfața Web

browser – interacțiune limitată via controale HTMLhipertext/hipermedia

RIA (Rich Internet Applications): în prezent, HTML5interacțiune facilitată de transfer (a)sincron: Ajax et al.

audiență globală

Dr.

Sab

in B

ura

ga


Dr.

Sab

in B

ura

ga


provocare: proiectarea interacțiunii pentru dispozitive multiple

design (Web) responsiv – responsive (Web) design

Dr.

Sab

in B

ura

ga


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


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

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

Dr.

Sab

in B

ura

ga



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



utilitate (utility)

oferirea facilităților dorite de utilizator

Dr.

Sab

in B

ura

ga



utilizabilitate (usability)

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

Dr.

Sab

in B

ura

ga



utilă (useful)

usability + utility

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


(auto-)învățareși/sau

instruire

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


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


Context

http://garrettdimon.com/pages/improving_interface_design

Dr.

Sab

in B

ura

ga



“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



experience = expectationuser is satisfied

Dr.

Sab

in B

ura

ga


Dr.

Sab

in B

ura

ga



experience > expectationuser is delighted

Dr.

Sab

in B

ura

ga


Dr.

Sab

in B

ura

ga



experience < expectationuser is dissatisfied

Dr.

Sab

in B

ura

ga


alte exemplificări la www.webpagesthatsuck.com/

Dr.

Sab

in B

ura

ga


Experiența utilizatorului (UX)în contextul interacțiunii cu dispozitivele mobile

studiu de caz

Dr.

Sab

in B

ura

ga


Punerea problemei

Dr.

Sab

in B

ura

ga


interactiune web

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


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

IA – Information Architecture

Dr.

Sab

in B

ura

ga


Dr.

Sab

in B

ura

ga


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


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

Dr.

Sab

in B

ura

ga


Ce aspecte vizeazăproiectarea interacțiunii cu utilizatorul?

Dr.

Sab

in B

ura

ga


Interaction Designfacilitarea interacțiunilor dintre oameni

via produse & servicii (software)

Dr.

Sab

in B

ura

ga




are o natură contextuală

Dr.

Sab

in B

ura

ga




existența a numeroase mijloace și metodologii

Dr.

Sab

in B

ura

ga




caracter aplicativ

Dr.

Sab

in B

ura

ga




nu trebuie să implice direct calculatoarele

Dr.

Sab

in B

ura

ga


„Interzis virajul la dreapta?”sau

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

www.baddesigns.com

Dr.

Sab

in B

ura

ga




Dr.

Sab

in B

ura

ga




focalizare spre utilizatori (user centered design)

Dr.

Sab

in B

ura

ga




uzual, există alternative de proiectare

exemplu:diverse maniere de afișare a datelor

Dr.

Sab

in B

ura

ga


www.veen.com/nextgen.pdf

Dr.

Sab

in B

ura

ga




inovare + prototipizare

Dr.

Sab

in B

ura

ga


exemplu: interacțiune cu dispozitive Arduino

Ștefan Negru

Dr.

Sab

in B

ura

ga




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

Dr.

Sab

in B

ura

ga




crearea de soluții specifice – deseori, unice

Dr.

Sab

in B

ura

ga


interactiune web

domenii înrudite (Dan Saffer, 2006)

Dr.

Sab

in B

ura

ga


(în loc de) pauză

http://www.bonkersworld.net/mobile-relationship/

Dr.

Sab

in B

ura

ga


Cum am caracteriza interacțiunea Web?

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


arhitectura tradițională a unei aplicații Web

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

Dr.

Sab

in B

ura

ga


aplicație Web = interfață + program + conținut (date)trei strate (3-tier application)

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

Internet(Web)

Dr.

Sab

in B

ura

ga


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


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


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

fapt: sunt importante toate!

Dr.

Sab

in B

ura

ga


Realitate

multitudinea mijloacelor de interacțiune cu utilizatorul

Dr.

Sab

in B

ura

ga


Realitate

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

Dr.

Sab

in B

ura

ga


Realitate

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

(IoT – Internet of Things)

Dr.

Sab

in B

ura

ga


Realitate

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

Dr.

Sab

in B

ura

ga


Realitate

neadaptare la cerințele de tip business

development vs. marketing vs. management

Dr.

Sab

in B

ura

ga


Realitate

lipsa funcționalității

Dr.

Sab

in B

ura

ga


Realitate

calitatea precară a aplicației

Dr.

Sab

in B

ura

ga


Ce tipuri de aplicații Web există?

Dr.

Sab

in B

ura

ga


Centrate pe documenteInteractiveTranzacționaleColaborativeOrientate spre portaluriDe tip ubicuuWeb socialWeb semantic

evoluția în timpa complexității

Dr.

Sab

in B

ura

ga


Centrate pe documente – document centric

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

Dr.

Sab

in B

ura

ga


Dr.

Sab

in B

ura

ga


Interactive

expoziții virtualesituri de știri

sisteme oferind servicii – e.g., călătorii (e-travel)chioșcuri informative

participare la evenimente online…

Dr.

Sab

in B

ura

ga


Dr.

Sab

in B

ura

ga


Tranzacționale

soluții vizând afacerile online: B2B (business-to-business), B2C (business-to-consumer),

C2C (consumer-to-consumer) etc.exemple: e-banking, comerț electronic, imobiliare,…

fluxuri de activități (workflow-uri)

…și altele

Dr.

Sab

in B

ura

ga


Dr.

Sab

in B

ura

ga


Colaborative

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

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

Dr.

Sab

in B

ura

ga


Dr.

Sab

in B

ura

ga


Orientate spre portaluri

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

specie: Web-ul cetățenesc

Dr.

Sab

in B

ura

ga


Dr.

Sab

in B

ura

ga


De tip ubicuu

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

computer clasic, telefon mobil, ceas, tabletă, TV,…

Dr.

Sab

in B

ura

ga


exemplificare: Pockethttps://getpocket.com/

Dr.

Sab

in B

ura

ga


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


Dr.

Sab

in B

ura

ga


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


Dr.

Sab

in B

ura

ga


Situl Web al unui muzician – cerințe:

“To maintain & 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/visual stimuli that encourage repeated visits

from fans.”

discuție (pentru acasă)

Dr.

Sab

in B

ura

ga


episodul viitor: arhitectura navigatorului Web