Nejlepší mobilní vstupní stránky Design Tipy nenajdete nikde jinde

existuje mnoho zdrojů on-line, které řeší mobilní post-click vstupní stránky návrhy, ale tam není mnoho konkrétních konstrukčních instrukcí, jak skutečně vytvořit stránku s vysokou konverzí.

jaké rozložení struktury se doporučuje pro mobilní prohlížení? Kolik pixelů by měla být tlačítka? Kolik pixelů by mělo oddělit prvky? Měli byste použít efekt“ hover“? Měly by být štítky uvnitř nebo vně?

Jmenuji se Cosmin Serban, ředitel designových služeb v Instapage. Možná se ptáte, co dělá Cosmin kvalifikovaný psát na mobilní post-click vstupní stránky designu?

vzdělával jsem zákazníky o osvědčených postupech při navrhování a strukturování jejich vstupních stránek po kliknutí, abych zlepšil jejich míru konverze. Taky, mám:

  • Recenzováno více než 1000 vstupních stránek po kliknutí
  • spolupracuje se zákazníky, aby se zajistilo, že jejich zpráva prochází a jejich návštěvníci mají dobré zkušenosti, které nakonec vedou ke konverzi

kromě toho jsem byl součástí týmu, který vyvinul více než 200 optimalizovaných šablon používaných k vytvoření a spuštění více než 200 000 vstupních stránek po kliknutí, šablony najdete zde.

mobilní návrh vstupní stránky po kliknutí: Co je třeba vědět, než začnete

některé koncepty v tomto článku byly vyvinuty interně při vytváření naší knihovny šablon. To nutně neznamená, že všechny tyto tipy by se měly vztahovat na každou jednotlivou vstupní stránku po kliknutí, kterou vytvoříte. Každá vstupní stránka po kliknutí má svůj vlastní jedinečný soubor výzev, ale pochopení těchto základních pojmů by vám určitě mělo pomoci poskytnout lepší zážitek každému, kdo navštíví své mobilní zařízení.

začněme s nejdůležitějšími rozdíly mezi stolním a mobilním zážitkem.

struktura

i když se to na začátku vašeho projektu nezdá, mít strukturu na místě, kde doručíte správnou skupinu prvků ve správný čas, je kritičtější, než si myslíte.

první věc, která přijde na mysl, je úplně jiný způsob, jakým naši návštěvníci prohledají obsah na mobilních stránkách. Všichni jsme slyšeli o vzoru F nebo vzoru Z na vstupních stránkách po kliknutí na plochu, ale jaký je vzorec pro mobilní telefony? Nebudeme to nutně pojmenovat, ale s největší pravděpodobností je to velmi lineární. Posouvání nahoru a dolů je jediný způsob, jak pochopit, co tato vstupní stránka po kliknutí nabízí:

vzhledem k tomu, že je to jedno z nejdůležitějších omezení, jak návštěvníci interagují s vstupní stránkou po kliknutí, doporučujeme držet se rozložení v jednom sloupci místo toho, abyste se snažili Nacpat hodně obsahu vodorovně. (Nikdo nemá rád štípání a přiblížení.)

na ploše většinou digitální obchodníci přemýšlejí o umístění každého jednotlivého prvku a dopadu, který má. Na mobilu je lepší udělat posun a přemýšlet o skupinách prvků a o tom, jak je naskládáte na sebe, abyste dosáhli maximálního dopadu.

toto srovnání vedle sebe ukazuje, jak je stránka na ploše strukturována oproti mobilní stránce:

mobilní porovnání designu vstupní stránky po kliknutí

doporučujeme jít zleva doprava a umístit každou skupinu prvků pod sebe. Vezměme si například oblast záhlaví (nad záhybem). Nahoře budeme mít logo, následuje skupina vytvořená z hlavního nadpisu a podpůrného nadpisu, pak pod ním bude celá skupina formulářů.

schopnost seskupovat prvky vytváří nativně mobilní responzivní sadu objektů. Alternativně mohou být skupiny nakonfigurovány tak, aby uzamkly poměr stran složitých uspořádání, aby se zachovaly jejich přesné proporce, když jsou převedeny na mobilní verzi vaší stránky.

Mobile Aspect Ratio Lock udržuje své vrstvené seskupení dohromady a uzamkne poměr stran, ať už jsou na ploše nebo mobilní rozložení.

Všechny dva nebo více prvků, které spolu úzce souvisejí nebo se vzájemně doplňují, by se měly vždy držet pohromadě. V této situaci by nemělo smysl mít pole formuláře přímo v horní části stránky, takže koncept formuláře v oblasti nad záhybem není ideální. Dát návštěvníkovi kontext toho, co se přihlašují jako první, je důležitější než jen dát jim způsob, jak jednat co nejrychleji.

doba načítání

bez ohledu na zařízení, které návštěvníci používají, je rychlost načítání stránky velmi důležitá. Mějte na paměti, že většina vašich návštěvníků bude používat omezení mobilních dat a vzniknou náklady na zobrazení vaší stránky, takže buďte opatrní, jakou grafiku nebo prvky přidáte na stránky. Jen si představte přístup na stránku a automatické přehrávání videa.

pokud pro podporu obsahu potřebujete spoustu animací, doporučujeme držet se jednoduchých obrázků pro mobilní zařízení. Jednoduše, myslím, že budete muset vytvořit vlastní obrázky na pozadí pro konkrétní sekci. Použití softwaru pro úpravu fotografií k úpravě velikosti nebo rozvržení fotografie by mohlo stát za potřebný čas navíc, pokud to znamená, že můžete své stránky urychlit.

totéž s obrázky na pozadí, protože nepotřebujete obrázek, který je 2,000 pixelů široký, což je 300kb načíst ve vaší sekci, navrhuji, aby návrhář vytvořit vlastní míru obrázek, který můžete nastavit jako Sekce Pozadí:

mobilní post-click vstupní stránky design obrázky

většinu času udržet mobilní stránky tak jednoduché, jak je to možné, je vždy dobrý nápad. Pokud například máte více grafických prvků, které přenášejí stejnou zprávu, stačí ji zobrazit na mobilu.

vzhledem k tomu, že většina mobilních telefonů se přizpůsobí velikosti oblasti obsahu, kterou poskytuje mobilní tvůrce, dobrým pravidlem je mít obrázek, který je široký nejméně 400 pixelů, Aby se zajistilo, že po stranách nejsou žádné prázdné mezery.

Vytvořte vstupní stránku AMP po kliknutí

vytvoření pozitivní vstupní stránky po kliknutí na mobil je nezbytné, protože vstupní stránka po kliknutí je místem, kde dochází ke konverzím. Pokud se vaše stránka načte příliš pomalu nebo vytvoří nesouvislý zážitek z reklamy na kliknutí po kliknutí, návštěvníci se odrazí.

pak si uvědomte, že Google se dívá na zážitek z vstupní stránky po kliknutí jako na jeden faktor pro určení hodnocení reklamy, což nakonec přispívá k vaší míře prokliku. Přidejte to všechno a značky mají velký problém na svých rukou. Naštěstí existuje rámec AMP.

zejména stránky AMP jsou atraktivní pro inzerenty, protože umožňují přesvědčivější mobilní uživatelské zkušenosti díky téměř okamžitým dobám načítání a plynulému posouvání, přičemž stále podporují určitou přizpůsobitelnost stylu a značky. Protože AMP omezuje HTML / CSS a JavaScript, umožňuje rychlejší vykreslování vstupní stránky po kliknutí. Na rozdíl od tradičních mobilních stránek jsou stránky AMP automaticky ukládány do mezipaměti Google AMP Cache pro rychlejší načítání v Googlu.

výhody rámce AMP skutečně převažují nad jeho omezeními:

  • rychlejší rychlost načítání stránky na mobilních zařízeních
  • lepší uživatelský zážitek pro mobilní prohlížení
  • použití stránek AMP může pomoci zvýšit vaše skóre kvality
  • Google upřednostňuje stránky, které používají AMP

od června 2018 nabízí Instapage vstupní stránky AMP po kliknutí, kde mohou digitální obchodníci vytvářet stránky kompatibilní s AMP v aplikaci bez vývojáře. Protože nakonec, pokud načítání stránky není okamžité,není dostatečně rychlé.

14-denní zkušební Instapage vytvořit novou stránku

navrhování pro dotek

jednou z vašich největších výzev s mobilním designem vstupní stránky po kliknutí je zajistit, aby návštěvníci mohli jednat co nejjednodušší. Tato akce může být podání formuláře nebo jednoduchým klepnutím na tlačítko. Dalo by se očekávat, že většina lidí se chystá provést nějaké úpravy, ale to není vždy případ.

všichni jsme zažili stránky, kde je velmi těžké na něco klepnout nebo zážitek není přizpůsoben mobilním uživatelům. Zvláště textové odkazy-úprava velikosti libovolného textového prvku, který je hypertextovým odkazem, je velmi užitečná. Váš návštěvník by se neměl přibližovat, aby provedl požadovanou akci.

tlačítka

ale největší problém, který jsme si všimli, je velikost tlačítek na vstupních stránkách po kliknutí. Náš tým doporučuje navrhnout tlačítka, která mají výšku nejméně 70 pixelů a nebojte se je co nejširší, ale nikdy je neroztahujte na celou šířku (400 pixelů), protože by mohla být zaměněna s malou částí.

efekt vznášení je příjemným dotykem pro stránky na ploše, protože signalizuje návštěvníkovi, že může podniknout kroky k tomuto konkrétnímu prvku. Na mobilu, přes, hover efekty jsou nadbytečné.

okraje

pro okraje doporučujeme udržovat bezpečnou zónu alespoň 20 pixelů svisle volnou na každé straně a vyhnout se jakémukoli vizuálnímu napětí, které se může objevit s prvky příliš blízko stran obrazovky telefonu.

bílé místo je něco, co je pro mobilní stránky stejně důležité jako pro stránky na ploše. Základní pojmy stále platí, jen se snažte vše vytěsnit a nemít prvky opravdu blízko u sebe. To vám pomůže vyhnout se vizuálnímu napětí.

konzistentní marže určitě povedou k lepšímu uživatelskému zážitku. Náš tým obvykle zajišťuje, aby mezi každým prvkem bylo alespoň 20 až 40 Pixelů. Kolik se rozhodnete, je jen na vás, protože každý blok může mít jedinečnou strukturu prvků.

je to docela subjektivní, ale jakmile vytvoříte pravidlo, zkuste jej replikovat po celé stránce a to mu dodá modernější vzhled:

čitelnost

mysleli byste si, že schopnost jasně číst obsah je daná, ale příliš mnohokrát jsme viděli vstupní stránky po kliknutí, kde je text buď příliš malý nebo příliš velký. Nalezení dobré rovnováhy je docela snadné, dobrým pravidlem pro velikost písma použitou pro konkrétní prvky jsou:

  • Hlavní titulek: 28 Pixelů
  • podnadpis: 22 Pixelů
  • odstavce: 17 Pixelů
  • další podrobnosti: 15 Pixelů

samozřejmě můžete upravit tyto velikosti, protože neexistuje jedna velikost, která by vyhovovala všem potřebám. Mělo by však sloužit jako dobrá základní linie při navrhování mobilní vstupní stránky po kliknutí.

další položkou, která stojí za zmínku, je výška řádku s textovými prvky.

v určitých situacích na ploše má smysl mít 1.0 nebo dokonce 1.2, při vytváření mobilní vstupní stránky po kliknutí se ujistěte, že výška řádku pro textové prvky je alespoň 1.4.

Sečteno a podtrženo: Čím menší je velikost písma, tím větší by měla být výška řádku.

formuláře

vzhledem k tomu, že formuláře jsou nejdůležitější součástí většiny vstupních stránek po kliknutí, je pro lidi snadné předkládat své informace kritické.

na našich mobilních stránkách obvykle natahujeme pole formuláře co nejvíce vodorovně a vyhýbáme se situacím, jako je pole formuláře a tlačítko na stejném řádku. To je jen špatná zkušenost:

další věc, která vychází velmi často, se zabývá formami, které mají mnoho polí.

nejlepší praxe, kterou náš tým odhalil, je, že kdykoli má stránka více než 2 pole formuláře pro nastavení polohy štítku na vnější stranu, usnadňuje návštěvníkům vědět, jaké informace jsou potřebné, místo aby se snažili zapamatovat si, co zadat:

Zvyšte své mobilní konverze od dnešního dne

stejně jako stránky na ploše, mobilní post-click vstupní stránka design je především o uživatelské zkušenosti a co bude přesvědčit lidi, aby se zapojily a převést. Bez zohlednění výše uvedených návrhů bude váš mobilní konverzní poměr pravděpodobně trpět a lidé se odrazí.

zvažte implementaci doporučení a podívejte se, jak se vaše vstupní stránky po kliknutí transformují na vysoce optimalizovaná konverzní aktiva. Získejte Demo amp Instapage ještě dnes.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.