Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr....

Interacțiune om‐calculator

Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco

Dr. Sabin‐Corneliu Buraga

Facultatea de InformaticăUniversitatea “A.I.Cuza” Iaşi, România

Maniere de aranjare a conținutuluiExecuția acțiunilor asupra interfeței

It is not the answer that enlightens, but the question.

Eugene Ionesco

Necesitatea focalizării atenției utilizatorilorîn cadrul interfeței

Soluție:

prezentarea conținutului de interes

Soluție:

recurgerea la strategii de interacțiune

Layout

Şabloane de proiectare (Jenifer Tidwell, 2005)

visual framework

asigură utilizarea consistentăa layout‐ului, cromaticii & stilului vizual

visual framework

trebuie să ofere flexibilitate în ceea ce priveşteproiectarea vizuală, în funcție de conținutul redat

visual framework

exemple:consistența vizuală a desktop‐ului, a siturilor Web,…

center stage

plasarea celei mai importante părți a interfețeiîntr‐o zonă centrală, cu gruparea instrumentelor adiționale şi

a conținutului în arii de dimensiuni mai mici

center stage

maniere de realizare:sizecolor

headlinescontext

center stage

poate fi folosit în conjuncție cu alte şabloaneprivind navigarea Web

left column navigation

right column navigation

three column navigation

three columns with content first

three column content

card stack

secțiunile de conținut sunt amplasateîn panouri (cards) diferite care se pot stivui (stack),

astfel încât doar un panou este vizibil la un moment dat

card stack

uzual, se recurge la tab‐uri – orizontale/verticale –etichetate corespunzator

exemplenegative

closable panels

asigură plasarea conținutului în containere separate,etichetate, care pot fi expandate

movable panels

oferă posibilitatea utilizatorului de a plasa instrumentelede interes la libera alegere, prin mutarea panourilor dorite

movable panels

utilizatorii au libertatea de a‐şi rearanja mediul de lucru

poate prezenta şi inconveniente

de ce?

right/left alignment

permite alinierea conținutului în cadrul unui formular/tabel

etichetele sunt aliniate la dreapta, iar câmpurile la stânga

right/left alignment

în unele situații, poate fi substituit cu alte şabloane

diagonal balance

asigură echilibrul vizualîn cadrul zonelor ce includ elemente plasate asimetric

diagonal balance

Asymmetrical layouts can achieve equilibrium as well, but their tenser, more dramatic form of balance depends on careful manipulation to compensate visually for differences

in the size, position, and value of major elements.Kevin Mullet & Darrell Sano

property sheet

asigură prezentarea proprietăților unui obiect

uzual, se recurge la un layout pe 2 coloane sau un formular

liquid layout

permite regruparea conținutuluiatunci când zona de redare este redimensionată

liquid layout

poate fi facilitat de utilizarea managerilor de layout

Strategii de execuție a acțiunilor utilizatorilor

Pentru interacțiune, interfețele pun la dispoziție controale

fiecare acțiune ce poate fi executată de utilizatortrebuie să fie corespunzător semnalată

affordance

Norman, 1998

“Affordances provide strong clues to the operations of things. Knobs are for turning. Slots are for inserting things into.

Balls are for throwing or bouncing.”Donald Norman, 1988

fiecare element de interacțiune ce apare într‐o interfațătrebuie să aibă o justificare logică pentru utilizator

button groups

asigură gruparea mai multor butoane,aranjate orizontal sau vertical

a se revedeaprincipiile Gestalt

button groups

amplasarea trebuie să fie consistentă

prominent “done” button

plasarea butonului care termină o activitate la finalulunui flux vizual, cu focalizarea atenției asupra butonului

prominent “done” button

eticheta butonului este de preferat să fie textuală,uşor de observat

smart menu items

posibilitatea modificării dinamice a elementelor de meniu pentru a reflecta precis acțiunea ce poate fi executată

smart menu items

the user doesn’t have to thinkabout what object will be affected

încurajează Safe Exploration

preview

permite prezentarea unui preview sau sumaral rezultatului unei acțiuni

e.g., listarea, efectuarea unei comenzi on‐line etc.

preview

previne apariția diverselor erori

poate facilita explicarea unor acțiuni

desktop

handheld

progress indicator

indică progresul unei acțiuni consumatoare de timp

progress indicator

“Display a progress bar that accurately reflects the time remaining. If you cannot predict how much time an operation

will take, say so! Do not lie to or misinform users.”Jef Raskin, 2000

cancelability

permite anularea/terminareaunei operații consumatoare de timp

ar trebui să nu aibă efecte negative

cancelability

dacă existămai multe operații simultane,trebuie indicat ce anume se anulează

multi‐level undo

oferă o metodă facilă de a anula un şir de operații

multi‐level undo

undoable operations:textul introdus, tranzacții în baze de date,

schimbări de layout, cut & paste, acțiuni asupra unor resurse:fişiere, imagini, mesaje de e‐mail etc.

incorect

command history

oferirea unor mijloace vizuale de prezentarea operațiilor efectuate de utilizator

macros

permite realizarea facilă a unui grup de acțiunidesemnat de un mnemonic

macros

trebuie să se pună la dispoziție un mecanism de înregistrarea acțiunilor utilizatorului ce pot ulterior fi rulate automat

Editarea datelor

O activitate frecventă este aceea a editării datelor

textuale, grafice, multimedia etc.

Aspect de interes

WYSIWYG (What You See Is What You Get)

uzual, folosit pentru editarea imaginilor,conținutului grafic vectorial, fişierelor de animație, video,…

Aspect de interes

WYSIWYG (What You See Is What You Get)

users have some powerful expectationsfor how a text editor should work

Aspect de interes

manipularea directă (direct manipulation)

permite utilizatorilor să interacționeze “direct”cu obiectele de interfață prin operații

precum grab, push, drag, drop, stack, paint, transform etc.via un pointing device

Aspect de interes

direct manipulation is immediate – actions take placewith no apparent wait time

Aspect de interes

direct manipulation is precise – users need to havefine control over the location of that pointer

and the objects attached to it

Aspect de interes

selecția (selection)

utilizatorii au anumite aşteptări privind selecția diverselor tipuri de entități: text (ne)formatat, elemente de graficăvectorială, componente abstracte, liste, tabele, arbori etc.

Text editorsVector graphics editors,

GUI buildersLists, tables, trees

Single clickMove text insertion

cursor hereSelect just this item Select just this item

Double click Select this word Open or edit this item Open or edit this item

Triple clickSelect this line,

or select this paragraphN/A N/A

Click, drag, release

Start selection here, end it there;

select all text between them

Select everything inside the bounding box

(“rubberband”, “marquee” or “marching ants”

selection)

Drag this itemfrom here to there

Shift‐click

Start selection at the text insertion cursor, end it at the click point, and select all text

between them

Add this item to the selection set

Add this item to the selection set, plus all intervening items

(“contiguous selection”)

Control‐clickVaries from application to

applicationVaries from application to

application

Add this item to the selection set (“dis‐

contiguous selection”)conform Tidwell (2005)

edit‐in‐place

oferă un editor minimal exact în loculunde utilizatorul poate modifica un text

edit‐in‐place

folosit la editarea numelor de obiecte/fişiere,etichete (labels), valori de proprietăți etc.

smart selection

permite selecția “smart” a unui grup coerent de entități (elemente textuale, pixeli, nume de fişiere,…)

smart selection

when done thoughtlessly, smart selections can be irritating

composite selection

permite selecția globală a unui grup de entități

spring‐loaded mode

permite utilizatorului să schimbe modul de interacțiune,prin acționarea unei taste sau a unui buton de mouse

spring‐loaded mode

taste tipice: Shift, Alt, Ctrl

constrained resize

supply resize modes with different behavior, such as preserving aspect ratio, for use under special circumstances

magnetism

determină ca obiectele să fie “magnetice”,astfel încât utilizatorul să le poată amplasa mai precis

magnetism

it helps compensate for users’ lack of perfect dexteritywith a mouse

magnetism

exemplu: Snap to grid – la Adobe Photoshop

guides

pune la dispoziție linii de referință orizontale şi/sau verticale pentru a facilita alinierea entităților de interes

guides

guides make it easier for a user to seethat alignment is pixel‐perfect

paste variations

oferă funcționalități speciale – e.g., conversie de formate –pentru operația paste

paste variations

exemplu tipic: Paste Special – la Microsoft Office

şabloane de proiectarelayout, execuția activităților & editarea datelor

Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr....

Documents

serverului Web arhitectura · 2020-02-20 · ga /~ co / arhitectura serverului Web supliment avansat Dr. Sabin Corneliu Buraga –profs.info.uaic.ro/~busaco/ TehnologiiWeb

Le site officiel du Cinéma de Saint Médard en Jalles - l’ é t o i l e · 2019-12-24 · Roumanie / 1h38 / VOST Thriller de Corneliu Porumboiu avec Vlad Ivanov, Catrinel Marlon

profs.info.uaic.robusaco/teach/courses/... · ga /~ co Dezvoltarea aplicațiilorWeb date structurate în cadrul documentelor HTML scheme de microdate HTML5 Dr. Sabin Corneliu Buraga

vente aux enchères # 173 · 2019. 12. 16. · vente aux enchères # 173 49 rue Saint-Sabin 75011 Paris samedi 29 juin 2019 à 10h30 Arts d’Asie • Archéologie • Mobilier &

Façade MA Fabrication artisanale I 48, Boulevard d ... · Saint-Sabin. le bistrot Restaurateurdu Châtelet Cuiine bae de produit locaux et de aion restaurant 10, place de la Liberté

Culture de gouvernance et développement - Sabin...Le cas de la France est instructif pour les décideurs des pays en développement car il permet à la fois de saisir comment les

Un outil d’enquête pour l’isolement du poliovirus Sabin de type 2 …polioeradication.org/wp-content/uploads/2017/05/SL2... · 2017-05-18 · Initiative mondiale pour l’éradication

réseaux humains, réseaux électroniquesréseaux humains, réseaux électroniques Éditions-Diffusion Charles Léopold Mayer 38, rue Saint Sabin 75011 Paris tel/faxÊ: 01 48 06 48

la réhabilitation des quartiers dégradésdocs.eclm.fr/pdf_livre/132LaRehabilitationDesQuartiersDegrades.pdf · ditions-Diffusion Charles L opold Mayer 38, rue Saint Sabin 75011

Exodul spre lumina de Sabin Balasa, fragmente · ă doare, au, buba! scânceşte Celestinul. Femeia îşi face de lucru; nu-mi dau seama ce. Interiorul este întunecos, deşi prin

catalogue immobilier CENTRE DES JEUNES DIRIGEANTS PARIS · CENTRE DES JEUNES DIRIGEANTS 35 rue Saint Sabin 75011 PARIS Tel : 01.83.97.65.15 E-Mail : contact@cjdesk.fr Location Bureau

UN FILM RÉALISÉ PAR CORNELIU PORUMBOIU POLICIER , adjectif.affif-sitepublic-media-prod.s3-website-eu-west-1.amazonaws.com/... · 2017-04-12 · J'ai voulu faire un film sur le langage,

Virologie Médicale 1 Virus de la poliomyélitesovietik67.free.fr/Cours/Viro/Viro Med 1 - Polio.pdf · Vaccin polio atténué buvable (souches Sabin)-innocuité totale-association

LA VACCINATION, POURQUOI...(Albert Sabin) 1896 Vaccin contre la fièvre typhoïde (Sir Almroth E. Wright) 1966 Vaccin contre les oreillons (Michiaki Takahashi) 1969 Vaccin contre les

1 Club Exploitation, Information, Systèmes 23 juin 2009 Martigues Contrôle Automatique de la Vitesse Moyenne Cristina BURAGA-LEFEBVRE CETE Méditerranée

Fichier des portraits – Lettre S – Département des … EST...NE-101 (SABICAS, Guitar) Supplément à la collection générale des portraits Communication différée Sabin, Albert

Rapport stage sabin

tcioe.edu.np 2075.pdf · 71 72 Name Bibek Kunwar Sabin Ban Milan Ghatani Deepak Thagunna Chandan Kumar Sah Puja Rai Giri Raj Neupane Baburam Khanal Prashant Bhatta Sandip Ojha

dossier pédagogique LE POIDS DES CHOSES & PIERRE ET LE LOUPdocsapp.cccommunication.biz/users/321768/docs/dp_le_poids_.pdf · DJINO ALOLO SABIN IL DANSE > sans aucune formation, il

Pourquoi l’égalité est meilleure Pour tous - Les petits matinsLes petits matins, 31, rue Faidherbe, 75011 Paris Institut Veblen pour les réformes économiques, 38, rue Saint-Sabin,