INTERACŢIUNEA EREDITATE- MEDIU-EDUCAŢIE ÎN DEZVOLTAREA FIINŢEI UMANE
Interactiune om-calculator -- Interacţiunea cu utilizatorul (II)
-
Upload
sabin-buraga -
Category
Technology
-
view
2.042 -
download
0
description
Transcript of Interactiune om-calculator -- Interacţiunea cu utilizatorul (II)
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//
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
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
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
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):
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
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
77
PictogramePictograme
•
Exemplu: Windows XP
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
88
PictogramePictograme
•
Exemplu: GNOME
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ă
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!
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
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)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
1313
ToolbarToolbarExemple:
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
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ă
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
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.
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
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ă
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ă
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
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!
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
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ţă
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”
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)
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
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
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,…
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
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
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ă
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.)
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
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.
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
3636
ControaleControale | | exempleexemple
Kay Power
Tools (~1995)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
3737
ControaleControale | | exempleexemple
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
3838
ControaleControale | | proiectareproiectare
eronatăeronată
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
3939
ControaleControale | | proiectareproiectare
eronatăeronată
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4040
ControaleControale | | proiectareproiectare
eronatăeronată
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
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
–
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
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
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
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
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!
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
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
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ă
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
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
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
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)
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ă
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)
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
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,...)
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
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
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)
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
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
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
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)
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
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/
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
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
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
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
6969
ÎÎntrebărintrebări??