Ss1

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)

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

Graficon (Douglas Engelbart, 1963)

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,…

Aplicații native
pot recurge la platforme/tehnologii/limbaje
proprietare și/sau libere
pot fi utilizate conform unei licențe
(proprietare sau deschise)

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

Aplicații Web
colecție interconectată de pagini Web
cu conținut generat dinamic,
oferind o funcționalitate specifică

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,…)

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

Aplicații Web
interfața Web
browser – interacțiune limitată via controale HTML
hipertext/hipermedia
RIA (Rich Internet Applications): în prezent, HTML5
interacțiune facilitată de transfer (a)sincron: Ajax et al.
audiență globală

provocare:
proiectarea interacțiunii pentru dispozitive multiple
design (Web) responsiv – responsive (Web) design

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
și/sau
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

alte exemplificări la
www.webpagesthatsuck.com/

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

Punerea problemei

interactiune web

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 și 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)

(în loc de) pauză
http://www.bonkersworld.net/mobile-relationship/

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

aplicație Web = interfață + program + conținut (date)
trei strate (3-tier application)
Client Server de aplicații Stocare
(interface) (application) (persistence)
Internet
(Web)

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
(IoT – Internet of Things)

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 oferind servicii – e.g., călătorii (e-travel)
chioșcuri informative
participare la evenimente online
…

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

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:
computer clasic, telefon mobil, ceas, tabletă, TV,…

exemplificare: Pocket
https://getpocket.com/

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

Situl Web al unui muzician – cerințe:
“To maintain & 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/visual stimuli that encourage repeated visits
from fans.”
discuție (pentru acasă)

episodul viitor: arhitectura navigatorului Web

Ss1

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (13)

Semelhante a Ss1

Semelhante a Ss1 (19)

Ss1