Breakpointy, které skutečně fungují
Jak zvolit správné breakpointy pro vaše projekty. Jde o víc než jen 768px — musí to dávat smysl pro vaši obsah.
Čtěte článek
Design principy
Dotyková rozhraní — design bez myši
Dotyk funguje jinak než myš. Větší cílové oblasti, jasné stavy, bez hover efektů. Jak navrhnout zkušenost, která skutečně funguje na prstech.
Proč se dotyk liší od myši
Myš je přesná. Lze najet na pixel. Ale prst? To je úplně jiná věc. Prst je širší, má plochu, a přesnost se pohybuje někde kolem 44 pixelů. Tímto rozdílem se řídí všechno — od velikosti tlačítek přes spacing až po to, jak signalizujeme, že se něco stane.
Když navrhujete pro dotyk, už nemůžete spoléhat na hover stavy. Nemáte tam kurzor, který by ukazoval “sem se můžeš podívat”. Místo toho potřebujete jasné vizuální hierarchie, přesné feedback a dostatečný prostor. Málo toho změní uživatelský zážitek rychleji než příliš malé tlačítko na mobilu.
Pět principů dotykového designu
Tyto pravidla fungují, ať navrhujete aplikaci, web nebo interface v autě.
01
Cílové oblasti minimálně 4444 pixelů
Není to pouhá čísla — 44 pixelů je zhruba velikost dospělého prstu v průměru. Menší tlačítka jsou frustrace. Když máte tři ikonky vedle sebe, který si vybere uživatel? Ten, který se jí podaří trefit. Malá tlačítka = vysoká chyba.
02
Rozestupy mezi prvky — minimálně 8 pixelů
Pokud jsou tlačítka těsně vedle sebe, uživatel trefí to špatné. Rozestup mezi interaktivními prvky není luxus — je to povinnost. Osm pixelů je realné minimum, 12-16 je lepší. Prostora se nebojte.
03
Bez hover stavů — všechno se ukazuje jinak
Hover existuje jen s myší. Na dotyk se nepoužívá. Místo toho musíte signalizovat možnost interakce přes barvu, tvar nebo ikon. Když něco vypadá klikatelně, mělo by to vypadat bez nutnosti najet si na to prstem.
04
Jasné stavy — co se právě děje?
Zatímco se data načítávají, uživatel má vědět, že se něco děje. Spinner, progress bar, nebo prostě zakázané tlačítko. Neexistuje horší pocit než nejistota. Pokud se nic neděje viditelně, uživatel si myslí, že nic nefunguje.
05
Feedback musí být okamžitý
Když uživatel něco klikne, měl by to cítit. Barva se změní, prvek se posune, něco se změní. Bez feedbacku se neví, jestli tlačítko zaregistrovalo jejich dotyk. Okamžitá vizuální odpověď znamená rozdíl mezi “Funguje!” a “Je to mrtvé?”
Praktický příklad: Formulář
Vezměte si jednoduchý přihlašovací formulář. Vstupní pole — jaké bude velké? Typicky 44-48 pixelů výšky. Ne proto, že bychom to chtěli, ale proto, že menší pole se hůř používají. Tlačítko “Přihlásit”? To samé — minimálně 48 pixelů.
Mezi polem a tlačítkem? 16 pixelů. To není nic. Ale když se tím opakovadluje procento chybných kliknutí, ty 16 pixelů jsou ty rozdíl. Navíc — jakmile uživatel klikne, tlačítko se změní (jiná barva, text se změní na “Přihlašuji…”). Ví, že se něco děje.
Tohle je design bez myši. Není to ošklivé, není to nudné. Je to jen — funkční. A funkčnost na dotyku je všechno.
Konkrétní techniky pro dotykový design
Jak to implementovat v CSS a HTML.
Zvětšení cílové plochy pomocí padding
Tlačítko nemusí být velkého textu, aby mělo velkou cílovou plochu. Padding řeší všechno. Máte malou ikonku? Obklopte ji padding: 12px. Cílová plocha je nyní 4444 pixelů, i když samotná ikona je 2020.
Active stav místo hover
Místo :hover{} použijte :active{}. To se aktivuje při dotyku. Barva se změní na mikrosekund, ale uživatel to cítí. Je to srozumitelné bez nutnosti visí někde.
Sufficient color contrast
Barvy musí mít dostatečný kontrast. Ne proto, že to vypadá lépe, ale proto, že na slunečnici jsou barvy těžko vidět. 4.5:1 poměr kontrastu není krásný povinný — je to nutnost.
Touch-action CSS vlastnost
touch-action: manipulation; zabraňuje zdvojnásobení kliknutí na desktopech. To je detail, ale důležitý. Zbavuje to uživatele zpoždění.
Viewport meta tag
viewport-fit=cover a initial-scale=1 jsou základy. Bez toho se displej chová divně a text se zvětšuje při rotaci. S tím je všechno pod kontrolou.
Focus stavy jsou viditelné
Když uživatel přejde na prvek klávesnicí (nebo se dotýká), musí vidět, kde je focus. Nikdy neprovádějte outline: none; bez náhrady. Viditelné focus stavy jsou přístupnost.
Nejčastější chyby v dotykovém designu
Tyhle chyby vidíme pořád. Málokdo je dělá schválně — spíš se zapomene, že dotyk není myš.
Příliš malá tlačítka
Ikona 2020 pixelů, bez padding. Uživatel to nemůže trefit. Vidí ji, ale nemůže ji kliknout. Pak to vypadá, že aplikace nefunguje. Prostě — přidejte padding.
Spoléhání na hover
“Najeď myší, aby se zobrazilo menu.” Na mobilu? Neexistuje “najetí”. Menu se nikdy neobjeví. Všechno musí být vidět nebo dostupné bez hoveru.
Bez viditelného feedbacku
Uživatel klikne, nic se neděje viditelně. Neví, jestli to zaregistrovalo. Vždycky dajte feedback — barvě, pohybu, čemukoli.
Malé rozestupy mezi prvky
Dvě tlačítka vedle sebe bez rozestupu. Uživatel chce kliknout na jedno, klikne na druhé. Prostě — rozestup. Osm pixelů minimum.
Zapamatujte si toto
44px
Minimální velikost cílové plochy
8px
Minimální rozestup mezi prvky
0ms
Čekací doba pro feedback
4.5:1
Minimální poměr kontrastu
Připraveni na dotyk?
Dotykový design se zdá složitý, ale ve skutečnosti jde jen o to dát uživatelům dost místa a jasný feedback. Zkuste tyto principy na svém příštím projektu — rozdíl budete vidět okamžitě.
Zjistit více o mobilním designuPoznámka k informacím
Tento článek poskytuje vzdělávací informace o principech dotyového designu. Specifické hodnoty (44px, 8px) jsou doporučení na základě průmyslových standardů a WCAG pokynů, nikoliv absolutní pravidla. Vždy testujte svůj design s reálnými uživateli a na skutečných zařízeních. Různé platformy (iOS, Android, web) mohou mít mírně odlišné požadavky na velikosti a chování. Pokud vyvíjíte pro specifickou platformu, zkonsultujte její oficiální design guidelines.
Související články
