Successfully reported this slideshow.
Dr. Sabin Buragawww.purl.org/net/busaco

interacțiune Web – HCI, UI, UX
Eugene Ionesco

Dr. Sabin Buragawww.purl.org/net/busaco

“It is not the answer that enlightens,
but the question.”
Dr. Sabin Buragawww.purl.org/net/busaco

Care sunt mijloacele de interacțiune
dintre utilizatori și o aplicație?
persoană care încearcă să îndeplinească un scop

Dr. Sabin Buragawww.purl.org/net/busaco

Human
wikimedia.org

Dr. Sabin Buragawww.purl.org/net/busaco
rulează aplicații – software

Dr. Sabin Buragawww.purl.org/net/busaco

Computer
Dr. Sabin Buragawww.purl.org/net/busaco

primul joc implementat pe PDP (anii 1960)
Dr. Sabin Buragawww.purl.org/net/busaco
Dr. Sabin Buragawww.purl.org/net/busaco
Dr. Sabin Buragawww.purl.org/net/busaco
Dr. Sabin Buragawww.purl.org/net/busaco
Dr. Sabin Buragawww.purl.org/net/busaco
rulează aplicații – software
local – eventual, cu rol de client
versus
la distanță – e.g., solicită servicii de la server(...
“dialog” între om și calculator

Dr. Sabin Buragawww.purl.org/net/busaco

Interaction
Dr. Sabin Buragawww.purl.org/net/busaco
Dr. Sabin Buragawww.purl.org/net/busaco

Interacțiunea dintre utilizator(i) şi software
se realizează via o interfață (us...
API (Application Programming Interface)
versus
UI (User Interface)

Dr. Sabin Buragawww.purl.org/net/busaco

Interacțiune...
convențională (clasică) – e.g., desktop

Dr. Sabin Buragawww.purl.org/net/busaco

Tipuri de interfețe
Graficon (Douglas Engelbart, 1963)
Dr. Sabin Buragawww.purl.org/net/busaco
convențională (clasică) – e.g., desktop
paradigma WIMP (Window Icon Menu Pointer)
interacțiune via tastatură & mouse + alt...
Dr. Sabin Buragawww.purl.org/net/busaco

human-computer interaction

Bryce (Kai Krause, 1997)
interfața Web

Dr. Sabin Buragawww.purl.org/net/busaco

Tipuri de interfețe
Dr. Sabin Buragawww.purl.org/net/busaco

human-computer interaction

280slides (2010)
sistemul WorldWideWeb (Tim Berners-...
interfața Web

Dr. Sabin Buragawww.purl.org/net/busaco

Tipuri de interfețe

browser – interacțiune limitată via controal...
Dr. Sabin Buragawww.purl.org/net/busaco

human-computer interaction

wireframe.cc (2013)
interacțiune facilitată de un dispozitiv mobil

Dr. Sabin Buragawww.purl.org/net/busaco

Tipuri de interfețe
interacțiune facilitată de un dispozitiv mobil
resurse/facilități limitate:
rezoluție, memorie, I/O, energie etc.
mono-tas...
www.punchcut.com/perspectives

Dr. Sabin Buragawww.purl.org/net/busaco

provocare:
proiectarea interacțiunii în contextul...
interfața naturală

Dr. Sabin Buragawww.purl.org/net/busaco

Tipuri de interfețe
interfața naturală
paradigme noi de interacțiune + noi așteptări
interfețe haptice, bazate pe gesturi, vocale, locomotorii...
Dr. Sabin Buragawww.purl.org/net/busaco

Richard Harper et al. (Eds.), Being Human, Microsoft Research, 2008
parte a aplicației – desktop, Web, miniaturală,… –
care permite utilizatorilor să-și exprime intențiile
de operare asupra ...
Dr. Sabin Buragawww.purl.org/net/busaco

human-computer interaction
percepută nu doar ca parte vizuală a software-ului

Dr. Sabin Buragawww.purl.org/net/busaco

Interfaţa – desktop, Web,… –...
percepută nu doar ca parte vizuală a software-ului
din punctul de vedere al utilizatorului,
reprezintă întregul sistem – a...
utilitate (utility)
oferirea facilităților dorite de utilizator

Dr. Sabin Buragawww.purl.org/net/busaco

Interfaţa – des...
utilizabilitate (usability)
cât de ușor și de plăcut pot fi folosite facilitățile?

Dr. Sabin Buragawww.purl.org/net/busa...
utilă (useful)
usability + utility

Dr. Sabin Buragawww.purl.org/net/busaco

Interfaţa – desktop, Web,… – cu utilizatorul
Dr. Sabin Buragawww.purl.org/net/busaco

Oricine utilizează un instrument (software)
o face cu o motivație
Dr. Sabin Buragawww.purl.org/net/busaco

găsirea unei entități: informație, obiect, utilizator etc.
(auto-)învățare/instruire
Dr. Sabin Buragawww.purl.org/net/busaco
Dr. Sabin Buragawww.purl.org/net/busaco

realizarea unui proces – e.g., tranzacție
Dr. Sabin Buragawww.purl.org/net/busaco

interacțiuni sociale – la nivel real și/sau virtual
Dr. Sabin Buragawww.purl.org/net/busaco

crearea unui artefact:
însemnare, imagine, articol, soluție de design, cod-sursă...
Dr. Sabin Buragawww.purl.org/net/busaco

divertisment propriu şi/sau la nivel de grup (comunitate)
modul de percepție a produsului/serviciului
de către persoanele care-l folosesc
și plăcerea/satisfacția înregistrată

Dr. ...
http://garrettdimon.com/pages/improving_interface_design

Dr. Sabin Buragawww.purl.org/net/busaco

Context
“Every product that is used by someone has
a user experience: newspapers, ketchup bottles,
reclining armchairs, cardigan s...
experience = expectationuser is satisfied

Dr. Sabin Buragawww.purl.org/net/busaco

UX (User Experience)
Dr. Sabin Buragawww.purl.org/net/busaco
experience > expectationuser is delighted

Dr. Sabin Buragawww.purl.org/net/busaco

UX (User Experience)
Dr. Sabin Buragawww.purl.org/net/busaco
experience < expectationuser is dissatisfied

Dr. Sabin Buragawww.purl.org/net/busaco

UX (User Experience)
www.buigallery.com
Dr. Sabin Buragawww.purl.org/net/busaco
Dr. Sabin Buragawww.purl.org/net/busaco

studiu de caz
UX în contextul interacțiunii cu dispozitive mobile

de vizitat și...
Dr. Sabin Buragawww.purl.org/net/busaco

Punerea problemei
Dr. Sabin Buragawww.purl.org/net/busaco

interactiune web
Application Centric
Activity Centric
Timeline Centric
Context (Location) Centric
Process/Task Centric
Emotion Centric
Peop...
Dr. Sabin Buragawww.purl.org/net/busaco

Necesitatea organizării
conținutului (datelor) prezentat(e) utilizatorilor


IA – Information Architecture

Dr. Sabin Buragawww.purl.org/net/busaco

Necesitatea organizării
conținutului (datelor)...
Dr. Sabin Buragawww.purl.org/net/busaco
Dr. Sabin Buragawww.purl.org/net/busaco
context:
data visualization
visual representation
infographics

Dr. Sabin Buragawww.purl.org/net/busaco

IA – Information...
Dr. Sabin Buragawww.purl.org/net/busaco

de la vizualizarea datelor la infografice
(Alecsandru Grigoriu, Mozilla Labs – O...
Dr. Sabin Buragawww.purl.org/net/busaco

Ce aspecte vizează
proiectarea interacțiunii cu utilizatorul?
Dr. Sabin Buragawww.purl.org/net/busaco

Interaction Design
facilitarea interacțiunilor dintre oameni
via produse & servi...
are o natură contextuală

Dr. Sabin Buragawww.purl.org/net/busaco

Interaction Design
facilitarea interacțiunilor dintre ...
existența a numeroase mijloace & metodologii

Dr. Sabin Buragawww.purl.org/net/busaco

Interaction Design
facilitarea int...
caracter aplicativ

Dr. Sabin Buragawww.purl.org/net/busaco

Interaction Design
facilitarea interacțiunilor dintre oameni...
nu trebuie să implice direct calculatoarele

Dr. Sabin Buragawww.purl.org/net/busaco

Interaction Design
facilitarea inte...
www.baddesigns.com

Dr. Sabin Buragawww.purl.org/net/busaco

“Interzis virajul la dreapta?”
sau
“Mergi la dreapta, nu la ...
Dr. Sabin Buragawww.purl.org/net/busaco

Interaction Design
facilitarea interacțiunilor dintre oameni
via produse & servi...
focalizare spre utilizatori (user centered design)

Dr. Sabin Buragawww.purl.org/net/busaco

Interaction Design
facilitar...
uzual, există alternative de proiectare
exemplu:
diverse maniere de afișare a datelor

Dr. Sabin Buragawww.purl.org/net/b...
www.veen.com/nextgen.pdf
Dr. Sabin Buragawww.purl.org/net/busaco
inovare + prototipizare

Dr. Sabin Buragawww.purl.org/net/busaco

Interaction Design
facilitarea interacțiunilor dintre o...
Dr. Sabin Buragawww.purl.org/net/busaco
Ștefan Negru

exemplu: interacțiune cu dispozitive Arduino
caracter colaborativ
și de mediere (e.g., a constrângerilor)

Dr. Sabin Buragawww.purl.org/net/busaco

Interaction Design...
crearea de soluții specifice – deseori, unice

Dr. Sabin Buragawww.purl.org/net/busaco

Interaction Design
facilitarea in...
Dr. Sabin Buragawww.purl.org/net/busaco

interactiune web
Dr. Sabin Buragawww.purl.org/net/busaco

Cum am caracteriza interacțiunea Web?
Dr. Sabin Buragawww.purl.org/net/busaco

Aplicații (Web)  sisteme software complexe,
în evoluție permanentă
a se revedea cursul “Tehnologii Web”
tinyurl.com/tehnologii-web

Dr. Sabin Buragawww.purl.org/net/busaco

arhitectura tra...
Internet
(Web)

Client
(interface)

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

Dr. Sabin Buragawww.purl.org...
Cream / Markup

Custard / Page Logic

Jelly / Business Logic

Sponge / Database

C. Henderson, “Scalable Web Architectures...
Cream / Markup

Custard / Page Logic

Jelly / Business Logic

Sponge / Database

C. Henderson, “Scalable Web Architectures...
Dr. Sabin Buragawww.purl.org/net/busaco

Aplicație Web = Interfață + Conținut (Date) + Program

mitul 1: cea mai importan...
Dr. Sabin Buragawww.purl.org/net/busaco

Aplicație Web = Interfață + Conținut (Date) + Program

mitul 1: cea mai importan...
Dr. Sabin Buragawww.purl.org/net/busaco

Aplicație Web = Interfață + Conținut (Date) + Program

mitul 1: cea mai importan...
Dr. Sabin Buragawww.purl.org/net/busaco

Aplicație Web = Interfață + Conținut (Date) + Program

mitul 1: cea mai importan...
multitudinea mijloacelor de interacțiune cu utilizatorul

Dr. Sabin Buragawww.purl.org/net/busaco

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

Dr. Sabin Buragawww.purl.org/net/busaco

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

Dr. Sabin Buragawww.purl.org/net/busa...
creșterea masei de utilizatori,
având așteptări tot mai mari din partea software-ului

Dr. Sabin Buragawww.purl.org/net/b...
neadaptare la cerințele de tip business
development vs. marketing vs. management

Dr. Sabin Buragawww.purl.org/net/busaco...
lipsa funcționalității

Dr. Sabin Buragawww.purl.org/net/busaco

Realitate
calitatea precară a aplicației

Dr. Sabin Buragawww.purl.org/net/busaco

Realitate
Dr. Sabin Buragawww.purl.org/net/busaco

Ce tipuri de aplicații Web există?
evoluția în timp
a complexității

Dr. Sabin Buragawww.purl.org/net/busaco

Centrate pe documente
Interactive
Tranzacționa...
conținut/pagini static(e):
situri de companii, personale

Dr. Sabin Buragawww.purl.org/net/busaco

Centrate pe documente ...
Dr. Sabin Buragawww.purl.org/net/busaco
expoziții virtuale
situri de știri
sisteme de facilitare a călătoriilor (e-travel)
chioșcuri informative
…

Dr. Sabin Bura...
Dr. Sabin Buragawww.purl.org/net/busaco
online banking
soluții B2B (business-to-business)
fluxuri de activități (workflow-uri)

Dr. Sabin Buragawww.purl.org/net/...
Dr. Sabin Buragawww.purl.org/net/busaco
tele-conferințe Web
aplicații Web de tip wiki
servicii e-learning
aplicații Web peer-to-peer

Dr. Sabin Buragawww.purl.or...
Dr. Sabin Buragawww.purl.org/net/busaco
localizare unitară a informațiilor
tehnice, de afaceri, guvernamentale,…

specie: Web-ul cetățenesc

Dr. Sabin Buragawww....
Dr. Sabin Buragawww.purl.org/net/busaco
servicii bazate pe locația utilizatorului,
disponibile pe mai multe plaforme:
desktop, telefon mobil, tabletă, TV,…

Dr. S...
Dr. Sabin Buragawww.purl.org/net/busaco
mediatizare (syndication)
spații de lucru virtuale
filtrare colaborativă
divertisment social

social (game) computing

Dr....
Dr. Sabin Buragawww.purl.org/net/busaco
modelarea cunoștințelor
pentru a fi “înțelese” de calculatoare

dateinformațiicunoștințe

Dr. Sabin Buragawww.purl.org/...
Dr. Sabin Buragawww.purl.org/net/busaco
lipsa unei structuri reale (tangibile)

Dr. Sabin Buragawww.purl.org/net/busaco

Aspecte specifice aplicațiilor Web
multi-disciplinaritate

Dr. Sabin Buragawww.purl.org/net/busaco

Aspecte specifice aplicațiilor Web
necunoașterea publicului-țintă real

Dr. Sabin Buragawww.purl.org/net/busaco

Aspecte specifice aplicațiilor Web
volatilitatea cerințelor & constrângerilor

Dr. Sabin Buragawww.purl.org/net/busaco

Aspecte specifice aplicațiilor Web
mediu de operare impredictibil

Dr. Sabin Buragawww.purl.org/net/busaco

Aspecte specifice aplicațiilor Web
impactul sistemelor traditionale (legacy)

Dr. Sabin Buragawww.purl.org/net/busaco

Aspecte specifice aplicațiilor Web
aspecte calitative diferite

Dr. Sabin Buragawww.purl.org/net/busaco

Aspecte specifice aplicațiilor Web
lipsa de experiență a publicului (audienței)

Dr. Sabin Buragawww.purl.org/net/busaco

Aspecte specifice aplicațiilor Web
Situl Web al unui muzician – cerințe:

Dr. Sabin Buragawww.purl.org/net/busaco

discuție (pentru acasă)

“To maintain and...
Dr. Sabin Buragawww.purl.org/net/busaco

episodul viitor: arhitectura navigatorului Web
Upcoming SlideShare
Loading in …5
×

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #1): Interacţiune Web: concepte, context, studii de caz

913 views

Published on

Dezvoltarea aplicaţiilor Web la nivel de client — detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #1): Interacţiune Web: concepte, context, studii de caz

  1. 1. Dr. Sabin Buragawww.purl.org/net/busaco interacțiune Web – HCI, UI, UX
  2. 2. Eugene Ionesco Dr. Sabin Buragawww.purl.org/net/busaco “It is not the answer that enlightens, but the question.”
  3. 3. Dr. Sabin Buragawww.purl.org/net/busaco Care sunt mijloacele de interacțiune dintre utilizatori și o aplicație?
  4. 4. persoană care încearcă să îndeplinească un scop Dr. Sabin Buragawww.purl.org/net/busaco Human
  5. 5. wikimedia.org Dr. Sabin Buragawww.purl.org/net/busaco
  6. 6. rulează aplicații – software Dr. Sabin Buragawww.purl.org/net/busaco Computer
  7. 7. Dr. Sabin Buragawww.purl.org/net/busaco primul joc implementat pe PDP (anii 1960)
  8. 8. Dr. Sabin Buragawww.purl.org/net/busaco
  9. 9. Dr. Sabin Buragawww.purl.org/net/busaco
  10. 10. Dr. Sabin Buragawww.purl.org/net/busaco
  11. 11. Dr. Sabin Buragawww.purl.org/net/busaco
  12. 12. Dr. Sabin Buragawww.purl.org/net/busaco
  13. 13. rulează aplicații – software local – eventual, cu rol de client versus la distanță – e.g., solicită servicii de la server(e) Dr. Sabin Buragawww.purl.org/net/busaco Computer
  14. 14. “dialog” între om și calculator Dr. Sabin Buragawww.purl.org/net/busaco Interaction
  15. 15. Dr. Sabin Buragawww.purl.org/net/busaco
  16. 16. Dr. Sabin Buragawww.purl.org/net/busaco Interacțiunea dintre utilizator(i) şi software se realizează via o interfață (user interface)
  17. 17. API (Application Programming Interface) versus UI (User Interface) Dr. Sabin Buragawww.purl.org/net/busaco Interacțiunea dintre utilizator(i) şi software se realizează via o interfață (user interface)
  18. 18. convențională (clasică) – e.g., desktop Dr. Sabin Buragawww.purl.org/net/busaco Tipuri de interfețe
  19. 19. Graficon (Douglas Engelbart, 1963) Dr. Sabin Buragawww.purl.org/net/busaco
  20. 20. convențională (clasică) – e.g., desktop paradigma WIMP (Window Icon Menu Pointer) interacțiune via tastatură & mouse + alte dispozitive reprezentări (abstracte) grafice: raster vs. vectorial suport oferite de nucleul SO vs. desktop system multi-tasking Dr. Sabin Buragawww.purl.org/net/busaco Tipuri de interfete
  21. 21. Dr. Sabin Buragawww.purl.org/net/busaco human-computer interaction Bryce (Kai Krause, 1997)
  22. 22. interfața Web Dr. Sabin Buragawww.purl.org/net/busaco Tipuri de interfețe
  23. 23. Dr. Sabin Buragawww.purl.org/net/busaco human-computer interaction 280slides (2010) sistemul WorldWideWeb (Tim Berners-Lee, ~1990) www.w3.org/History/1989/proposal.html
  24. 24. interfața Web Dr. Sabin Buragawww.purl.org/net/busaco Tipuri de interfețe browser – interacțiune limitată via controale (X)HTML hipertext/hipermedia RIA (Rich Internet Applications): Flash, Silverlight, HTML5 interacțiune facilitată de transfer (a)sincron: Ajax/Comet recurgerea la standarde deschise audiență globală
  25. 25. Dr. Sabin Buragawww.purl.org/net/busaco human-computer interaction wireframe.cc (2013)
  26. 26. interacțiune facilitată de un dispozitiv mobil Dr. Sabin Buragawww.purl.org/net/busaco Tipuri de interfețe
  27. 27. interacțiune facilitată de un dispozitiv mobil resurse/facilități limitate: rezoluție, memorie, I/O, energie etc. mono-tasking vs. multi-tasking off-line vs. on-line servicii bazate pe context (context awareness) model diferit de businessapp-stores Dr. Sabin Buragawww.purl.org/net/busaco Tipuri de interfețe
  28. 28. www.punchcut.com/perspectives Dr. Sabin Buragawww.purl.org/net/busaco provocare: proiectarea interacțiunii în contextul multi-device UI responsive design
  29. 29. interfața naturală Dr. Sabin Buragawww.purl.org/net/busaco Tipuri de interfețe
  30. 30. interfața naturală paradigme noi de interacțiune + noi așteptări interfețe haptice, bazate pe gesturi, vocale, locomotorii augmented and virtual reality physical & wearable computing ambient intelligence – AmI Dr. Sabin Buragawww.purl.org/net/busaco Tipuri de interfețe
  31. 31. Dr. Sabin Buragawww.purl.org/net/busaco Richard Harper et al. (Eds.), Being Human, Microsoft Research, 2008
  32. 32. 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ă Dr. Sabin Buragawww.purl.org/net/busaco Interfaţa – desktop, Web,… – cu utilizatorul
  33. 33. Dr. Sabin Buragawww.purl.org/net/busaco human-computer interaction
  34. 34. percepută nu doar ca parte vizuală a software-ului Dr. Sabin Buragawww.purl.org/net/busaco Interfaţa – desktop, Web,… – cu utilizatorul
  35. 35. percepută nu doar ca parte vizuală a software-ului din punctul de vedere al utilizatorului, reprezintă întregul sistem – aplicația per se Dr. Sabin Buragawww.purl.org/net/busaco Interfaţa – desktop, Web,… – cu utilizatorul
  36. 36. utilitate (utility) oferirea facilităților dorite de utilizator Dr. Sabin Buragawww.purl.org/net/busaco Interfaţa – desktop, Web,… – cu utilizatorul
  37. 37. utilizabilitate (usability) cât de ușor și de plăcut pot fi folosite facilitățile? Dr. Sabin Buragawww.purl.org/net/busaco Interfaţa – desktop, Web,… – cu utilizatorul
  38. 38. utilă (useful) usability + utility Dr. Sabin Buragawww.purl.org/net/busaco Interfaţa – desktop, Web,… – cu utilizatorul
  39. 39. Dr. Sabin Buragawww.purl.org/net/busaco Oricine utilizează un instrument (software) o face cu o motivație
  40. 40. Dr. Sabin Buragawww.purl.org/net/busaco găsirea unei entități: informație, obiect, utilizator etc.
  41. 41. (auto-)învățare/instruire Dr. Sabin Buragawww.purl.org/net/busaco
  42. 42. Dr. Sabin Buragawww.purl.org/net/busaco realizarea unui proces – e.g., tranzacție
  43. 43. Dr. Sabin Buragawww.purl.org/net/busaco interacțiuni sociale – la nivel real și/sau virtual
  44. 44. Dr. Sabin Buragawww.purl.org/net/busaco crearea unui artefact: însemnare, imagine, articol, soluție de design, cod-sursă,…
  45. 45. Dr. Sabin Buragawww.purl.org/net/busaco divertisment propriu şi/sau la nivel de grup (comunitate)
  46. 46. modul de percepție a produsului/serviciului de către persoanele care-l folosesc și plăcerea/satisfacția înregistrată Dr. Sabin Buragawww.purl.org/net/busaco UX (User Experience)
  47. 47. http://garrettdimon.com/pages/improving_interface_design Dr. Sabin Buragawww.purl.org/net/busaco Context
  48. 48. “Every product that is used by someone has a user experience: newspapers, ketchup bottles, reclining armchairs, cardigan sweaters.” James Jesse Garrett, 2003 Dr. Sabin Buragawww.purl.org/net/busaco UX (User Experience)
  49. 49. experience = expectationuser is satisfied Dr. Sabin Buragawww.purl.org/net/busaco UX (User Experience)
  50. 50. Dr. Sabin Buragawww.purl.org/net/busaco
  51. 51. experience > expectationuser is delighted Dr. Sabin Buragawww.purl.org/net/busaco UX (User Experience)
  52. 52. Dr. Sabin Buragawww.purl.org/net/busaco
  53. 53. experience < expectationuser is dissatisfied Dr. Sabin Buragawww.purl.org/net/busaco UX (User Experience)
  54. 54. www.buigallery.com Dr. Sabin Buragawww.purl.org/net/busaco
  55. 55. Dr. Sabin Buragawww.purl.org/net/busaco studiu de caz UX în contextul interacțiunii cu dispozitive mobile de vizitat și http://smallsurfaces.com/
  56. 56. Dr. Sabin Buragawww.purl.org/net/busaco Punerea problemei
  57. 57. Dr. Sabin Buragawww.purl.org/net/busaco interactiune web
  58. 58. Application Centric Activity Centric Timeline Centric Context (Location) Centric Process/Task Centric Emotion Centric People/Identity Centric Rahul Sen, 2010: http://tinyurl.com/23586xg Dr. Sabin Buragawww.purl.org/net/busaco Categorii primare de interacțiuni (la nivel mobil)
  59. 59. Dr. Sabin Buragawww.purl.org/net/busaco Necesitatea organizării conținutului (datelor) prezentat(e) utilizatorilor
  60. 60.  IA – Information Architecture Dr. Sabin Buragawww.purl.org/net/busaco Necesitatea organizării conținutului (datelor) prezentat(e) utilizatorilor
  61. 61. Dr. Sabin Buragawww.purl.org/net/busaco
  62. 62. Dr. Sabin Buragawww.purl.org/net/busaco
  63. 63. context: data visualization visual representation infographics Dr. Sabin Buragawww.purl.org/net/busaco IA – Information Architecture
  64. 64. Dr. Sabin Buragawww.purl.org/net/busaco de la vizualizarea datelor la infografice (Alecsandru Grigoriu, Mozilla Labs – Open Data Visualization, 2010)
  65. 65. Dr. Sabin Buragawww.purl.org/net/busaco Ce aspecte vizează proiectarea interacțiunii cu utilizatorul?
  66. 66. Dr. Sabin Buragawww.purl.org/net/busaco Interaction Design facilitarea interacțiunilor dintre oameni via produse & servicii (software)
  67. 67. are o natură contextuală Dr. Sabin Buragawww.purl.org/net/busaco Interaction Design facilitarea interacțiunilor dintre oameni via produse & servicii (software)
  68. 68. existența a numeroase mijloace & metodologii Dr. Sabin Buragawww.purl.org/net/busaco Interaction Design facilitarea interacțiunilor dintre oameni via produse & servicii (software)
  69. 69. caracter aplicativ Dr. Sabin Buragawww.purl.org/net/busaco Interaction Design facilitarea interacțiunilor dintre oameni via produse & servicii (software)
  70. 70. nu trebuie să implice direct calculatoarele Dr. Sabin Buragawww.purl.org/net/busaco Interaction Design facilitarea interacțiunilor dintre oameni via produse & servicii (software)
  71. 71. www.baddesigns.com Dr. Sabin Buragawww.purl.org/net/busaco “Interzis virajul la dreapta?” sau “Mergi la dreapta, nu la stânga?”
  72. 72. Dr. Sabin Buragawww.purl.org/net/busaco Interaction Design facilitarea interacțiunilor dintre oameni via produse & servicii (software)
  73. 73. focalizare spre utilizatori (user centered design) Dr. Sabin Buragawww.purl.org/net/busaco Interaction Design facilitarea interacțiunilor dintre oameni via produse & servicii (software)
  74. 74. uzual, există alternative de proiectare exemplu: diverse maniere de afișare a datelor Dr. Sabin Buragawww.purl.org/net/busaco Interaction Design facilitarea interacțiunilor dintre oameni via produse & servicii (software)
  75. 75. www.veen.com/nextgen.pdf Dr. Sabin Buragawww.purl.org/net/busaco
  76. 76. inovare + prototipizare Dr. Sabin Buragawww.purl.org/net/busaco Interaction Design facilitarea interacțiunilor dintre oameni via produse & servicii (software)
  77. 77. Dr. Sabin Buragawww.purl.org/net/busaco Ștefan Negru exemplu: interacțiune cu dispozitive Arduino
  78. 78. caracter colaborativ și de mediere (e.g., a constrângerilor) Dr. Sabin Buragawww.purl.org/net/busaco Interaction Design facilitarea interacțiunilor dintre oameni via produse & servicii (software)
  79. 79. crearea de soluții specifice – deseori, unice Dr. Sabin Buragawww.purl.org/net/busaco Interaction Design facilitarea interacțiunilor dintre oameni via produse & servicii (software)
  80. 80. Dr. Sabin Buragawww.purl.org/net/busaco interactiune web
  81. 81. Dr. Sabin Buragawww.purl.org/net/busaco Cum am caracteriza interacțiunea Web?
  82. 82. Dr. Sabin Buragawww.purl.org/net/busaco Aplicații (Web)  sisteme software complexe, în evoluție permanentă
  83. 83. a se revedea cursul “Tehnologii Web” tinyurl.com/tehnologii-web Dr. Sabin Buragawww.purl.org/net/busaco arhitectura tradițională a unei aplicații Web
  84. 84. Internet (Web) Client (interface) Server de aplicații Stocare (application) (persistence) Dr. Sabin Buragawww.purl.org/net/busaco Uzual, implică trei strate (3-tier application)
  85. 85. Cream / Markup Custard / Page Logic Jelly / Business Logic Sponge / Database C. Henderson, “Scalable Web Architectures”, Web 2.0 Expo, 2007: iamcal.com/talks/ Dr. Sabin Buragawww.purl.org/net/busaco Fruit / Presentation
  86. 86. Cream / Markup Custard / Page Logic Jelly / Business Logic Sponge / Database C. Henderson, “Scalable Web Architectures”, Web 2.0 Expo, 2007: iamcal.com/talks/ Dr. Sabin Buragawww.purl.org/net/busaco Fruit / Presentation
  87. 87. Dr. Sabin Buragawww.purl.org/net/busaco 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
  88. 88. Dr. Sabin Buragawww.purl.org/net/busaco 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
  89. 89. Dr. Sabin Buragawww.purl.org/net/busaco 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
  90. 90. Dr. Sabin Buragawww.purl.org/net/busaco 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!
  91. 91. multitudinea mijloacelor de interacțiune cu utilizatorul Dr. Sabin Buragawww.purl.org/net/busaco Realitate
  92. 92. suportul oferit de hardware: procesor, video, audio, acces la rețea,… Dr. Sabin Buragawww.purl.org/net/busaco Realitate
  93. 93. proliferarea interacțiunilor naturale, mai ales via dispozitive mobile ori senzori Dr. Sabin Buragawww.purl.org/net/busaco Realitate
  94. 94. creșterea masei de utilizatori, având așteptări tot mai mari din partea software-ului Dr. Sabin Buragawww.purl.org/net/busaco Realitate
  95. 95. neadaptare la cerințele de tip business development vs. marketing vs. management Dr. Sabin Buragawww.purl.org/net/busaco Realitate
  96. 96. lipsa funcționalității Dr. Sabin Buragawww.purl.org/net/busaco Realitate
  97. 97. calitatea precară a aplicației Dr. Sabin Buragawww.purl.org/net/busaco Realitate
  98. 98. Dr. Sabin Buragawww.purl.org/net/busaco Ce tipuri de aplicații Web există?
  99. 99. evoluția în timp a complexității Dr. Sabin Buragawww.purl.org/net/busaco Centrate pe documente Interactive Tranzacționale Colaborative Orientate spre portaluri De tip ubicuu Web social Web semantic
  100. 100. conținut/pagini static(e): situri de companii, personale Dr. Sabin Buragawww.purl.org/net/busaco Centrate pe documente – document centric
  101. 101. Dr. Sabin Buragawww.purl.org/net/busaco
  102. 102. expoziții virtuale situri de știri sisteme de facilitare a călătoriilor (e-travel) chioșcuri informative … Dr. Sabin Buragawww.purl.org/net/busaco Interactive
  103. 103. Dr. Sabin Buragawww.purl.org/net/busaco
  104. 104. online banking soluții B2B (business-to-business) fluxuri de activități (workflow-uri) Dr. Sabin Buragawww.purl.org/net/busaco Tranzacționale
  105. 105. Dr. Sabin Buragawww.purl.org/net/busaco
  106. 106. tele-conferințe Web aplicații Web de tip wiki servicii e-learning aplicații Web peer-to-peer Dr. Sabin Buragawww.purl.org/net/busaco Colaborative
  107. 107. Dr. Sabin Buragawww.purl.org/net/busaco
  108. 108. localizare unitară a informațiilor tehnice, de afaceri, guvernamentale,… specie: Web-ul cetățenesc Dr. Sabin Buragawww.purl.org/net/busaco Orientate spre portaluri
  109. 109. Dr. Sabin Buragawww.purl.org/net/busaco
  110. 110. servicii bazate pe locația utilizatorului, disponibile pe mai multe plaforme: desktop, telefon mobil, tabletă, TV,… Dr. Sabin Buragawww.purl.org/net/busaco De tip ubicuu
  111. 111. Dr. Sabin Buragawww.purl.org/net/busaco
  112. 112. mediatizare (syndication) spații de lucru virtuale filtrare colaborativă divertisment social social (game) computing Dr. Sabin Buragawww.purl.org/net/busaco Web social
  113. 113. Dr. Sabin Buragawww.purl.org/net/busaco
  114. 114. modelarea cunoștințelor pentru a fi “înțelese” de calculatoare dateinformațiicunoștințe Dr. Sabin Buragawww.purl.org/net/busaco Web semantic (Web of Data)
  115. 115. Dr. Sabin Buragawww.purl.org/net/busaco
  116. 116. lipsa unei structuri reale (tangibile) Dr. Sabin Buragawww.purl.org/net/busaco Aspecte specifice aplicațiilor Web
  117. 117. multi-disciplinaritate Dr. Sabin Buragawww.purl.org/net/busaco Aspecte specifice aplicațiilor Web
  118. 118. necunoașterea publicului-țintă real Dr. Sabin Buragawww.purl.org/net/busaco Aspecte specifice aplicațiilor Web
  119. 119. volatilitatea cerințelor & constrângerilor Dr. Sabin Buragawww.purl.org/net/busaco Aspecte specifice aplicațiilor Web
  120. 120. mediu de operare impredictibil Dr. Sabin Buragawww.purl.org/net/busaco Aspecte specifice aplicațiilor Web
  121. 121. impactul sistemelor traditionale (legacy) Dr. Sabin Buragawww.purl.org/net/busaco Aspecte specifice aplicațiilor Web
  122. 122. aspecte calitative diferite Dr. Sabin Buragawww.purl.org/net/busaco Aspecte specifice aplicațiilor Web
  123. 123. lipsa de experiență a publicului (audienței) Dr. Sabin Buragawww.purl.org/net/busaco Aspecte specifice aplicațiilor Web
  124. 124. Situl Web al unui muzician – cerințe: Dr. Sabin Buragawww.purl.org/net/busaco discuție (pentru acasă) “To maintain and 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 and visual stimuli that encourage repeated visits from fans.”
  125. 125. Dr. Sabin Buragawww.purl.org/net/busaco episodul viitor: arhitectura navigatorului Web

×