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

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

“Design, v.:

What you regret not doing later on.”

/usr/games/fortune

CuprinsCuprins

Prezentarea aplicaţiilor desktop–Design vizual

–Planificarea interfeţei

–Stările ferestrelor

–Structura prezentării interfeţei

–Overhead-ul

interfeţelor

Design Design vizualvizual

Crearea interfeţei presupune o proiectare vizuală– Vizualizare

reprezentare

grafică

a datelor/conceptelor

(Ware, 2004)

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ă

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

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

Greşeli comune:–dezordinea & zgomotul

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

–complicarea evidentului

–detalierea excesivă

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

Dimensiunile vizuale pot fi diferenţiate conform variabilelor vizuale

– Jacques Bertin, 1989

(nu necesită

procesare cognitivă

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

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

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

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

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

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

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ă

Experiment –

detectaţi…– toate

literele din dreapta (poziţie)

Experiment –

literele verzi (hue)

Experiment –

N-urile (forma)

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

Design Design vizualvizual: : strategiistrategii

(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

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,…)

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)

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 ≡

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!

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)

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

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.

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

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

PlanificareaPlanificarea•

Asigurarea

orchestraţiei

afişarea & editarea grafică a datelor

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,

dimensiuni reduse

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ă

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ă

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

demonică

trecătoare

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

atenţia utilizatorului•

exemple:

XEyes, AMOR

(Amusing Misuse Of

Resources) –

XWindow, widget-uri

Mac OS X, gadget-uri

Postura– alte

ipostaze•

se adoptă posturi mixte

exemple: Delphi,

Kylix, GIMP

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?

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

conţinut de

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

asigurarea comutării facile de un document la altul

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

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

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

Studiu de caz

(adaptare

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

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

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

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

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

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

via stiluri:

dintr-un areal geograficIndicarea informaţiilor de interes –

via stiluri:

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

contează doar semnificaţia:

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

complexe:

Exemple

negative

Exemple

negative

Studiu de caz: utilizarea spaţiilor

(Dix, ’99)

pentru

separare

pentru

structurare

Studiu de caz: utilizarea spaţiilor

pentru reliefare (focalizarea atenţiei)

Studiu

de caz: utilizarea

dégrade-urilor

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

Greşeli:

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

OverheadOverhead

Utilizatorul nu trebuie obligat să întrebe ceva•

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

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

OverheadOverhead•

Reducerea

overhead-ului

(aici, Konqueror)

OverheadOverhead•

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

prin dialoguri inutile

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

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

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

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

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

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?

OverheadOverhead

RezumatRezumat

Prezentarea aplicaţiilor desktop–Design vizual

–Planificarea interfeţei

–Stările ferestrelor

–Structura prezentării interfeţei

–Overhead-ul

interfeţelor

ÎÎntrebărintrebări??

interactiune om-calculator -- prezentarea programului (la nivel de desktop)

informatic universitatea

cuza iai

romnia http

Technology

prezentarea programului de studiide licenţă: tst

7 prezentarea programului ghid pentru instructor

diagramele de interactiune

interactiune om-calculator (proiectarea interfeţei web)

prezentarea programului - eu sunt! tu

prezentarea programului de studiide licenţă:...

universitatea din craiova 12. managementul proiectelor...

interactiune om-calculator (metodologii de proiectare)

espon 2013 prezentarea programului-ministerul dezvoltarii...

prezentarea programului autocad

2. prezentarea programului de...

saga.ro - prezentarea programului asistent auditor

rezumat modelarea fenomenelor de interactiune

limbajul jurnalistic- comunicarea ca interactiune sociala

esenţa îngrijirii umane: o prezentarea a programului...

interactiune om-calculator (interactiuni neconventionale)

www.referate.ro-prezentarea programului excel 06430

interactiune om-calculator (tipuri de interfete &...

facebook – interactiune cu minus?

interactiune om-calculator (educarea & instruirea...