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:
- Spracovať GPX súbor (napríklad pomocou mapy.cz si vykolíkujem trasu a následne ju vyexportujem pre ďalšie použitie)
- 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.
jednoznačnosť toho, čo nahrávam - zvolím, čo chcem a existuje na to extra vstup
pochopím, že stačí nahrať len jeden súbor
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.
jednoznačnosť toho, čo nahrávam
možnosť súčasne nahrať oba súbory
najmenej častá položka - súčasné nahratie dvoch súborov je “vzadu”
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.
jednoznačnosť toho, čo nahrávam
možnosť súčasne nahrať oba súbory
najmenej častá položka - súčasné nahratie dvoch súbor je “vzadu”
zbavili sme sa tabov
dojde mi, že tretia možnosť je pre nahratie oboch súborov?
dva inputy pre prípad nahrávania oboch súborov - mohol by to spracovať jeden
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.
jednoznačnosť toho, čo nahrávam
možnosť súčasne nahrať oba súbory
najmenej častá položka - súčasné nahratie dvoch súbor je “vzadu”
jednoznačnejšie, že v treťom kroku budem nahrávať dva súbory
dva inputy pre prípad nahrávania oboch súborov - mohol by to spracovať jeden
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.
jednoznačnosť toho, čo nahrávam
možnosť súčasne nahrať oba súbory
zbavili sme sa jedného kliku navyše
dva inputy pre prípad nahrávania oboch súborov - mohol by to spracovať jeden
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ý.
jednoznačnosť toho, čo nahrávam
možnosť súčasne nahrať oba súbory
zbavili sme sa jedného kliku navyše
dva inputy pre prípad nahrávania oboch súborov - mohol by to spracovať jeden
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.
možnosť súčasne nahrať oba súbory
zbavili sme sa jedného kliku navyše
jeden input pre všetky prípady
pochopí užívateľ, že stačí nahrať len jeden súbor?
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:
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).
možnosť súčasne nahrať oba súbory
zbavili sme sa zbytočných klikov - najčastejší stav pri nahratí jedného súboru je na klik
jeden input pre všetky prípady
môžem nahrať ľubovolní počet súborov z rôznych priečinkov
nápoveda k nahratiu súborov
zadanie formou odrážok - malo by to byť jednoduchšie na pochopenie
lepšie copy pre button
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:
- Určiť prioritu funkcionality
- Popísať najčastejší scenár
- Škrtol tie menej časté scenáre (vážne musíme umožniť súčané nahrávanie oboch súborov v tejto verzií aplikácie)
- Poradil sa s kolegom, ktorý to bude vyvýjať
- Dal tam jeden klasický file input
- Otestoval to v kontexte celého procesu funkcionality (napr. 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.
