Mobile — Výber termínu a dĺžky pobytu
Varianty B / C / D — vychádza z reálneho mobile UI gabrieltour.sk  ·  ● = dátum s 2 dĺžkami pobytu
B — Chip nad listou
Bar zostáva kompaktný, chip upozorní na alternatívnu dĺžku pobytu
9:41
Vyberte si termín
Dĺžka pobytu 5 nocí
Vyberte dátum odchodu
Výber termínu pre Golf & SPA balík
Termín dostupný aj v inej dĺžke pobytu
Aj 8 nocí od 1 890 € Vybrať
Vyberte dátum odchodu v kalendári
✓ Odporúčané
C — Rozbaľovacia lista
Tlačidlo "Aj iná dĺžka" v bare rozbalí panel s výberom
9:41
Vyberte si termín
Dĺžka pobytu 5 nocí
Vyberte dátum odchodu
Výber termínu pre Golf & SPA balík
Termín dostupný aj v inej dĺžke pobytu
Dĺžka pobytu
5 nocí
cena na osobu
8 nocí
cena na osobu
Vyberte dátum odchodu v kalendári
○ Funkčné, viac klikov
D — Výber v modali
Pri výbere multi-variant dátumu sa zobrazí bottom sheet s výberom dĺžky
9:41
Vyberte si termín
Dĺžka pobytu 5 nocí
Vyberte dátum odchodu
Výber termínu pre Golf & SPA balík
Termín dostupný aj v inej dĺžke — klepnutím vyberieš
Vyberte dátum odchodu v kalendári
Dĺžka pobytu
Výber pre termín —
5 nocí
cena na osobu
8 nocí
cena na osobu
↑ Jasný výber pred potvrdením

Porovnanie variantov B / C / D

Kritérium B — Chip nad listou C — Rozbaľovacia lista D — Bottom sheet modal
Viditeľnosť alternatívy Chip hneď viditeľný ~ Treba si všimnúť tlačidlo Modal sa sám zobrazí
Kompaktnosť baru Bar vždy 1 riadok Bar vždy 1 riadok (+ sheet) Bar vždy 1 riadok
Počet krokov k zmene 1 klik (chip) 2 kliky (trigger + výber) 2 kliky (dátum + výber v modali)
UX pri single-variant dátume Chip sa nezobrazí Trigger sa nezobrazí Modal sa nezobrazí
Zrozumiteľnosť Chip je jasný ~ Text musí byť výstižný Modal je explicitný
Riziko prehliadnutia Nízke (chip je nápadný) Stredné (trigger je malý) Nízke (modal sa sám otvorí)
Vhodnosť pre mobile-first ✓✓ Ideálne Dobré Dobré, štandard na iOS/Android