typické prvky webu - lukáš hroch

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


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?


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á


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?


1998


2000


2002


2008


dnes

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


Díky


Díky

soundake.cz


typické prvky webu - lukáš hroch

Technology