Page 1
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
11
InteracInteracţţiune omiune om--calculatorcalculator InteracInteracţţiunea cu utilizatorul (II)iunea cu utilizatorul (II)
Dr. Sabin-Corneliu Buraga Facultatea de Informatică
Universitatea “A.I.Cuza”
Iaşi, România httphttp://://www.infoiasi.rowww.infoiasi.ro/~/~busacobusaco//
Page 2
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
22
“Mirrors should reflect a little
before throwing back images.”
Jean Cocteau
Page 3
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
33
CuprinsCuprins
•
Pictograme
(icon-uri)•
Toolbar-uri
•
Controale ale interfeţei–imperative &
de selecţie
–de introducere &
afişare (I/O) –altele
•
Greşeli•
Studii
de caz
Page 4
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
44
PictogramePictograme•
Ar trebui să fie mai uşor de învăţat şi
de recunoscut decât comenzile•
Actualmente, populează orice aplicaţie/sistem:– Obiecte (resurse, fişiere) de pe desktop– Instrumente (e.g., de desenare)– Aplicaţii (navigator Web, player multimedia,
mediu de programare,…)– Operaţii (e.g., cut & paste, imprimare etc.)– Entităţi Web (de exemplu, persoana reprezentată
de un avatar)•
Context:
aplicaţii de instant messaging, medii 3D
Page 5
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
55
PictogramePictograme
•
Pictograme
diferite
asociate
unui
avatar (Second Life):
Page 6
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
66
PictogramePictograme
•
Asocierea între reprezentare şi conceptul referit se poate face:– Conform similarităţii
(e.g., foaie goală = fişier nou)
– Analogic
(e.g., foarfece = cut)– Arbitrar
–
idiomic
(simbolul X = închide fereastra)
•
Cele mai efective sunt pictogramele proiectate conform similarităţii (Rogers, 2007)
•
Pictogramele ar trebui să aibă asociate etichete•
Apar dificultăţi în desemnarea de acţiuni
Page 7
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
77
PictogramePictograme
•
Exemplu: Windows XP
Page 8
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
88
PictogramePictograme
•
Exemplu: GNOME
Page 9
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
99
PictogramePictograme
•
Exemplu: Mac OS X
Reprezintă
aplicaţii arbitrare
Desemnează programe de sistem
De remarcat orientarea diferită
Page 10
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
1010
PictogramePictograme•
Atenţie la contextul cultural!
– Vezi
http://people.cs.uct.ac.za/~gaz/research.html•
Atenţie la redarea pe diverse dispozitive!
Page 11
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
1111
ToolbarToolbar•
Colecţie de buticoane
–
buticons
(butoane cu imagini în loc de text) deseori amplasată în fereastra principală a aplicaţiei, în manieră nemodală
•
Soluţie pentru problema meniurilor şi a casetelor de dialog
•
Nu sunt meniuri •
Furnizează experţilor acces rapid la funcţii frecvent utilizate
•
Nu trebuie să ocupe mult spaţiu pe ecran
Page 12
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
1212
ToolbarToolbar
•
Icon-ul
asociat butonului este mult mai sugestiv decât textul
•
Fiecare buton va avea asociat un tooltip ⇒ învăţarea idiom-ului
•
Atenţie la alegerea textului explicativ!•
Poate conţine şi alte controale, în afara butoanelor
•
Pot fi combinate şi cu meniuri (atenţie la pericole) •
Ar trebui să fie personalizabile (să se poată modifica forma, numărul de butoane, dispunerea, conţinutul)
Page 13
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
1313
ToolbarToolbarExemple:
Page 14
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
1414
ControaleControale
•
Controale (elemente
interactive)– părţi componente ale interfeţei
– facilitează interacţiunea cu utilizatorul
•
Clasificare
–
conform Alan Cooper:– imperative şi de selecţie
– de introducere şi afişare (I/O)
– altele
Page 15
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
1515
ControaleControale
•
Aspecte importante:–Aparenţa
modul de afişare–Interacţiunea
modalitatea de comportare–Semantica
ce anume reprezintă
Page 16
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
1616
ControaleControale•
Exemplu: moduri
diferite
de reprezentare
a
tab-urilor
Page 17
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
1717
ControaleControale•
Unele
pot fi
inspirate
din realitate
(Dan Saffer):
switch, button, dial, latch, slider, handle
•
Unele
pot fi
doar
fizice: joystick, trackball,…
•
Controale
digitale
tipice: scroll bar, checkbox, radio button, text box, listview, spinner etc.
Page 18
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
1818
ControaleControale•
Elemente de interfaţă imperative &
de selecţie –Imperative: corespund unui verb
•
butonul de execuţie
(push-button) folosit la terminarea casetelor de dialog
•
buticoanele–derivate din butoanele obişnuite –atenţie la icon-ul folosit (metafora vizuală) –trebuie însoţite de tooltip-uri
Page 19
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
1919
ControaleControale•
Elemente de interfaţă imperative &
de selecţie
– De selecţie: acţionează asupra unui substantiv•
butonul de bifare
(checkbox)
–de obicei, trebuie însoţit de un text explicativ –a nu se folosi checkbox-uri
ambigue
–poate fi înlocuit de buticonul de blocare sau de control flip-flop (textuale, iconice) • vezi toolbar-ul
Office
Utilizare incorectă
Page 20
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
2020
ControaleControale•
Elemente de interfaţă imperative & de selecţie – De selecţie (continuare)
•
radio-butoane–au un comportament
mutual exclusiv (mutex) –pot fi înlocuite
de radio-buticoane
Utilizare incorectă
Page 21
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
2121
ControaleControale
•
Elemente de interfaţă imperative & de selecţie – De selecţie (continuare)
•
combuticonul–la apăsare este
afişat un meniu
conţinând butoane cu blocare–poate afişa un meniu pop-up
Page 22
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
2222
ControaleControale•
Elemente de interfaţă imperative & de selecţie – De selecţie (continuare)
•
lista de opţiuni
(listbox)–listă de elemente textuale, cu o bară de defilare (scroll)
–utilizatorul poate selecta unul/mai multe elemente
–pot fi adăugate şi alte componente, nu doar text
–în prezent e înlocuit cu listview
(cu
linii
automat precedate
de un icon) –
atenţie la alegerea
controalelor dintr-un listview
–se poate suporta şi operaţia drag & drop
–a nu se folosi scroll orizontal într-un listbox!
Page 23
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
2323
ControaleControale•
Elemente de interfaţă imperative & de selecţie – De selecţie (continuare)
•
lista de tip listview–facilitează recunoaşterea
opţiunilor deja folosite
– icon-urile pot ajuta la clasificarea logică a informaţiilor
Page 24
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
2424
ControaleControale•
Elemente de interfaţă imperative & de selecţie – De selecţie
•
combobox–combinaţie între listbox şi câmpul de editare
–folosit pentru o selecţie unică, nu multiplă
–control foarte eficient şi poate suporta drag & drop
•
treeview–oferă vizualizarea ierarhică
a altor elemente de interfaţă
Page 25
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
2525
ControaleControale•
Elemente de intrare/ieşire – Introducerea
datelor
•
limitatoare–permit introducerea
doar de date valide–se realizează via
slider, combobox, listbox etc.
•
spinner–permite incrementarea
sau decrementarea unor valori
–poate
fi
“inteligent”
Page 26
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
2626
ControaleControale•
Elemente de intrare/ieşire – Introducerea nelimitată
•
text-edit (câmpul de editare text) –dacă valorile de intrare fac parte
dintr-o mulţime finită, ar fi bine să fie înlocuit de alt control
–trebuie realizată validarea: la cald (în momentul editării) sau la rece (după introducerea datelor)
»pentru
Web: validare
la client şi
la server–dacă utilizatorul zăboveşte la introducerea
datelor, putem afişa un clue-box (text explicativ, similar tooltip-ului)
Page 27
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
2727
ControaleControale•
Elemente de intrare/ieşire
•
text-edit (continuare) –ar trebui să prelucreze “inteligent”
datele primite –
e.g., dacă se introduce “5cm” va raporta “5 centimetri”
etc.
–valorile incorecte se pot înlocui cu cele implicite
–valorile care ies din intervalul permis ar putea fi substituite cu valorile de la marginile intervalului
–nu trebuie folosit un câmp de editare pentru output dacă utilizatorul nu poate modifica valoarea lui
Page 28
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
2828
ControaleControale•
Elemente de intrare/ieşire – introducerea nelimitată
•
text area–permite introducerea unui grup de linii
de text, nu doar a uneia –se va evita utilizarea
barei de defilare orizontale –formatarea
“din zbor”
a datelor –
rich text
Page 29
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
2929
ControaleControale•
Elemente de intrare/ieşire –afişarea datelor
•
conform tipurilor/categoriilor
de date
–tipuri de controale:•
gestionează prezentarea vizuală a informaţiilor: toolbar-uri, divizoare de ecran
(panel-uri),
elemente de grupare a controalelor
etc. •
afişează informaţiile în mod static: paginatoare, grid-uri, guidelines-uri,…
Page 30
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
3030
ControaleControale
•
Elemente de intrare/ieşire – label (etichetează alte controale)
•
vital pentru controale ca butoane radio/checkbox sau butoane de execuţie
•
atenţie la încadrarea şi dimensiunea textului unui label în cadrul unui alt control
Page 31
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
3131
ControaleControale
•
Elemente de intrare/ieşire – bara de defilare
(scrollbar)
•
ar putea afişa mai multe informaţii (pagina curentă, numărul total de pagini, primul element din fiecare pagină etc.)
•
ar putea oferi butoane pentru a sări direct peste pagini, capitole, secţiuni sau la începutul/sfârşitul documentului
•
ar putea fi responsabilă pentru managementul bookmark-urilor
Page 32
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
3232
ControaleControale•
Elemente de intrare/ieşire – bara de defilare
(scrollbar)
Utilizare incorectă Utilizare corectă
Page 33
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
3333
ControaleControale
•
Elemente de intrare/ieşire – bara de defilare
(scrollbar)
•
Defilarea conţinutului poate fi realizată şi via hardware –
senzori de detectare
a mişcării
(e.g., PDA, Tablet
PC, unele
modele
Mac etc.)
Page 34
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
3434
ControaleControale
•
Alte controale –de obicei, nu vin incluse în API-ul
(Application Programming Interface) oferit
de sistem
(de operare/de ferestre)
–utilizate de anumite
aplicaţii –atenţie la pericolele utilizării
Page 35
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
3535
ControaleControale
•
Alte controale –
exemple: – butoanele înceţoşate şi umbrite
(interfeţele lui Kai
Krause,
ex-MetaCreations) – ferestre/componente transparente –
alpha blending
(KDE, Winamp,..) şi nerectangulare– controlul vizual – selectarea grosimii liniei,
selectarea localizării, previzionarea fişierelor înainte de încărcare, alegerea culorilor etc.
Page 36
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
3636
ControaleControale | | exempleexemple
Kay Power
Tools (~1995)
Page 37
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
3737
ControaleControale | | exempleexemple
Page 38
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
3838
ControaleControale | | proiectareproiectare
eronatăeronată
Page 39
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
3939
ControaleControale | | proiectareproiectare
eronatăeronată
Page 40
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4040
ControaleControale | | proiectareproiectare
eronatăeronată
Page 41
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4141
ControaleControale WebWeb
•
Disponibile uzual în cadrul widget-urilor
Web– Web Widgets = clasă de aplicaţii Web executate
pe partea client, create pe baza unor tehnologii deschise precum (X)HTML, CSS, JavaScript, AJAX
– Pot fi transferate & instalate separat– Disponibile ca pachete arhivate în format .zip– Informaţiile despre acestea (meta-datele) formează
un document
manifest – fişier XML– Interacţiunea este asigurată, uzual,
de un API disponibil
în JavaScript
Page 42
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4242
ControaleControale WebWeb
•
Create via biblioteci (API-uri) –
folosind JavaScript:–
YUI (Yahoo! User Interface)
+ Symphony
–
Google
Widgets
– integrate în Google Desktop–
Mac OS X Widgets
– disponibile via Dashboard
–
Vista
Gadgets
– disponibile via Sidebar–
Dojo
+
Dijit/DojoX
–
eventual, în conjuncţie cu AJAX
–
Script.aculo.us–
Adobe Flex
+ Adobe
AIR –
folosind tehnologia Flash
•
În curs de standardizare la Consorţiul Web•
A se consulta
şi
Mozilla
Labs: labs.mozilla.com
Page 43
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4343
ControaleControale WebWeb
•
Mapplets
–
mini-aplicaţii capabile de interacţiunea cu hărţile (e.g., Google
Maps)
•
Silverlight
– alternativă Microsoft la grafica vectorială specificată via Flash ori SVG–
Se bazează
pe
.NET Framework
–
Multi-platformă
(actualmente: Windows & Mac OS X)–
Moonlight
–
via Mono, pentru
Linux
•
Aplicaţiile iPhone
–
modelul widget-urilor (XML + XHTML + JavaScript
+ CSS + alte resurse
multimedia)
–
rulează
în browser-ul
Safari
Page 44
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4444
StudiuStudiu de de cazcaz
•
Folosirea controalelor în cazul interfeţelor pentru dispozitive mobile
Palm PC 1998 Pocket PC 2000
Pocket PC 2003
Page 45
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4545
StudiuStudiu de de cazcaz
•
Caracteristici– Resurse hardware reduse
(procesor, memorie, ecran la
rezoluţie redusă: e.g., 176 ×
220, 240 ×
320
etc.)
– Conectivitate cu alte dispozitive/PC-uri– Interacţiune –
limitată
–
via tastatură,
stylus (pen), touch screen,...•
Interacţiune multi-modală: tastatură vs. stylus
•
Afişare landscape / portrait / square– Unele dispozitive oferă suport pentru interfeţe
alternative (skin-uri) •
Exemplu: Smartphone Home Screens
Page 46
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4646
StudiuStudiu de de cazcaz
•
Reguli de proiectare– Focalizarea asupra activităţilor de bază
ale utilizatorului•
Ce realizează utilizatorii 80% din timpul alocat folosirii dispozitivului mobil?
– Eliminarea opţiunilor care nu sunt neapărat necesare
•
Dacă doar 20% din utilizatori recurg la o funcţio- nalitate, atunci ea nu este cu adevărat necesară
– Realizarea testelor de utilizabilitate a interfeţei•
Chiar şi testele informale sunt folositoare!
Page 47
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4747
StudiuStudiu de de cazcaz
•
Reguli de proiectare– Interfaţa se poate inspira din design-ul interfeţelor
de pe dispozitivele desktop•
Exemplu: meniul
Start prezent la
Pocket
PC/Smartphone
– Aplicarea standardelor & reglementarilor de proiectare a interfeţelor
•
Consistenţa, utilizarea celor mai bune practici, design paterns,...
– Focalizarea asupra datelor (conţinutului) şi mai puţin asupra modului sofisticat de prezentare
Page 48
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4848
StudiuStudiu de de cazcaz
•
Reguli de proiectare– Asigurarea mijloacelor de interacţiune familiare,
astfel încât –
pentru îndeplinirea task-urilor
– schimbările de postură să fie minime•
De exemplu, redactarea unui e-mail nu ar trebui să recurgă (exclusiv) la stylus
•
Pot să apară
probleme la recunoaşterea scrisului de mână
Page 49
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4949
StudiuStudiu de de cazcaz
•
Reguli de proiectare– Controalele trebuie poziţionate corect
•
Interacţiunea nu trebuie să ascundă
sau
să facă inefective controalele esenţiale
•
Hand obstruction
Page 50
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
5050
StudiuStudiu de de cazcaz
•
Reguli de proiectare– Minimizarea alertelor şi mesajelor de tip bubble
•
Atenţia utilizatorului nu trebuie distrasă de la activitatea desfăşurată la un moment dat
•
Bubble-urile
nu trebuie să substituie casetele de dialog (de tip buletin –
message box)
şi trebuie să apară cât mai rar
Page 51
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
5151
StudiuStudiu de de cazcaz
•
Modelul de acces la date– Adoptarea
a trei
maniere de prezentare:
•
List view –
localizarea informaţiei, defilare•
Card view –
detalierea informaţiei, consultare
•
Edit view –
editarea informaţiei
Page 52
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
5252
StudiuStudiu de de cazcaz
•
Modelul de acces la date– List view – trebuie să ofere
operaţii uzuale precum:•
New, Reply, Forward
(pentru mesaje)•
Call, E-mail, SMS (pentru contacte
personale)
Page 53
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
5353
StudiuStudiu de de cazcaz
•
Modelul de acces la date– Card view –
poate oferi
un mod complex de vizualizare•
Chart-uri, grafice
•
Fotografii– Este optimizat
pentru
navigarea cu o singură mână
Page 54
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
5454
StudiuStudiu de de cazcaz
•
Modelul de acces la date– Edit view –
optimizat
pentru introducerea datelor•
Câmpurile modificate frecvent vor fi plasate
primele•
Suporta intrări prin emularea tastaturii (via stylus)
Page 55
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
5555
StudiuStudiu de de cazcaz
•
Utilizarea textului & graficii– Adoptarea
unui ton mai puţin formal
“Cannot connect”
vs. “Your device cannot connect to the server”
– Eliminarea cuvintelor care nu sunt necesare “Select the phone settings to use”
vs.
“Select the phone settings that you want to use”– Pentru
help-ul
on-line, de folosit simboluri (“>”)
“File > Open”
vs. “On the File menu, tap Open”– Textul îngroşat trebuie utilizat rareori
(pentru titluri, fără rol de intensificare semantică) – Italicele nu se folosesc
Page 56
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
5656
StudiuStudiu de de cazcaz
•
Utilizarea textului & graficii– Formatarea trebuie să fie consistentă
•
Label-uri terminate cu “:”•
Titlurile nu trebuie terminate cu “:”
– Alocarea de spaţiu suplimentar pentru internaţionalizarea
aplicaţiei
•
Engleză:
prompt•
Germană:
Eingabeaufforderung
– De evitat butoanele multiple pe o singură linie– Reducerea apariţiei sub-meniurilor– Designul
vizual trebuie să se adapteze orientării
ecranului (landscape, portrait,...)
Page 57
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
5757
StudiuStudiu de de cazcaz
•
Interacţiunea– Conţinutul
se poate schimba
la trecerea
landscape ⇒ portrait
Page 58
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
5858
StudiuStudiu de de cazcaz
•
Interacţiunea– Aranjamentul
(layout-ul)
se poate schimba
la trecerea
din landscape în portrait
Page 59
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
5959
StudiuStudiu de de cazcaz
•
Interacţiunea– Zonele de interacţiune cu stylus-ul
(InkBoxes la Tablet PC) ocupă mai mult loc decât câmpurile I/O tradiţionale
⇒ toate câmpurile de editare trebuie să
fie plasate în
partea superioară
a zonei
de introducere a datelor (Input Panel)
Page 60
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
6060
StudiuStudiu de de cazcaz
•
Interacţiunea– Folosirea
Input Panel-ului
la Pocket PC
Page 61
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
6161
StudiuStudiu de de cazcaz
•
Interacţiunea– Unele controale la dimensiuni standard
pot frustra utilizatorii (sunt dificil de acţionat via touch screen sau stylus) ⇒ introducerea imprecisă a datelor
– Vizualizarea cursorului pe un Tablet
PC este diferită •
Scade
acurateţea localizării stylus-ului
Page 62
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
6262
StudiuStudiu de de cazcaz
•
Interacţiunea– Dificultăţi de navigare la marginile ecranului
•
A se revedea
comentariile
privitoare la legea
lui
Fitt
•
De evitat plasarea aici
a barelor de scroll, a butoanelor de închidere,...
– Cursorul trebuie să reflecte
acţiunea curentă efectuată cu
stylus-ul
Page 63
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
6363
StudiuStudiu de de cazcaz
•
Proiectarea interfeţei aplicaţiilor iPhone (Craig
Hockenberry, 2007):
www.alistapart.com/articles/putyourcontentinmypocket– Au la dispoziţie un ecran de 320×480 pixeli– Rulează în cadrul Mobile Safari– Aliniate standardelor Web actuale
(XHTML, CSS, JavaScript, DOM, AJAX)– Nu se oferă suport pentru Flash– Redarea conţinutului multimedia (.mov)
– via plugin-uri
QuickTime
– se realizează fără interacţiune directă (doar play)
Page 64
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
6464
StudiuStudiu de de cazcaz
•
Proiectarea interfeţei aplicaţiilor iPhone– Redarea unei părţi dintr-o pagină Web
se realizează
prin intermediul viewport-ului; comportamentul acestuia se poate ajusta
prin <meta /> sau proprietăţi CSS (non-standard)– Legăturile incluzând numere de telefon conduc
la efectuarea de apeluri– Zona de redare a conţinutului e ajustată dinamic
pentru a facilita interacţiunea cu o singura mână– Resursele
hardware conduc
la timpi
mari
de execuţie
pentru
JavaScript
Page 65
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
6565
StudiuStudiu de de cazcaz
•
Proiectarea interfeţei aplicaţiilor iPhone– Reguli:
•
Simplificarea conţinutului: HTML necomplicat, CSS + JavaScript
minimale, rezoluţii scăzute ale imaginilor
•
Minimizarea transferului prin reţea•
Evitarea textelor mai mari de 10 MB
•
Paginile Web trebuie să însumeze maxim 30 MB•
Evitarea conţinutului în formate ca BMP, PICT, RTF, SVG, AVI, MPEG
– Detalii
la http://developer.apple.com/iphone/
Page 66
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
6666
StudiuStudiu de de cazcaz
•
Exemple de utilizări:– TomTom
Navigator:
ghid
auto – AmazonHunter:
asistent
e-commerce (Smartphone, C#, .NET –
Eduard
Weissmann*,
2004)– E-Pizza
: e-commerce
(WAP, WML, PHP –
Cristian
Nechita*,
Marius Ropotă*, Iavi
Rotberg*, 2003)
* de la Facultatea de Informatică, UAIC Iaşi
Page 67
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
6767
StudiuStudiu de de cazcaz
•
Exemple de utilizări:– PalmNotes: asistent evaluare
a studenţilor (PalmOS, C – Adrian Lazariuc*, 2004)
– SmartPartner: asistent de învăţare a scrisului (TabletPC, Smartphone, Pocket
PC, C#, .NET
–
Mihai Serea*, Petru Jucovschi*, 2004)
– wap.infoiasi.ro
(WAP, WML/XHTML-MP, PHP – Ionuţ
Botez*, 2005)
* de la Facultatea de Informatică, UAIC Iaşi
Page 68
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
6868
RezumatRezumat
•
Pictograme
(icon-uri)•
Toolbar-uri
•
Controale ale interfeţei–imperative &
de selecţie
–de introducere &
afişare (I/O) –altele
•
Greşeli•
Studii
de caz
Page 69
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
6969
ÎÎntrebărintrebări??