Căsuță de dialog

Exemplu de dialog în gedit

În informatică, o casetă de dialog este un control grafic ( widget ) care permite computerului și utilizatorului să comunice între ei afișând informații, solicitând comenzi sau ambele ^[1] .

Utilizare

Caseta de dialog este de obicei utilizată pentru a oferi utilizatorului instrumentele necesare pentru a specifica cum să execute o comandă, pentru a răspunde la o întrebare sau la o „alertă”. Cel mai simplu tip este alerta, care afișează un mesaj și solicită o simplă confirmare că mesajul a fost citit, de obicei făcând clic pe „OK”; în alte cazuri, este necesară o decizie cu privire la o acțiune de făcut, făcând clic pe „OK” sau „Anulare”. Avertismentele sunt, de asemenea, folosite uneori pentru a afișa o „terminare”, cum ar fi închiderea intenționată sau neintenționată a unei aplicații sau a unui sistem de operare.

De introducere a datelor

Dialogurile sunt menite să fie ferestre mici, tranzitorii, care nu necesită o interacțiune aprofundată a utilizatorului, deci este important să vă asigurați că introducerea datelor dvs. este eficientă. Este o datorie ^[2] :

• Furnizați valori implicite pentru controale și câmpuri, acolo unde este posibil. Pentru un utilizator este mai ușor să verifice informațiile decât să le introducă de la zero.
• Setați focalizarea inițială pe prima poziție care acceptă introducerea utilizatorului. În acest fel, utilizatorul poate începe să introducă date imediat, fără a fi nevoie să facă clic pe un anumit element, cum ar fi un câmp de text sau o listă.
• Faceți selectabil textul static. De exemplu, utilizatorul ar trebui să poată copia informații utile, cum ar fi un mesaj de eroare, numărul de serie sau adresa IP pentru a le lipi în altă parte.
• Verificați dacă există erori în timp ce introduceți date. În loc să așteptați și să afișați un avertisment atunci când utilizatorul încearcă să închidă o casetă de dialog, verificați dacă există erori în timp ce introduceți date, astfel încât utilizatorul să poată rezolva problema în context.
• Ori de câte ori este posibil, minimizați potențialul de intrare nevalidă. De exemplu, utilizați butoanele pop-up pentru a oferi opțiuni, mai degrabă decât să cereți utilizatorului să introducă date și utilizați selectoarele de date și formatatorii numerelor pentru a vă asigura că datele și numerele sunt introduse corect.

Controlul dezvăluirii într-o fereastră macOS

• Utilizați un control de divulgare pentru a furniza informații suplimentare. Un control de divulgare ascunde informații sau funcționalități, cum ar fi opțiuni avansate, și le dezvăluie numai atunci când utilizatorul dă clic pe control.
• Luați în considerare includerea unui buton „Aplicați” care permite utilizatorului să previzualizeze modificările înainte de a se angaja. Are sens într-un dialog fără model pentru modificările care pot fi aplicate, previzualizate și anulate rapid. Salvarea dialogurilor și a altor dialoguri care permit utilizatorilor să facă modificări care nu pot fi previzualizate cu ușurință nu ar trebui să includă butonul „Aplicați”.
• Asigurați-vă că elementele interfeței scalează corect atunci când o casetă de dialog este redimensionată.
• Separați butoanele distructive de butoanele nedistructive. Butoanele distructive, cum ar fi „Nu salvați”, ar trebui să fie suficient de departe de butoanele sigure, cum ar fi Salvare și Anulare .

Închiderea casetei de dialog

• Furnizați un buton implicit numai atunci când acțiunea cea mai probabilă a utilizatorului este inofensivă ^[2] . Utilizatorii uneori apasă pe Enter pentru a închide pur și simplu o casetă de dialog, fără a citi conținutul acesteia, deci este imperativ ca un buton predefinit să inițieze o acțiune inofensivă. Când nu există un buton implicit, apăsarea Enter nu ar trebui să aibă efect; utilizatorul ar trebui să facă clic explicit pe un buton pentru a închide caseta de dialog. Alternativ, atunci când o casetă de dialog poate provoca acțiuni distructive, Anularea poate fi setată ca buton implicit.
• Furnizați un buton implicit numai atunci când tasta Enter nu este deja utilizată de câmpurile de text din caseta de dialog. A avea două comportamente pentru o cheie este confuz și face ca interfața să fie mai puțin previzibilă. Utilizatorul poate apăsa Enter de prea multe ori și, din greșeală, poate activa butonul implicit.
• Includeți un buton Anulare care răspunde comenzilor rapide de la tastatură standard pentru anulare. Un buton Anulare oferă o modalitate clară și sigură de a ieși dintr-o casetă de dialog și readuce computerul în starea în care se afla înainte de afișarea casetei de dialog. Asigurați-vă că comanda rapidă de la tastatură în perioada de comandă și tasta Esc (Escape) sunt mapate la butonul Anulare.
• Asigurați-vă că un buton Anulare anulează toate modificările aplicate.
• Utilizați butoanele Aplicare, OK și Anulare. Dând clic pe Aplicați previzualizări, se modifică, dar nu închide caseta de dialog. Dacă faceți clic pe OK, vă confirmă intenția de a accepta orice modificare și închide caseta de dialog. Dacă faceți clic pe Anulare, se anulează modificările aplicate și se închide caseta de dialog.
• Asigurați-vă că acțiunile de dialog se desfășoară rapid. În general, utilizatorul ar trebui să vadă rezultate aproape imediate după inițierea unei acțiuni dintr-o casetă de dialog. Pentru acțiuni care durează mai mult de câteva secunde pentru a finaliza, vizualizați informațiile despre progres, astfel încât utilizatorul să știe că acțiunea a început, cât timp va dura și când va fi finalizată.

Clasificare

Dialogurile sunt împărțite în modal și fără model, în funcție de interacțiunea cu software-ul blocată sau nu la inițializarea dialogului.

Dialogurile modale ( modal , în engleză) blochează execuția programului, care poate necesita unele informații suplimentare înainte ca acesta să poată continua, sau vă poate cere pur și simplu să confirmați o acțiune potențial dăunătoare. Dialogurile modale sunt în general considerate a fi soluții de proiectare proaste, deoarece tind să producă erori.

Dialogurile fără modă ( non-modale sau fără model , în engleză) sunt utilizate atunci când informațiile solicitate nu sunt esențiale pentru a continua, astfel încât fereastra poate fi lăsată deschisă în timp ce continuați să lucrați în altă parte. În general, un design software bun necesită astfel de ferestre.

Fereastra modală

Dialogurile sunt clasificate ca „modale” sau „fără model”, în funcție de faptul că blochează interacțiunea cu software-ul care a inițiat dialogul. Tipul de dialog afișat depinde de interacțiunea dorită de utilizator.

Cel mai simplu tip de casetă de dialog este avertismentul, care afișează un mesaj și poate solicita o confirmare că mesajul a fost citit, de obicei făcând clic pe „OK” sau o decizie dacă o acțiune ar trebui să continue sau nu, făcând clic pe „OK "sau" Anulare ". Avertismentele sunt, de asemenea, utilizate pentru a afișa un „avertisment de terminare”, solicitând uneori confirmarea că avertismentul a fost citit, în cazul unei terminări intenționate sau neintenționate („blocare”) a unei aplicații sau a unui sistem de operare. (De exemplu, „ Gedit a întâmpinat o eroare și trebuie să se închidă. ”) Deși acesta este un tipar de interacțiune frecvent pentru dialogurile modale, este ușor de utilizat deoarece este ineficient pentru utilizarea intenționată, care este de a proteja împotriva erorilor cauzate de acțiuni distructive și pentru care există alternative mai bune ^{[3] [4]} .

Un exemplu de casetă de dialog este caseta de informații găsită în multe programe software, care afișează de obicei numele programului, numărul versiunii sale și poate include chiar și informații despre drepturile de autor .

Nemodificat

Dialogurile modale au fost inițial concepute pentru a avertiza utilizatorii cu privire la o eroare sau la o altă stare de sistem care necesită o acțiune imediată a utilizatorului. În aceste cazuri, era esențial ca utilizatorii să fie întrerupți pentru a corecta eroarea. Prin urmare, plasarea dialogului în centrul ecranului ca punct focal al interfeței a făcut-o foarte eficientă. Marele avantaj al acestor ferestre a fost că au atras atenția utilizatorilor și le-au permis să recunoască problema și să o corecteze

repede.

Fereastra nemodificată pe macOS

Cu toate acestea, această utilizare originală a evoluat și ulterior dialogurile și ferestrele modale sunt utilizate în mod convingător pentru a atrage atenția utilizatorului din motive legitime sau ilegale ^[5] . Cu toate acestea, ferestrele modale au o serie de dezavantaje:

• Acestea necesită atenție imediată. Ferestrele modale, prin natura lor, sunt obligatorii și necesită utilizatorului să ia măsuri imediate. Deoarece dialogurile plasează sistemul într-un mod diferit, utilizatorii nu pot continua ceea ce fac până nu recunosc dialogul.
• Întrerup fluxul de lucru al utilizatorului. Casetele de dialog modale îndepărtează utilizatorii de sarcinile la care lucrau în primul rând. Fiecare întrerupere are ca rezultat pierderea timpului și a efortului, nu numai pentru că utilizatorii trebuie să se ocupe de dialog, ci și pentru că, odată ce vor reveni la sarcinile lor inițiale, oamenii vor trebui să-și ia timpul pentru a recupera contextul.
• Îi determină pe utilizatori să uite ce fac. Odată ce contextul a trecut la o activitate diferită, datorită încărcării cognitive suplimentare impuse de dialogul modal, oamenii pot uita unele dintre detaliile asociate activității inițiale. Dacă da, recuperarea contextului pentru activitatea inițială poate fi și mai dificilă.
• Acestea îi determină pe utilizatori să creeze și să abordeze un obiectiv suplimentar: închiderea casetei de dialog. Când dialogul este prezentat, pașii suplimentari sunt adăugați la fluxul de lucru al utilizatorului: citirea și înțelegerea dialogului, apoi luarea unei decizii cu privire la acel dialog. Acest cost crescut al interacțiunii este probabil să descurajeze utilizatorii, cu excepția cazului în care dialogul este bine justificat și conține de fapt informații importante.
• Blochează conținutul de fundal. Când apare o casetă de dialog în partea de sus a ferestrei curente, aceasta poate acoperi conținut important și poate elimina contextul. Ca rezultat, poate deveni mai dificil să răspundeți la dialog atunci când dialogul pune o întrebare despre informațiile nou ascunse.

Datorită acestor dezavantaje, dialogurile modale devin problematice atunci când sunt utilizate pentru sarcini non-critice. Acesta este motivul pentru care au fost inventate ferestrele fără model.

Casete de dialog sunt utilizate fără moduri în cazul în care informațiile solicitate nu este esențială pentru a continua și , prin urmare , fereastra poate fi lăsată deschisă în timp ce se lucrează în continuare în altă parte. Un tip de dialog fără model este o bară de instrumente separată de aplicația principală sau care poate fi detașată de aplicația principală, iar elementele din bara de instrumente pot fi utilizate pentru a selecta anumite caracteristici sau funcții ale aplicației.

În general, o bună proiectare software necesită ca dialogurile să fie de acest tip ori de câte ori este posibil, deoarece nu forțează utilizatorul într-un anumit mod de operare. Un exemplu ar fi un dialog de setări pentru documentul curent, cum ar fi culorile de fundal și text. Utilizatorul poate continua să adauge text în fereastra principală indiferent de culoare, dar îl poate modifica oricând folosind dialogul. De multe ori aceeași funcționalitate poate fi realizată de butoanele barei de instrumente din fereastra principală a aplicației.

Sistem modal

Sistem modal în Windows

Ferestrele modale ale sistemului împiedică interacțiunea cu orice alte ferestre de pe ecran și împiedică utilizatorii să treacă la o altă aplicație sau să efectueze orice altă acțiune până când problema prezentată în dialog este rezolvată ^[6] . Dialogurile modale ale sistemului erau mai frecvent utilizate în trecut pe sistemele de sarcini unice în care o singură aplicație putea rula la un moment dat. Un exemplu este ecranul de închidere a multor versiuni de Windows ^[7] .

Modalitate de aplicare

Modalitate de aplicare

Ferestrele modale ale aplicației întrerup temporar programul: utilizatorul nu poate continua fără a închide caseta de dialog; programul poate solicita unele informații suplimentare înainte de a putea continua sau poate dori pur și simplu să confirme că utilizatorul dorește să continue o acțiune potențial periculoasă (dialog de confirmare). Profesioniștii din domeniul utilizabilității consideră, în general, căile de dialog modale ca soluții de proiectare proaste, deoarece sunt predispuse la producerea de erori de mod.

Acțiunile periculoase ar trebui să fie anulabile acolo unde este posibil; un dialog de avertizare modal care apare neașteptat sau se închide automat (deoarece utilizatorul și-a dezvoltat un obicei) nu va proteja împotriva acțiunilor periculoase.

Un dialog modal întrerupe fluxul principal de lucru. Acest efect a fost cercetat de dezvoltator, deoarece se concentrează pe finalizarea sarcinii în curs sau a fost refuzat, deoarece împiedică utilizatorul să treacă la o sarcină diferită atunci când este necesar.

Document modal

Fereastra modală a documentului pe macOS

Conceptul de document modal a fost utilizat în special în macOS și Opera Browser . În primul caz, acestea apar ca „foi” atașate la o fereastră principală. Aceste dialoguri blochează acea fereastră până când utilizatorul o închide, permițând continuarea lucrărilor în alte ferestre, chiar și în cadrul aceleiași aplicații ^[8] .

În macOS, casetele de dialog par să provină dintr-un spațiu din fereastra principală și sunt afișate cu o animație de întărire. Acest lucru îl ajută pe utilizator să înțeleagă că dialogul este atașat ferestrei părinte, nu doar afișat în fața ei. Nu se poate face nicio lucrare în documentul de bază în timp ce este afișată caseta de dialog, dar fereastra principală poate fi totuși mutată, redimensionată și redusă la minim, iar alte ferestre pot fi aduse în față, astfel încât utilizatorul să poată lucra la el ^[9] :

Același tip de dialog poate fi comparat cu dialogurile modale „standard” utilizate în Windows și alte sisteme de operare.

Asemănările includ:

• fereastra părinte este înghețată când se deschide caseta de dialog și nu puteți continua să lucrați cu documentul de bază din acea fereastră
• nu se poate face nicio lucrare cu documentul de bază din acea fereastră.

Diferențele sunt:

• dialogul se poate deschide oriunde în fereastra principală
• în funcție de locul în care se află fereastra principală, caseta de dialog s-ar putea deschide aproape oriunde pe ecran
• caseta de dialog poate fi mutată (în aproape toate cazurile), în unele cazuri poate fi redimensionabilă, dar de obicei nu poate fi minimizată și
• nu sunt posibile modificări ale ferestrei principale (nu poate fi redimensionată, mutată sau minimizată) în timp ce dialogul este deschis.

Ambele mecanisme au defecte:

• Fereastra de dialog Windows blochează fereastra principală care poate ascunde alte ferestre la care utilizatorul ar putea avea nevoie să se refere atunci când interacționează cu dialogul, deși acest lucru poate fi atenuat deoarece alte ferestre sunt disponibile prin bara de activități.
• Fereastra de dialog macOS blochează fereastra principală, împiedicând utilizatorul să facă referință la ea atunci când interacționează cu dialogul. Acest lucru poate necesita ca utilizatorul să închidă caseta de dialog pentru a accesa informațiile necesare, apoi să redeschidă caseta de dialog pentru a continua.

Pe internet

Dialogurile sunt bine vizualizate dintr-un punct de vedere accesibil și utilizabil pentru următoarele tipuri de interacțiuni ^[10] :

• Schimbarea mai multor câmpuri sau valori pe un singur ecran
• Previzualizări ale videoclipurilor, imaginilor, aspectelor
• Efectuarea unui set de acțiuni de bază (de exemplu, adăugarea unui comentariu și schimbarea stării unui bilet de asistență) care face parte dintr-un set de acțiuni mult mai mare

Participanții nu răspund pozitiv la utilizarea modalităților pentru ^[10] :

• Editarea unui singur câmp sau valoare. O alternativă mai bună este editarea online.
• Confirmarea unei acțiuni (de ex. „ Modificările dvs. au fost salvate ”). O alternativă mai bună este confirmarea online sau confirmarea din partea de sus a paginii care utilizează un efect de autovindecare (dispare după câteva secunde).
• Notificări de eroare. O alternativă mai bună este notificarea online.
• Interacțiuni lungi sau complexe (de exemplu, procesul de achiziție a coșului de cumpărături, o serie de ecrane pentru un asistent de configurare / expert). O alternativă mai bună este o serie de capturi de ecran sau introducerea fiecărui „pas” într-un bloc care se extinde după cum este necesar, apoi se prăbușește la finalizare și extinde automat următorul pas relevant. Puteți găsi un exemplu în acest nou model de plată Apple Store.

Exemplu în HTML, CSS și JS

 <! DOCTYPE html>
< html >
< cap >
< meta name = "viewport" content = "width = device-width, initial-scale = 1" >
< stil >
corp { font-family : Arial , Helvetica , sans-serif ;}

. modal {
  afișaj :
  poziție :
  indice z : 1 ;
  capitonat : 100 px ;
  stânga : 0 ;
  sus : 0 ;
  lățime : 100 % ;
  înălțime : 100 % ;
  overflow : auto ;
  culoare de fundal : rgb ( 0 , 0 , 0 );
  culoare de fundal : rgba ( 0 , 0 , 0 , 0,4 );
}

. conținut modal {
  fundal-culoare : #fefefe ;
  margine : auto ;
  căptușeală : 20 px ;
  chenar : 1 px solid # 888 ;
  lățime : 80 % ;
}

. închide {
  culoare : #aaaaaa ;
  plutitor : dreapta ;
  dimensiunea fontului : 28 px ;
  font-weight : bold ;
}

. închide : planează ,
. close : focus {
  culoare : # 000 ;
  decor-text : nici unul ;
  cursor : pointer ;
}
</ style >
</ head >
< corp >

< h2 > Exemplu </ h2 >

< button id = "myBtn" > Open Modal </ button >

< div id = "myModal" class = "modal" >

  < div class = "modal-content" >
    < span class = "close" > & times; </ span >
    < p > Acțiunea a avut succes </ p >
  </ div >

</ div >

< script >
var modal = document . getElementById ( „myModal” );

var btn = document . getElementById ( "myBtn" );

var span = document . getElementsByClassName ( "închidere" ) [ 0 ];

btn . onclick = function () {
  modal . stil . display = "bloc" ;
}

span . onclick = function () {
  modal . stil . display = "none" ;
}

fereastră . onclick = funcție ( eveniment ) {
  if ( eveniment . target == modal ) {
    modal . stil . display = "none" ;
  }
}
</ script >

</ body >
</ html >

Notă

Elemente conexe

• Informație despre

Alte proiecte

• Wikimedia Commons conține imagini sau alte fișiere în caseta de dialog

Portal IT : accesați intrările Wikipedia care se ocupă cu IT