Date post: | 13-Apr-2017 |
Category: |
Design |
Upload: | sabin-buraga |
View: | 338 times |
Download: | 0 times |
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
www.purl.org/net/busaco
“It is not the answer that enlightens,but the question.”
Eugene Ionesco
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Care sunt mijloacele de interacțiunedintre utilizatori și o aplicație?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Human
persoană care încearcă să îndeplinească un scop
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
fotografii preluate de la wikimedia.org
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Computer
rulează aplicații – software
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
primul joc implementat pe PDP (anii 1960)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
www.purl.org/net/busaco
Interaction
„dialog” între om și calculator
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interacțiunea dintre utilizator(i) și softwarese realizează via o interfață (user interface)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
www.purl.org/net/busaco
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
www.purl.org/net/busaco
Graficon (Douglas Engelbart, 1963)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
www.purl.org/net/busaco
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
www.purl.org/net/busaco
detalii despre licențele de utilizare a software-ului/datelor la tldrlegal.com
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Aplicații Web
colecție interconectată de pagini Webcu conținut generat dinamic,
oferind o funcționalitate specifică
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
www.purl.org/net/busaco
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
www.purl.org/net/busaco
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
www.purl.org/net/busaco
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
provocare: proiectarea interacțiunii pentru dispozitive multiple
design (Web) responsiv – responsive (Web) design
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
www.purl.org/net/busaco
Interfaţa – desktop, Web,… – cu utilizatorul
percepută nu doar ca parte vizuală a software-ului
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interfaţa – desktop, Web,… – cu utilizatorul
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
www.purl.org/net/busaco
Interfaţa – desktop, Web,… – cu utilizatorul
utilitate (utility)
oferirea facilităților dorite de utilizator
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interfaţa – desktop, Web,… – cu utilizatorul
utilizabilitate (usability)
cât de ușor și de plăcut pot fi folosite facilitățile?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interfaţa – desktop, Web,… – cu utilizatorul
utilă (useful)
usability + utility
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Oricine utilizează un instrument (software)o face cu o motivație
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
găsirea unei entități:informație, obiect, utilizator etc.
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
(auto-)învățareși/sau
instruire
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
realizarea unui proces – e.g., tranzacție
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
interacțiuni sociale – la nivel real și/sau virtual
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
crearea unui artefact:însemnare, imagine, articol, soluție de design, cod-sursă,…
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
divertisment propriu și/sau la nivel de grup (comunitate)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
www.purl.org/net/busaco
Context
http://garrettdimon.com/pages/improving_interface_design
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
UX (User Experience)
“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
www.purl.org/net/busaco
UX (User Experience)
experience = expectationuser is satisfied
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
UX (User Experience)
experience > expectationuser is delighted
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
UX (User Experience)
experience < expectationuser is dissatisfied
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
alte exemplificări la www.webpagesthatsuck.com/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Experiența utilizatorului (UX)în contextul interacțiunii cu dispozitivele mobile
studiu de caz
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Punerea problemei
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
interactiune web
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Necesitatea organizăriiconținutului (datelor) prezentat(e) utilizatorilor
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Necesitatea organizăriiconținutului (datelor) prezentat(e) utilizatorilor
IA – Information Architecture
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
www.purl.org/net/busaco
de la reprezentări vizuale la infografice(Alecsandru Grigoriu – Open Data Visualization, Mozilla Labs, 2010)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Ce aspecte vizeazăproiectarea interacțiunii cu utilizatorul?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interaction Designfacilitarea interacțiunilor dintre oameni
via produse & servicii (software)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interaction Designfacilitarea interacțiunilor dintre oameni
via produse & servicii (software)
are o natură contextuală
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interaction Designfacilitarea interacțiunilor dintre oameni
via produse & servicii (software)
existența a numeroase mijloace și metodologii
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interaction Designfacilitarea interacțiunilor dintre oameni
via produse & servicii (software)
caracter aplicativ
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interaction Designfacilitarea interacțiunilor dintre oameni
via produse & servicii (software)
nu trebuie să implice direct calculatoarele
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
„Interzis virajul la dreapta?”sau
„Mergi la dreapta, nu la stânga?”
www.baddesigns.com
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interaction Designfacilitarea interacțiunilor dintre oameni
via produse & servicii (software)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interaction Designfacilitarea interacțiunilor dintre oameni
via produse & servicii (software)
focalizare spre utilizatori (user centered design)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interaction Designfacilitarea interacțiunilor dintre oameni
via produse & servicii (software)
uzual, există alternative de proiectare
exemplu:diverse maniere de afișare a datelor
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
www.veen.com/nextgen.pdf
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interaction Designfacilitarea interacțiunilor dintre oameni
via produse & servicii (software)
inovare + prototipizare
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
exemplu: interacțiune cu dispozitive Arduino
Ștefan Negru
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interaction Designfacilitarea interacțiunilor dintre oameni
via produse & servicii (software)
caracter colaborativși de mediere (e.g., a constrângerilor)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interaction Designfacilitarea interacțiunilor dintre oameni
via produse & servicii (software)
crearea de soluții specifice – deseori, unice
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
interactiune web
domenii înrudite (Dan Saffer, 2006)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
(în loc de) pauză
http://www.bonkersworld.net/mobile-relationship/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Cum am caracteriza interacțiunea Web?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Aplicații (Web) sisteme software complexe,în evoluție permanentă
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
arhitectura tradițională a unei aplicații Web
a se revedea cursul „Tehnologii Web”tinyurl.com/tehnologii-web
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
www.purl.org/net/busaco
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
www.purl.org/net/busaco
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
www.purl.org/net/busaco
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
www.purl.org/net/busaco
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
www.purl.org/net/busaco
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
www.purl.org/net/busaco
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
www.purl.org/net/busaco
Realitate
multitudinea mijloacelor de interacțiune cu utilizatorul
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Realitate
suportul oferit de hardware:procesor, video, audio, acces la rețea,…
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Realitate
proliferarea interacțiunilor naturale,mai ales via dispozitive mobile ori senzori
(IoT – Internet of Things)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Realitate
creșterea masei de utilizatori,având așteptări tot mai mari din partea software-ului
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Realitate
neadaptare la cerințele de tip business
development vs. marketing vs. management
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Realitate
lipsa funcționalității
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Realitate
calitatea precară a aplicației
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Ce tipuri de aplicații Web există?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Centrate pe documenteInteractiveTranzacționaleColaborativeOrientate spre portaluriDe tip ubicuuWeb socialWeb semantic
evoluția în timpa complexității
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Centrate pe documente – document centric
conținut/pagini static(e): situri de companii, personale
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
www.purl.org/net/busaco
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
www.purl.org/net/busaco
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Colaborative
tele-conferințe Webaplicații Web de tip wiki
servicii e-learningaplicații Web peer-to-peer
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Orientate spre portaluri
localizare unitară a informațiilortehnice, de afaceri, guvernamentale,…
specie: Web-ul cetățenesc
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
www.purl.org/net/busaco
exemplificare: Pockethttps://getpocket.com/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
www.purl.org/net/busaco
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
www.purl.org/net/busaco
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
www.purl.org/net/busaco
episodul viitor: arhitectura navigatorului Web