Príspevok od

Responzívny dizajn je technika navrhovania webových stránok, ktorá umožňuje ich automatické prispôsobenie rôznym veľkostiam obrazoviek. Šírka obrazovky hrá v tomto prípade hlavnú úlohu najmä preto, že z pohľadu používateľa nie je pohodlné scrollovať obrazovku v horizontálnom smere. Vďaka responzívnemu dizajnu sa vedľa seba umiestnené prvky pri plnej šírke obrazovky ukladajú jeden pod druhý, zobrazujú sa v tzv. "stacku".

Ak chcete, aby vaša webová stránka bola úspešná v dnešnom digitálnom svete, responzívny dizajn je absolútne nevyhnutný. Google miluje responzívny dizajn. A vy by ste ho mali tiež! Responzívny dizajn nie je len o peknom vzhľade. Zlepšuje SEO a pomáha vašej stránke dostať sa na vrchol vyhľadávania. Ak nie je vaša webová stránka responzívna, prichádzate o zákazníkov.

Responzívny dizajn a používateľská skúsenosť

Používatelia mobilných zariadení sú zároveň oveľa citlivejší na veľkosť a kontrast textu v porovnaní s používateľmi počítačov. Oči ľudí, ktorí sedia pri počítači v konštantnej vzdialenosti od monitora, sa vedia lepšie prispôsobiť a je pre nich preto jednoduchšie čítať aj drobnejšie texty na obrazovke. Pre porovnanie, napríklad smartfóny sú bežne používané pri chôdzi a často aj v rôznych svetelných podmienkach. Oči týchto používateľov sa tak musia prispôsobovať neustále sa meniacemu prostrediu.

Jednou najfrekventovanejších chýb pri málo responzívnych weboch je príliš malá klikateľná plocha prvkov. V praxi sa preto uplatňuje jedno známe nepísané pravidlo, ktoré hovorí o tom, že najmenšia šírka akéhokoľvek prvku na mobile by mala byť aspoň 35px. V prípade, že je daná plocha menšia ako 35x35px, môže sa ľahko stať, že používateľ bude mať problém kliknúť na takýto prvok, alebo ho vôbec nezaregistruje. Z tohto dôvodu je nevyhnutné robiť najmä všetky dôležité CTA prvky čo najväčšie tak, aby nebol problém ich na prvý pohľad zaregistrovať a kliknúť na ne.

Každý responzívny web si okrem vyššie uvedeného vyžaduje aj optimalizáciu obrázkov. Používatelia mobilných zariadení sa často pripájajú cez mobilné pripojenie, ktoré je o niečo pomalšie. Väčšinou však pritom nepotrebujú obrázky v takom vysokom rozlíšení, ako na počítačoch a notebookoch. V tomto prípade sa zase uplatňuje pravidlo, že pokiaľ sa má obrázok zobrazovať v určitom rozlíšení, v praxi je vhodné, aby bol tento obrázok aspoň v 2x väčšom rozlíšení. Tento postup je dobré nasledovať najmä s ohľadom na rozšírenia zariadení s oveľa vyššou hustotou pixelov (napr.

Navigácia a Hamburger Menu

Navigácia je jedným z najdôležitejších prvkov stránky. Jej hlavnou úlohou je umožniť používateľnom jednoduchú orientáciu na webe a nasmerovať ich k vyhľadávaným informáciám. Pri tvorbe responzívneho webu je tak veľmi dôležité myslieť aj na správnu navigáciu. V prípade bežných zariadení s veľkými obrazovkami v súčasnosti nasledujeme trend preferujúci tzv. megamenu s množstvom rôznych položiek a obrázkov. Takéto megamenu však nie je vhodné používať v prípade mobilných rozlíšení. Megamenu je v týchto prípadoch nahradené tzv. hamburgerovým menu. Jeho názov je odvodený od ikonky, ktorej tvar pripomína hamburger.

Alternatívy k Responzívnemu Dizajnu

V praxi sa vyskytujú alternatívne spôsoby optimalizácie webovej stránky. Jednu z takýchto alternatív predstavuje aj adaptívny dizajn. Tento spôsob využíva najmä Javascript, ktorý pri detekcii mobilného zariadenia alebo menšieho rozlíšenia poprehadzuje a prispôsobí jednotlivé prvky takým spôsobom, aby boli zobrazené ideálne pre ten-ktorý displej. Adaptívny dizajn však nie je však vhodné používať ako samostatné riešenie. Hlavným dôvodom je, že webová stránka sa najprv zobrazí v desktopovej verzii. Až po načítaní Javascripov sa potom jednotlivé prvky poprehadzujú a web sa prispôsobí pre menšie obrazovky. Adaptívny dizajn však možno použiť ako doplnkový prístup k responzívnemu webu, a to najmä pri riešení niektorých prípadov, kedy sa nemožno vyhnúť použitia Javascriptu.

V minulosti nebol responzívny dizajn bežným štandardom. Webové stránky tak využívali mobilnú verziu webu, ktorá sa nachádzala na samostatnej URL adrese ako napríklad: m.nieco.sk. Výhodou tohto spôsobu implementácie je, že HTML a CSS sú pre štandardné a mobilné zobrazenia úplne oddelené. De facto sú potom jednoduchšie pre celkovú implementáciu. Negatívom tohto riešenia je však náročnejšia udržateľnosť kódu. V prípade, že sa niečo zmení na desktopovej verzii, je nevyhnutné vykonať rovnakú zmenu aj na mobilnej verzii. Rozhodnutie o tom, ktorá verzia stránky sa používateľovi zobrazí, sa realizuje na serveri a nie na používanom zariadení. Za najväčšiu nevýhodu tohto riešenia považujeme negatívny vplyv na SEO. Každá webová stránka má dve URL adresy (jednu určenú pre mobilné a jednu pre štandardné zobrazenie). Rovnako negatívny vplyv má na rýchlosť stránky.

Programovanie responzívneho webu

Pri programovaní responzívneho webu má každý programátor k dispozícii dve základné možnosti. Môže si naprogramovať všetko sám, alebo siahnuť po niektorom z dostupných frameworkov. Medzi najznámejšie z nich patrí napríklad Bootstrap, Skeleton, CSS grids a ďalšie. Tieto frameworky už obsahujú množstvo rôznych pravidiel, ktoré sa aplikujú pri zobrazení webu v mobilnom rozlíšení. Výhodou tohto postupu tak je, že programátor nemusí v každom jednotlivom prípade „vymýšľať koleso“ a programovať všetky pravidlá odznova.

Mať responzívny web je dôležité aj z pohľadu SEO - optimalizácie pre vyhľadávače. Google pri indexovaní stránky významným spôsobom zohľadňuje index použiteľnosti webu na mobilných zariadeniach, čo si možno kedykoľvek jednoducho otestovať. Google zároveň uprednostňuje webové stránky, ktoré sú príjemnejšie na používanie pre používateľa.

Dizajn Tlačidiel (Buttons) a Ich Význam v UX

Tlačidlá (buttons) zvyšujú šancu, že návštevníci vašej web stránky splnia to čo od nich na svojej web stránke očakávate. Pritiahnu pozornosť ľudí a presvedčia ich ku kliknutiu. Tým sa buttons stávajú jedným z najdôležitejších elementov web dizajnu. Buttons (tlačidlá/gombíky) sú interaktívne prvky, na ktoré sa dá kliknúť myšou, a tým sa vykoná požadovaná akcia. Tlačidlá majú rôzne vizuálne štýly a textové označenia. Tlačidlá (buttons) sú dôležité, pretože uľahčujú web návštevníkom vykonať nami požadovanú akciu.

  • Interakcia: Tlačidlá umožňujú návštevníkom interagovať so stránkou.
  • Navigácia: Tlačidlá zlepšujú navigáciu na stránke.
  • Konverzie: Tlačidlá majú kľúčovú úlohu pri konverziách.
  • Estetika a vizuálna hierarchia: Tlačidlá prispievajú k estetike a vizuálnej hierarchii webu.

Typy Tlačidiel

  • Tlačidlá s plným pozadím: Tieto tlačidlá majú plné farbené pozadie a sú jedným z najvýraznejších typov tlačidiel. Sú vhodné na akcie, ktoré chcete zdôrazniť, ako napríklad hlavné výzvy na akcie alebo dôležité odkazy.
  • Tlačidlá s obrysom: Tieto tlačidlá majú obrys, ktorý je zvyčajne farebný, a vnútri sú transparentné alebo s mierne prechodným pozadím. Sú menej výrazné ako tlačidlá s plným pozadím, čo ich robí vhodnými pre sekundárne akcie alebo odkazy.
  • Textové tlačidlá: Textové tlačidlá sú jednoduché tlačidlá s textom a bez farebného pozadia. Sú diskrétne a zvyčajne používané na odkazy alebo akcie, ktoré nie sú tak výrazné.
  • Zdvihnuté tlačidlá: Tieto tlačidlá majú efekt zvýšenia alebo tieňového zdvihnutia, ktorý dáva pocit trojdimenzionality. To pomáha tlačidlám vyniknúť na stránke a zdôrazniť ich klikateľnosť.
  • Toggle tlačidlá: Toggle tlačidlá slúžia na prepínanie medzi dvoma stavmi alebo možnosťami. Každý klik na tlačidlo mení jeho stav.
  • Floating action tlačidlá: Floating action tlačidlá sú výrazné tlačidlá, ktoré plávajú nad obsahom stránky. Zvyčajne majú kruhový tvar a obsahujú jednoduchú ikonu, ktorá reprezentuje hlavnú akciu na stránke.
  • CTA (Call to Action) tlačidlá: CTA (Call to Action) tlačidlá majú za cieľ motivovať návštevníkov k určitej akcii, ako napríklad nakupovaniu, stiahnutiu súboru alebo prihláseniu sa na odber noviniek.
  • Dropdown tlačidlá: Dropdown tlačidlá po kliknutí zobrazia vertikálne menu s možnosťou výberu.
  • Hamburger: Hamburger je ikonou s trojčiarovým zobrazením (ktoré vyzerá ako ikona burgru), ktorá sa často používa na mobilných verziách web stránok. Pri kliknutí na toto tlačidlo sa zobrazí bočné menu alebo navigácia, ktorá je neviditeľná.
  • Plus tlačidlo: Plus tlačidlo je často používané na označenie možnosti pridania nového obsahu, ako napríklad pridanie nového príspevku, udalosti alebo položky do zoznamu.
  • Rozbaľovacie tlačidlo: Rozbaľovacie tlačidlo je často používané na zobrazenie dodatočných informácií alebo možností, ktoré sa rozbalia po kliknutí.
  • Tlačidlo zdieľania: Tlačidlo zdieľania je používané na umožnenie návštevníkom stránky zdieľať obsah na sociálnych médiách alebo iných platformách.

Stavy Tlačidiel

  • Štandardný stav: Štandardný stav tlačidla je ten, v ktorom sa nachádza, keď sa stránka načíta a návštevník naň ešte neklikol. Toto je základný stav tlačidla, ktorý môže obsahovať text, ikonu alebo oboje.
  • Hover stav: Keď návštevník prejde kurzorom myši nad tlačidlo (hover, znáša sa), aktivuje sa hover stav. V tomto stave sa tlačidlo môže vizuálne zmeniť, napríklad zmenou farby pozadia, obrysu alebo textu.
  • Aktívny stav: Aktívny stav tlačidla nastáva v momente, keď návštevník stlačí tlačidlo. V tomto stave sa môže ešte viac zmeniť jeho vizuálny vzhľad, aby používateľ videl, že jeho akcia bola úspešne vykonaná. Napríklad, tlačidlo sa môže zmeniť na inú farbu alebo sa zobraziť krátka animácia.
  • Stav zaostrenia: Stav zaostrenia je aktívny, keď sa tlačidlo dostane do zamerania - napríklad, keď sa naňho posunie kurzor myši pomocou klávesnice alebo keď je aktivované dotykom na zariadeniach so senzorovým displejom. Stav zaostrenia je dôležitý pre používateľov, ktorí stránku ovládajú klávesnicou alebo pomocou technológií podporujúcich prístupnosť.
  • Neaktívny stav: Neaktívny stav sa používa, keď je tlačidlo neaktívne a nedostupné na kliknutie. Tento stav môže nastať, ak nie sú splnené určité podmienky (tlačidlo odoslania formuláru je neaktívne pretože ste eštenevyplnili všetky položky na formulári) alebo ak je vykonávaná iná operácia.
  • Stav načítavania: Stav načítavania sa používa, keď je tlačidlo stlačené a prebieha nejaká asynchrónna operácia, napríklad odosielanie formulára alebo spracovanie údajov. V tomto stave sa môže na tlačidle zobraziť animácia načítavania, ktorá indikuje, že sa niečo deje a používateľ by mal počkať.

Ako Navrhnúť Efektívne Tlačidlá

Ak ľudia nepochopia, že tlačidlá sú tlačidlá, ich funkcia sa minie účinku a ľudia nesplnia vami požadovanú akciu.

  • Zvýraznenie farbou: Tlačidlá by mali mať farbu, ktorá sa líši od okolitého pozadia alebo iných elementov stránky. Môžete na ne pridať tieň, ktoré z nich spravia 3D gombíky, ktoré sa podobajú na reálne gombíky. Nezabudnite na hover akciu.
  • Vizuálny kontrast: Použite elementy, ktoré zabezpečia, že tlačidlá vyniknú na pozadí.
  • Ikony a text: Použite ikony alebo text na tlačidlách, ktoré jasne označia ich účel.
  • Výzva na akciu (CTA): Pridajte na tlačidlá text, ktorý popisuje funkciu tlačidla.
  • Zvýraznenie interaktivitu: Hover je ten najlepší spôsob ako upozorniť, že niečo je button.
  • Tvar a veľkosť: Vytvorte tlačidlá dostatočne veľké, aby boli ľahko klikateľné aj na dotykových zariadeniach.
  • Logické umiestnenie: Umiestnite tlačidlá na miesta, kde sú očakávané.
  • Jasnosť navigácie: Vytvorte logický a zrozumiteľný navigačný systém, ktorý vedie používateľov k tlačidlám podľa ich potrieb.
  • Text: Použite text, ktorý presne popisuje akciu, ktorá bude vykonaná po kliknutí na tlačidlo.
  • Ikony: Použite ikony, ktoré sú intuitívne a reprezentujú konkrétnu akciu.
  • Konzistentnosť: Udržujte konzistentný štýl a frázy pre podobné akcie.
  • Hierarchia farieb: Použite farby tak, aby primárne tlačidlo bolo výraznejšie farby než tlačidlá s nižšou prioritou. Primárne tlačidlo môže byť zelené, sekundárne zas pastelovo zelené.
  • Hierarchia typov: Spravte primárne tlačidlo s plným pozadím.
  • Veľkosť: Dajte primárnemu tlačidlu väčší rozmer, aby bolo vizuálne výraznejšie.
  • Umiestnenie: Umiestnite primárne tlačidlo bližšie k dôležitému obsahu alebo významnej sekcii na stránke.
  • Jedna hlavná akcia: Každé tlačidlo by malo viesť k jednej hlavnej akcii.
  • Jednoduchosť: Minimalizujte množstvo tlačidiel s primárnym cieľom na stránke.
  • Janosť: Nechajte primárne tlačidlo výrazné a jasné.
  • Farba: Použite rôzne farby pre rôzne typy tlačidiel.
  • Tvar: Experimentujte s rôznymi tvarmi tlačidiel pre rôzne funkcie.
  • Primárne kontra sekundárne: Použite jasnejšie a výraznejšie farby pre primárne tlačidlá, ktoré vedú k hlavným akciám.
  • Farby pre emócie: Ak máte tlačidlo zrušiť filter, použite na to červenú farbu. V západnej kultúre označuje červená riziko.
  • Zreteľné tvary: Použite rôzne tvary pre rôzne tlačidlá, aby sa vytvorila vizuálna odlišnosť.

Prístupnosť Tlačidiel

Zabezpečenie prístupnosti tlačidiel je rovnako dôležité ako ich vizuálny dizajn.

  • Dostatočná veľkosť: Uistite sa, že text na tlačidlách je dostatočne veľký na čítanie.
  • Čitateľný text: Používajte jednoduchý a čitateľný text na tlačidlách.
  • Bežný stav: V tomto stave tlačidlo má svoj základný vizuálny vzhľad.
  • Aktívny stav: Keď užívateľ klikne na tlačidlo, mali by dostať vizuálnu spätnú väzbu.
  • Fokus stav: Pre používateľov klávesnice je dôležité, aby bolo jasné, ktoré tlačidlo je práve vo fokuse.
  • Čitateľný text: Text na tlačidle by mal byť dostatočne veľký na čítanie.
  • Dostatočná veľkosť tlačidla: Samotné tlačidlo by malo mať dostatočnú veľkosť, aby bolo jednoduché na kliknutie.

Stratégie pre Efektívne Tlačidlá

  • Zamerajte sa na hlavné ciele, ktoré chcete, aby používatelia vykonali.
  • Primárna akcia: Každé tlačidlo by malo mať jednoznačnú primárnu akciu, ktorú má podporiť.
  • Minimalizujte sekundárne akcie: Akcie, ktoré nie sú kritické alebo hlavné, môžete zaradiť do textových odkazov alebo iných subtilnejších prvkov namiesto tlačidiel.
  • Hierarchia: Rozdeľte akcie podľa ich dôležitosti a umiestnite ich do rôznych sekcií alebo panelov na stránke.
  • Informujte, že úspešne klikli tlačidlo.
  • Malé okná: V prípade malých okien, ako sú mobilné zariadenia alebo menšie panely, umiestnite tlačidlá na spodný pravý roh obrazovky.
  • Farby a štýl: Používajte konzistentné farby, štýl a typografiu pre všetky tlačidlá na stránke.
  • Hierarchia: Použitím rôznych veľkostí môžete vytvoriť hierarchiu prvkov na stránke.
  • Čitateľnosť: Veľkosť textu by mala byť dostatočná na to, aby bol ľahko čitateľný.
  • Kontinuita: Udržujte konzistentný tvar pre rovnaké typy prvkov na celej stránke.
  • Emócie a význam: Rôzne tvary môžu vyvolať rôzne emócie a vnímanie.

Padding označuje priestor medzi okrajom prvku a jeho obsahom alebo susednými prvkami. Vzduch a oddych: Padding umožňuje prvkom na stránke dýchať a oddýchnuť si od seba. Psychologický vplyv: Rôzne farby môžu vyvolať rôzne emócie a pocity. Prirodzenosť: Umiestnite dôležité prvky tam, kde sa prirodzene začína užívateľská cesta. Stručnosť a jasnosť: Mikrokópia, teda malé texty, by mala byť jednoduchá, priamočiara a zrozumiteľná. Špecifické slová: Používajte slová, ktoré presne opisujú úlohu prvkov. Mobilný prvok: Keď navrhujete tlačidlá a iné prvky pre mobilné zariadenia, zvážte, že ovládanie prstom je iné ako ovládanie myšou. Undo funkcionalita: Ak je to vhodné, umožnite používateľom vrátiť akciu, ktorú vykonali.

Testovanie a Nástroje

  • Navigačné testovanie: Navigačné testovanie sa zameriava na testovanie toho, ako používatelia vnímajú a používajú vašu webovú stránku alebo aplikáciu. Metóda: Sledujte používateľov, ako prechádzajú cez vašu stránku.
  • A/B testovanie: Metóda: Vytvorte dve verzie tlačidla s rôznymi dizajnovými prvkami, ako farbou, textom, veľkosťou atď. Následne tieto dve verzie zobrazte rôznym skupinám užívateľov a sledujte, ktorá verzia má lepšie výsledky (napr.
  • Heatmapy: Metóda: Implementujte heatmapový nástroj na vašu stránku, ktorý sleduje pohyby a kliknutia užívateľov.

Dizajnové Systémy a Frameworky

  • Material Design: Material Design je dizajnový jazyk vyvinutý spoločnosťou Google, ktorý poskytuje konzistentný vzhľad a pocit na rôznych platformách a zariadeniach. Ponúka súbor usmernení, komponentov a zdrojov pre návrh užívateľských rozhraní.
  • Wireframing knižnice: Wireframing knižnice poskytujú prednastavené prvky a komponenty, ktoré možno použiť na vytváranie wireframov a prototypov pre webové stránky a aplikácie. Tieto knižnice zvyčajne zahŕňajú rôzne prvky užívateľského rozhrania, vrátane tlačidiel, ktoré je možné jednoducho presunúť a umiestniť na vytvorenie modelov.
  • Bootstrap: Bootstrap je populárny front-endový rámec, ktorý poskytuje zbierku komponentov HTML, CSS a JavaScript na vytváranie responzívnych webových stránok a aplikácií so zameraním na mobilné zariadenia.
  • Kendo UI: Kendo UI je komplexný rámec pre HTML5 a JavaScript vyvinutý spoločnosťou Progress, ktorý ponúka širokú škálu komponentov užívateľského rozhrania, vrátane tlačidiel, mriežok, grafov a ďalších.

tags: