Netrávte nad úkolom zbytočne veľa času a nesnažte sa nájsť najlepšie možné riešenie. Sami, bez konfrontácie s užívateľmi a konkrétnymi use-case najlepšie riešenie nenájdete.

Úkol

Potrebujeme získať od užívateľa značenie trasy. Máme dve možnosti:

  1. Spracovať GPX súbor (napríklad pomocou mapy.cz si vykolíkujem trasu a následne ju vyexportujem pre ďalšie použitie)
  2. Získať od užívateľa fotografiu s mapovým podkladom, na ktorom bude trasa naznačená (urobím si print-screen mapy a napr. v skicari aspoň približne vyznačím trasu)  

Potrebujeme, aby užívateľ nahral aspoň jeden zo súborov. Neskôr som dostal presnejšie informácie, že chceme zachovať aj možnosť súčasného nahratia oboch súborov. 

Triviálna vec? Možno. Akurát tento prvok sa bude nachádzať na podstránke pre pridávanie povinných položiek komplexnejšieho procesu. Užívateľ bude preto nastavený na to, že musí vyplniť všetky požadované informácie. 

Snaha vymyslieť to od stola

1. Skica prvého riešenia

Prvé, čo ma napadlo, sú taby. Vyberieme si správny tab podľa toho, čo chcem nahrať a ďalej je to už jednoduché. Hneď, ako som to naskicoval som vedel, že to je špatne. Nahrám buď jeden typ súboru alebo druhý. Nenahrám však oba súčasne.
 
 
 
 thumbs up jednoznačnosť toho, čo nahrávam - zvolím, čo chcem a existuje na to extra vstup
thumbs up pochopím, že stačí nahrať len jeden súbor 
 
thumbs down nenahrám oba súbory súčasne 
 

2. Rýchla modifikácia prvej možnosti 

Pridanie tretej karty, kde bude možné nahrať oba dva typy súborov.
 
 
 
thumbs up jednoznačnosť toho, čo nahrávam
thumbs up možnosť súčasne nahrať oba súbory 
thumbs up najmenej častá položka - súčasné nahratie dvoch súborov je “vzadu”
 
thumbs down dva inputy pre prípad nahrávania oboch súborov - mohol by to spracovať jeden 
 

3. Dajme preč taby

Taby sa mi nepáčia a nie je to vlastne nič iné, ako voľba pomocou radio buttonov.
 
 
 
thumbs up jednoznačnosť toho, čo nahrávam
thumbs up možnosť súčasne nahrať oba súbory 
thumbs up najmenej častá položka - súčasné nahratie dvoch súbor je “vzadu”
thumbs up zbavili sme sa tabov
 
thumbs down dojde mi, že tretia možnosť je pre nahratie oboch súborov?
thumbs down dva inputy pre prípad nahrávania oboch súborov - mohol by to spracovať jeden
thumbs down chce to dva kliki, najprv zvoliť, čo chcem nahrať a potom kliknúť pre nahratie
 

4. Jednoznačne ukázať, čo obsahuje voľba

Jednoznačne ukázať, že v treťom prípade budeme nahrávať dva súbory.
 
 
thumbs up jednoznačnosť toho, čo nahrávam
thumbs up možnosť súčasne nahrať oba súbory 
thumbs up najmenej častá položka - súčasné nahratie dvoch súbor je “vzadu”
thumbs up jednoznačnejšie, že v treťom kroku budem nahrávať dva súbory
 
thumbs down dva inputy pre prípad nahrávania oboch súborov - mohol by to spracovať jeden
thumbs down chce to dva kliki, najprv zvoliť, čo chcem nahrať a potom kliknúť pre nahratie
 

5. Zjednodušme to na jeden klik

Odstránenie možností klikať na radio button a zobrazíme len dva vstupné imputy. Užívateľ si sám vyberie, čo chce a nahrá to.
 
 
thumbs up jednoznačnosť toho, čo nahrávam
thumbs up možnosť súčasne nahrať oba súbory 
thumbs up zbavili sme sa jedného kliku navyše
 
thumbs down dva inputy pre prípad nahrávania oboch súborov - mohol by to spracovať jeden
thumbs down pochopí užívateľ, že stačí nahrať len jeden súbor a nemusí nahrať oba (kontext vyplňania povinných položiek, v ktorom sa prvok bude nachádzať)
 

6. Navrhujeme pre mobil - načo je tam drag and drop?

Navrhujeme pre mobil, drag and drop je tam zbytočný.
 
 
thumbs up jednoznačnosť toho, čo nahrávam
thumbs up možnosť súčasne nahrať oba súbory 
thumbs up zbavili sme sa jedného kliku navyše
 
thumbs down dva inputy pre prípad nahrávania oboch súborov - mohol by to spracovať jeden
thumbs down pochopí užívateľ, že stačí nahrať len jeden súbor?
 

7. Jeden vstup pre všetky prípady

Jeden vstup pre oba súbory s možnosťou vybrať viac ako jeden súbor súčasne. Zmena konceptu vo forme poskytnúť informácie a následne input na zadanie vstupu. 
 
 
thumbs up možnosť súčasne nahrať oba súbory 
thumbs up zbavili sme sa jedného kliku navyše
thumbs up jeden input pre všetky prípady
 
thumbs down pochopí užívateľ, že stačí nahrať len jeden súbor?
thumbs down multiselect je možné použiť len na výber súborov z jednej zložky (priečinka)
 

8. Nahrávanie viacerých súborov z viacerých zložiek 

Aby sme mohli nahrať viac súborov, tak defaultné správanie file inputu nahradíme tlačidlom na pridanie súboru. Po zvolení súboru sa súbor zobrazí v zozname a následne bude možné nahrať další súbor.
 
Zároveň poskytneme nápovedu, ako majú vyzerať súbory, ktoré ud užívateľa požadujeme. Prostý tooltips bude fajn, ideálne s odkazom na podrobenjší návod (na extra podstránke v novom okne).
 
Pred pridaním súboru:
 
 
 
Po pridaní súboru:
 
 
thumbs up možnosť súčasne nahrať oba súbory 
thumbs up zbavili sme sa zbytočných klikov - najčastejší stav pri nahratí jedného súboru je na klik
thumbs up jeden input pre všetky prípady
thumbs up môžem nahrať ľubovolní počet súborov z rôznych priečinkov
thumbs up nápoveda k nahratiu súborov
thumbs up zadanie formou odrážkok - malo by to byť jednoduchšie na pochopenie 
 
thumbs down viac práce pre vývojára - pridávanie javasriptu, ktorý to spracuje
 
 

9. Buďme presní v copy

Pri tlačidlách a CTA prvkoch je fajn byť, čo možno najpresnejší v copy. Užívateľ môže pridať jeden alebo viac súborov. 
 
Zároveň, ak už nejaký pridal, tak by tam mohlo byť presnejšie pridať další(e) súbor(y).
 
 
 
thumbs up možnosť súčasne nahrať oba súbory 
thumbs up zbavili sme sa zbytočných klikov - najčastejší stav pri nahratí jedného súboru je na klik
thumbs up jeden input pre všetky prípady
thumbs up môžem nahrať ľubovolní počet súborov z rôznych priečinkov
thumbs up nápoveda k nahratiu súborov
thumbs up zadanie formou odrážok - malo by to byť jednoduchšie na pochopenie 
thumbs up lepšie copy pre button
 
thumbs down viac práce pre vývojára - pridávanie javasriptu, ktorý to spracuje 
 

Prečo riešenie od stolu nie je vhodné? 

Prečo nestačí nájsť riešenie, ktoré bude funkčné pre danný prípad? 
Pre radu dôvodov: 
  • trvá to dlho a berie to čas z rozpočtu, pritom je to len jeden input 
  • výsledné riešenie je náročnejšie na vývoj
  • vôbec nemusí byť až tak ideálne, ako si myslím (nemám to otestované)
  • musí to byť ideálne? (možno mám šikovnú cieľovku a šlo by im to aj s riešením 2.)
 
Čo by som mal pred návrhom komponenty zvážiť:
  • Aký je prínos toho, keď to budem dlhšie ladiť?
  • Aký veľký je to problém, keď vykopneme rýchle riešenie?
  • Je to dôležitá funkcionalita?  
  • Ako často budú ľudia komponentu používať?

 

Čo s tým

Jasné, váš use-case a kontext je jedinečný a musíte nájsť ideálne a jedinečné riešenie. Alebo nie? 
 
V každom prípade by som sa pred iterovaním skicovania poradil:
  • kolega designér, ktorý možno niečo podobné riešil
  • google (snáď niečo ako “multichoice file input ux”)
  • so sebou samím: neriešil som niečo podobné na inom projekte?
  • vývojár, ktorý to možno už niekedy riešil?
 
Čo by som spravil:
  1. Určiť prioritu funkcionality
  2. Popísať najčastejší scenár
  3. Škrtol tie menej časté scenáre (vážne musíme umožniť súčané nahrávanie oboch súborov v tejto verzií aplikácie)
  4. Poradil sa s kolegom, ktorý to bude vyvýjať 
  5. Dal tam jeden klasický file input
  6. Otestoval to v kontexte celého procesu funkcionality (komponenta bude v procese pridávania povinných informácií) 

 

To dôležité znova

Malých komponent a dielčích problémov, ktoré je v procesu návrhu alebo optimalizácie webov možné riešiť, bude dosť. Úplne detailne nemusíme vyriešiť všetky. Niektoré sú nedôležité a málo výužívané.
 
Dobré je myslieť aj na to, že je lepšie mať menej premyslené a otestované riešenie ako riešnie, na ktorom sám strávim pár hodín práce, ale nekomfrontujem ho s užívateľmi. Moc nevymýšlajte, keď je možné riešenie otestovať v rámci prototypu.
 

Matej Chyľa
Pracoval som ako freelancer, zbieral som skúsenosti popri štúdiu, absolvoval som stáž. To všetko preto, aby som dnes mohol navrhovať fungujúce weby. Základom mojej práce je nikdy nekončiaci designový proces. Získavam informácie, overujem hypotézy a testujem vhodnosť možných riešení.