13 osvědčené postupy pro návrh webových stránek pro rok 2021

v dnešní době můžete Web spustit a spustit během několika minut. Existuje však rozdíl mezi živým webem a optimalizací.

proč záleží na designu? Trvá to jen 0.05 sekundy, než si lidé vytvoří názor na váš web. Ano, čtete to správně-50 milisekund, aby někdo byl odfouknut nebo odražen vaším webem. Většina tohoto názoru je tvořena z návrhu.

design webových stránek také ovlivňuje vaše konverze, důvěryhodnost a v konečném důsledku způsobí nebo přeruší úspěch vašeho webu. Žádný web není dokonalý, ale měli byste jej co nejvíce optimalizovat.

Tady je něco, co vzít v úvahu také: Po špatné zkušenosti, 88% spotřebitelů je nepravděpodobné, že návrat na webových stránkách. Kromě toho nedávná studie zjistila, že 77% agentur tvrdí, že špatný design webových stránek je nejvýznamnější slabinou jejich klientů.

Sečteno a podtrženo: Pokud váš webový design není optimalizován pro uživatelský zážitek (UX), bude to škodlivé pro váš úspěch. Proto jsem napsal tuto příručku.

mnoho faktorů jít do navrhování webové stránky. To je třináct nejdůležitějších prvků, které je třeba upřednostnit v roce 2021. Pokud budete postupovat podle těchto osvědčených postupů, výkon vašeho webu se drasticky zlepší.

Použijte tento kontrolní seznam k zajištění, že máte vítězný návrh

1. Minimalizovat text
2. Zobrazit, neříkej
3. Používejte krátké věty
4. Zkuste kratší odstavce
5. Vyberte barevné schéma, které odpovídá
6. , Aby vaše CTA jasné,
7. Posílení akcí s obeznámenost
8. Zjednodušení navigace
9. Optimalizovat design pro mobilní
10. Priority SEO
11. Sledovat vaše rychlost načítání stránky
12. Průběžně spustit A/B testy

Minimalizovat text

nevyplňujte vaše stránky s masivní bloky text.

nemluvím o blogových příspěvcích, které někdy musí jít do hloubky (jako je tento!). Mluvím o vašich webových stránkách (např. domovská stránka, vstupní stránka). Udržujte text na minimu zde.

chcete návštěvníkům svých webových stránek sdělit vše o vás, vaší společnosti, vaší značce a vašich produktech. Ale musíte se naučit, jak vyprávět tento příběh v několika větách nebo-ještě lépe-několika slovech.

Zobrazit, neříkejte

vizuály vám nejen pomohou rozbít psaný obsah, ale mohou také poskytnout hlubší vysvětlení. Ukažte svým návštěvníkům, o čem jste. Za kratší dobu pochopí víc.

Harry stránku produktu ztělesňuje obě tyto první dva konstrukční principy:

například, řekněme, že vaše webové stránky prodává holící strojky, žiletky, holicí krém, a další výrobky na holení pro muže.

pracujete na obchodním modelu předplatného a dodáváte tyto produkty svým zákazníkům měsíčně. Design vašich holicích strojků je velmi hezký-jsou vyrobeny z vyřezávaného tvrdého dřeva a jsou natolik pěkné, že dávají jako dárek.

spíše než jít do všech těchto detailů na vaší domovské stránce, můžete jednoduše mít fotografii těchto produktů s textem říkat něco jako: „doručeno k vašim dveřím.“Svou zprávu dostanete pouhými čtyřmi slovy.

jistě, můžete jít do větších detailů, čím hlouběji se návštěvník dostane na vaše stránky, ale zdlouhavý textový popis není vyžadován.

použijte krátké věty

krátké věty jsou snáze čitelné.

nebombardujte návštěvníky velkými kusy textu. Nebudou vědět, kde začít číst a nebudou moci strávit váš obsah.

smíchejte to. Pokud potřebujete dlouhou větu, následujte ji krátkou. Rozmanitost pomáhá.

zkuste kratší odstavce

použijte konce odstavců ve svůj prospěch. Je v pořádku psát delší odstavce, ale rád udržuji své domovské odstavce na několika větách.

je také důležité, aby to přehánět. Příliš mnoho dobré věci, je ve skutečnosti špatná věc.

Začněte každý odstavec novými informacemi, takže pokud někdo posouvá, může rychle zjistit, zda potřebuje tento odstavec přečíst.

odstranění zbytečného textu na vašich stránkách snižuje nepořádek a klade větší důraz na vaši výzvu k akci.

mít CTA vyniknout sám ve svém vlastním odstavci je působivější než pohřbít ho v hromadě textu.

velmi užitečným nástrojem v této situaci jsou kulky. Místo přidávání odstavců a psaní dlouhého formuláře zvažte použití seznamů. V těchto seznamech použijte odrážky.

Studie ukazují, že více lidí se bude dívat na seznamy s odrážkami bodů, než jiné formáty. Je to proto, že pomáhají zlepšit skenovatelnost stránky a umožňují vám zvýraznit nejdůležitější body, které chcete udělat.

vyberte barevné schéma, které odpovídá vaší strategii značky

výběr barev, který provedete na svém webu, je důležitější, než si myslíte.

návštěvníci posoudí vaše webové stránky za méně než 90 sekund. Většina z toho je výsledkem barev, které si vyberete.

nejlepší způsob, jak si vybrat barevné schéma vašeho webu, je značka. Podívejte se na své logo. Odpovídají barvy na vašem webu image vaší značky?

zde je příklad. Myslete na Starbucks.

když uslyšíte tuto značku, jsem si jistý, že máte v hlavě obrázek. Možná je to logo, znamení nebo Umístění obchodu.

spojujete s tímto jménem nějaké barvy? Nyní se podívejme na jejich webové stránky.

není divu, že šli se zeleným barevným schématem.

tato volba designu odpovídá jejich logu a image značky, což posiluje to, co spotřebitelé již se značkou spojují. Udržováním věcí v souladu, nedochází k záměně. Bylo by divné, kdybyste navštívili tento web a barvy byly žluté a červené. To nemá nic společného s jejich značkou.

budeme hovořit více o posílení ve větší hloubce, jak budeme pokračovat.

Udělej si svůj CTA jasný a zřejmý

CTA by neměla být pohřbena. Musí být velké, odvážné a silné a musí jasně vyniknout jako akce, kterou by vaši návštěvníci měli podniknout.

přesto většina webových stránek nemá tlačítko CTA, které lze spatřit za méně než tři sekundy. Je velká šance, že spadnete do skupiny, která trvá déle. To není kategorie, ve které chcete být.

konverze nelze řídit bez účinného tlačítka CTA.

téměř nikdy nevidím CTA na vnitřních stránkách firmy (stránky, které vysvětlují, co vaše značka dělá a co nabízíte). To je hlavní konstrukční chyba. Nemůžete očekávat, že návštěvníci přejdou zpět na vaši domovskou stránku a převedou ji.

podívejte se na tento CTA z lakmusu.

podívejte se, jak jednoduchý je tento design. Na obrazovce je minimální text, takže zpráva je jasná.

výsledkem je, že CTA „sign up free“ vyniká. Ve skutečnosti jej lakmus dokonce umístil na více než jedno místo na obrazovce.

kam byste měli umístit CTA se liší od stránky k stránce. Například blogové příspěvky by měly mít CTA nahoře, aby je čtenáři viděli rychle a také dole poté, co si přečetli příspěvek.

jít hlouběji: chcete optimalizovat své CTA? Tady jsou 11 způsoby, jak zlepšit své výzvy k akci.

Posílení akcí s obeznámenost

Pokud vaše poselství je stejné, vaše CTA by měla být stejná na každé stránce.

Přemýšlejte o tom, jak lidé procházejí vaše webové stránky. I když nastavíte určitý tok, ne každý přistane na stránce a převede se během několika sekund. Nejprve se mohou trochu procházet.

řekněme například, že máte web elektronického obchodu. Neměl bys změnit CTA tlačítko ze stránky na stránku, která by vypadala takto:

• Homepage: Checkout
• Kategorie stránce: Koupit dnes
• stránka Produktu: Klepnutím na tlačítko koupit

Pokud návštěvník vidí jedno z těch tlačítek na své domovské stránce, ostatní na stránce kategorie, a třetí na stránku produktu, není žádná výztuž.

místo toho udržujte zprávy a styl konzistentní. Zde je dobrý příklad značky šperků a doplňků MVMT.

nezáleží na Tom, jestli jste na své brýle, hodinky nebo šperky stránce. Uvidíte stejný“ SHOP NOW “ CTA pro jejich produkty.

každá stránka také zůstává v souladu s celkovým minimalistickým, černobílým designem jejich webových stránek.

použijte tento princip návrhu také na své webové stránky.

přesahuje tlačítko CTA. Cílem je mít tento typ výztuže s co největším počtem prvků.

konzistence v jazyce, zasílání zpráv a designu posiluje vaši identitu značky a zanechává trvalý dojem na mysl vašich návštěvníků.

Zjednodušte navigaci

pro návštěvníka webu by nemělo být obtížné najít na vašem webu to, co hledá.

Vžijte se do jejich boty. Proč navštěvujete webové stránky? Jak tento úkol splníte? Možná si chcete něco koupit, získat více informací nebo zjistit, co nabízí. Ať už je to jakýkoli důvod, pokud to návštěvníci nedokážou rychle zjistit, odejdou.

tam je prostě příliš mnoho konkurence. Uživatelé nemají důvod se smířit s nepraktickou navigací na webu. Vše, co musí udělat, je opustit vaše stránky a najít to, co potřebují někde jinde.

nesnažte se znovu vynalézat kolo se složitým designem. Držte se standardního formátu.

například většina webových stránek umístí navigační nabídku vodorovně v horní části každé stránky. Pokud je vaše nabídka někde jinde, mohlo by to zmást vaše návštěvníky.

čím méně možností v nabídce, tím lépe. Jinak bude pro lidi příliš těžké najít to, co potřebují. Tento koncept je známý jako Hickův zákon.

Čím více možností budete někomu dát, tím déle bude trvat jim, aby se rozhodnutí. To je důvod, proč složité návrhy a navigace rozdrtí vaše míry konverze.

existuje o tom slavný experiment, označovaný jako jam study, který pojednává o paradoxu volby.

experiment byl proveden v místním obchodě s potravinami. Spotřebitelé byli prezentovány s 24 džemů, aby vzorek na jeden den, a šest zácpy na následující den:

• větší displej na jeden den přilákal 60% zákazníků, ale jen 3% z těch lidí udělal nákup.
• menší zobrazení šesti džemů druhý den přilákalo 40% nakupujících, ale 30% z nich uskutečnilo nákup.

omezením možností byly konverze desetkrát vyšší. Stejný koncept lze použít i pro navigaci na webu.

Odstraňte zbytečné možnosti nabídky. Například místo toho, abyste měli tlačítko „domů“, použijte logo webové stránky pro odkaz zpět na domovskou obrazovku.

podívejte se na domovskou stránku náměstí.

design je super čistý. Možnosti nabídky jsou velmi omezené. To usnadňuje návštěvníkům výběr, který vyhovuje jejich potřebám.

všimnete si, že na obrazovce je minimální text a CTA je jasná a zřejmá.

tento typ designu znemožňuje návštěvníkům webových stránek ztratit se nebo zmást při navigaci.

Pro ty z vás, kteří mají spoustu možností na vaše webové stránky, jako je například ecommerce, shop, můžete přidat vyhledávací lišty pro zjednodušení navigace proces bez použití složité menu. Mnoho softwarových společností dát své funkce v záložce funkce, spíše než mít individuální kartu pro každou funkci.

Optimalizovat design pro mobilní zařízení

Mobilní je, jak většina světa přistupuje k Internetu. To znamená, že pokud nejste optimalizováni pro mobilní zařízení, váš web nebude fungovat dobře.

podívejte se na tato data z Hootsuite:

vyhledávače si to uvědomují a odměna stránky, které jsou mobile-friendly. Zde jsou některé další statistiky k pointě:

• Google ví, že 87% majitelů chytrých telefonů používá svá zařízení spustit vyhledávání na Internetu alespoň jednou za den.
• 58% všech vyhledávání Google se provádí z mobilního zařízení
• výsledek: 70% výsledků první stránky na Googlu je optimalizováno pro mobilní zařízení.

mobilní SEO je nejdůležitější věc, kterou můžete udělat, abyste se na Googlu dobře umístili. Vážně.

pokud váš web nevypadá dobře na smartphonu, lidé se nebudou chtít držet. Ujistěte se tedy, že návrhy vašich webových stránek jsou vhodné pro mobilní zařízení.

jít hlouběji: chcete se dozvědět, jak optimalizovat své webové stránky pro mobily? Podívejte se na našeho kompletního průvodce po mobilním webu.

upřednostněte SEO

vše, co na svém webu děláte, je třeba vrátit zpět do SEO.

a nestačí jen sem a tam přidávat klíčová slova. Je to webové stránky-široký systém zlepšení obsahu a neúnavně cílení na konkrétní záležitosti k vytvoření webu orgán v této oblasti.

například vstupní stránka pro web elektronického obchodu se bude chtít zaměřit na určité prvky na Stránce, jako jsou:

• použitelnost. Jak snadné je pro vaše návštěvníky používat a navigovat.
• mobilní. Jak váš web vypadá a funguje na mobilním zařízení.
• Optimalizace klíčových slov. Slova a fráze, které chcete zařadit.
• interní odkazy. Jak často odkazujete na jiné stránky na svém webu.
• titulek. Toto je často největší text na webové stránce. Jako takový, to dělá většinu zvedání těžkých břemen na vstupní stránce.

Vytvořte soubor sitemap XML. To usnadní prohledávačům vyhledávačů analýzu obsahu na vašem webu. Mapa bude zobrazovat roboty umístění stránek na vašem webu, kdy byla stránka naposledy aktualizována, frekvence aktualizace, a vztah na jiné stránky na vašem webu.

správný soubor sitemap ukazuje společnosti Google, že nemáte duplicitní obsah, což může poškodit vaše hodnocení SEO.

když navrhujete svůj web, existuje spousta méně zřejmých prvků, které se také podílejí na hodnocení na Googlu.

už jsme prošli několika aspekty, které můžete vylepšit na samotné stránce. Mezi další prvky však patří:

• doména. Vaše adresa URL je docela důsledná pro vaše hodnocení google. Mezi klíčové faktory patří mít klíčové slovo v doméně, jak stará je doména a jaká je přípona vaší domény (např.org versus netradiční rozšíření).
• kvalita stránek. Vaše webové stránky musí být užitečné pro návštěvníky. Klíčové faktory patří „O Nás“ stránce „Kontaktujte Nás“ stránce, jak často budete aktualizovat své stránky, jak je to snadné procházet vaše webové stránky, uptime (jak často se vaše stránky pády), a SSL certifikáty.
• zpětné odkazy. To se týká frekvence, na kterou jsou vaše webové stránky propojeny jinými webovými stránkami. Je to zásadní faktor pro dobré hodnocení na Googlu. Mezi klíčové faktory patří počet propojujících stránek, kvalita a autorita webových stránek, které na vás odkazují, text kotvy, který používají k propojení s vámi, a to, zda tyto odkazy pocházejí z domén .edu nebo.gov.

Sledovat vaše rychlost načítání stránky

vím, co si někteří z vás myslí. Co má rychlost načítání stránky společného s webdesignem? Všechen.

jistě, doba načítání souvisí s plánem hostování webových stránek, serverem, provozem a věcmi této povahy. Možnosti návrhu však mohou ovlivnit i Vaše doby načítání.

pokaždé, když na svůj web přidáte prvek, zejména obrázky, videa a další složité mediální soubory, mohou být ovlivněny vaše doby načítání. Jako takový může zpomalit požadavky HTTP.

pomalé doby načítání vedou k vysoké míře opuštění. Nemůžeš to ignorovat. Pokud načítání stránek trvá příliš dlouho, bude to obrovský problém.

Navíc, 25% lidí opustit webové stránky, které se více než čtyř sekund, aby zatížení. Ano, čtyři vteřiny. To je vše, co máte, nebo ztratíte 25 z každých 100 návštěvníků. Většina návštěvníků očekává, že se stránka načte za dvě sekundy nebo méně.

jak to tedy můžete použít na svůj webový design?

• Snížit velikost souboru obrázků
• využijte načítání do mezipaměti prohlížeče nástroje
• Snížení požadavků HTTP
• Zlepšit své TTFB (time to first byte)
• Minify a kombinovat soubory

Existuje mnoho nástrojů k dispozici on-line, aby vám pomohou dosáhnout těchto věcí. Podívejte se například na Plugin WordPress Rocket jako zdroj pro minifikaci a kombinování souborů. A použijte nástroj Page Speed Insights od společnosti Google, který vám pomůže sledovat časy načítání, kdykoli na svém webu provedete změny designu.

průběžně spouštějte a / B testy

pokud jde o design vašeho webu, nemůžete jej jen nastavit a zapomenout.

jak jsem již řekl, žádný web není dokonalý. Vždy existují způsoby, jak vylepšit svůj design.

proto musíte spustit a / B testy. Tyto umožňují, aby se pravidelné vylepšení na vaše webové stránky a vyzkoušet prvky, aby viděli, co funguje nejlépe, a co je důležitější, co nefunguje vůbec.

téměř každý prvek návrhu webu lze otestovat. Můžete například vytvořit dvě různé vstupní stránky, které mají různé CTA, ale jinak jsou stejné. Pokud jedna vstupní stránka funguje lépe než druhá, budete vědět, že její CTA pravděpodobně dokončí svou práci.

zde je několik rychlých návrhů, jak začít správným směrem:

• zkontrolujte umístění CTA tlačítko
• zkontrolujte barvu své CTA tlačítko
• Test CTA kopírování
• Test na obrázky, které používáte na vstupních stránek
• Test znění změny textu na obrazovce
• zkontrolujte velikost vašeho navigačního panelu

Tam jsou tak mnoho možností, Mohl bych celý den mluvit o tom. Pro ty z vás, kteří nejsou obeznámeni s A/B testy nebo potřebujete pomoc, podívejte se na můj návod na vše, co potřebujete vědět, než začnete, A/B testování.

závěr

říkat, že design webových stránek je důležitý, by bylo podhodnocením. Vaše volby webového designu nakonec ovlivní, zda je váš web úspěšný.

• webové stránky každého lze vylepšit. Použijte tento seznam jako vodítko jako zdroj, který vám pomůže provést tato vylepšení.
• nenechte se ohromit. Neříkám, že musíte implementovat všechny tyto návrhy designu přes noc, ale musíte někde začít.
• tyto myšlenky jsem nevytáhl z ničeho. Vše na tomto seznamu je podpořeno výzkumem a statistikami týkajícími se principů návrhu.

nezapomeňte: každá webová stránka je nedokončená. Pokud vložíte práci a vždy doladíte své webové stránky, zlepšíte svou výhodu se svými konkurenty.

nezáleží na tom, zda je váš web zcela nový nebo zda existuje již deset let. Toto jsou osvědčené postupy webového designu, které musíte dodržovat v roce 2021.