Typické prvky webu - Lukáš Hroch

transcript

Lukáš Hroch

neděle, 20. června 2010

Typické prvky na webua jejich použitelnost

Story:Každý den děláme nějaká rozhodnutí a většinu těchto rozhodnutí děláme intuitivně. Známe nějaké vzorce, náš mozek se rozhoduje podle věcí, které už zná - rozhoduje se automaticky.

O spoustě našich rozhodnutí nechceme přemýšlet, chceme přemýšlet o věcech, které nás baví.

Typicky nákup. Já nechci přemýšlet o tom, jakým způsobem si mám dané zboží objednat, já si ho chci vybírat, zkoušet, poznávat. Poznávat to zboží, nikoliv proces, kterým docílím, že to zboží bude moje.

Každou překážku, kterou mi nákupní proces postaví do cesty musím zdolat. A to je velmi namáhavé. Může to vést tak daleko, že to zkusím jinde, neboť tam třeba mají můj friťák dražší, ale objednám ho způsobem, který znám a mám ho zafixovaný.

Primární navigace

Sekundární navigace

VyhledáváníPřihlášení

KošíkRegistrace

Související

Strom produktů

Facetová navigace

Patička

Užitečné informace

Formuláře

Tlačítka

Komentáře

HodnoceníPorovnávání

Náhledy

Drobečková navigace

LightboxDoprava a platba

Objednávka

Kontaktní údajeGalerie

Detail

Typogra#e

Použití standardních prvků urychluje učení.

iPad - téměř neexistuje učící křivka - lidé znají z iPhone- zařízení, které nemá skoro žádné využití, ale už ho umíte používat

Méně je více.

Apple si vychovává svoje uživatele.Na málu je naučí, postupně jim dá více - a nechá si za to zaplatit, samozřejmě.

Primární navigace

KošíkRegistrace

Související

Strom produktů

Facetová navigace

Patička

Formuláře

Tlačítka

Komentáře

Náhledy

Objednávka

Detail

Typogra#e

Dneska si tu prosvištíme 6 základních oblastí, kterým se musíte při návrhu například eshopu věnovat.Pojďme se na to vrhnout, čeká nás toho docela hodně.

Primární navigace

KošíkRegistrace

Související

Strom produktů

Facetová navigace

Patička

Formuláře

Tlačítka

Komentáře

Náhledy

Objednávka

Detail

Typogra#e

Dneska si tu prosvištíme 5 základních oblastí, kterým se musíte při návrhu například eshopu věnovat.Pojďme se na to vrhnout, čeká nás toho docela hodně.

Navigace

User eXperience webu je pouze tak dobrá, jak je dobrá jeho navigace.

Co je standardní- hlavní a vedlejší menu - horizontální, vertikální

Kde jsem?Kam mohu jít?

Přijde-li uživatel záchodovým okýnkem... z vyhledávačů, bannerů, jiných webů.Tyto otázky, nic víc, nic míň.

hlavní menuvidím kde jsem - navigační cesta - postranní menu - sekundární menu

Alza.cz už trochu horší - souvisí i s grafickým designem

- úzký pravý sloupec- drobečková navigace téměř není vidět- vidím na první pohled, že doporučené zboží má klik na detail?

Alza.cz už trochu horší - souvisí i s grafickým designem

- úzký pravý sloupec- drobečková navigace téměř není vidět- vidím na první pohled, že doporučené zboží má klik na detail?

iDnes vynechává navigační cestumůže si to dovolit - dvojitá navigace - doplňková navigace

souvisí se strukturoukdyž se navigace nezvládne

ještě, že ty taby nemají i dole a kolem dokola

už jen pro zasmání

Typogra#e

User eXperience designje typogra$e.

Martin Pecina - typografpod svícnem největší tma?

11px písmo je při delších textech nečitelné - ano, můžu si zvětšit, ale kolik BFU to umí? - umí to naše cílová skupina?

rozdíl v pojetí je vidět i od iDnes.cz

jak neprezentovatdobrá možné jen pro roboty... SEOkorunka.cz

trochu lepší, ale... rozumí uživatel daným pojmům?hifishop.cz

že se umí utnou i mall.cz

Whazup?!

- co s tím?

Dodržujte typogra#cká pravidla

- začíná to psaním čárek, teček, závorek, časových údajů- až po rozločení textu ve stránce, použitím nadpisů atd.

Pište česky

- používejte jazyk svých zákazníků- žargon na běžný web nepatří

Strukturujte informace

- ať už se ptáte kohokoliv, lidi na webu zachytávají napoprvé dvě informace - odkazy a nadpisy- Jared Spool - trigger words - spouštěcí slova- nadpisy, citace, seznamy číslované, nečíslované, definiční- na tabulková data použijte tabulky

... najděte si copywritera!

Cílem copywritera je napsat text, který osloví své čtenáře a dovede jek požadované akci (objednání produktu/služby apod.).

http://cs.wikipedia.org/wiki/Copywriter

Cílem copywritera je napsat text, který osloví své čtenáře a dovede je k požadované akci (objednání produktu/služby apod.).- používá trigger words (spouštění slova) ve správném počtu a na správném místě

Formuláře

- mimo odkazů druhý stavební kámen webových aplikací

Kvalitně navržený formulář váš web buď podpoří, nebo pohřbí.

Flash - nemá standardní formulářové prvky - každý prvek se musí udělat ručně a znovu - výhoda bohaté interakce - ale nikdo jí nedělá

csob pojišťovnak čemu tam jsou ty ikonky?potřebuju ikonky na používání schránky?

co dřív? Způsob dodání nebo dodací adresa?dtpobchod.cz

ekonto - většina zná- historické souvislosti

jeden typ chybové hlášky- bohužel v tomto případě vám sdělí pouze jednu chybu, i když jich máte ve formuláři více

řešením jsou inline validace...

... pokud je výrobíte správně

co se tady stalo?

Formulář musí vypadat jako formulář

Nevymýšlejte kolo

Používejte formulářové prvky k tomu účelu, ke kterému byli stvořeny

HTML5 - nové možnosti pro formuláře- validace na úrovni formulářů- více typů vstupních polí

Testujte

testujte na svých lidechtestujte v úzkém i širokém okolítestujte, testujte, testujte

Buďte konzistentní

Všechny použité formuláře musí vypadat shodně- musí se shodně chovat- chybová oznámení musí být vždy na stejném místě a stejně provedená

Buďte konzistentní

Všechny použité formuláře musí vypadat shodně- musí se shodně chovat- chybová oznámení musí být vždy na stejném místě a stejně provedená

nebo taky můžete skončit takto...

Nákupní košík

K čemu je vám nákupní košík, když ho neumíte prodat?

... všimněte si, že nikdo při vložení produktu do košíku nechce po uživateli registraci- pokračování- zpět do obchodu- nabídka souvisejících produktů

trochu jiný přístup- zase zpětka- změna počtu- pokračování výrazné

- opět klasická tabulka- doporučení produktů

pokročíme dál- doprava, platba- nechybí cena za platbu i dopravu (je tam zdarma, protože jsem vybral drahý teleobjektiv) - mohlo by být výraznější

druhý krok se u mall.cz liší!chtějí po mě registraci... aniž bych se dozvěděl, kolik chtějí za dopravu...a nejsou jediní...

stejně tak hifishopříkám si, kde asi tak vzali inspiraci?

a heleme se!

Proč to dělají?- automatická registrace- necháte mail a hned vás začnou spamovat výhodnýma nabídkama... supr, ne?

Krásnější = použitelnější. A i když to nemusí být vždy pravda, uživatelé to tak vnímají. Tato představa má poté vliv na jejich celkové hodnocení produktu a jejich pocit uspokojení.

Krásným produktům pak uživatelé často odpouštějí jejich nedostatky v použitelnosti, nebo nedostatek funkcí.

Krása?

Chápete?

Tweak, don’t redesign...Steve Krug, sensible.com

- tweak, dont redesign - steve krug - Nenuťte uživatele přemýšlet (bible UX designérů)- malé změny, častěji, testovat- neztratíte své stálé uživatele brutální změnou- dozvíte se která změna co přináší

Na závěr ikona mezi šopyJak se vyvíjela?

Amazon.com

Na závěr ikona mezi šopyJak se vyvíjela?

Použitelnost JE konkurenční výhoda.

soundake.cz

Typické prvky webu - Lukáš Hroch

Technology