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

www.purl.org/net/busa

Dezvoltarea aplicațiilor Webla 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țiunedintre utilizatori și o aplicație?

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 clientversus

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

Interaction

„dialog” între om și calculator

Interacțiunea dintre utilizator(i) și softwarese 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 dispozitivereprezentări (abstracte) grafice: raster vs. vectorial

suport oferite de nucleul SO vs. desktop systemmulti-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 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ă

wireframe.cc (2014)

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

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

responsive design

www.punchcut.com/perspectives

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

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ă

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

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/serviciuluide 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 = expectationuser is satisfied

experience > expectationuser is delighted

experience < expectationuser 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 CentricTimeline Centric

Context (Location) CentricProcess/Task Centric

Emotion CentricPeople/Identity Centric

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

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

IA – Information Architecture

IA – Information Architecturecontext: vizualizarea datelor (data visualization)

How Music Travelshttp://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 Designfacilitarea interacțiunilor dintre oameni

via produse & servicii (software)

are o natură contextuală

existența a numeroase mijloace & metodologii

caracter aplicativ

nu trebuie să implice direct calculatoarele

„Interzis virajul la dreapta?”sau

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

www.baddesigns.com

focalizare spre utilizatori (user centered design)

uzual, există alternative de proiectare

exemplu:diverse maniere de afișare a datelor

www.veen.com/nextgen.pdf

inovare + prototipizare

exemplu: interacțiune cu dispozitive Arduino

Ștefan Negru

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

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/

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țamitul 2: cel mai important este programulmitul 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 documenteInteractiveTranzacționaleColaborativeOrientate spre portaluriDe tip ubicuuWeb socialWeb semantic

evoluția în timpa complexității

Centrate pe documente – document centric

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

Interactive

expoziții virtualesituri de știri

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

Tranzacționale

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

fluxuri de activități (workflow-uri)

Colaborative

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

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

Orientate spre portaluri

localizare unitară a informațiilortehnice, 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 virtualedivertisment social

social (game) computing

Web semantic (Web of Data)

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

dateinformațiicunoș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 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ă)

episodul viitor: arhitectura navigatorului Web

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

Technology

Cuprins - mecc.gov.md · interacţiune a litosferei, hidrosferei, atmosferei, biosferei şi sociosferei. Acest înveliş de interacţiune Acest înveliş de interacţiune natură

Interacţiune eficientă pe reţele de socializare

INTERACŢIUNE ŞI PERSUASIUNE ÎN DEZBATEREA

CLIW 2014—2015 (3/12): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare

07. Concepte

Tehnici de interacţiune utilizator cu obiecte 3D modelate prin particule

GeoAsia04 - Interacţiune - Sistem de Închidere- Depozite

Concepte inovative

CLIW 2014—2015 (12/12): Performanța Web la nivel de client

Revista Român ă de Interacţ Tehnici de interacţiune utilizator prin intermediul ...rochi.utcluj.ro/rrioc/articole/RRIOC-7-4-Stefanut.pdf · 2015. 7. 7. · Tehnici de interacţiune

Concepte ocluzale

[CLIW] Web testing

Concepte UML

CLIW 2014—2015 (2/12): Arhitectura navigatorului Web

CLIW 2014—2015 (7/12): Programare în limbajul JavaScript

Interacţiune om-calculator Retrospective & perspectivebusaco/teach/courses/interfaces/... · Interacţiune om-calculator Dr. Sabin-Corneliu Buraga – busaco/ 1 Interacţiune om-calculator

concepte operationale

Tipuri de interacţiuni O interacţiune sau forţă fundamentală este

CLIW 2014—2015 (10/12): Programare Web. Suita de tehnologii HTML5

CLIW 2014—2015 (6/12): Căutarea resurselor Web