Citlivý design: Jak to správně napravit poprvé

Zveřejnění: Vaše podpora pomáhá udržovat provoz webu! Za některé služby, které na této stránce doporučujeme, dostáváme poplatek za doporučení.


Ve své paměti z roku 1939, Vítr, písek a hvězdy, Francouzský autor a aristokrat Antoine de Saint-Exupery se vyjádřil: „Návrhář ví, že dokonalosti dosáhl nejen tehdy, když už není co dodat, ale když už není co vzít.“ Proslulý letec a autor Malého prince nežili informačního věku, ale jeho slova přesto rezonují ve světě, kde kyberprostor nahradil nebe jako hranici inovací.

Ve skutečnosti se pozornost soustředí i na kontrakty, i když se bohatství dostupného obsahu exponenciálně rozšiřuje, přístup společnosti Saint-Exupery „méně je více“ je relevantnější než kdy jindy. Podniky již nemají luxus bití kolem příslovečného keře, když průměrné okno, které zaujme mobilního návštěvníka na jejich webových stránkách, je kratší než pět sekund. Vzhledem k tomu, že více než pět centů z každého dolaru se nyní utratí online, je třeba, abyste počítali každou z těchto sekund.

Jde o mnohem víc než jen najít seriózního poskytovatele hostingu a nahrát základní web. Musíte vytvořit web, který odpovídá potřebám všech návštěvníků. (Pokud potřebujete pomoci pochopit, jak fungují weby a webhosting, přečtěte si náš ilustrovaný průvodce hostováním).

Klíčem k zachycení oka návštěvníka a udržení toho, že je okno otevřené (a ukázal na vaši stránku), je citlivý design. Trh se rychle stává velmi významnou součástí světa po PC, a protože čím dál více uživatelů získává své zprávy, baví se a nakupuje s tablety a smartphony, ujistěte se, že váš web je navržen tak, aby vyhovoval jejich neustále se vyvíjejícím potřebám. kritický. Je to všechno o zachování funkcí, které návštěvníci chtějí, a o nic z toho, co ne.

Neexistuje žádný prostor pro neohrabanou grafiku, matoucí navigaci nebo stránky zamčené v rozlišení pouze pro počítače. Mobilní uživatelé chtějí, aby jejich internet byl štíhlý, čistý a vhodný pro svou obrazovku – nezapomeňte proto vybrat hostitele (a platformu), který podporuje skutečně citlivý design.

Potenciální odměny za vydělávání více z méně jsou značné. S více než 2,1 miliardami předplatitelů mobilního širokopásmového připojení jako potenciálních zákazníků je prvořadá úspora výrazu a maximální interaktivita; nejlepší design může být ten, který se může pochlubit největší interaktivitou a nejmenším „návrhářským dotykem“.

Vítězný design

Citlivý design: napravení

V dnešním inovativním prostředí počet zařízení používaných pro procházení webu stále roste bez známek zpomalení. Citlivý design vytváří optimální uživatelský dojem napříč zařízeními od stolních počítačů k chytrým telefonům, což zákazníkům usnadňuje rychlé a vzdělané rozhodování o nákupu.

Proč je responzivní design tak důležitý?

K dispozici je 2,1 miliardy předplatných pro mobilní širokopásmové připojení.

87% amerických dospělých má mobilní telefon.

55% používá své mobilní telefony pro připojení k internetu, 31% z nich používá internet většinou pomocí svého telefonu místo počítače nebo jiného zařízení.

45% amerických dospělých má smartphone, 90% používá svůj telefon pro online připojení.

Američtí spotřebitelé tráví v průměru 1,4 hodiny denně surfováním po webu na mobilním zařízení.

37% majitelů mobilních telefonů a 64% majitelů chytrých telefonů používá svůj telefon k získávání zpráv online.

60% uživatelů tablet dává přednost čtení zpráv na mobilním webu než prostřednictvím aplikace.

79% uživatelů smartphonů používá své telefony k nakupování.

71% uživatelů očekává, že se mobilní weby načtou stejně rychle, ne-li rychlejší než weby na počítači.

74% mobilních návštěvníků opustí web, pokud stahování trvá déle než 5 sekund.

Anatomie citlivé stránky

Ve vývojové fázi existují 3 technické složky responzivního designu webových stránek:

  1. Tekuté sítě – Design založený na procentech, který se odpovídajícím způsobem přizpůsobuje velikosti obrazovky.
  2. Flexibilní obrázky – Obrázky o velikosti v relativních jednotkách, které jim zabrání v zobrazení mimo jejich prvek.
  3. Mediální dotazy – Způsob, jak na stránku aplikovat pravidla CSS na základě velikosti zobrazovaného prohlížeče.

5 klíčových konstrukčních prvků responzivního elektronického obchodování zajišťují co nejlepší uživatelský zážitek.

Masthead

Záhlaví

Měl by být malý a jednoduchý, aby se soustředil na základní obsah, ale snadno viditelný.

Zkuste použít lineární gradient CSS namísto obrázku na pozadí, abyste poskytli větší flexibilitu návrhu a snížili požadavky HTTP.

Logo

Měl by být větší a zmenšený na konečné rozměry.

Primární navigace

Nebo hlavní menu může být složité při práci v responzivním designu kvůli omezenému prostoru poskytovanému malými obrazovkami telefonu.

Existuje mnoho možností, jak to překonat v závislosti na počtu preferovaných možností nabídky, včetně:

  • Jednoduchá kotva nabídky v záhlaví, která přepíná hlavní navigaci na malých obrazovkách.
  • Ukotvení záhlaví, které přeskočí uživatele na navigaci umístěnou v zápatí.
  • Levý posuvný navigátor (jako je Facebook) přístupný pomocí ikony nabídky, odhalující zásobník, který se posouvá zleva a přesouvá hlavní obsah směrem doprava.
  • Navigace, která překrývá hlavní obsah stránky.

Vyhledávací pole

Vyhledávací pole umožňuje návštěvníkům přejít přímo na to, co hledají.

Galerie obrázků

Obrazová navigace

Namísto textové navigace obrázků zobrazte náhled různých pohledů na produkty.

Obrázky by měly odkazovat na jejich větší protějšky.

Obrázek produktu

Vytvořte obrázek produktu jako ohnisko stránky.

Vyzkoušejte odlehčený skript s názvem Swipe.js a vytvořte obrazový karusel s dotykovým ovládáním, který uživatelům umožňuje procházet mezi fotografiemi produktů dotykovým způsobem.

Popis produktu

Přehled produktu

Měl by se objevit nad obrázkem (v označení před kontejnerem obrázku) a poskytnout návštěvníkovi název produktu, cenu a oblíbenost či hodnocení.

Tímto způsobem mohou určit, zda se jedná o produkt, který hledají, aniž by museli čekat na načtení zbytku stránky.

Zkontrolujte počet

Počet recenzí přeskočí na recenze pod detaily produktu.

Tento malý detail může být velmi cenný pro 79% zákazníků chytrých telefonů, kteří používají svůj telefon k pomoci s nakupováním, a možná dokonce uskuteční nebo rozdělí prodej.

Pole množství, rozbalovací nabídka Velikost a tlačítko Přidat do košíku

Tlačítko sdílení

Sdílení obsahu a produktů na sociálních sítích může být skvělým způsobem zvýšení expozice. Prostě to udržujte jednoduché pomocí jednoho tlačítka.

Zápatí

Navigace zápatí

Poskytnutí přístupu k hlavní navigaci na webu je pro uživatele dobrým způsobem, jak skočit do jiné sekce a vyhnout se jejich opuštění na slepé uličce..

Číslo zákaznického servisu a e-mail

Pamatujte, že telefonuje! Návštěvník může mít dotaz na produkt a schopnost rychle kontaktovat zástupce zákaznického servisu může být právě to, co potřebují k rozhodnutí o nákupu.

Zpět na začátek odkazu

Znovu se jedná o uživatelské zkušenosti a pohodlí!

Zdroje

  • Informační přehled o mobilních technologiích – pewinternet.org
  • Trendy v používání mobilního internetu a chování uživatelů – madmobilenews.com
  • MobiForge – mobithinking.com
  • Proč je rok 2013 rokem responzivního designu webových stránek – mashable.com
  • Anatomie designu mobilního webu, který reaguje jako první – bradfrostweb.com
  • Jak tekuté sítě pracují v responzivním designu webových stránek – 1stwebdesigner.com
  • Beyond Media Queries: Anatomie adaptivního webdizajnu – slideshare.net
  • Co je sakra responzivní webdesign? – johnpolacek.github.io
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map