Interactiune om-calculator -- Prezentarea programului (la nivel de desktop)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

11

InteracInteracţţiune omiune om--calculatorcalculator Prezentarea programului Prezentarea programului

(la nivel de (la nivel de desktopdesktop))

Dr. Sabin-Corneliu Buraga Facultatea de Informatică

Universitatea “A.I.Cuza”

Iaşi, România httphttp://://www.infoiasi.rowww.infoiasi.ro/~/~busacobusaco//



22

“Design, v.:

What you regret not doing later on.”

/usr/games/fortune



33

CuprinsCuprins

•

Prezentarea aplicaţiilor desktop–Design vizual

–Planificarea interfeţei

–Stările ferestrelor

–Structura prezentării interfeţei

–Overhead-ul

interfeţelor



44

Design Design vizualvizual

•

Crearea interfeţei presupune o proiectare vizuală– Vizualizare

≡

reprezentare

grafică

a datelor/conceptelor

(Ware, 2004)



55


•

Elemente de bază (Dan Saffer, 2006):– Aranjament

(layout): unde & cum sunt amplasate

controalele/conţinutul, în manieră ierarhică– Grilă

(grid): organizează datele în mod coerent

– Flux (flow) vizual: modul de parcurgere sau de interacţiune cu datele oferite

– Typography: corpuri de literă & reguli de redare– Culoare, formă

(shape), textură



66

Design Design vizualvizual•

Aspecte importante– Funcţia

•

designul (proiectarea) bun(ă) oferă suport pentru activităţile utilizatorului

– Forma•

designul (proiectarea) bun(ă) trebuie să impulsioneze utilizatorul să folosească obiectul cu plăcere



77


•

Principii–Simplitatea

•

Designul simplu de obicei e şi cel mai eficient “Forma întotdeauna urmează funcţiei.”

(Sullivan)•

Exemple: harta rutieră, Google.com

–Dimensiunea, contrastul, proporţia–Organizarea &

caracterul vizual

al structurii informaţionale



88


•

Greşeli comune:–dezordinea & zgomotul

–interferenţa între elementele cu acelaşi grad de importanţă

–complicarea evidentului

–detalierea excesivă



99

Design Design vizualvizual: : dimensiunidimensiuni•

Contrastul codifică

informaţia în conjuncţie cu

dimensiunile vizuale– Percepţia diferenţelor privitoare

la o dimensiune vizuală– Diferenţele neimportante trebuie eliminate

⇒ asigurarea simplităţii



1010


Dimensiunile vizuale pot fi diferenţiate conform variabilelor vizuale

– Jacques Bertin, 1989

(nu necesită

procesare cognitivă

suplimentară)– Valoare, strălucire, luminanţă (value)– Puritate, culoare

(hue)

– Textură (texture)– Formă (shape)– Poziţie (position)– Orientare (orientation)– Mărime (size)



1111


Variabilele vizuale sunt utilizate pentru:– Comunicare– Codificarea datelor– Realizarea distincţiei între elementele vizuale

ale interfeţei•

Înainte de a folosi o variabilă vizuală, trebuie determinat în ce măsură aceasta comunică utilizatorului informaţia dorită– Afişarea temperaturii se poate realiza

via

orice variabilă vizuală: culoare, poziţia pe o scală, lungimea termometrului, printr-un icon etc.



1212

Design Design vizualvizual: : dimensiunidimensiuni

•

Caracteristici importante ale variabilelor vizuale:– Scala: tipurile de comparaţii posibile

•

Nominală (=): toate variabilele•

Ordonată (<, >): inadecvată pentru hue, orientare, formă

•

Cantitativă: doar pentru

poziţie & mărime



1313


•

Caracteristici importante ale variabilelor vizuale:– Lungimea:

numărul nivelurilor de percepţie a valorilor•

Valori mari pentru formă & poziţie

•

~10 niveluri pentru unele variabile (e.g., mărime)

•

~4 niveluri pentru orientare



1414


•

Variabilele vizuale intervin privitor

la:–Atenţie

•

Canalul de intrare = una sau mai multe variabile (e.g., poziţie & hue)

–Percepţie•

Selectivă

în cazul poziţiei, mărimii,

orientării, hue, valorii, texturii•

Neselectivă pentru formă



1515


•

Experiment –

detectaţi…– toate

literele din dreapta (poziţie)



1616


•

Experiment –


literele verzi (hue)



1717


•

Experiment –


N-urile (forma)



1818


•

Percepţia poate fi asociativă– Uşurinţa ignorării unei variabile, lăsând deoparte

toate distincţiile conforme dimensiunii ignorate – Variabile asociative:

poziţia, hue, textura, forma, orientarea– Nu sunt asociative: mărimea & valoarea

•

Mărimea mică & valoarea joasă interferează în ceea ce priveşte receptarea valorii, texturii, formei etc.

•

Culoarea obiectelor mici e mai dificil de perceput



1919

Design Design vizualvizual: : strategiistrategii

•

Grila

(grid)–

des folosită în tipografie

•

Focalizarea

(focus)–

evidenţierea a 1 sau mai multe

elemente modulare•

Modularitatea

•

Flexibilitatea–

permiterea

de variaţii de la temă

•

Consistenţa–

nerespectarea ei implică mai multă muncă de programare/întreţinere a aplicaţiei decât respectarea ei



2020

Design Design vizualvizual: : strategiistrategii•

Diverse tipuri de grid –

şabloane vizuale

(Dan Saffer, 2006):

iTunes PowerPoint

Client de e-mail (e.g., Thunderbird)

Situri

Web (e-shop, blog,…)



2121

Design Design vizualvizual•

Greşeli comune:– poziţii arbitrare ale componentelor– dimensiuni arbitrare ale componentelor– forme & dimensiuni arbitrare ale ferestrelor– mărimi & reprezentări arbitrare ale icon-urilor– prezentări inconsistente– limbaje vizuale inconsistente

•

Menţinerea structurii se poate realiza prin repetarea elementelor de design pe parcursul interfeţei (şabloane

de proiectare

–

design patterns)



2222

PlanificareaPlanificarea

•

Redarea datelor &

interacţiunea cu utilizatorul trebuie realizate în mod organizat

•

Obiectele de interfaţă sunt conţinute de ferestre: principale

&

subordonate

(documente, casete de dialog)•

Programul trebuie să aibă o unică fereastră principală

•

Fereastra ≡

camera, programul ≡

casa



2323


•

Utilizarea unei camere este asociată unui scop

•

Nu trebuie folosite casete de dialog (camere separate) pentru activităţi în strânsă legătură cu activitatea din fereastra principală

•

Atenţie la poluarea cu ferestre –

window pollution!



2424


•

Fluxul (vizual

al) aplicaţiei– urmărirea modelelor mentale

(metaforele, idiomurile)– calculatorul este încă privit ca instrument,

nu ca partener de dialog– instrumentele trebuie păstrate la îndemână

(se asigură

ergonomia)



2525


•

Fluxul (vizual

al) aplicaţiei– utilizatorul este confruntat cu apariţia

a două tipuri de ferestre:•

modale

– utilizatorul trebuie să rezolve

o anumită sarcină în altă fereastră•

nemodale

(modeless) –

utilizatorul

interacţionează în aceeaşi fereastră cu aplicaţia– feedback-ul trebuie să fie (cât) mai puţin modal



2626


•

Principiul

suprapunerii

(Alan Cooper)– concurenţa task-urilor– manevrarea ferestrelor– înlănţuirea (tiling)– desktop-urile

virtuale

– task-switcher-ul

–

Startbar din Windows; Dock & Exposé la Mac OS X; Sidebar la Vista etc.



2727


•

Asigurarea orchestraţiei (Cooper)–interfaţa trebuie să fie simplă & consistentă –interfaţa trebuie să fie invizibilă–posibilitate vs. probabilitate–nu trebuie afişate informaţii cantitative–introducere grafică vs. textuală a datelor–programul trebuie să reflecte starea

(gata de lucru, adormit, ocupat etc.)



2828


•

Asigurarea orchestraţiei (Cooper)–utilizatorul trebuie informat,

dar nu trebuie utilizate ferestre

de dialog pentru a raporta normalitatea

–nu trebuie folosite casete de dialog (modale) pentru a interoga utilizatorii

–fiecare metaforă/idiom folosit(ă) trebuie să aibă o motivaţie



2929

PlanificareaPlanificarea•

Asigurarea

orchestraţiei

afişarea & editarea grafică a datelor



3030


Postura– suverană

•

aplicaţie utilizată timp îndelungat, aproape continuu (Word, Photoshop, Visual

Studio,…)

•

interacţiune complexă, atenţia fiind focalizată permanent

•

utilizatorii suverani sunt cei cu experienţă•

aplicaţia se execută maximizată

•

paletă de culori discretă, odihnitoare, elemente de interfaţă elegante &

productive

•

interfaţa este ordonată, cu controale dispuse în colţurile ferestrei,

de

dimensiuni reduse



3131


Postura– trecătoare

•

programul e tranzient, axat pe o singură funcţie (e.g., arhivator, program de scanare, anti-virus, cititor de ştiri RSS/Atom etc.)

•

interfaţa este clară, cu butoane mari & precise•

programul poate reprezenta un anumit suport pentru o aplicaţie suverană

•

nu rulează maximizat, dar poate rula în fundal•

programele trecătoare ar trebui să folosească o interfaţă mai incisivă



3232


Postura– demonică

•

postura adoptată de daemon-i (programe ce nu interacţionează cu

utilizatorii,

realizând activităţi în fundal, uneori vitale)

•

ar trebui să fie complet invizibile, nu ar trebui să raporteze starea unei activităţi folosind o interfaţă modală

•

dacă

daemon-ul nu trebuie configurat frecvent, nu trebuie să fie vizibil



3333

demonică

trecătoare



3434


Postura– parazită

•

se bazează deseori

pe aplicaţii suverane şi trecătoare

•

prezenţă continuă, cu rol mai mult de aplicaţie trecătoare;

uneori, nu realizează nimic util •

paraziţii nu ar trebui să focalizeze (prea

mult)

atenţia utilizatorului•

exemple:

XEyes, AMOR

(Amusing Misuse Of

Resources) –

XWindow, widget-uri

–

Mac OS X, gadget-uri

–

Vista



3535


Postura– alte

ipostaze•

se adoptă posturi mixte

•

exemple: Delphi,

Kylix, GIMP



3636

StStăările rile ferestrelorferestrelor

•

Stări

principale:– minimizată

(iconify, minimize)

– maximizată (zoomed, maximize)– restaurată (restore)– “lipicioasă”

(sticky)

•

De ce minimizăm ferestrele? •

De ce avem nevoie de starea restore?



3737

StStăările rile ferestrelorferestrelor

•

Interfaţa de tip document multiplu – MDI

(Multiple Document Interface)

– SDI

(Single Document Interface)

– MDI oferă suport pentru instanţe multiple ale aceleaşi aplicaţii (suverane): o unică fereastră principală, fiecare document

este

conţinut de

ferestre subordonate– Se tinde spre aplicaţii exclusiv SDI:

asigurarea comutării facile de un document la altul



3838

Structura prezentării interfeStructura prezentării interfeţţeiei•

Trebuie să se urmărească structura task-urilor (scopuri & sub-scopuri

ale utilizatorului)

•

Gruparea elementelor de interfaţă– Spaţială– Elemente grafice de separare (e.g.,

bevel)

– Cromatică

– Grupare logică vs. grupare fizică– Stabilirea unei ordini de prezentare– De asigurat

simetria

& echilibrul



3939


Gruparea se poate baza pe principiul Gelstalt: ochiul creează un întreg (gelstalt) din fragmentele existente



4040



4141

Structura prezentării interfeStructura prezentării interfeţţeiei



4242


Studiu de caz

(adaptare

după

Alan Dix):

alinierea unor nume dintr-o listă a colegilor

AndruAndru

DilicaDilica

JanetaJaneta

FlanelFlanel

GipiGipi

AbolituAbolitu

Rumba Rumba BalitBalit

AndruAndru

DilicaDilica

JanetaJaneta

FlanelFlanel

GipiGipi

AbolituAbolitu

RumbaRumba

BalitBalit

AbolituAbolitu, , GipiGipiBalitBalit, Rumba, RumbaDilicaDilica, , AndruAndruFlanelFlanel, , JanetaJaneta



4343


Recomandări:–reducerea cantităţii de informaţie

şi

creşterea vitezei de citire &

interpretare a informaţiilor

–

information architecture

•

evitarea detaliilor inutile•

exprimarea concisă

•

recurgerea la formate familiare de introducere/afişare a datelor

•

utilizarea tabelelor în cazul informaţiilor cantitative şi omogene structural

•

utilizarea spaţiilor



4444

Structura prezentării interfeStructura prezentării interfeţţeieiRedarea informaţiilor privind precipitaţiile

dintr-un areal geografic‡

Datele în formă “brută”:

4.35 3.17 3.06 1.37 0.19 0.11 0.03 0.05 0.20 1.22 2.86 3.095.35 4.03 3.77 2.51 1.84 1.59 0.85 1.22 1.94 3.25 5.65 6.001.53 1.36 2.69 3.64 3.32 3.78 3.66 4.22 3.82 2.41 2.92 2.473.17 3.02 3.59 3.90 3.80 3.65 3.80 3.41 3.30 2.88 3.65 3.422.01 2.08 2.39 2.85 6.21 9.33 5.70 7.58 7.63 5.64 2.66 1.83

‡ După

http://www.veen.com/nextgen.pdf



4545


dintr-un areal geograficDatele capătă semnificaţie⇒informaţii afişate tabelar:



4646


dintr-un areal geograficPosibilităţi multiple de afişare –

via stiluri:



4747


dintr-un areal geograficIndicarea informaţiilor de interes –

via stiluri:



4848

Structura prezentării interfeStructura prezentării interfeţţeieiEliminarea datelor numerice

contează doar semnificaţia:



4949

Structura prezentării interfeStructura prezentării interfeţţeieiDe la informaţii la vizualizări mai

complexe:



5050

Exemple

negative



5151

Exemple

negative



5252


Studiu de caz: utilizarea spaţiilor

(Dix, ’99)

pentru

separare

pentru

structurare



5353


Studiu de caz: utilizarea spaţiilor

pentru reliefare (focalizarea atenţiei)



5454


Studiu

de caz: utilizarea

dégrade-urilor



5555


Recomandări– prezentarea consistentă a informaţiilor

•

proporţia ferestrelor•

numărul total de controale

•

procentul de spaţiu neocupat de controale•

densitatea elementelor de interfaţă

•

distanţele faţă de marginile ferestrei•

echilibrul afişării pe orizontală & verticală

•

omogenitatea textului afişat (font, mărime etc.)•

folosirea

adecvată

a culorii

•

dimensiunile &

amplasarea celor mai des folosite controale



5656


Greşeli:



5757

OverheadOverhead

•

Overhead ≡

costul de utilizare a unei aplicaţii via o interfaţă

(timpul pierdut pentru a realiza o anumită operaţie)

•

Overhead-ul

poate deveni benefic pentru începători, dar este

deranjant

pentru utilizatorii experimentaţi



5858

OverheadOverhead

•

Utilizatorul nu trebuie obligat să întrebe ceva•

Interfaţa trebuie să permită input ori de câte ori se realizează output



5959

OverheadOverhead

•

Apariţia mesajelor de confirmare/eroare– nu trebuie să se recurgă la altă fereastră

pentru a schimba ceva din fereastra curentă– utilizatorul nu trebuie forţat să-şi aducă aminte– utilizatorul nu ar trebui obligat să

redimensioneze

şi/sau mute ferestrele (mai ales la o interfaţă MDI)– utilizatorul nu trebuie să-şi confirme acţiunile– acţiunile utilizatorului nu trebuie

să conducă la eroare



6060

OverheadOverhead•

Reducerea

overhead-ului

(aici, Konqueror)



6161

OverheadOverhead•

Sfaturi:–Procesarea nu trebuie oprită prosteşte,

prin dialoguri inutile

–Programul trebuie să se auto-protejeze–Aplicaţia nu trebuie să devină stupidă



6262

OverheadOverhead



6363

OverheadOverhead



6464

OverheadOverhead

•

Sfaturi:– In orice situaţie, utilizatorul trebuie

să poată realiza operaţia de undo ⇒ conferă utilizatorului un sentiment de libertate

– Toate dialogurile trebuie să aibă un buton Cancel (“Clearly Marked Exits” – Jakob Nielsen)

– Datele oferite de utilizator trebuie să fie editabile



6565

OverheadOverhead

•

Sfaturi:– De

oferit shortcut-uri

uşor de învăţat (memorabile)

pentru operaţiile frecvente:•

acceleratori –

combinaţii de taste:

Ctrl+S, Alt+Tab•

abrevieri de comenzi –

e.g., ls, <p>, defun,…

•

bookmark-uri•

istoric (history)

•

stiluri, şabloane, biblioteci, soluţii etc.•

sugestii

la căutare



6666

OverheadOverhead•

Sfaturi:– Operaţiile executate timp îndelungat

trebuie

să poată fi oprite (anulate)– Utilizatorul trebuie să fie informat despre starea

sistemului –

modificarea cursorului, bara de stare, highlight, schimbarea stilului de afişare – timpul de răspuns (feedback-ul):

< 0.1 s

– (aproape) instantaneu0.1-1 s – nu necesită feedback,

deşi utilizatorul observă că trebuie să aştepte1-5 s

–

va apărea

cursorul “ocupat”

(busy)

>1-5 s

–

va fi afişată o bară de progres



6767

OverheadOverhead•

Sfaturi:– Evitarea supraîncărcării memoriei

(recognition, not recall)•

Meniurile sunt de preferat limbajelor de comenzi

•

Controale combo-box în loc de text edit•

De utilizat comenzi generice oricând este posibil (Open, Save, Copy, Paste, Quit etc.)

•

Toate informaţiile de care are nevoie utilizatorul la un moment dat ar trebui să fie vizibile ori uşor de regăsit

– Ajutorul acordat trebuie să fie constructiv: speak user’s language

– Proiectarea trebuie să fie minimalistă: less is more



6868

OverheadOverhead•

Aplicaţia trebuie să memoreze informaţiile introduse de utilizator

•

Din punctul de vedere al utilizatorului, programul pare ignorant, uituc, slab, lipsit de iniţiativă, irascibil

•

Task-urile trebuie să fie coerente & naturale•

Întrebări:– Cât de mult trebuie să ţină minte programele?– Ce trebuie să ţină minte?– Cât timp trebuie să ţină minte?



6969

OverheadOverhead



7070

RezumatRezumat

•

Prezentarea aplicaţiilor desktop–Design vizual

–Planificarea interfeţei

–Stările ferestrelor

–Structura prezentării interfeţei

–Overhead-ul

interfeţelor



7171

ÎÎntrebărintrebări??

Technology

Interactiune om-calculator -- Prezentarea programului (la nivel de desktop)