Elemente de control vizuale
Gizmo-urile/elemente de control reprezinta elemente vizuale, de pe ecran, direct manipulabile, auto-continute. Gizmo, control,widget sau gadget - indiferent ce nume alegem ele sunt principalele blocuri de constructie pentru crearea interfetelor utilizator grafice. Utilizarea cuvântului GIZMO a fost conceputa de Mike Geary (programator Windows) coleg cu Allan Cooper creator Visual Basic
Casete de dialog încarcate cu elemente de control vizuale
Casetele de dialog sunt cel mai usor de construit în Windows. Facilitatea caseta de dialog ofera instrumente automate pentru a specifica cum si unde vor fi plasate elementele de control vizuale. Definitia unei casete de dialog este o fereastra modala acoperita cu gizmo-uri. Usurinta cu care programatorii pot crea interfete utilizator bazate pe o caseta de dialog încarcata cu elemente de control e semnificativa. Universul interatiunii este este împartit în doua lumi: lumea implementarii extrem de facile a gizmo-urilor conservate si lumea extrem de dificila a interactiunii vizuale directe.
Design tip - Nu multitudinea casetelor de dialog pline cu gizmo-uri face interfata utilizator buna !
Includerea din abundenta a gizmo-urilor garanteaza usurinta de implementare dar nu si usurinta de utilizare. Majoritatea gizmo-urilor cu care suntem familiari sunt cele care vin ca standarde in sistemul Windows, acest set a fost întotdeauna limitat ca scop si putere.
Elaborarea elementelor de control vizuale
Utilizarea unui gizmo este usoara, dar elaborarea sa este destul de dificila. Orice programator de C poate crea un nou gizmo, deoarece pentru a actiona în conformitate cu standardele din universul gizmo, programul trebuie sa ofere - recunoasterea tuturor comenzilor de la tastatura, prezentarea unui dreptunghi gri pentru a indica ca detine focus-ul si abilitatea de a se grizona când devine inactiv.
Microsoft Windows a venit cu o suita standard de gizmo-uri care formau baza majoritatii interactiunii cu aplicatiile fiind parte integranta a sistemului de operare. Din punct de vedere tehnic ele sunt în USER.EXE parte din Windows care defineste interfetele grafice utilizator sau majoritatea din ceea ce se vede pe ecran. Desi interfetele de programare cu aceste gizmo-uri arata o vaga asemanare familiara fiecare este complet diferita. Pentru aceasta nu a existat niciodata o interfata de programare a aplicatiilor comuna (API). Elaboratorii de Windows au inventat întotdeauna noi gizmo-uri însa aproape toate au ramas ca standarde proprietar. Lipsa pietei sau a standardelor a facut dificila distribuirea lor. În trecut câteva firme au încercat sa-si vânda gizmo-urile dar nu au luat reusit cu prea mare succes. Singurele gizmo-uri care au avut ceva universalitate au fost cele care veneau ca parte a Windows-ului însusi.
Aparitia lui Visual Basic a schimbat acest lucru, el având o interfata care permite instalarea dinamica a gizmo-urilor. Ele sunt codificate în biblioteci dinamice DLL având o interfata definita în mod comun numita VBX. Interfata VBX nu este nici frumoasa si nici puternica dar este standard si defineste o metoda prin care un program poate folosi un gizmo care nu este parte integranta din Windows. Are acum o modalitate usoara de a folosi gizmo-uri ce nu sunt realizate de Windows. În ultimii ani multi editori de software au luat puternicele lor spreadsheet-uri, programele de grafica si procesoarele de text si le-au facut compatibile VBX. Programatorii pot pentru o plata cu mult sub valoare sa includa în software-ul lor gizmo-uri care sa furnizeze o functionalitate comparabila cu cea a produselor consacrate.
Elemente de control vizuale Microsoft
În USER.EXE din Windows 3.x erau doar sase clase de gizmo - butoane, câmpuri de editare, câmpuri statice, listbox-uri, scrollbar-uri si combobox-uri. Toate celelalte - etichete, grupuri de casete, radio-butoane, checkbox-uri, frame-uri, dreptunghiuri si simboluri grafice (icons) au derivat din aceste clase. Odata cu Windows 95 setul de gizmo-uri disponibile a crescut considerabil dar Microsoft le-a difuzat prin intermediul DLL-urilor, decuplarea codului utilizator de codul sistemului de operare fiind un pas progresist care va încuraja dezvoltarea de gizmo-uri. O mare parte din ceea ce trece drept proiectare de interfata este de fapt rezultatul unei palete limitate de gizmo-uri disponibile programatorilor Windows.
Gizmo-urile se pot împarti în urmatoarele categorii de baza: cele util 141i82b izate pentru a initia o functie numite gizmo-uri imperative, cele care pot fi utilizate pentru a selecta unele optiuni sau date numite gizmo-uri de selectie, cele care sunt utilizate pentru a introduce date numite gizmo-uri de intrare (introducere) si cele care pot fi utilizate pentru a manipula direct programul în mod grafic numite gizmo-uri de afisare.
Elemente de control vizuale(gizmo-uri) imperative
Gizmo-urile imperative comanda o actiune imediata, chintesenta fiind push-butonul chiar daca apare sub numeroase deghizari; astfel apasam un buton iar actiunea asociata se executa imediat. Push-butoanele erau identificate prin conturul lor unic dar de când s-a trecut la 3D, se tine cont de prin aspectul lor în relief. Daca gizmo-ul este dreptunghiular si apare ridicat atunci el are proprietatea vizuala de a fi imperative - se executa imediat ce utilizatorul îl apasa si-l elibereaza utilizând cursorul de mouse.
O parte din proprietatile unui push-button tin de abilitatea de apasare (pressability); când utilizatorul îl puncteaza si apasa butonul de mouse push-butonul de pe ecran se schimba vizual din pozitia ridicat in cea de apasat. Exista programe în care butoanele sunt pictate pe ecran dar ele nu se misca atunci când sunt apasate. Pentru programator este usor sa implementeze asa ceva dar pentru utilizator este dezavantajos deoarece genereaza o întrebare mentala - Chiar am facut ceva?. Utilizatorul asteapta sa vada ca butonul de misca - raspuns flexibil, pliant - si trebuie sa facem asa cum el asteapta. Acest fapt este tot mai important în aplicatiile multimedia, multe din ele desenând imagini minunate pe ecran si setând portiuni drept hot-spot-uri care sunt sensibile click.
În versiunile initiale de Windows push-butoanele erau utilizate extensiv pentru terminarea casetelor de dialog care faceau cea mai mare parte din interactiune. În casetele de dialog modale push-butonul este utilizat doar pentru terminarea comenzilor. Simultan cu lansarea ver. 3.0 de Windows s-a impus necesitatea modificarii interfetei utilizator. Aceasta s-a realizat prin introducerea toolbar-ului care a devenit repede un standard la fel de familiar ca bara de meniu. Pentru a popula toolbar-ul butonul push a trebuit sa fie modificat de la forma sa traditionala din caseta de dialog. În casetele de dialog push-butonul era dreptunghiular si în exclusivitate etichetat cu un text, dar în momentul în care s-a mutat în toolbar a devenit patrat si-a pierdut textul si a achizitionat o legenda de tip icon astfel a luat nastere buticonul - jumatate buton, jumatate icon (simbol grafic).
Aparitia toolbar-ului a schimbat calitativ rolul push-butonului, rolul sau s-a expandat, el fiind însa un dispozitiv al gestiunii casetei de dialog. Buticoanele sunt mereu vizibile si nu necesita asa de mult timp si dexteritate precum meniurile pulldown. Deoarece sunt vizibile în mod constant sunt usor de memorat în particular în aplicatiile suverane. Avantajele buticoanelor sunt greu de separat de avantajele toolbar-ului ambele fiind inevitabil legate. Simbolurile vizuale care exprima actiuni sau relatii sunt dificile sau greu de gasit. Imaginile au calitati mnemonice mai bune, imaginea vizuala este mai eficienta pentru a reaminti utilizatorului zilnic care sunt comenzile reprezentate de buticon, dar fara un mecanism care sa le explice scopul, buticoanele si toolbar-urile sunt mai putin utile.
Elemente de control vizuale(gizmo-uri) de selectie
Un gizmo de selectie (selection gizmo) permite utilizatorului sa aleaga operandul dintr-un set de alternative valide, el nu are asociata nici o actiune, poate fi prezentat ca o singura alternativa (utilizatorul spune yessau no) fie poate prezenta un grup de alternative (din care utilizatorul selecteaza mai multe alternative functie de modul de confogurare).
a)Checkbox
A fost unul dintre primele idiomuri gizmo vizuale inventate si ramâne favorit pentru prezentarea unei alternative unice, binare. Checkbox-ul are o proprietate vizuala puternica pentru a face click, el apare ca o zona plianta si flexibila fie datorita micului sau patrat fie datorita formei sale 3D apasate din Windows 95. Odata ce utilizatorul a facut click pe el si a vazut ca apare un checkmark în interior el a învatat - un click pentru marcare si un alt click pentru demarcare. Deci un checkbox este simplu, vizual si elegantsi este bazat pe text. Caseta marcabila actioneaza ca un simbol grafic remarcabil vizual, alaturi de textul sau discriminant. Checkbox-ul este un element familiar si eficient dar are aceleasi puncte forte si slabiciuni ca si meniurile. Exactitatea textului face ca checkbox-urile sa nu fie ambigue, dar aceasta forteaza utilizatorul sa încetineasca pentru a citi, ceea ce ia un volum considerabil din spatiul real. În mod traditional checkbox-urile sunt patrate, fiind deja un standard. Patratul a fost prima forma aleasa initial utilizatorul învatând deja sa recunoasca aceasta forma, deci nu exista nici un motiv pentru a schimba acest lucru. Probabil ca se poate face pentru checkbox ceea ce a facut buticonul pentru meniu. Se poate dezvolta un gizmo checkbox care sa se dispenseze de text si sa foloseasca în schimb un icon. Acest lucru nu este posibil dar se poate înlocui functia realizata de checkbox cu un alt idiom evolutiv- Buticonul!
Push-buton-ul a evoluat în buticon prin înlocuirea textului sau cu un icon apoi prin migrarea sa în toolbar. În toolbar metamorfoza a continuat si i se permite ca atunci când este facem click sa stea în starea apasat revenind apoi la aspectul riricat când facem clcik din nou asupra lui. Caracterul gizmo-ului s-a modificat suficient pentru a se muta complet într-o categorie diferita de la un gizmo imperativ la unul de selectie! Starea buticonului nu mai este momentana - locul este blocat pâna la un nou click pe el. Numim acest element ilustrat în figura de mai jos buticon de zavorâre (latching buttcon).
 |
Configuratia toolbar implicita din suita de programe Microsoft Office în mod tacit realizeaza separarea buticoanelor momentane, imperative de buticoanele de selectie, de zavorâre. În general buticoanele imperative au fost puse doar în top-bar iar majoritatea celor de selectie pe celelalte elemente grafice de tip bara. Buticonul de zavorâre ca idiom pentru selectia unica înlocuieste tot mai mult checkbox-ul. Dezavantajul buticonului de zavarâre este acela ca duce lipsa de textul discriminant al unui checkbox. Elementele de meniu si buticoanele momentane fac adesea flip-flop, Controlul de acest tip fiind eficient deoarece face economie de spatiu controlând cu un singur element doua optiuni mutual exclusive. Dezavantaj - esueaza sa execute al doilea rol al fiecarui gizmo - informarea utilizatorul asupra starii lor curente.
b)Radio butoane
O varianta de checkbox este radio-butonul (radio button), care are o comportare mutual exclusiva (mutually exclusive) - când o optiune e selectata precedenta optiune este automat deselectata, la un moment dat putand fi selectat doar un singur buton. Datorita exclusivatatii mutuale radio-butoanele sunt în grupuri de doua sau mai multe butoane, în fiecare grup fiind selectat doar un singur buton. Din punct de vedere al spatiului video, radio-butoanele sunt mai risipitoare decât checkbox-urile, deoarece au semnificatie de grup. Din acelasi motiv pentru care checkbox-urile sunt patrate, radio-butoanele sunt rotunde, prin traditie si nu e necesar ca forma lor sa mai fie modificata.
Buticonul a facut pentru radio-butoane ceea ce a facut si pentru checkbox-uri - le-a repus la suprafata aplicatiei. Daca doua sau mai multe buticoane de zavorâre sunt grupate împreuna si legate prim comportare mutual exclusiva - astfel încât doar unul dintre ele sa fie zavorât la un moment dat - ele se comporta întocmai ca radio-butoanele si formeaza un asa numit radio-buticon (radio buttcon). Lucreaza exact ca si radio-butoanele doar unul este selectat întotdeauna si de câte ori este apasat un altul precedentul revine la pozitia normala. Gizmo-urile pentru aliniere din Word reprezinta un exemplu excelent de radio-buticoane.
c)Combuticonul
O varianta de radio-buton este versiunea dropdown si se numeste combuticon si arata ca un singur buticon zavorât dar daca se face click pe el si se mentine butonul de mouse apasat se afiseaza (drop-down) un meniu care cuprinde mai multe buticoane zavorâte. Se aluneca cu cursorul procedând la fel ca pentru meniurile pull-down pentru a se selecta unul din elementele buticon. Când se elibereaza butonul mouse, selectia este realizata iar cel care a fost ales apare acum ca un singur buticon în toolbar. Desenarea unui mic triunghi inversat în coltul cel mai din dreapta jos al buticonului poate servi ca o simulare vizuala a faptului ca buticonul este diferit. Se poate observa o astfel de varianta în Microsoft PowerPoint unde buticoanele pentru specificarea culorii de umplere a liniilor, textului si umbrelor prezinta meniuri combuticon care arata mai mult ca niste palete mici decât ca stive de buticoane. Utilizarea lui necesita dexteritate manuala pentru a lucra cu un meniu având tinte relativ mici, dar este cu mult mai rapid decât sa ne ducem în bara-meniu, sa afisam meniul, sa selectam un item, sa asteptam desfasurarea unei casete de dialog, sa selectam o culoare din caseta si sa apasam pe butonul OK.
d)Listbox
Gizmo-urile de selectie care prezinta liste de siruri text sunt numite adesea picklist (liste din care se ia) deoarece ofera liste de elemente din care utilizatorul poate alege si reprezinta un instrument puternic pentru simplificarea interactiuni eliminnan posibilitatea de a face o selectie incorecta. Practic este un gizmo pentru a selecta dintr-o lista finita de siruri text. Listbox-urile au fost una din primele 6 clase de gizmo originale care au venit o data cu Windows 1.0., fiind mici ferestre de text având în marginea din dreapta un scrollbar vertical iar in caseta se puteau adauga linii de text lista fiind parcursa sus/jos. Utilizatorul nu putea sa selecteze textul ca într-un procesor de texte dar putea selecta o singura linie de text o data. Gizmo-ul original listbox era doar text insa din versiunea Windows 3.0 au putut fi inserate si elemente non-text iar aceasta influenta puternica strabate pâna în prezent. Un listbox plin cu linii de text însirate una dupa alta fara simboluri vizuale revelatoare este destul de sec. Un control precum lisbox-ul a fost unul dintre cele al caror potential a fost cel mai putin exploatat de programatorii de la Microsoft. În Windows 95 a aparut noul gizmo listview, care printre alte caracteristici permite ca fiecare linie de text sa fie automat precedata de un icon
Design tip - Fiecare item text dintr-o lista ar trebui sa aiba alaturat un simbol grafic de identificare
Listview-urile sunt utile pentru afisarea listelor de elemente permitând utilizatorului sa selecteze unul sau mai multe elemente si asigura o sursa cu care sa se poata face drag. Multe liste nu sunt statice dar sunt modificate de utilizatori prin adaugarea. stergerea si modificarea textului intrarilor. Pentru a suporta aceasta este nevoie de abilitatea de a intra direct în listview cu un nou element text sau modificând unul existent. Noul gizmo listview din Windows suporta în plus fata de icon drag&drop si editare in-place.
În general utilizatorul selecteaza un element dintr-un listview ca intrare pentru o functie oarecare precum selectarea numelui unui font dorit dintr-o lista de fonturi disponibile, selectaerea având echivalente de la tastatura, dreptunghiuri de focalizare si elemente prezentate COLOR_HIGHLIGHT. În mod ocazional listbox-ul se utilizeaza si pentru a selecta elemente multiple, pentru date concrete selectarea multipla este vizibila iar pentru date discrete este bine ca întregul câmp manevrat sa fie vizibil. La optiunea de selectare multipla se dezactiveaza mutual exclusivitatea, utilizatorul selectând element dupa element ramânând toate selectate. În interfetele grafice utilizator selectarea multipla este utilizata din plin. Avem un element care indica ceva ales în loc de selectat si acesta este checkbox-urile care sunt usor de utilizat si sunt în mod clar dezasociate de orice simulare a excluziunii mutuale. Daca se adauga câte un checkbox la fiecare element din listbox va vedea care sunt elementele selectate dar si elementele care nu sunt mutual exclusive. Aceasta alternativa de checkbox pentru selectare multipla se numeste marcare (earmarking). Marcarea rezolva si o alta problema legata de selectarea multipla în unele variante nu exista un idiom pentru a selecta nimic. Marcarea nu opereaza dupa aceleasi reguli ca selectarea, iar fiecare element din lista este independent. Imediat ce s-a realizat un click pe o caseta ea este marcata, iar al doilea click o demarcheaza.
Ar fi foarte bine ca listbox-urile si listview-urile sa suporte dragging&dropping. Un astfel de listview cu elemente cu care sa se poata realiza drag sunt utilizate în mod uzual pentru a aduna elementele într-un set dorit de utilizator. A avea doua listbox-uri adiacente, unul pentru elementele disponibile iar celalalt pentru elementele alese este un idiom comun interfetelor grafice utillizator. Între cele doua listbox-uri este plasata o pereche de push-butoane care permit ca elementele sa fie selectate si transferate dintr-o caseta în alta fara pasi intermediari pentru selectare si invocare functie. Uneori apare necesitatea de a face drag cu un element dintr-o pozitia în alta în cadrul aceluiasi listbox. De exemplu daca dorim sa ordonam elementele dintr-o lista în functie de cât de des le folosim sau cât de importante sunt ele în loc de simpla ordonare alfabetica. Majoritatea programelor ofera facilitatea de sortare automata pentru listele importante. Abilitatea de a face drag cu elementele unui meniu dintr-un loc în altul în cadrul unui listbox este puternica dar este necesar ca autoscroll-ul sa fie implementat. Daca apucam un element dintr-o lista iar locul în care trebuie sa facem drop cu el nu este vizibil trebuie sa fin capabili sa facem scroll pe listbox fara a lasa obiectul de mutat.
În mod normal listbox-urile au un scroll vertical pentru deplasarea sus si jos de-a lungul listei. De asemenea ele pot fi parcurse si orizontal deci trebuie sa avem si un scroll orizontal. Aceasta caracterestica permite programatorului sa puna un text super-lung într-un listbox cu efort minim dar nu ofera nimic utilizatorului. Nu ar trebui sa se faca niciodata pe o lista-text scroll orizontal. Când un listbox face scroll în sus si în jos liniile întregi vin si ies din vizualizare dar textul din cadrul casetei ramâne complet lizibil. Când linia de text este parcursa orizontal unul sau mai multe din literele de la început sunt ascunse vizualizarii, astfel se distruge continuitatea textului.
Scrollbar-ul orizontal a fost proiectat pentru o stare relativ permanenta nu una temporara. Dar pentru un listbox întreaga actiune de scrollbar orizontal este necorespunzatoare - utilizatorul face click pe scrollbar pentru a citi jumatate din înregistrarea respectiva apoi trebuie sa mute cursorul înapoi la stânga sa faca un nou click pentru a restaura listbox-ul al pozitia sa initiala aliniata la stânga. Pentru situatii în care se necesita scroll orizontal pe text trebuie gasite alte solutii alternative - scurtare text din listbox. Poate se utilizeaza mai mult de o linie pe intrare pentru a se evita lungimea orizontala suplimentara. Poate exista posibilitatea de a trece textul pe urmatoarea linie. Poate se permite utilizatorului sa introduca sinonime pentru intrarile prea lungi. Poate se pot folosi intrari grafice. Sau se poate utiliza un font de dimensuni mai reduse. Sau se pot rearanja lucrurile din fereastra sau dialog pentru a se expanda orizontal. Raspunsul cel mai bun va fi trecerea textului pe linia imediat urmatoare îndentându-l astfel încât sa fie în mod vizual diferit de celelalte intrari. Aceasta presupune sa existe un listbox cu intrari variabile. Microsoft furnizeaza o optiune multi-coloana pentru gizmo-ul listbox, dar multi nu o utilizeaza înca. Afisarea multicoloana poate ajuta programatorii dar nu ofera nimic utilizatorilor. Pentru grafica nu este nimic gresit cu scrollbar-urile orizontale sau cu ferestrele scroll-abile orizontal. Dar a furniza un listbox bazat pe text este un lucru un pic deposit.
Vechiul gizmo listbox nu permitea introducerea textului direct într-un element din listbox. Gizmo-urile listview si treeview din Windows 95 ofera facilitatea de editare in-place. Explorer utilizeaza aceste gizmo-uri si le putem vedea cum functioneaza redenumind un fisier sau un folder. Pentru redenumirea unui fisier trebuie doar sa facem de doua ori click pe numele fisierului si apoi sa introducem modificarile necesare. Ca o observatie trebuie ca al doilea click sa fie putin întârziat pentru a nu se intrepreta ca dublu click si sa încarce fisierul. Multe din elementele unui listbox ar putea beneficia de abilitatea de a putea fi editate de utilizator. Cazul limita care face ca edit-in-place sa fie o problema reala este adaugarea unor noi intrari în lista. Majoritatea proiectantilor folosesc aceste idiomuri pentru a adauga elemente în lista - prin apasarea unui buton sau selectarea unui element de meniu se adauga în lista o linie alba iar utilizatorul poate edita numele in-place. Ar fi poate mai sensibil daca printr-un dublu click în spatiul dintre doua intrari existente s-ar crea o noua intrare alba. Solutia reala la aceasta problema este combobox-ul.
e) Combobox
Asa cum îi arata si numele este o combinatie între listbox si câmp de editare. Asigura o metoda neambigua pentru introducerea datelor într-un listbox, abordarea fiind eficienta. Varianta sa popup este extrem de economica în ceea ce priveste spatiul real video. Cu gizmo-ul combobox, separarea dintre partea de introducere a textului si cea de selectare din lista este cât se poate de clara. Confuzia utilizatorului este minimizata iar programarea este mai usoara. Pentru o selectare singulara combobox-ul este un gizmo foarte bun. Câmpul de editare poate fi utilizat pentru introducerea de noi item-uri dar în acelasi timp si pentru a arata selectarea curenta din lista. Când selectarea curenta apare în acest câmp de editarem utilizatorul poate edita direct acolo. Câmpul de editare din combobox arata selectarea curenta prin natura sa combobox-ul este un gizmo de selectare unica; în acest caz nu poate fi vorba de selectare multipla. Selectarea multipla implica comportare mutual exclusiva, acesta fiind unul din motivele pentru care combobox-ul înlocuieste grupul de radio-butoane pentru optiunile legate de excluziunea mutuala.
La utilizare variante drop-down de combobox, gizmo-ul arata selectia curenta fara a consuma spatiul pentru a prezenta lista alternativelor. În esenta devine o lista la cerere, ceva de genul unui meniu care furnizeaza o lista de comenzi imediate la cerere. Combobox-ul este un listbox popup. A folosi combobox-uri în toolbar este cu mult mai eficient decât a pune în meniu functiile echivalente deoarece combobox-urile ne arata selectarea curenta a ferestrei fara a necesita o alta actiune suplimentara din partea noastra precum este cazul afasarii unui meniu pentru a vedea starea curenta. Abilitatea de a deschide un combobox, apoi de a face scroll pentru a alege ceva si de a face drag cu alternativa respectiva într-un document aflat în constructie este un element puternic al interfetei dar nu e util in cazul selectarilor multiple.
Windows 95 - aduce un nou gizmo = listview care poate prezenta datele în mod ierarhic. Aceasta arata pe de o parte un arbore având simboluri grafice pentru fiecare intrare, iar intrarile pot fi expandate sau comprimate. Ca programatori apreciem o astfel de prezentare, ea fiind utilizata pentru jumatatea din stânga din Explorer formatul de afisare fiind eficient - mult mai eficient decât aruncarea simbolurilor grafice pe desktop. Pentru unii utilizatori este problematic deoarece au probleme cu structurile de date ierarhice.
Elemente de control vizuale (gizmo-uri) pentru introducere si afisare
Gizmo-uri de introducere
Gizmo-urile de introducere (entry gizmo) permit utilizatorului sa introduca în program o informatie noua, elemental de introducere de baza este câmpul de editare-text. Deoarece o jumatate din combobox este un cîmp de editare unele din variantele de combobox sunt calificate drept gizmo-uri de introducere, la fel si orice gizmo care permite utilizatorului introducerea unei valori numerice. Orice gizmo care restrânge setul disponibil de valori pe care utilizatorul le poate introduce este un gizmo de introducere limitat (bounded-entry gizmo). De exemplu un slider care se muta de la 1 la 100 este limitat. Cu un gizmo limitat utilizatorul nu poate introduce decât valorile specificate de program; esential este faptul ca este imposibil de introdus o valoare invalida. Un câmp de editare care poate accepta orice date introduse de utilizator este un gizmo de introducere nelimitat (unbounded-entry gizmo), care utilizat permite introducera unei valoari invalide, respinsa în mod consecutiv de catre program. Deci un gizmo limitat ar trebui folosit ori de câte ori sunt cerute valori între anumite limite.
Un gizmo limitat trebuie sa comunice utilizatorului cât se poate de clar - de preferat în mod vizual- limitele datelor acceptabile. Un câmp de editare care respinge inputul utilizatorului dupa ce acesta l-a introdus nu este un control limitat. Câmpurile de editare nu sunt niciodata câmpuri de introducere limitate. Majoritatea valorilor cantitative cerute de software sunt limitate, dar multe programe permit introducere nelimitata prin intermediul câmpurilor de editare. În momentul în care utilizatorul introduce o valoare necorespunzatoare pe care programul nu o poate accepta efectul va fi acela ca programul va lansa o caseta de mesaj de eroare. Daca setul limitat de alternative este compus din text si nu numere se poate folosi un slider sau un combobox ori un listbox. Un slider este mai prietenos decât un combobox deoarece putem vedea scopul controlului doar uitându-ne la el.
Daca un program solicita o valoare numerica care trebuie sa ramâna între limite specifice trebuie ca utilizatorul sa dispuna de un control care sa-i comunice limitele si sa nu-l lase sa introduca valori în afara limitelor cerute. Clasa control scrollbar face asa ceva; este un gizmo limitat. Desi scrollbar-urile au dezavantaje semnificative ele sunt exemplare într-un domeniu si anume - permit utilizatorului sa introduca informatie cantitativa prin analogie. Scrollbar-urile permit utilizatorului sa specifice valori numerice în termeni relativi mai degraba decât printr-un numar. Utilizatorul misca indicatorul (sliding thumb) pentru a indica prin pozitia sa relativa o valoare proportionala pentru a fi utilizata în program.
Pentru introducerea numerelor exacte se
utilizeaza un gizmo numit spinner,
care este utilizat destul de mult în
El indica pâna la un punct diferenta dintre gizmo-urile limitate si cele nelimitate. Gizmo-ul spinner este un mic câmp de editare având doua jumatati de butoane atasate cum se vede în figura alaturata.
Folosirea oricaruia dintre micile butoane cu sageti permite utilizatorului sa schimbe valoare prin mici pasi discreti dar limitati - valoarea nu poate depasi nici limita superioara si nici pe cea minima setata prin program.
Daca utilizatorul doreste sa faca o modificare mai mare sau sa introduca un numar specific o poate face prin click în portiunea ferestrei de editare si introducere directa prin tastare. Din nefericire portiunea ferestrei de editare din figura prezentata mai sus nu este limitata. În caseta de dialog Page Setup daca utilizatorul introduce o valoare eronata apare o fereastra cu un mesaj de eroare explicând limitele minima si maxima si invitând utilizatorul sa apese butonul OK pentru a continua.
Principalul gizmo de introducere nelimitata este gizmo-ul de editare-text (text-edit gizmo), caseta simpla care permite utilizatorului sa tasteze orice valoare. Utilizatorul poate edita text acolo folosind instrumentele standard de selectare concreta cu mouse-ul sau utilizând tastatura. Gizmo-urile de editare-text sunt utilizate în general pentru câmpurile de introducere a datelor în aplicatiile de baze de daze sau drept câmpuri de editare într-un combobox. Daca lista valorilor acceptabile este compusa din siruri de text atunci ar trebui utilizata o lista de tipul picklist pentru a nu forta utilizatorul sa tasteze. Uneori setul de valori acceptabile este finit, însa prea mare pentru a fi practic pentru o astfel de lista. În acest caz un gizmo editare-text ar fi probabil de neevitat chiar daca utilizarea sa este limitata. Daca acestea sunt singurele restrictii gizmo-ul de editare poate fi proiectat pentru a respinge caracterele nealfabetice si care depasesc limita considerata, realizîndu-se astfel limitarea.
Din punct de vedere al unui gizmo nu exista date invalide. Datele pot fi considerate invalide doar în contextul unui program. Astfel din punctul de vedere al programului un gizmo de introducere limitat va trata doar input-ul valid. Deci prin definitie un gizmo nelimitat poate returna programului un input invalid. Programul trebuie sa accepte orice a introdus utilizatorul; cu alte cuvinte sa elimine datele semi-limitate si o poate realiza fie prin constrângerea datelor corecte printr-un gizmo limitat sau sa accepte orice da utilizatorul cu un gizmo nelimitat. Programatorii au creat un gizmo de validare (validation gizmo) sau un gizmo de introducere text nelimitat având editare inclusa. Se pot realiza variante de gizmo-uri de introducere text care sa permita de exemplu doar numere sau doar litere sau sa respinga spatiile si tab-urile. Cheia succesului în proiectarea unui gizmo de validare este de a-i da utilizatorului un feedback generos. Gizmo-urile de validare trebuie sa arate vizual diferit de cele de nevalidare - se recomanda utilizarea unei culori diferite si a unui stil de linie diferit pentru marginile gizmo-ului.
Unele gizmo-uri resping
tastarile utilizatorului pe masura ce sunt introduse. Când un
gizmo respinge în mod activ tastarile din timpul procesului de introducere
îl denumim gizmo de validare la cald
(hot validation gizmo). Utilizatorul
se asteapta sa fie capabil sa tasteze în voie, daca un
gizmo este pe cale de a respinge unele tastari bazat pe valoarea lor
trebuie sa comunice aceasta în mod clar utilizatorului. Uneori domeniul
datelor posibile este astfel încât programul nu poate valida pâna când
utilizatorul nu si-a completat toata introducerea. Daca un gizmo
asteapta ca utilizatorul sa termine introducerea datelor înainte
de a-si edita valoarea este denumit gizmo
de validare la rece (cold validation
gizmo). Un gizmo poate sa astepte pâna când se introduce un
text de exemplu în totalitate si apoi sa faca verificarea sau se
poate face o verificare pe masura introducerii unui caracter. Pentru a
furniza un feedback vizual bogat, câmpul de introducere trebuie sa-si
schimbe culoare pentru a reflecta evaluarea sa de validitate a datelor
introduse. Câmpul ar trebui sa arate (pinky!) în umbre de roz pâna
când programul judeca validitatea datelor când va deveni alb sau verde. O
alta solutie buna pentru problema gizmo-ului de validare este o caseta cheie (clue box). Aceasta fereastra mica popup arata
si se comporta ca un ToolTip. Prin conventie un ToolTip va fi
galben deci o caseta cheie va fi roz sau orice alta culoare si va
explica domeniul datelor acceptabile pentru un gizmo de validare, fie la cald
fie la rece. O caseta cheie apare imediat ce un gizmo a detectat un
caracter invalid.
Caseta cheie merge si pentru validare la rece asa cum se poate vedea din figura alaturata.
Sa presupunem de exemplu ca un câmp solicita latimea unei coloane. Utilizatorul poate introduce fie un numar,fie un numar si un indicator al sistemului de masura. De asemenea i se poate permite utilizatoului sa introduca cuvântul default iar programul va seta latimea coloanei la valoarea implicita a programului. Alternativ utilizatorul ar putea introduce si best fit iar programul va masura toate intrarile din coloana si va alege latimea care corespunde circumstantelor. Putem sa furnizam aceste valori posibile text si numerice prin intermediul unui combobox. Utilizatorul poate afisa caseta dropdown si sa gaseasca câteva latimi standard precum si cuvintele default si best fit. Într-un astfel de combobox daca utilizatorul îl desfasoara si vede cuvintele text default si respectiv best fit alegând varianta corespunatoare.
Gizmo-ul de editare text cu sistemul sau familiar de fonturi si caseta alba articulata în mod vizual îsi permite atât introducerea de date cât si iesirea datelor. Totusi elaboratorii de soft utilizeaza în mod frecvent gizmo-uri de introducere date doar pentru output. Daca avem date text pentru output este indicat sa folosim un gizmo text si nu unul de editare text. Daca de exemplu dorim sa aratam volumul de spatiu disc, nu e indicat sa utilizam un câmp de editare text deoarece utilizatorul e tentat sa gândeasca faptul ca poate obtine mai mult spatiu liber introducând un numar mai mare. Daca doriti sa faceti output cu date modificabile faceti output într-un gizmo tip text editabil complet dar aveti grija din punct de vedere intern ca acesta sa lucreze precum arata.
Odata cu Windows 95 au aparut gizmo-uri pentru text îmbogatit (rich text gizmo). Pentru proiectantul de interfete utilizator este important sa le fie clar scopul optiunilor care pot fi expuse utilizatorului atunci când câmpurile de editare sunt implementate printr-un gizmo text îmbogatit. Activarea subsistemelor de formatare a unor întregi paragrafe nu este corespunzatoare pentru simplele câmpuri de introducere care asteapta ca input doar un singur cuvânt sau numar. Un gizmo pentru text îmbogatit este la îndemâna pentru task-uri precum compunerea mesajelor e-mail sau luarea de notite. Manipularea inserarii (insert) sau suprascrierii (overtype) este un alt exemplu în care e nevoie de judecata buna. În majoritatea editoarelor de text exista o optiune setabila de catre utilizator care comuta între cele doua moduri mai sus amintite. Cu ani în urma când existau editoare mai primitive se utilizau ambele moduri, dar odata cu noile interfete grafice utilizator nu ne putem imagina utilizarea modului overtype si nici nu ne putem imagina ca cineva sa doresca sa utilizeze altceva decât modul insert. Cu toate acestea cele doua moduri exista. Pentru câmpurile de editare pe o linie este ridicol de a adauga controale dincolo de simpla introducere unimodala si de editare - neplacerile potentiale sunt de departe cu mult mai mari decât avatajele aduse utilizatorilor. Daca în schimb doriti sa realizati un procesor de text atunci se schimba povestea.
Gizmo-uri de afisare
A patra categorie de gizmo-uri sunt cele de afisare (display gizmo) si sunt utilizate pentru a afisa si gestiona prezentarea vizuala a informatiilor pe ecran. Exemple tipice - toolbar-uri divizoarele de ecran. Gizmo-urile care controleaza felul în care lucrurile sunt afisate vizual pe ecran intra în aceasta categorie ca si cele care afiseaza informatie statica doar pentru output. Aceasta include - paginators, rulers, grids,guidelines,groupboxes. Desi multe dintre aceste gizmo-uri sunt familiare utilizatorilor Windows sub diferite nume doar grupurile si scrollbar-urile sunt cele care vin odata cu Windows.
Cel mai simplu gizmo de afisare este gizmo-ul de tip text. Aceasta varianta afiseaza un mesaj scris la o anumita locatie de pe ecran. Singura problema semnificativa cu aceste gizmo-uri text este faptul ca ele sunt adesea utilizate acolo unde ar trebui utilizate cele de editare. Majoritatea informatiilor din calculator pot fi schimbate de utilizator. De ce sa nu permitem utilizatorului sa le schimbe în acelasi punct în care soft-ul le afiseaza? De ce mecanismul de introducere a unei valori n-ar fi diferit de mecanismul de output? Raspunsul este acela ca programul nu trebuie sa separe aceste functii corelate. În majoritatea cazurilor în care programul afiseaza o valoare ar trebui sa o faca într-un câmp editabil astfel încât utilizatorul sa poata face click pe el si sa-l modifice.
Scrollbar-uri
Scrollbar-urile sunt gizmo-uri destul de greu de manipulat si risipitoare de pixeli. Singurul avantaj al scrolbar-ului pe lânga disponibilitatea sa este redarea proportionala a valorii. Indicatorul scrollbar-ului (thumb) este o caseta centrata, deplasabila care indica pozitia curenta. Daca scrollbar-ul reprezinta un procentaj de exemplu, utilizatorul poate vedea ca un scrollbar al carui indicator este echidistant fata de cele doua capete reprezinta o cantitate de 50%. Faptul ca scrollbar-ul nu exprima nici o informatie despre valorile sale terminale reduce considerabil utilitatea sa ca selector de valori. Redarea proportionala a scrollbar-ului asa cum este implementata reprezinta un excelent feedback vizual.
Un mare dezavantaj al scrollbar-ului este zgârcenia cu care împarte informatii utilizatorului. Ar trebui ca acesta sa fie informat generos cu date despre ce gestioneaza. Scrollbar-ul din Windows 95 foloseste indicatori proportionali dimensionati pentru a arata procentajul documentului care este vizibil curent. Ar putea de asemenea sa ne informeze: pe ce pagina suntem, câte pagini sunt în total, prima secventa sau element din fiecare pagina când facem scroll cu un indicator, numarul de pagina (numar de înregistrare, grafic) când facem scroll cu un indicator. Un scrollbar este zgârcit cu functiile, el gestioneaza volumul parcurgerii din cadrul documentelor deci ar trebui sa ne ofere instrumente puternice pentru a ne pozitiona rapid si usor unde dorim. Scrollbar-ul necesita un grad ridicat de precizie în ceea ce priveste mouse-ul. În general a face scroll up si down este mai usor decât a face scroll down si up în document. Cursorul de mouse trebuie pozitionat cu mare grija distragându-ne atentia de la datele peste care se face scroll. Scrollbar-ul consuma un volum relativ mare de spatiu video real.
3. Gizmo-uri noi
Gizmo-urile sunt instrumente pretioase pentru interactiunea cu utilizatorii deoarece încapsuleaza o comportare complexa. Faptul ca gizmo-urile sunt disponibile imediat ne determina sa ne bazam pe ele pentru proiectarea interfetelor utilizator.
Gizmo-uri de extragere
Gizmo-urile de validare sunt proiectate în special
pentru a respinge intrarea variabila. Un gizmo adresa este un exemplu
pentru ceea ce se considera gizmo de
extragere a datelor (extraction gizmo). Un gizmo de extragere traduce
continutul unui gizmo de introducere text în format liber în conformitate
cu câteva reguli. De exemplu în loc sa avem un câmp pentru adresa
strazii, unul pentru apartament si unul pentru casuta
postala, unul pentru oras, unul pentru
Gizmo-uri vizuale
Majoritatea gizmo-urilor traditionale sunt mai
degraba încapsulari de text. Checkbox-urile, radio-butoanele,
meniurile, editare text, listbox-uri si combobox-urile sunt în mare parte
text si ceva grafica dar destul de subtire pe ici pe
Caseta de dialog Paragraph Borders and Shading din Word are câteva gizmo-uri vizuale. Gizmo-ul din coltul stânga jos lasa utilizatorul sa solicite optiuni complexe pentru margini - printr-un click pe o mica imagine marginita în loc sa-l tot întrebe numele acestora. În aceasta situatie acest gizmo a eliberat Microsoft de o mare dilema dificila deoarece numarul de optiuni pentru margini este foarte mare. Regulile pentru - sus,jos, stânga, dreapta si între paragrafe - pot fi specificate în mod independent iar fiecare margine la rândul ei poate avea propriul stil si grosime. A oferi un combobox plin cu sute de optiuni de genul - thin left, really thin right, thick top, dashed thin botoom. În mod alternativ chiar si o caseta de dialog având un vector de combobox-uri individuale pentru fiecare din marginile posibile vor zapaci utilizatorul. În coltul stânga sus al ferestrei de dialog considerata anterior este un alt gizmo vizual care ofera o alternativa extrem de simpla de tip mutual exclusiva pentru una din cele trei posibilitati - cu margine, cu margine umbrita sau fara margine. E drept ca putea fi radiobutoane dar în acest mod e mult mai sugestiv. Utilizatorul poate face click pe imaginea pe care o doreste în loc sa faca click pe cuvinte ce descriu ceea ce doreste. E mai putin ambiguu, mai rapid si mai direct. Majoritatea editorilor de software folosesc butoane în loc de astfel de gizmo-uri vizuale deoarece radio-butoanele sunt free în Windows pe când daca doresc un gizmo vizual ei trebuie sa plateasca programatorii pentru a le crea.
Un alt gizmo vizual foarte frumos realizat în Control Panel din Windows 95 este fereasta Date/Time Properties. În loc sa luam o zona dintr-o lista text alegem zona temporala printr-un click pe o harta albastru-verde a lumii. Atunci când selectam o zona harta se aranjeaza în mod sensibil astfel încât zona selectata sa fie centrata pe mijlocul ferestrei. Pentru un furnizor de soft ar fi foarte util sa creeze un kit generic de dezvoltare pentru gizmo-uri vizuale, care sa permita majoritatii programatorilor cu bugete medii sa creeze pentru produsele lor gizmo-uri vizuale, animate, direct manipulabile.
Un plus de bogatie vizuala
A adauga bogatie vizuala traditionalelor gizmo-uri precum adaugare de simboluri grafice la butoane, este un domeniu al carui potential a fost destul de putin abordat. Majoritatea gizmo-urilor pot fi îmbogatite daca se adauga grafica, animatie si sunet. Chair daca imaginea va consuma ceva mai mult spatiu abilitatea ei de a comunica mai clar merita câtiva pixeli în plus. De exemplu Microsoft în Word si-a modificat casetele de dialog unele din ele aratându-si scopul în mod vizual mai degraba decât prin controale textuale. Caseta de dialog Page Setup din Windows ne ofera o imagine etichetata Preview, acesta fiind un gizmo doar pentru output care arata o vedere în miniatura a felului în care va arata pagina, cu setarile curente ale marginilor din dialog. Majoritatea utilizatorilor au probleme în a percepe vizualizarea unei margini stânga de 1.2 ; gizmo-urile de previzualizare arata aceasta. Se poate face ceva mai bun în Microsoft daca se permite în plus input în gizmo-ul de previzualizare al output-ului. Faceti drag cu marginea stânga a imaginii si urmariti valoarea numerica din spinner-ul corespunzator. Câmpul text este înca important nu-l putem ocoli pur si simplu doar cu vizual. Textul arata rezultatul cu precizie în timp ce un gizmo vizual arata rezultatul cu acuratete.
|
