CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz

www.purl.org/net/busaco

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)

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 Webcu 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 HTMLhipertext/hipermedia

RIA (Rich Internet Applications): în prezent, HTML5interacț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ț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ș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/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

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

(î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/

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

(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 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 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 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:

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

exemplificare: Pockethttps://getpocket.com/

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

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ă)

episodul viitor: arhitectura navigatorului Web

CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz

Design

Nica Panaite Aurelian Iftimescu Management Concepte Si Aplicatii

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

Concepte Si Practici de Audit

Concepte Marketing (Amza Ion Adrian)

CLIW 2015-2016 (13/13) Perspective Web la nivel de client. Limbajul ES6

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

TEORII ȘI CONCEPTE STRATEGICE · 2020. 12. 11. · Teorii și concepte strategice - evaluarea prospectivă a strategiei militare : viitorul strategiei militare : studiu de specialitate

forme si concepte contemporane

CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5

Dragomir, Camelia, Teorii Si Concepte in Pragmatica Lingvistica

Web01 Semantic Web: Concepte

Pactistes des de quan? Les arrels del concepte de ... · Les arrels del concepte de «pactisme» en la historiografia ... XI en considerar que els Usatges –basant-se en l’opinió

[CLIW] Web testing

Concepte avansate in PL/SQL

Istoric. Concepte si notiuni de baza

CHARACTERISTICS OF CERAMICS IN THE … 13 20.pdfnaturii, în mod deosebit a Soarelui. Noile concepte uraniene înlocuiesc așadar vechile concepte htoniene, astfel încît și numărul

Glosar MS-DOS - Comenzi şi concepte MS-DOS 6.22.pdf

Managementul Informațiilor în Organizații. Concepte și

CLIW 2014—2015 (9/12): Ingineria dezvoltării aplicaţiilor JavaScript

+ MARKETING 1º BA / FD Tema 1: Introducció al marketing. Concepte i definicions