Preluare date nomenclator - UI/UX Review

Încerc să găsesc o formă mai simplă și mai frumoasă de completare a unui nomenclator destul de simplu, pe un singur nivel (parent->childs).

Nu-mi place cum arată și este cu siguranță prea încărcat. Nici o fereastră ontop pentru operațiile secundare nu mi-ar plăcea. Mă gândeam să verticalizez totul dar am zis să vă întreb și pe voi cum ați realiza UI-ul pentru genul ăsta de operații?

  1. Introduci o operație principală.
  2. O selectezi din lista de mai jos
  3. Îi adaugi operații secundare.
1 Like

Here you go sir

2 Likes

Mulțumesc. Arată mult mai bine.

asa. si cine o sa stie ca tre sa selectezi o optiune principala ca sa-i apara form-ul pt optiunea secundara?

Sunt mai multe probleme cu abordarile de pana acum:

  • Insuficient affordance pentru elementele interactive. Nu e clar, in ambele mockups, care sunt actiunile posibile, mai ales legat de adaugarea operatiunilor secundare.
  • Coloana separata pentru tags. Big no no, pentru ca foarte rar o sa ai doar un cuvant / doua scurte cum ati pus voi in exemplu ca sa va incapa.
  • Form inline pentru operatiunile principale. Aici ma refer la exemplul lui @navaru. Daca mai adaugi cumva o informatie in tabela, you’re fucked, nu mai ai loc de atatea campuri. Campul de tags inline este mult prea mic, putine lucruri sunt mai frustrante decat sa trebuiasca sa muti caret-ul intr-un input text ca sa vezi ce ai scris in urma.

Un mod mult mai clar si mai usor de folosit e asa:

Explicatii:

  • Etichete sunt mereu sub titlul operatiei, ca sa incapa mai multe
  • Cand nu exista operatii secundare pentru o operatie principala, sub titlu e o iconita de “plus”, care face expand la formularul de adaugare suboperatie
  • Cand exista operatii, label-ul se schimba, iar iconita devine una clara pentru expand / collapse
  • Sortarea operatiilor secundare se face cu drag and drop (am pus o iconita exemplu langa nume, nu au prea multe astia la moqups, tu poti folosi aia clasica de drag). Stiu ca iti e mai usor cu input text, dar nu fi lenes, fa cu drag and drop si AJAX.
  • Formularul de adaugare operatie secundara este inline, pentru ca nu are decat un camp. Asta e mereu la finalul listei de operatii secundare.

Si cam atat. Cu siguranta mai poate fi imbunatatit si acest model, dar este, dpdv UX, cu mult peste solutiile actuale.

Edit: Acum vad ca in form-ul de operatie secundara mai e si un flag, “Comun”, care nu stiu ce inseamna, dar care poate fi usor integrat in layout-ul pe care l-am sugerat, intre campul de nume si butonul de submit.

Edit 2: O sugestie generala. Eu as discuta cu clientul daca este musai musai sa aveti camp de tags. Faci vreodata filtrare sau cautare pe respectivele etichete? Daca nu, atunci au zero rost, numele operatiei este mai mult decat descriptiv.

Edit 3: Daca vrei, formularul de operatie principala il poti pune si la sfarsitul tabelei, asa incat cand adaugi una noua sa o ai direct in fata (mai ales daca le adaugi tot cu AJAX). In cazul asta, deaspra tabelei pui un <a> cu href catre formularul de jos.

5 Likes

Îți mulțumesc pentru sfaturi. Într-adevăr varianta prezentată de tine este superioară dpdv al fluxului natural de completare al informațiilor. Aplicația este dezvoltată în WPF, dar îmi este foarte ușor să adaptez sfaturile tale.

Aplicația fiind una pentru devize de reparații, câmpul de tags este folosit atunci când vrei să selectezi rapid toate operațiile principale specifice unui anumit tip de instalație. O altă metodă inițială pe care o gândisem a fost o selecție vizuală a instalației și apoi a părților prinse în reparație. Am ales varianta cu tags fiind în viziunea mea mai simplă și automat mai ușor de folosit (Ex: dacă filtrezi după tagurile wolla și hidraulic în crearea unui deviz ai acces rapid la toate operațiile specifice).