MANIPULARE DIRECTA - INTERFETE

Ben Shneiderman a inventat termenul de manipulare directa (direct manipulation)in 1970 cu cele trei elemente ale sale:

reprezentarea vizuala a obiectelor manipulate

actiuni fizice în loc de introducere de text

impact vizibil imediat al operatiei

O definitie mai putin riguroasa ar spune ca manipularea directa este click&drag cu obiecte. Dintre puncte de mai sus doua privesc feedback-ul vizual doar punctul din mijloc se refera la actiunile utilizatorului, deci se poate utiliza denumirea manipulare vizuala (visual manipulation).

O observatie referitoare la manipularea directa - putem manipula direct doar informatiile care sunt deja afisate de program, iar acestea trebuie sa fie vizibile pentru a le putea manipula, de aceea se accentueaza natura vizuala a manipularii directe.

Manipularea directa este simpla, deschisa, usor de realizat si de memorat. Din nefericire când utilizatorii sunt pusi prima data în fata unei actiuni de manipulare directa nu o poate intui si nici descoperi în mod independent. Manipularea directa trebuie învatata, deoarece odata învatata nu va mai fi uitata.

A apasa un buton sau desenarea cu instrumentul pen reprezinta manipulare directa. Daca orice utilizator normal poate apasa pe un buton, putini sunt cei capabili sa deseneze bine. Exemplele ilustreaza doua tipuri de manipulare directa: management si continut. Managementul include manipulare de simbol vizual = apasarea unui buton pushing/scrolling, în general fiind accesibila tuturor utilizatorilor, continutul este desenarea oricine, rezultatul fiind dependent de cel care manipuleaza.

Categoria management contine 5 varietati de manipulare directa: realizarea selectiilor, drag&drop, manipulare simboluri vizuale/grafice, redimensionare&remodelare&repozitionare, indicarea prin sageti. Selectia a fost discutata, iar celelalte vor fi discutate în detaliu în continuare.

1. Manipulare simboluri vizuale/grafice

Majoritatea simbolurilor vizuale/grafice - butoane, push-butoane, radio-butoane, checkbox-uri - necesita mai degraba ca utilizatoul sa mute cursorul peste ele si fara sa faca simplu click mouse . Ca actiuni pe care utilizatorul le executa simplu click pe butoane/push-butoane sunt majoritare iar majoritatea actiunilor de manipulare directa necesita click&drag, cele doua actiuni reprezentând blocul fundamental de constructie al interactiunii

1.1 Realizare drag

Un drag începe atunci când utilizatorul apasa pe butonul de mouse, muta mouse-ul si apoi elibereaza butonul. Setul coordonatelor ecran ale cursorului, când utilizatorul a apasat prima data butonul mouse se numeste punct mouse-down (mouse-down point) iar când butonul e eliberat setul de coordonate se numeste punct mouse-up (mouse-up point). Primul punct de coordonate este cunoscut pe tot parcursul operatiei de manipulare directa, pe când cel de-al doilea este cunoscut de-abia la sfârsitul procesului.

O data ce începe un drag întreaga actiune dintre utilizator si calculator intra într-o stare speciala numita captura (capture). În dialectul programatorului spunem ca întreaga interactiune dintre sistem si utilizator este captata - nici un alt program nu poate interactiona cu utilizatorul pâna când drag nu s-a terminat. Numim fereastra care detine punctul mouse-down obiect master (master object). Daca acest obiect master reprezinta date concrete sau un gizmo, drag va indica o extensie a selectiei sau o schimbare de stare gizmo. Daca obiectul master este un obiect discret el indica mai mult începutul unei operatii de manipulare directa precum drag&drop iar captura va juca un rol important.

Din punct de vedere tehnic, exista o stare a capturii în momentul în care utilizatorul apasa butonul mouse si nu se termina decât atunci când acel buton de mouse este eliberat referitor la distanta pe care se deplaseaza mouse-ul între doua actiuni buton. Pentru utilizator un simplu click&release fara deplasare înseamna instantaneu, dar pentru program în timpul dintre o operare si o eliberare de 545b11f buton pot fi executate mii de instructiuni. Daca utilizatorul muta mouse-ul necorespunzator, înainte de eliberarea butonului, captura îl protejeaza de a actiona asupra altor controale adiacente. Obiectul master va rejecta astfel de comenzi false.

Iesirea din captura

Unul din cele mai importante dar ignorate parti a unei actiuni drag este mecanismul de a-l parasi. Utilizatorul nu numai ca are o nevoie de o modalitate de abandonare a actiunii drag, dar terbuie sa fie absolut sigur ca o face cu succes.

Totusi majoritatea aplicatiilor nu au niciun mijloc de a anula un drag. În termeni de interfata utilizator aceasta este mai degraba o eroare grava din moment ce orice interfata buna furnizeaza modalitati consistente si fiabile pentru parasirea actiunilor pornite gresit de utilizator. Cheia ESCAPE de pe tastatura ar trebui sa fie mereu recunoscuta ca un mecanism de abadon general valabil pentru orice operatie mouse fie ca este click sau drag. Daca utilizatorul apasa cheia ESCAPE în timp ce tine apasat butonul mouse sistemul ar trebui sa abandoneze starea de captura si sa revina în sistem în starea în care era înaninte de apasarea butonului. Când utilizatorul elibereaza consecutiv butonul mouse, programul trebuie sa tina minte sa dezactiveze acel mouse-up înainte de a se produce un efect colateral.

Actiunea de abandonare preferata de Allan Cooper este chord-click-ul, atunci când utilizatorul apasa ambele butoane de mouse simultan. De obicei utilizatorul prefera sa înceapa un drag cu buton stâng, constatând ulterior ca ca de fapt nu doreste sa termine ce a început. Apasa buton drept de mouse dupa care le elibereaza pe amândoua în deplina siguranta. Acest lucru functioneza la fel de bine daca se începe actiunea drag cu buton drept si se anuleaza cu buton stâng.

Informarea utilizatorului

Daca programul este bine proiectat si permite utilizatorului sa abandoneze o operatie de drag, ramâne problema de a asigura utilizatorul ca este în deplina siguranta. Este posibil ca forma cursorului sa fie schimbata pentru a indica faptul ca o operatie drag este în curs. Abandonarea operatiei drag face ca aceste lucruri sa dispara dar utilizatorul ar putea avea dubii daca operatia a fost anulata si daca este în deplina siguranta. Este absolut necesar ca utilizatorul sa fie informat asupra faptului ca operatia a fost abandonata cu succes. Ajuta daca utilizatorul obtine un mesaj de asigurare. Mesajul trebuie sa indice clar faptul ca acel drag e terminat. Allan Cooper a proiectat un astfel de idiom pentru unul din clienti care arata ca un fel de stampila mare pe care scria cu rosu Drag Canceled pusa în mijlocul ecranului.

Actiunea drag depinde de program, context si obiect master. În cazul cel mai simplu - date concrete - drag înseamna extinderea selectiei. Textul, celulele sau orice altceva este selectat contiguu din punctul mouse-down pâna în punctul mouse-up. Daca mouse-ul devine down într-un gizmo acesta trebuie sa indice vizual faptul ca este pe cale sa-si schimbe starea. Aceasta actiune este importanta dar de multe ori neglijata de cei care-si creaza propriile gizmo-uri. De fapt este o forma de simulare vizuala activa pe care o numim raspuns pliant (pliant response).

Un push button are nevoie sa se schimbe din starea out în starea in ; un check box ar trebui sa lumineze box-ul dar sa nu arate înca marcajul. Raspunsul pliant este mecanismul feedback important pentru fiecare gizmo, care invoca fie o actiune, fie îsi schimba starea lasând utilizatorul sa stie faptul ca o actiune anumita este pe cale sa se produca daca elibereaza butonul de mouse. Raspunsul pliant este o parte importanta a mecanismului de abandonare.

Drag & simbol

Una dintre cele mai încapatânate enigme ale proiectarii interfetelor utilizator - meniul este principalul gizmo pentru începatori si totusi unul dintre cele mai dificile gizmo-uri de operat de utilizatori novici sau ocazionali. O solutie posibila ar fi furnizarea de idiomuri aditionale pentru realizarea unui task anume. Daca o functie este disponibila din meniu si va fi mai rar utilizata trebuie sa ne asiguram sa furnizam alte idiomuri pentru invocarea ei care sa nu necesite operatii de click&drag.

Una din caracteristicile Windows 95 este abilitatea de a lucra meniurile printr-o serie de click-uri simple decât facâng drag&drop. Un click pe un meniu si acesta este desfasurat (pull-down). Punctam elementul dorit si facem un click o data pentru a-l selecta si a închide meniul. Aceasta idee a fost dusa mai departe punând programul într-un fel de mod meniu (menu mode) imediat ce s-a facut click pe orice meniu. În modul meniu, toate meniurile top-level din program si toate elementele lor sunt active ca si când s-ar fi facut click&drag. Plimbând mouse-ul fiecare meniu se desfasoara pe rând fara a fi necesara utilizarea unui buton de mouse.

Exista si alte tipuri de gizmo click&drag si anume meniurile în cascada (cascading menus). Într-un meniu în cascada în mod normal, acesta este desfasurat apoi se încarca al doilea meniu dintr-ul element la primului meniu, prin drag cu mouse-ul spre dreapta. Meniurile în cascada pot fi stivuite fiind mai multe decît unul singur, ele formeaza o ierarhie de meniuri.

Meniurile în cascada necesita îndemânare din partea celui care utilizeaza mouse-ul deoarece orice miscare falsa care scoate cursorul din interiorul conturului dreptunghic care cuprinde meniul va provpva disparitia unuia sau altuia dintre meniuri. Cascadele pot fi un simbol frustant de manipulat desi îsi au locul lor în proiectarea interfetei dar se recomanda sa nu fie folosite pentru functiile utilizate frecvent.

2. Repozitionare & redimensionare & remodelare

Repozitionarea este simplul act de click pe un obiect si apoi drag cu el la o alta locatie. Repozitionarea este o forma de manipulare directa care are loc la un nivel conceptual mai ridicat decât cel ocupat de obiectul care se repozitioneaza. Adica nu manipulam un aspect al obiectului ci manipulam amplasarea obiectului în spatiu. Aceasta actiune consuma un drag&drop care nu mai este disponibil pentru alte scopuri. Daca obiectul este repozitionabil semnificatia lui click&drag este preluata si nu poate fi destinata unei alte actiuni din cadrul obiectului însusi, precum o apasare de buton. Pentru acest conflict solutia generala este dedicarea unei zone fizice specifice a obiectului pentru functia de repozitionare.

De exemplu putem pozitiona o fereastra în Windows sau Macintosh prin click&drag cu bara caption. Restul ferestrei nu este pliant pentru repozitionare astfel încât idiomul click&drag este disponibil pentru functiile specifice ale aplicatiei. Singura simulare pentru proprietatea de drag a ferestrei este culoarea barei caption, o simulare vizuala subtila. Dar trebuie sa furnizam o simulare vizuala mai explicita, deoarece bara caption are o semnificatie multipla - identificator de program, indicator de stare activa, depozit pentru controale standard de sistem -functii de minimizare, maximizare, close si meniul sistem.

Pentru mutarea unui obiect întâi acesta trebuie selectat. Este motivul pentru care selectia trebuie sa aiba loc la tranzitia mouse-down; utilizatorul poarte face drag fara sa fi facut mai întâi click&release pe un obiect, pentru atl selecta, apoi click&drag pe acesta pentru a-l pozitiona. Pare cu mult mai simplu un click pe el si apoi drag unde se doreste cu o miscare simpla. În Word Microsoft ne-a dat operatia destul de greu de utilizat - click-wait-drag pentru a muta locuri text. trebuie sa facem click&drag pentru a selecta o portiune de text, apoi avem de asteptat o secunda si din nou click&drag pentru a muta textul.

Când ne referim la destop-ul Windows si alte interfete grafice utilizator similare nu exista o diferenta reala între redimensionare si remodelare. Utilizatorul ajusteaza dimensiunea dreptunghiulara a ferestrei si proportia aspectului în acelasi timp cu acelasi cotrol - prin clcik&drag. Pe Machintosh exista un control de redimensionare special pe fiecare fereastra în coltul din dreapta jos aflat în mod frecvent în spatiul dintre scrollbar.-urile vertical si oriontal al aplicatiei. Prin drag cu acest control utilizatorului i se permite sa schimbe atât înaltimea cât si latimea dreptunghiului. Windows 3.x s-a ferit de acest idiom în favoarea unui frame subtire (thickframe) care înconjoara fiecare fereastra. Acest frame este o solutie excelenta, deoarece ofera o simulare vizuala generoasa si simularea cursorului astfel încât este usor de descoperit. Defectul sau este volumul de effort consumat.Acesta poate fi 4-5 pixeli latime (putând fi micsorat pâna la minim 2 pixeli) dar daca se înmulteste cu suma lungimilor celor 4 parti ale ferestrei vom vedea ca acest frame e scump.

Windows 95 si Windows NT 4.0 institutionalizeaza un nou simbol vizual pentru remodelare-redimensionare care în mod remarcabil este similar coltului din dreapta jos de pe Macintosh. Acest simbol vizual este un mic triunghi drept, la 45 ⁰, zabrelit, acest simbol vizual este denumit utilizând o combinatie a cuvintelor sharper (modelator) si triangle (triunghi) deci obtinem shangle. Acesta continua sa ocupe ca spatiu într-o fereastra un patrat dar majoritatea programelor Windows au o astfel de bara status la baza ferestrei lor iar acest simbol grafic vizual remodelator împrumuta spatiu de aici mai degraba decît din zona client a ferestrei.

Windows 95 a continuat sa mentina thichframe-ul si simularea cursorului dar le-a modificat puternic astfel încât nu ramâne nici un fel de simulare vizuala a frame-ului desi simularea cursorului se pastreaza. Thichframe-urile si shangle-urile sunt perfecte pentru redimensionarea ferestrelor dar când obiectul de redimensionat este un element grafic într-un program de desenare nu este acceptabil sa fie în mod permannet acoperit de controale. Un idiom pentru redimensionarea obiectelor grafice trebuie sa fie în mod evident vizual pentru a se diferentia de alte parti ale desenului în special de obiectul pe care îl controleaza. Remodelatorul nu trebuie sa umbreasca actiunea de redimensionare. Acest lucru se realizeaza utilizând opt patrate negre mici pozitionate câte unul în fiecare colt al obiectului dreptunghiular si câte unul centrat pe fiecare latura. Aceste mici patrate negre sunt numite grapples. Grapple-urile reprezinta un avantaj pentru proiectanti deoarece indica totodata si selectia. Aceasta e o relatie simbiotica naturala din momemnt ce un obiect trebuie de obicei sa fie selectat pentru a fi redimensionat. Grapple-ul centrat pe fiecare parte deplaseaza doar acea parte în timp ce restul ramâne pe loc.

Grapple-urile din colturi muta simultan ambele parti care se unesc si este foarte logic! Grapple-urile, au tendinta de a pune în umbra obiectul pe care-l reprezinta ca urmare ele nu sunt controale permanente bune, deci nu le vom vedea pe ferestrele redimensionabile top-level. Daca obiectul selectat e mai mare decât ecranul grapple-urile pot sa nu fie vizibile. Daca sunt ascunse în afara ecranului, nu numai ca nu mai sunt disponibile pentru manipulare directa dar nu sunt nici folositoare ca indicatoare a selectiei.

În discutia de mai sus s-a presupus ca obiectul vizat este dreptunghiular sau poate fi usor delimitat de un dreptunghi. Pentru remodelarea obiectelor complexe exista un obiect foarte puternic si util care se numeste vertex grapple. Multe programe deseneaza obiectele pe ecran folosind polilinii. O polilinie (polyline) este un termen specific programatorului de grafica pentru linia multi-segment definita printr-un vector de puncte unghiulare. Daca ultimul punct este identic cu primul este vorba de o figura închisa iar polilinia este un poligon. Când obiectul e selectat programul plaseaza câte un grapple în topul fiecarui punct al poliliniei. Deci utilizatorul poate face drag în mod independent cu fiecare punct al poliliniei si sa modifice doar un aspect al formei obiectului în loc sa afecteze totul, lucru ilustrat în figura de mai jos.

Multe din obiectele din PowerPoint inclusiv poligoanele sunt redate cu polilinii. Daca se face un click pe un poligon i se da un dreptunghi delimitator cu 8 grapple-uri standard. Daca se face dublu-click pe un poligon, dreptunghiul delimitator dispare si apar în schimb vertex-urile. E important ca aceste actiuni sa fie disponibile primul e important pentru a scala imaginea proportional iar al doilea este necesar pentru a controla figura. În contextul unui drag, redimensionarea si remodelarea variantelor meta-cheie este utilizta adesea pentru a restrînge actiunea drag la o directie ortogonala. Acest tip de drag se numeste constrained drag (drag constrâns).

Un drag restrâns este cel care sta în axele la 90⁰ sau 45⁰ referitor la modalitatea în care utilizatorul va schimba directia liniei de drag utilizând mouse-ul. În mod uzual se utilizeaza cheia SHIFT dar aceasta conventie variaza de la program la program. Actiunile de drag restrânse sunt extrem de utile în programele de desenare mai ales când se deseneaza grafice de business care sunt în general diagrame. Unghiul dupa care se face drag, este determinat de deplasarea predominanta a primilor câtiva mm de drag. Unele programe interpreteaza constrângerile în mod diferit lasând utilizatorul sa faca shift cu axele în mijlocul unei actiuni drag facând drag cu mouse-ul pe ele. Orice modalitate este perfecta.

Majoritatea programelor de desenare care trateaza axele ca obiecte permit actiuni de drag restrânse. Utilizarea meta-cheilor ridica o întrebare - unde anume pe parcursul unui drag meta-cheia va deveni semnificativa ? Trebuie ca meta-cheia sa fie tinuta apasata atunci când începe un drag sau mai degraba e necesar ca meta-cheia sa fie apasata într-un punct anume în timp ce se face drag ? Sau trebuie ca meta-cheia sa fie apasata în momentul în care se elibereaza butonul de mouse ? Raspunsul este urmatorul - daca calculatorul detecteaza faptul ca o meta-cheie este tinuta apasata la momentul când butonul mouse este eliberat, efortul este considerat valid.

3. Indicare prin sageti

O actiune de manipulare directa foarte putenic este arrowing - indicarea prin sageti prin care utilizatorul face click&drag de la un obiect la altul dar în loc ca primul obiect sa fie tras peste al doilea este desenata o sageata de la primul obiect la al doilea.

În general sagetile vizuale se comporta într-o maniera descrisa cel mai bine prin rubber-banding (o modalitate de unire pentru a realiza ceva). Rubber-banding este atunci când sageata formeaza o linie cu care se extinde exact din puntulo mouse-down pâna în pozitia curenta a cursorului. Linia este animata astfel încât me masura ce utilizatorul muta cursorul, pozitia de sfârsitului de cursor la liniei pivoteaza constant sfârsitul ancorat al liniei (de la punctul mouse-down). Imediat dupa ce utilizatorul elibereaza butonul de mouse, punctul mouse-up eset cunoscut si programul poate decide daca era într-o locatie tinta valida. Daca da programul deseneaza o sageata vizuala mai pregnanta între cele doua obiecte si în general le si leaga logic.

Functia de arrowing nu poate fi în mod normal actionata priun buton stâng de mouse deoarece ar intar în coliziune cu selectia si repozitionarea. În unele programe functia este actionata prin buton drept, dar în Windows 95 aceasta devine problematica data fiind uzurparea click-ului dreapta de catre meniul contextual. ! Mai exista si meta-cheia ALT ! Functia de arrowing nu necesita atât de mult simularea cursorului precum alte idiomuri deoarece efectul de rubber-banding este vizibil, atât de clar. Totusi în programele în care obiectele sunt conectate logic, ar fi de mare ajutor sa se arate care dintre obiectele curente, punctate "to", reprezinta tinte valide.

Feedback vizual de manipulare directa

Cheia succesului manipularii directe este feedback-ul vizual bogat. Procesul de manipulare directa poate fi împartit în trei etape distincte:

faza libera - înainte de orice actiune a autilizatorului

faza captiva - de îndata ce utilizatorul a început sa faca drag

faza terminare - dupa ce utilizatorul a eliberat butonul de mouse

În faza libera (free phase), jobul nostru este de a indica flexibilitatea manipularii directe.

În faza captiva (captive phase) avem doua task-uri. Trebuie sa indicam exact si sigur faptul ca procesul de manipulare directa a început si trebuie sa identificam în mod vizual care sunt participantii potentiali la actiune. În faza terminare (termination phase) trebuie sa indicam din plin utilizatorului faptul ca actiunea s-a terminat si sa aratam exact care este rezultatul.

În functie de faza în care suntem cu manipularea directa exista doua variante de simulare a cursorului. În timpul fazei libere numim orice schimbare vizuala a cursorului pe masura ce trece peste ceva de pe ecran simulare libera a cursorului (free hinting). Imediat ce a început faza captiva numim schimbarile cursorului ca fiind imulare captiva a acestuia (captive cursor hinting) .

Microsoft Word utilizeaza simularea desteapta libera a cursorului prin inversare unghiului sagetii când cursorul e lasat pe text, pentru a indica faptul ca selectia va fi linie cu linie sau paragraf cu paragraf în loc de caracter cu caracter cum este în mod normal în cadrul textului însusi. Alte programe utilizeaza cursor format mâna pentru a indica faptul ca documentul însusi si nu informatia continuta în ele este cea deplasabila. Microsoft utilizeaza tot mai mult simularea captiva a cursorului. Drag&drop cu text în Word sau celule Excel este acompaniata de schimbarile cursorului indicând precis care este actiunea si care sunt obiectele mutate sau copiate.

Când se realizeaza un drag cu ceva cursorul trebuie sa faca drag fie cu acel lucru fie cu un simulacru al acelui lucru. În programele de desenare când se face un drag cu un element vizual complex, de la o pozitie la alta s-ar putea ca programului sa-i fie greu sa faca drag cu imaginea, astfel încât de multe ori se face drag cu conturul exterior al obiectului.

4.Drag & drop

Drag&drop a fost acceptat ca o piatra fundamentala a interfetelor grafice utilizator moderne desi drag&drop este foarte rar folosit în afara programelor specializate în domeniul desenarii. O descriere curata a actiunii drag&drop este - click pe un obiect si mutarea lui pentru a crea o transformare. Macintosh a fost primul sistem care a oferit drag&drop si a fost descris în primul ghid de standarde ale interfetelor utilizator.

Microsoft nu a pus facilitati de drag&drop în Shell Windows , singurul drag&drop prezent fiind cel din aplicatia Paint pâna la Windows 3.0. În mod fundamental se poate face drag de la ceva aflat într-un loc consideart ca fiind drag&drop interior (interior drag-and-drop) sau se poate aduce prin drag&drop ceva în progam dintr-ul alt program considerat ca fiind drag&drop exterior (exterior drag-and-drop). Drag&drop-ul interior poate fi reslizat simplu atât din punct de vedere conceptual cât si al codificarii. Cel exterior necesita un suport cu mult mai sofisticat deoarece ambele programe trebuie sa subscrie aceluiasi concept pe care trebuie sa îl implementeze în modalitati compatibile. Am considerat repozitionarea ca fiind manipulare directa si s-a discutat la începutul acestui curs. Se vor discuta restul de variante drag&drop. În principal acestea sunt doua si anume: manipulare master&tinta si instrument de manipulare.

a.Master & target

Numim manipulare master&tinta (master-and-target) operatia prin care utilizatorul face click pe un obiect discret apoi face drag cu acesta peste un alt obiect cu scopul de a realiza o functie. Obiectul aflat la originea drag-ului controleaza tot procesul prin urmare el este obiectul master, care va fi o fereastra. Daca se face drag cu un simbol grafic (icon), acel icon este o fereastra. Daca se face drag cu un paragraf de text, editorul în cadrul caruia se petrece aceasta este fereastra. Obiectul tinta (target) este cel peste care se lasa orice a fost subiectul unui drag&drop când utilizatorul elibereaza butonul de mouse. Scopul principal al termenului master&target este de a deosebi aceasta operatie de alte tipuri de operatii drag&drop pe care le gasim în programele de desenare. Forma cea mai familiara de drag&drop de tip master&target este rearanjarea icon-urilor în Program Manager.

Cum lucreaza master & target

Imediat ce utilizatorul a apasat pe butonul de mouse pe un obict acesta devine obiectul master pe toata durata drag&drop-ului. Dar nu exista nici un obiect tinta corespondent deoarece bpunctul mouse-up nu a fost înca de terminat - ar putea fi un alt obiect sau pe spatiul deschis dintre alte obiecte. si totusi pe masura ce utilizatorul mmuta mouse-ul cu butonul tinut apasat - aceasta fiind faza captiva - cursorul poate trece peste o varietate de obiecte din interiorul sau din afara programului obiectului. Daca aceste obiecte sunt compatibile drag&drop ele reprezinta tinte posibile si le numim candidati drop (drop candidates).

Într-o operatie drag nu poate exista decât un master si o singura tinta dar pot exista mai multi candidati drop. În functie de protocolul drag&drop un cadidat drop poate sa nu stie cum sa accepte o valoare drop particulara, trebuie sa stie doar cum sa accepte protocolul oferit. Alte protocoale ar putea solicita ca un candidat sa recunoasca imediat daca poate sa faca ceva util cu obiectul master oferit. Ultima metoda este mai înceata dar ofera utilizatorului un feedback mai bun. Sa nu uitam ca aceasta operatie este direct sub control uman, iar obiectul master poate trece rapid peste zeci de candidati drop înainte ca utilizatorul sa se pozitioneze pe cel dorit.

Design tip - Cadidatul drop trebuie sa indice vizual capacitatea sa drop

Indicatii vizuale

Singurul task al fiecarui candidat drop este de a indica în mod vizual ca hotspot-ul cursorului este pe el, semnificând faptul ca el va accepta drop-ul sau îl va întelege daca utilizatorul elibereaza butonul de mouse. O astfel de indicatie este o simulare vizuala activa.

Cea mai slaba metoda de a oferi indicatie vizuala pentru asa ceva este prin schimbarea formei cursorului. Cursorul are rolul de a reprezenta cu ce anume se face drag si sa lase toate indicatiile privind candidatura drop candidatului drop, însusi. Este foarte important ca aceste doua functii vizuale sa nu fie confundate.

Design tip - Cursorul drag trebuie sa indice vizual obiectul master

Din pacate Microsoft în Windows 3.x si în Windows 95 a procedat în acest mod. Se pare ca aceasta decizie a fost luata pentru usurinta codificarii E mult mai usor sa schibi cursorul decât sa marchezi (highlight) candidatii drop pentru a-si arata proprietatea de drop. Rolul cursorului este de a prezenta masterul, obiectul cu care se face drag, el nu ar trebui utilizat pentru a reprezenta candidatul drop. Microsoft realizeaza simularea cursorului printr-un cerculet numit cerc sinistru (sinister circle). Acest cerc este un indicator de tip - nu face asta- si utilizatorul îi va ajusta întelesul în - nu lasa maouse-ul acum altfel paguba va fi ireversibila. Adaugarea cercului la simularea cursorului este o combinatie neispirata.

Când utilizatorul a eliberat butonul de mouse candidatul drop curent devine tinta. Daca utilizatorul elibereaza butonul mouse în interstitiul dintre candidati drop valizi sau peste un candidat drop invalid atunci nu exista nici o tinta iar operatia de drag&drop se termina fara o actiune. Tacerea sau lipsa unei activitati vizuale este o modalitate buna de a indica terminarea.

Indicarea posibilitatii de drag

Simularea activa a unui cursor pentru a indica posibilitatea de drag este o solutie problematica. Un cursor tremurat si care se schimba rapid poate fi mai mult o distractie vizuala decât un ajutor real. O solutie este sa presupunem doar care sunt lucrurile care sunt lucruile cu care se poate face drag si sa lasam utilizatorul sa experimenteze. Aceasta metoda are succes în Program Manager, File manager, Explorer. Fara simularea cursorului posibilitatea de a face drag poate fi greu de descoperit deci trebuie sa avem în vedere construirea în interfata a câtorva indicatii, poate chiar o simulare textuala sau un popup.

Imediat ce obiectul master este apucat si operatia drag începe, pentru aceasta sunt necesare câteva indicatii vizuale. Cea mai bogata metoda vizuala este animarea completa a operatiei drag, aratând cum se muta în timp real, întregul obiect master.Aceasta metoda este greu de implementat si nu neaparat solutia cea mai indicata. Problema este ca o operatie master&target necesita un pointer foarte precis.

În cadrul unei operatii master&target este mult mai bine sa deplasam conturul transparent al obiectului decât sa facem un drag complet animat al imaginii exacte a obiectului master. Acest lucru înseamna ca obiectul cu care se face drag nu poate ascunde sageata cursorului.Tipul de sageata este necesar pentru a indica exact hotspot-ul.

Indicarea candidatului drop

Pe masura ce cursorul traverseaza ecranul tragând cu el un contur al obiectului master, rând pe rând el trece peste candidatii drop. Acettia trebuie sa indice vizual faptul ca sunt constienti de a fi drept tinte drop potentiale. Prin schimbarea vizuala candidatul drop alerteaza utilizatorul ca poate face ceva constructiv cu obiectul care urmeaza sa fie lasat. Singurele obiectle care pot fi candidati drop sunt cele vizibile în mod curent. În mod uzual numarul de obiecte care ocupa spatiul real al ecranului este foarte mic - câteva zeci cel mult.

Din punct de vedere intern obiectul master trebuie sa comunice cu fiecare candidat drop peste care trece. Ar fi foarte bine sa aiba loc o scurta conversatie în care obiectul master sa întrebe tinta daca poate accepta drag-ul, iar în caz afirmativ tinta trebuie sa indice acest lucru prin simulare vizuala.

Microsoft nu insista asupra simularii vizuale a candidatilor drop ci doar sugereaza ca schimbarea cursorului este suficienta. Se considera ca procedând astfel este mai usor de programat dar din orice aspect centrat pe utilizator este mai rau. Este dificil de înteles cu ce se face drag, care este tinta si daca tinta re sens sau nu pentru drop. În Windows 95 cel putin pe desktop, simbolurile grafice (icons) indica acum corect candidatura drop prin inversare vizuala.

Terminarea unei operatii drag&drop

Când în final obiectul master este lasat unui candidat drop, acesta devine tinta. Este momentul în care masterul si tinta trebuie sa se angajeze într-o conversatie cu mult mai detaliata decât cea pe care a vut-o mater-ul cu ceilalti candidati drop. Ţinta ar putea sa stie cum sa accepte drop-ul dar nu înseamna ca poate înghiti obiectul master particular lasat pentru aceasta operatie specifica. În general distinctia nu este importanta pentru un drag&drop interior dar pentru un drag&drop exterior estrs cât se poate de îndoielnic faptul ca timpul este suficient pentru a rezolva problema în timpul fazei captive, evident ca acest lucru tine cont de performanta.

Daca se transfera informatii informatii, master&target poate dori sa negocieze daca transferul va fi într-un format proprietar cunoscut ambelor obiecte sau daca va trebui ca datele sa fie reduse la o rezolutie mai slaba dar utilizata precum textul ASCII.

Indicarea vizuala a terminarii

Daca tinta si master-ul pot cadea de acord operatia corespunzatoare poate avea loc. În acest moment un pas important este indicarea vizuala a faptului ca operatia s-a produs. Daca operatia este un transfer obiectul master trebuie sa dispara din sursa si sa reapara în tinta.

Daca tinta reprezinta o functie (de exemplu icon Print) ea trebuie sa simlaze vizual faptul ca a receptionat drop-ul si ca acum este în curs de imprimare. Poate realiza acest lucru ca animatie sau prin imprimarea starii sale vizuale. O operatie drag&drop master&target bogata cu adevarat reprezinta una din operatiile cele mai puternice din desaga cu trucurui a proiectantului de interfete grafice utilizator.

Drag & drop - instrument de manipulare

În programele de desenare si realizare de imagini utilizatorul manipuleaza instrumentele cu drag&drop, atunci când un instrument sau o figura este adusa în spatiul de lucru prin drag si este utilizat un instrument de desenare. Pentru aceasta exista doua variante de baza numite instrument modal si cursor încarcat.

Instrument modal

Într-un instrument modal (modal tool) utilizatorul selecteaza un instruemnt dintr-o lista de obicei toolbox sau paleta. Din acest moment programul se afla complet în modul acelui instrument - va executa doar job-ul unic al instrumentului. În mod uzual cursorul se modifica pentru a indica faptul ca instrumentul este activ. Când utilizatorul face un click&drag cu un instrument în zona de desenare instrumentul îti face treaba. Daca utilizatorul doreste sa lucreze cu un alt instrument trebuie sa revina în toolbox si sa selecteze instrumentul respectiv. De obicei pe paleta exista un instrument de tip cursor pentru a lasa utilizatorul sa returneze cursorul la un scop general - acela de pointer. Într-un program precum Paint în care numarul instrumentelor de desenare este relativ mic, instrumentul modal nu este suparator, dar în programe d edesenare mai avansate precum Adobe Illustrator caracteristica modality este foarte sfarâmata deoarece pe masura ce utilizatorul obtine tot mai usor cursorul si instumentele, procentul de timp si de miscare destinate selectarii si deselectarii instrumentelor - accizele - sporesc în mod dramatic. Dificultatea gestionarii unei aplicatii de instrumente modale nu este provocata de modality pe cât de mult este determinata de volumul de instrumente. Mai precis eficienta scade când cantitatea de instrumente aflate în setul utilizatorului ajunge sa fie prea mare.

Pentru a compensa profunzimea instrumentelot modale, unele produse soft utilizeaza meta-chei pentru a modifica diferitele moduri. Indiscutabil combinatiile posibile sunt puternice dar greu de învatat, de tinut minte si memorat. Ele vor fi folosite de utilizatorii specializati si nu de cei obisnuiti.

Cursor încarcat

A doua tehnica drag&drop ca instruemnt de manipulare este ceea ce numim cursor încarcat (charged cursor). Cu un astfel de cursor utilizatorul poate selecta din nou un instrument sau o figura dintr-o paleta însa de data aceasta cursorul în loc sa devina obiect al tipului selelctat devine încarcat cu o singura instanta a obiectului selectat. Atunci când utilizatorul face un click o data pe suprafata de desenare se creaza o instanta a obiectului, în punctul mouse-up. Cursorul încarcat nu lucreaza prea bine pentru instrumente dar se potriveste bine cu obiectele grafice. De exemplu PowerPoint îl utilizeaza extensiv. Utilizatorul selecteaza un dreptunghi din paleta grafica, cursorul devenind un instrument dreotunghi modal, încarcat exact cu un dreptunghi.

Multe programe de desenare uzuale lucreaza astfel fiind ceva obisnuit pentru idiomurile grafice de manipulare directa construite în programe care nu au fost gândite specila ca programe de desenare. De exemplu în Visual Basic când un utilizator face clcik pe uj simbol vizual din paleta de instrumente, cursorul devine âncarcat cu acel simbol vizual. Apoi utilizatorul face din nou click pentru a crea o singura instanta a acestuia. Borland Delphi utilizeaza si el cursor încarcat. Daca se face SHIFT-click pe un simbol vizual din paleta se obtine un instrument modal pentru crearea instantelor multiole ale simbolului vizual. Destept!

În unele programe care utilizeaza cursor încarcat, precum PowerPoint, utilizatorul nu poate depozita întotdeauna un obiect doar prin simplu click trebuind sa faca un drag cu un dreptunghi înconjurator pentru a determina dimensiunea obiectului depozitat. Unele programe precum Visual Basic permit orice metoda. Un simplu click pe un cursor încarcat creeaza o singura instata a obiectului în dimensiune standard. Ca urmare noul obiect este creat într-o stare de selectie fiind înconjurat de grapples gata pentru a fi modelat si redimensionat cu precizie.

Exista programe care folosesc tehnica cursor încarcat si care uita sa schimbe aparenta cursorului. Visual Basic schimba cursorul când este încarcat, dar Delphi nu o face. De asemenea cursorul încarcat aree nevoie de idiomuri bune pentru abandonare altfel nu avem cum sa descarcam cursorul în mod inofensiv.

Ţintirea bombei

Pe masura ce utilizatorul face drag cu un obiect master de-a lungul ecranului fiecare candidat drop se schimba vizual, pe masura ce este punctat indicând astefl abilitatea sa de a accepta drop-ul. În unele programe obiectul mater poate fi lasat în spatiile dintre alte obiecte. Numim aceasta varianta ca fiind drag&drop bombardier (bombardier). De exmplu a face drag cu un text Word este o operatie de tip bombardier.

Feedbak-ul vizual vital al drag&drop-ului bombardier este ilustrat atunci când obiectul master va cadea daca utilizatorul elibereaza butonul de mouse.

În master&target candidatul drop devine marcant (highlight) în mod vizual pentru a indica un drop potential, dar în cazul bombardier, drop-ul potential va fi undeva în spatiul în care nu exista nici un alt obiect. Simularea vizuala este ceva desenat în background-ul programului sau în datele sale concrete. Numim aceasta simulare vizuala tinta bombei (bombsight). De exmplu rearanjareab slide-urilor din vizualizatorul PowerPoint este un exmplu bun pentru un astfel de tip de drag&drop. Utilizatorul poate apuca un slide si poate face drag cu el într-o ordine diferita de prezentare. În timp ce se face drag, tinta bombei apare între slide-uri sub forma unei bare verticale, negre. În plus fata de faptul ca se misca cursorul încarcat se poate vedea si o bara gri verticala care arata cu precizie locatia dintre caractere, acolo unde se va pune textul adus. Ori de câte ori ceva poate fi plasat prin drag&drop în spatiul dintre alte obiecte programul trebuie sa arate un bombsight si întocmai ca un candidat drop din master&target aceasta candidatura trebuie indicata vizual.

Probleme si solutii drag & drop

Când utilizam pentru prima data un drag&drop pare simplu, dar pot sa apara în anumite conditii speciale problme si dificultati care nu sunt atât de simple. Proiectantii foarte inventivi au gasit solutii foarte destepte.

Autoscroll

Ce interpretare ar trebui sa dea programul atunci când un obiect selelctat prin drag trece de marginea dreptunghiului care delimiteaza aplicatia? Interpretarea corecta este aceea ca obiectul a fost dus prin drag într-o pozitie noua, dar aceasta pozite noua este în interiorul sau în afara dreptunghiului delimitator?

De exemplu în Microsoft Word când o portiune de text selectat ajunge prin drag în afara ferestrei vizibile se doreste sa spuna utilizatorul? Vreau sa pun textul într-un alt program sau vreau sa pun tetxul în alta parte în cadrul aceluiasi document dar locul nu este vizibil pe ecran?

În primul caz lucruirle sunt simple în al doilea caz însa aplicatia trebuie sa faca scroll în directia în care se face drag pentru a repozitiona selelctia la locatia nevizibila în mod curent în cadrul aceluiasi document. Numim aceasta operatie de scroll scroll automat (autoscroll).

Autoscroll-ul este un accesoriu foarte important pentru drag&drop. Ori de câte ori exista posibilitatea ca o tinta drop sa nu fie pe ecran din motive scroll-off programul necesita autoscroll. În implementarile de debut autoscroll functiona în cazul în care se facea drag în afara ferestrei aplicatiei. Aceasta solutie avea doua mari defecte - primul daca aplicatia era maximizata cum putea ajunge cusorul în afara aplicatiei iar al doilea daca dorea sa se faca drag cu un obiect într-un alt program cum putea aplicatia sa stie diferenta dintre aceasta situatie si dorinta de autoscroll ?

Pentru aceasta problema Microsoft a dezvoltat o solutie foarte inteligenta. În principiu se începe cu autoscroll chiar în cadrul aplicatiei în loc de în afar imaginii. Daca cursorul drag se apropie de marginea unei ferestre scroll-abile dar înca se afla în interiorul acesteia este initiat un scroll în directia data de drag. Daca cursorul drag ajunge le 3-4 mm de marginea de jos a ferestrei-text, Word face scroll-up cu continutul ferestrei.

Analog daca cursorul drag ajunge la 3-4 mm de limita de sus a ferestrei Word face scroll-down. Din nefericire implementarea Word-ului nu tine cont de puterea microprocesorului.

O solutie mai buna pentru implementarea acestul element ar fi utilizarea unei rate de autoscroll variabile asa cum se vede în figura de mai sus.

unde scroll-ul automat creste în viteza pe masura ce cursorul se apropie tot mai mult de marginea ferestrei. De exemplu când cursorul este la 5mm de marginea de sus textul va coborî (scroll-down) o linie pe secunda, la 4 mm 2 linii pe secunda, etc. Astfel se da utilizatorului un control suficient asupra autoscroll-ului pentru a-l face mai folositor. Un detaliu important cerut autoscroll-ului este timpul de întârziere (delay-time). Daca autoscroll-ul începe imadiat ce cursorul a întrat în zona senzitiva din jurul marginilor, pentru un utilizator mai mocait e usor sa faca autoscroll în mod accidental. Pentru a evita asa ceva autoscroll-ul trebuie sa înceapa doar dupa ce cursorul drag a fost prezent în zona de scroll un timp rezonabil - în jur de o jumatate de secunda.

Design Tip - orice tinta drag&drop careia i se aplica scroll trebuie sa faca autoscroll

Daca utilizatorul fac drag cu cursorul complet în afara ferestrei text a aplicatiei (scroll-abile) nu intervine nici un autoscroll. În schimb operatie de repozitionare se va termina într-un alt program decât Word. De exmplu daca cursorul drag ajunge în afara Word-ului si este pozitionat peste PowerPoint atunci când utilizatorul elibereaza butonul mouse slelectia se va transfera în slide-ul PowerPoint la pozitia indicata de mouse. Mai mult daca cursorul se muta în limita 3-4 mm a oricarei margini a ferestrei de editare PowerPoint acesat va începe sa faca autoscroll în directia corespunzatoare.

Prevenirea smuciturilor drag&drop

Când asupra unui obiect pot fi realizate - selectie si drag este vital ca mouse-ul sa incline în favoarea operatiei de selectare. Deoarece este dificil de facut drag pe ceva fara ca în mod accidental cursorul sa nu se mute 1-2 pixeli, actul frecvent de selectare nu trebuie sa determine accidental ca programul sa interpreteze gresit actiunea ca fiind începutul unei operatii drag&drop. De obicei timpul necesar realizarii unui drag este mai mare decât cel necesar programului pentru a realiza selectie, iar drag este acompaniat adesea de un repaint astfel încât obiectele de pe ecran vor tremura si tresari. Acest lucru poate fi deranjant pentru utilizatorii care se asteptau la un simplu select. În plus obiectul este deplasat acum cu câtiva pixeli ceea ce nu-i convine utilizatorului.

În lumea hardware controale precum push-button dispun de contacfte mecanice care produc ceea ce inginerii numesc bounce -contactele mecanice ale switch-ului sar efectiv când sunt apasate. Circuitul din spatele acestor switch-uri are o logica speciala care ignora tranzitiile uplimentare daca apar cu câteva milisecunde înainte de primul click. Acest lucru este analog cu problema supersensibilitatii mouse-ului, iar solutia este de a copia switch-urile si de a face mouse-ul sa nu mai ricoseze (debounce). Pentru a preveni aceasta situatie programul trebuie sa stabileasca ceea ce numim pragul mouse-ului (mouse threshold). În esenta toate mesajele de deplasare ale mouse-ului care sosesc dupa pasarea butonului si dupa ce începe captura sunt ignorate daca nu cumva din miscarea depaseste un mic prag sa zicem de 6 pixeli. Aceasta asigura o oarecare protectie împotrive initierii unei operatii drag inadvertente. Daca utilizatorul poate apasa butonul de mouse în cadrul a 3 pixeli din punctul mouse-down întreaga actiune click este interpretata ca o comanda de selectie, iar restul miscarilor false sunt ignorate, deci obiectul nu a mai ricosat. Imediat ce miscarile mouse-ului trec de pargul de 3 pixeli, programul poate schimba operatia în drag în modul ilustrat mai jos

Ori de câte ori avem o situatie în care obiectul poate fi selectat si deplasat operatia drag trebuie sa nu ricoseze.

Design tip - Sa facem ca drag-urile sa nu ricoseze

Program Manager din Windows 3.x are un parg de un pixel (only-one) ceea ce era prea putin. Simbolurile grafice (icon-urile) din desktop-ul Windows 95 au un prag de ricosare de 4 pixeli. În cadrul programelor generatoare de rapoarte este necesara manipularea unui prag pentru operatia drag mult mai complex. Utilizatorul poate repozitiona coloanele în raport facând drag cu ele pe orizontala. Acesta este drag&drop-ul cel mai des utilizat.

Vernier mouse

Slabiciunea mouse-ului ca instrument de punctare cu precizie este aparenta, atunci când se face drag cu obiectele prin programele de desenare. Este dificil de facut drag exact în spot-ul dorit, ami ales când rezolutia este de 100 pixel-per-inch sau ceva mai mult iar mouse-ul alearga pe ecran cu o viteza de 6 la 1. Pentru a muta cursorul 1 pixel, trebuie sa mutam mouse-ul cu o precizie reprezentând a 6-a suta parte dintr-un inch ceea ce nu este usor de facut. Problema se rezolva prin adaugarea a ceea ce numim functia mouse vernier (vernier mouse) prin care utilizatorul poate comuta repede într-un mod care permite o rezolutie cu mult mai fina pentru manipularea obiectelor, bazat pe mouse .

În timpul unui drag daca utilizatorul decide ca are nevoie de o manevrare mai precisa el poate schimba viteza mouse-ului relativ la miscarea obiectului pe ecran. Orice program care poate solicita o aliniere mai precisa, trebuie sa ofere o facilitate vernier. Aceasta include la minim toate programele de desenare si pictura, programele de prezentare si cele de manipulare a imaginilor. Exista câteva variante acceptabile pentru idiom. În timpul unei operatii drag se poate apasa un buton precum cheia ENTER iar mouse-ul va trece în mod vernier. În acest mod fiecare 10 pixeli din miscarea mouse-ului vor fi interpretati ca un singur pixel.

Design Tip - Orice program care necesita aliniere precisa trebuie sa ofere un vernier

Una din metodele populare este aceea de a activa cheile sageti în timpul operatiei drag. În timp ce se mentine butonul mouse apasat utilizatorul poate manipula cheile sageti pentru a muta selectia în sus, în jos,la dreapta, la stânga câte un pixel o data. Operatia drag este terminata la eliberarea butonului de mouse. Problema cu un astfel de vernier este ca simplul act al eliberarii butonului de mouse poate provoca adesea deplasarea mâinii utilizatorului cu 1-2 pixeli facând ca obiectul plasat sa alunece din aliniere exact în momentul acceptarii. Solutia este ca la prima tastare vernier mouse-ul sa fie desensibilizat. Acest lucru se realizeaza facând ca mouse-ul sa ignore toate miscarile consecutive sub un prag rezonabil - de 5 pixeli. Acest lucru permite ca utilizatorul sa faca initial deplasari grosolane apoi în final sa treaca la deplasari mai precise folosind cheile sageti si eliberând butonul de mouse fara a perturba amplasarea. Daca utilizatorul doreste sa faca deplasari aditionale grosolane dupa începerea miscarii vernier, va putea sî mute mouse-ul pur si simplu iar sistemul va terce înapoi în mod vernier.

Daca cheile sageti nu sunt destinate mai degraba interfetei precum într-un program de desenare, ele pot fi folosite pentru a controla miscarea vernier a obiectului selectat fara a fi necesar ca butonul de mouse sa fie mentinut apasat. Acest lucru este realizat în PowerPoint într-un mod simpatic - cheile sageti muta obiectul selelctat un pas din grila -cam 2mm- folosind setarile de grila implicate. Daca tinem apasata cheia ALT în timp ce se folosesc cheile sageti deplasarea este un pixel per click&sageata.