SlideShare uma empresa Scribd logo
1 de 85
Baixar para ler offline
Lukáš Hroch




neděle, 20. června 2010
Typické prvky na webu
                             a jejich použitelnost




neděle, 20. června 2010
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ý.
Tlačítka
                                                                   Hodnocení
                           Přihlášení
                                              Porovnávání
                                                                                 Vyhledávání
                  Primární navigace                            Komentáře

                                                  Registrace                    Drobečková navigace
                                Související
              Košík                            Sekundární navigace
                                                                                            Lightbox
                                  Strom produktů                     Doprava a platba

                Formuláře                        Náhledy
                                                                   Typogra e                Patička


                          Facetová navigace              Galerie             Kontaktní údaje
                                  Užitečné informace                           Objednávka
                                                                    Detail




neděle, 20. června 2010
Použití standardních prvků urychluje učení.




neděle, 20. června 2010

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
neděle, 20. června 2010

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
neděle, 20. června 2010

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.




neděle, 20. června 2010

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ě.
Tlačítka
                                                                   Hodnocení
                           Přihlášení
                                              Porovnávání
                                                                                 Vyhledávání
                  Primární navigace                            Komentáře

                                                  Registrace                    Drobečková navigace
                                Související
              Košík                            Sekundární navigace
                                                                                            Lightbox
                                  Strom produktů                     Doprava a platba

                Formuláře                        Náhledy
                                                                   Typogra e                Patička


                          Facetová navigace              Galerie             Kontaktní údaje
                                  Užitečné informace                           Objednávka
                                                                    Detail




neděle, 20. června 2010

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ě.
Tlačítka
                                                                   Hodnocení
                           Přihlášení
                                              Porovnávání
                                                                                 Vyhledávání
                  Primární navigace                            Komentáře

                                                  Registrace                    Drobečková navigace
                                Související
              Košík                            Sekundární navigace
                                                                                            Lightbox
                                  Strom produktů                     Doprava a platba

                Formuláře                        Náhledy
                                                                   Typogra e                Patička


                          Facetová navigace              Galerie             Kontaktní údaje
                                  Užitečné informace                           Objednávka
                                                                    Detail




neděle, 20. června 2010

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



neděle, 20. června 2010
User eXperience webu je pouze tak dobrá,
                     jak je dobrá jeho navigace.




neděle, 20. června 2010

Co je standardní
- hlavní a vedlejší menu

    - horizontální, vertikální
Kde jsem?
                                Kam mohu jít?




neděle, 20. června 2010

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íň.
neděle, 20. června 2010

hlavní menu
vidím kde jsem

   - navigační cesta

   - postranní menu - sekundární menu
neděle, 20. června 2010

hlavní menu
vidím kde jsem

   - navigační cesta

   - postranní menu - sekundární menu
neděle, 20. června 2010

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?
neděle, 20. června 2010

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?
neděle, 20. června 2010

iDnes vynechává navigační cestu
může si to dovolit

   - dvojitá navigace

   - doplňková navigace
neděle, 20. června 2010

iDnes vynechává navigační cestu
může si to dovolit

   - dvojitá navigace

   - doplňková navigace
neděle, 20. června 2010

souvisí se strukturou
když se navigace nezvládne
neděle, 20. června 2010

ještě, že ty taby nemají i dole a kolem dokola
neděle, 20. června 2010

už jen pro zasmání
Typogra e



neděle, 20. června 2010
User eXperience design
                               je typogra e.




neděle, 20. června 2010
neděle, 20. června 2010

Martin Pecina - typograf
pod 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?
neděle, 20. června 2010

rozdíl v pojetí je vidět i od iDnes.cz
neděle, 20. června 2010
neděle, 20. června 2010

jak neprezentovat
dobrá možné jen pro roboty... SEO
korunka.cz
neděle, 20. června 2010

trochu lepší, ale... rozumí uživatel daným pojmům?
hifishop.cz
neděle, 20. června 2010

že se umí utnou i mall.cz
Whazup?!




neděle, 20. června 2010

- co s tím?
Dodržujte typogra cká pravidla




neděle, 20. června 2010

- 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




neděle, 20. června 2010

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




neděle, 20. června 2010

- 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!




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

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




neděle, 20. června 2010

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



neděle, 20. června 2010

- mimo odkazů druhý stavební kámen webových aplikací
Kvalitně navržený formulář váš web buď
                           podpoří, nebo pohřbí.




neděle, 20. června 2010

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á
neděle, 20. června 2010

csob pojišťovna
k čemu tam jsou ty ikonky?
potřebuju ikonky na používání schránky?
neděle, 20. června 2010

co dřív? Způsob dodání nebo dodací adresa?
dtpobchod.cz
neděle, 20. června 2010

co dřív? Způsob dodání nebo dodací adresa?
dtpobchod.cz
neděle, 20. června 2010

co dřív? Způsob dodání nebo dodací adresa?
dtpobchod.cz
neděle, 20. června 2010

co dřív? Způsob dodání nebo dodací adresa?
dtpobchod.cz
neděle, 20. června 2010

co dřív? Způsob dodání nebo dodací adresa?
dtpobchod.cz
neděle, 20. června 2010

co dřív? Způsob dodání nebo dodací adresa?
dtpobchod.cz
neděle, 20. června 2010

co dřív? Způsob dodání nebo dodací adresa?
dtpobchod.cz
neděle, 20. června 2010

co dřív? Způsob dodání nebo dodací adresa?
dtpobchod.cz
neděle, 20. června 2010

co dřív? Způsob dodání nebo dodací adresa?
dtpobchod.cz
neděle, 20. června 2010

co dřív? Způsob dodání nebo dodací adresa?
dtpobchod.cz
neděle, 20. června 2010

ekonto - většina zná
- historické souvislosti
neděle, 20. června 2010

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
neděle, 20. června 2010

řešením jsou inline validace...
neděle, 20. června 2010

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

co se tady stalo?
Formulář musí vypadat jako
                                   formulář




neděle, 20. června 2010
Nevymýšlejte kolo




neděle, 20. června 2010

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




neděle, 20. června 2010

testujte na svých lidech
testujte v úzkém i širokém okolí
testujte, testujte, testujte
Buďte konzistentní




neděle, 20. června 2010

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á
neděle, 20. června 2010
neděle, 20. června 2010
neděle, 20. června 2010
neděle, 20. června 2010
Buďte konzistentní




neděle, 20. června 2010

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á
neděle, 20. června 2010

nebo taky můžete skončit takto...
Nákupní košík



neděle, 20. června 2010
K čemu je vám nákupní košík, když ho
                                neumíte prodat?




neděle, 20. června 2010
neděle, 20. června 2010

... 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ů
neděle, 20. června 2010

trochu jiný přístup
- zase zpětka
- změna počtu
- pokračování výrazné
neděle, 20. června 2010

- opět klasická tabulka
- doporučení produktů
neděle, 20. června 2010

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ší
neděle, 20. června 2010

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í...
neděle, 20. června 2010

stejně tak hifishop
říkám si, kde asi tak vzali inspiraci?
neděle, 20. června 2010

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?
neděle, 20. června 2010

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?



neděle, 20. června 2010

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í.
Chápete?



neděle, 20. června 2010

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í.
Tweak, don’t redesign...
                                              Steve Krug, sensible.com




neděle, 20. června 2010

-   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áší
neděle, 20. června 2010

Na závěr ikona mezi šopy
Jak se vyvíjela?
Amazon.com



neděle, 20. června 2010

Na závěr ikona mezi šopy
Jak se vyvíjela?
neděle, 20. června 2010

1998
neděle, 20. června 2010

2000
neděle, 20. června 2010

2002
neděle, 20. června 2010

2008
neděle, 20. června 2010

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




neděle, 20. června 2010
Díky



neděle, 20. června 2010
Díky


                          soundake.cz

neděle, 20. června 2010

Mais conteúdo relacionado

Destaque

Cubanrevolution 110228151049-phpapp01
Cubanrevolution 110228151049-phpapp01Cubanrevolution 110228151049-phpapp01
Cubanrevolution 110228151049-phpapp01klgriffin
 
Adobe edge 7 文字卷軸與圖片捲軸設定方法
Adobe edge 7 文字卷軸與圖片捲軸設定方法Adobe edge 7 文字卷軸與圖片捲軸設定方法
Adobe edge 7 文字卷軸與圖片捲軸設定方法yunjuli
 
Patricia Neupauerová - Magnesia Duel (case study)
Patricia Neupauerová - Magnesia Duel (case study)Patricia Neupauerová - Magnesia Duel (case study)
Patricia Neupauerová - Magnesia Duel (case study)Akce Dobrého webu
 
Grading Happiness For Total Stress Management Dr. Shriniwas Kashalikar
Grading Happiness For Total Stress Management Dr. Shriniwas KashalikarGrading Happiness For Total Stress Management Dr. Shriniwas Kashalikar
Grading Happiness For Total Stress Management Dr. Shriniwas KashalikarAmeet Fadia
 
My Problem Dr. Shriniwas Kashalikar
My Problem Dr. Shriniwas KashalikarMy Problem Dr. Shriniwas Kashalikar
My Problem Dr. Shriniwas KashalikarAmeet Fadia
 
Consciousness To Conscience Dr. Shriniwas Kashalikar
Consciousness To Conscience Dr. Shriniwas KashalikarConsciousness To Conscience Dr. Shriniwas Kashalikar
Consciousness To Conscience Dr. Shriniwas KashalikarAmeet Fadia
 
Adobe indesign cs5 結合 ipad 互動式數位雜誌製作 短程課程明細表
Adobe indesign cs5 結合 ipad 互動式數位雜誌製作 短程課程明細表Adobe indesign cs5 結合 ipad 互動式數位雜誌製作 短程課程明細表
Adobe indesign cs5 結合 ipad 互動式數位雜誌製作 短程課程明細表yunjuli
 
Adobe cs5.5 i pad電子雜誌進階製作-8hr實作迷你班-folio manage and viewer builder introduction
Adobe cs5.5 i pad電子雜誌進階製作-8hr實作迷你班-folio manage and viewer builder introductionAdobe cs5.5 i pad電子雜誌進階製作-8hr實作迷你班-folio manage and viewer builder introduction
Adobe cs5.5 i pad電子雜誌進階製作-8hr實作迷你班-folio manage and viewer builder introductionyunjuli
 
Adobe InDesign CS5.5 iPAD電子雜誌進階製作 folio manage and viewer builder introduction
Adobe InDesign CS5.5 iPAD電子雜誌進階製作 folio manage and viewer builder introductionAdobe InDesign CS5.5 iPAD電子雜誌進階製作 folio manage and viewer builder introduction
Adobe InDesign CS5.5 iPAD電子雜誌進階製作 folio manage and viewer builder introductionyunjuli
 
Overview of dta offering to lic
Overview of dta offering to licOverview of dta offering to lic
Overview of dta offering to licayush4493
 
Age of exploration
Age of explorationAge of exploration
Age of explorationklgriffin
 
Začněte testovat na dálku. Levnější už to nebude. - Petr Štědrý
Začněte testovat na dálku. Levnější už to nebude. - Petr ŠtědrýZačněte testovat na dálku. Levnější už to nebude. - Petr Štědrý
Začněte testovat na dálku. Levnější už to nebude. - Petr ŠtědrýAkce Dobrého webu
 

Destaque (12)

Cubanrevolution 110228151049-phpapp01
Cubanrevolution 110228151049-phpapp01Cubanrevolution 110228151049-phpapp01
Cubanrevolution 110228151049-phpapp01
 
Adobe edge 7 文字卷軸與圖片捲軸設定方法
Adobe edge 7 文字卷軸與圖片捲軸設定方法Adobe edge 7 文字卷軸與圖片捲軸設定方法
Adobe edge 7 文字卷軸與圖片捲軸設定方法
 
Patricia Neupauerová - Magnesia Duel (case study)
Patricia Neupauerová - Magnesia Duel (case study)Patricia Neupauerová - Magnesia Duel (case study)
Patricia Neupauerová - Magnesia Duel (case study)
 
Grading Happiness For Total Stress Management Dr. Shriniwas Kashalikar
Grading Happiness For Total Stress Management Dr. Shriniwas KashalikarGrading Happiness For Total Stress Management Dr. Shriniwas Kashalikar
Grading Happiness For Total Stress Management Dr. Shriniwas Kashalikar
 
My Problem Dr. Shriniwas Kashalikar
My Problem Dr. Shriniwas KashalikarMy Problem Dr. Shriniwas Kashalikar
My Problem Dr. Shriniwas Kashalikar
 
Consciousness To Conscience Dr. Shriniwas Kashalikar
Consciousness To Conscience Dr. Shriniwas KashalikarConsciousness To Conscience Dr. Shriniwas Kashalikar
Consciousness To Conscience Dr. Shriniwas Kashalikar
 
Adobe indesign cs5 結合 ipad 互動式數位雜誌製作 短程課程明細表
Adobe indesign cs5 結合 ipad 互動式數位雜誌製作 短程課程明細表Adobe indesign cs5 結合 ipad 互動式數位雜誌製作 短程課程明細表
Adobe indesign cs5 結合 ipad 互動式數位雜誌製作 短程課程明細表
 
Adobe cs5.5 i pad電子雜誌進階製作-8hr實作迷你班-folio manage and viewer builder introduction
Adobe cs5.5 i pad電子雜誌進階製作-8hr實作迷你班-folio manage and viewer builder introductionAdobe cs5.5 i pad電子雜誌進階製作-8hr實作迷你班-folio manage and viewer builder introduction
Adobe cs5.5 i pad電子雜誌進階製作-8hr實作迷你班-folio manage and viewer builder introduction
 
Adobe InDesign CS5.5 iPAD電子雜誌進階製作 folio manage and viewer builder introduction
Adobe InDesign CS5.5 iPAD電子雜誌進階製作 folio manage and viewer builder introductionAdobe InDesign CS5.5 iPAD電子雜誌進階製作 folio manage and viewer builder introduction
Adobe InDesign CS5.5 iPAD電子雜誌進階製作 folio manage and viewer builder introduction
 
Overview of dta offering to lic
Overview of dta offering to licOverview of dta offering to lic
Overview of dta offering to lic
 
Age of exploration
Age of explorationAge of exploration
Age of exploration
 
Začněte testovat na dálku. Levnější už to nebude. - Petr Štědrý
Začněte testovat na dálku. Levnější už to nebude. - Petr ŠtědrýZačněte testovat na dálku. Levnější už to nebude. - Petr Štědrý
Začněte testovat na dálku. Levnější už to nebude. - Petr Štědrý
 

Mais de Akce Dobrého webu

Petr Soukup – Kam nemůže váš obchod, tam nastrčte affiliate partnera
Petr Soukup – Kam nemůže váš obchod, tam nastrčte affiliate partneraPetr Soukup – Kam nemůže váš obchod, tam nastrčte affiliate partnera
Petr Soukup – Kam nemůže váš obchod, tam nastrčte affiliate partneraAkce Dobrého webu
 
Martin Cígler - iDoklad: jak se technologické demo může zvrhnout v úspěšný o...
Martin Cígler -  iDoklad: jak se technologické demo může zvrhnout v úspěšný o...Martin Cígler -  iDoklad: jak se technologické demo může zvrhnout v úspěšný o...
Martin Cígler - iDoklad: jak se technologické demo může zvrhnout v úspěšný o...Akce Dobrého webu
 
Marta Drahovzalová – Jak naučit zákazníky, aby měli rádi vaši online samoobsluhu
Marta Drahovzalová – Jak naučit zákazníky, aby měli rádi vaši online samoobsluhuMarta Drahovzalová – Jak naučit zákazníky, aby měli rádi vaši online samoobsluhu
Marta Drahovzalová – Jak naučit zákazníky, aby měli rádi vaši online samoobsluhuAkce Dobrého webu
 
Vít Horký - Jak na zákaznickou péči na sociálních médiích
Vít Horký - Jak na zákaznickou péči na sociálních médiíchVít Horký - Jak na zákaznickou péči na sociálních médiích
Vít Horký - Jak na zákaznickou péči na sociálních médiíchAkce Dobrého webu
 
Petr Kleiner - Korporátní web, jako generátor kvalitních leadů
Petr Kleiner - Korporátní web, jako generátor kvalitních leadůPetr Kleiner - Korporátní web, jako generátor kvalitních leadů
Petr Kleiner - Korporátní web, jako generátor kvalitních leadůAkce Dobrého webu
 
Ratibor Líbal: Jak zaujmout, odlišit se a vydělat
Ratibor Líbal: Jak zaujmout, odlišit se a vydělatRatibor Líbal: Jak zaujmout, odlišit se a vydělat
Ratibor Líbal: Jak zaujmout, odlišit se a vydělatAkce Dobrého webu
 
Redesign webu - Martin Hoffmann
Redesign webu - Martin HoffmannRedesign webu - Martin Hoffmann
Redesign webu - Martin HoffmannAkce Dobrého webu
 
Redesign webu Telefonica O2 - Jakub karlec
Redesign webu Telefonica O2 - Jakub karlec Redesign webu Telefonica O2 - Jakub karlec
Redesign webu Telefonica O2 - Jakub karlec Akce Dobrého webu
 
Affiliate Marketing - Vladan Hejnic
Affiliate Marketing - Vladan HejnicAffiliate Marketing - Vladan Hejnic
Affiliate Marketing - Vladan HejnicAkce Dobrého webu
 
Praktické využití novinek v Google Analytics - Pavel Jašek
Praktické využití novinek v Google Analytics - Pavel JašekPraktické využití novinek v Google Analytics - Pavel Jašek
Praktické využití novinek v Google Analytics - Pavel JašekAkce Dobrého webu
 
Jak pracovat s Customer Lifetime Value při vyhodnocování kampaní - Martin Pěn...
Jak pracovat s Customer Lifetime Value při vyhodnocování kampaní - Martin Pěn...Jak pracovat s Customer Lifetime Value při vyhodnocování kampaní - Martin Pěn...
Jak pracovat s Customer Lifetime Value při vyhodnocování kampaní - Martin Pěn...Akce Dobrého webu
 
Co nového pod sluncem? - Ivan Pilný
Co nového pod sluncem? - Ivan PilnýCo nového pod sluncem? - Ivan Pilný
Co nového pod sluncem? - Ivan PilnýAkce Dobrého webu
 
Sociální média v České spořitelně - David Lorenc
Sociální média v České spořitelně - David LorencSociální média v České spořitelně - David Lorenc
Sociální média v České spořitelně - David LorencAkce Dobrého webu
 
Krizová komunikace na webu - Daniel Dočekal
Krizová komunikace na webu - Daniel DočekalKrizová komunikace na webu - Daniel Dočekal
Krizová komunikace na webu - Daniel DočekalAkce Dobrého webu
 
5 SEO nástrojů, které nakopnou váš web - Jiří Koutný
5 SEO nástrojů, které nakopnou váš web - Jiří Koutný5 SEO nástrojů, které nakopnou váš web - Jiří Koutný
5 SEO nástrojů, které nakopnou váš web - Jiří KoutnýAkce Dobrého webu
 
Vyhodnocování SEO - Michael Blahut
Vyhodnocování SEO - Michael BlahutVyhodnocování SEO - Michael Blahut
Vyhodnocování SEO - Michael BlahutAkce Dobrého webu
 
Zavedení UX do firmy - Jiří Mžourek
Zavedení UX do firmy - Jiří MžourekZavedení UX do firmy - Jiří Mžourek
Zavedení UX do firmy - Jiří MžourekAkce Dobrého webu
 
Budiness Value of User-Centered Design and Usability - Jeff Johnson
Budiness Value of User-Centered Design and Usability - Jeff JohnsonBudiness Value of User-Centered Design and Usability - Jeff Johnson
Budiness Value of User-Centered Design and Usability - Jeff JohnsonAkce Dobrého webu
 

Mais de Akce Dobrého webu (20)

Petr Soukup – Kam nemůže váš obchod, tam nastrčte affiliate partnera
Petr Soukup – Kam nemůže váš obchod, tam nastrčte affiliate partneraPetr Soukup – Kam nemůže váš obchod, tam nastrčte affiliate partnera
Petr Soukup – Kam nemůže váš obchod, tam nastrčte affiliate partnera
 
Martin Cígler - iDoklad: jak se technologické demo může zvrhnout v úspěšný o...
Martin Cígler -  iDoklad: jak se technologické demo může zvrhnout v úspěšný o...Martin Cígler -  iDoklad: jak se technologické demo může zvrhnout v úspěšný o...
Martin Cígler - iDoklad: jak se technologické demo může zvrhnout v úspěšný o...
 
Marta Drahovzalová – Jak naučit zákazníky, aby měli rádi vaši online samoobsluhu
Marta Drahovzalová – Jak naučit zákazníky, aby měli rádi vaši online samoobsluhuMarta Drahovzalová – Jak naučit zákazníky, aby měli rádi vaši online samoobsluhu
Marta Drahovzalová – Jak naučit zákazníky, aby měli rádi vaši online samoobsluhu
 
Vít Horký - Jak na zákaznickou péči na sociálních médiích
Vít Horký - Jak na zákaznickou péči na sociálních médiíchVít Horký - Jak na zákaznickou péči na sociálních médiích
Vít Horký - Jak na zákaznickou péči na sociálních médiích
 
Petr Kleiner - Korporátní web, jako generátor kvalitních leadů
Petr Kleiner - Korporátní web, jako generátor kvalitních leadůPetr Kleiner - Korporátní web, jako generátor kvalitních leadů
Petr Kleiner - Korporátní web, jako generátor kvalitních leadů
 
Ratibor Líbal: Jak zaujmout, odlišit se a vydělat
Ratibor Líbal: Jak zaujmout, odlišit se a vydělatRatibor Líbal: Jak zaujmout, odlišit se a vydělat
Ratibor Líbal: Jak zaujmout, odlišit se a vydělat
 
Redesign webu - Martin Hoffmann
Redesign webu - Martin HoffmannRedesign webu - Martin Hoffmann
Redesign webu - Martin Hoffmann
 
Redesign webu Telefonica O2 - Jakub karlec
Redesign webu Telefonica O2 - Jakub karlec Redesign webu Telefonica O2 - Jakub karlec
Redesign webu Telefonica O2 - Jakub karlec
 
Affiliate Marketing - Vladan Hejnic
Affiliate Marketing - Vladan HejnicAffiliate Marketing - Vladan Hejnic
Affiliate Marketing - Vladan Hejnic
 
Praktické využití novinek v Google Analytics - Pavel Jašek
Praktické využití novinek v Google Analytics - Pavel JašekPraktické využití novinek v Google Analytics - Pavel Jašek
Praktické využití novinek v Google Analytics - Pavel Jašek
 
SEO a PPC - Matěj Novák
SEO a PPC - Matěj NovákSEO a PPC - Matěj Novák
SEO a PPC - Matěj Novák
 
Jak pracovat s Customer Lifetime Value při vyhodnocování kampaní - Martin Pěn...
Jak pracovat s Customer Lifetime Value při vyhodnocování kampaní - Martin Pěn...Jak pracovat s Customer Lifetime Value při vyhodnocování kampaní - Martin Pěn...
Jak pracovat s Customer Lifetime Value při vyhodnocování kampaní - Martin Pěn...
 
Co nového pod sluncem? - Ivan Pilný
Co nového pod sluncem? - Ivan PilnýCo nového pod sluncem? - Ivan Pilný
Co nového pod sluncem? - Ivan Pilný
 
Remarketing - Filip Hráček
Remarketing - Filip HráčekRemarketing - Filip Hráček
Remarketing - Filip Hráček
 
Sociální média v České spořitelně - David Lorenc
Sociální média v České spořitelně - David LorencSociální média v České spořitelně - David Lorenc
Sociální média v České spořitelně - David Lorenc
 
Krizová komunikace na webu - Daniel Dočekal
Krizová komunikace na webu - Daniel DočekalKrizová komunikace na webu - Daniel Dočekal
Krizová komunikace na webu - Daniel Dočekal
 
5 SEO nástrojů, které nakopnou váš web - Jiří Koutný
5 SEO nástrojů, které nakopnou váš web - Jiří Koutný5 SEO nástrojů, které nakopnou váš web - Jiří Koutný
5 SEO nástrojů, které nakopnou váš web - Jiří Koutný
 
Vyhodnocování SEO - Michael Blahut
Vyhodnocování SEO - Michael BlahutVyhodnocování SEO - Michael Blahut
Vyhodnocování SEO - Michael Blahut
 
Zavedení UX do firmy - Jiří Mžourek
Zavedení UX do firmy - Jiří MžourekZavedení UX do firmy - Jiří Mžourek
Zavedení UX do firmy - Jiří Mžourek
 
Budiness Value of User-Centered Design and Usability - Jeff Johnson
Budiness Value of User-Centered Design and Usability - Jeff JohnsonBudiness Value of User-Centered Design and Usability - Jeff Johnson
Budiness Value of User-Centered Design and Usability - Jeff Johnson
 

Typické prvky webu - Lukáš Hroch

  • 2. Typické prvky na webu a jejich použitelnost neděle, 20. června 2010 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ý.
  • 3. Tlačítka Hodnocení Přihlášení Porovnávání Vyhledávání Primární navigace Komentáře Registrace Drobečková navigace Související Košík Sekundární navigace Lightbox Strom produktů Doprava a platba Formuláře Náhledy Typogra e Patička Facetová navigace Galerie Kontaktní údaje Užitečné informace Objednávka Detail neděle, 20. června 2010
  • 4. Použití standardních prvků urychluje učení. neděle, 20. června 2010 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
  • 5. neděle, 20. června 2010 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
  • 6. neděle, 20. června 2010 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
  • 7. Méně je více. neděle, 20. června 2010 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ě.
  • 8. Tlačítka Hodnocení Přihlášení Porovnávání Vyhledávání Primární navigace Komentáře Registrace Drobečková navigace Související Košík Sekundární navigace Lightbox Strom produktů Doprava a platba Formuláře Náhledy Typogra e Patička Facetová navigace Galerie Kontaktní údaje Užitečné informace Objednávka Detail neděle, 20. června 2010 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ě.
  • 9. Tlačítka Hodnocení Přihlášení Porovnávání Vyhledávání Primární navigace Komentáře Registrace Drobečková navigace Související Košík Sekundární navigace Lightbox Strom produktů Doprava a platba Formuláře Náhledy Typogra e Patička Facetová navigace Galerie Kontaktní údaje Užitečné informace Objednávka Detail neděle, 20. června 2010 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ě.
  • 11. User eXperience webu je pouze tak dobrá, jak je dobrá jeho navigace. neděle, 20. června 2010 Co je standardní - hlavní a vedlejší menu - horizontální, vertikální
  • 12. Kde jsem? Kam mohu jít? neděle, 20. června 2010 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íň.
  • 13. neděle, 20. června 2010 hlavní menu vidím kde jsem - navigační cesta - postranní menu - sekundární menu
  • 14. neděle, 20. června 2010 hlavní menu vidím kde jsem - navigační cesta - postranní menu - sekundární menu
  • 15. neděle, 20. června 2010 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?
  • 16. neděle, 20. června 2010 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?
  • 17. neděle, 20. června 2010 iDnes vynechává navigační cestu může si to dovolit - dvojitá navigace - doplňková navigace
  • 18. neděle, 20. června 2010 iDnes vynechává navigační cestu může si to dovolit - dvojitá navigace - doplňková navigace
  • 19. neděle, 20. června 2010 souvisí se strukturou když se navigace nezvládne
  • 20. neděle, 20. června 2010 ještě, že ty taby nemají i dole a kolem dokola
  • 21. neděle, 20. června 2010 už jen pro zasmání
  • 22. Typogra e neděle, 20. června 2010
  • 23. User eXperience design je typogra e. neděle, 20. června 2010
  • 24. neděle, 20. června 2010 Martin Pecina - typograf pod 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?
  • 25. neděle, 20. června 2010 rozdíl v pojetí je vidět i od iDnes.cz
  • 27. neděle, 20. června 2010 jak neprezentovat dobrá možné jen pro roboty... SEO korunka.cz
  • 28. neděle, 20. června 2010 trochu lepší, ale... rozumí uživatel daným pojmům? hifishop.cz
  • 29. neděle, 20. června 2010 že se umí utnou i mall.cz
  • 30. Whazup?! neděle, 20. června 2010 - co s tím?
  • 31. Dodržujte typogra cká pravidla neděle, 20. června 2010 - 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.
  • 32. Pište česky neděle, 20. června 2010 - používejte jazyk svých zákazníků - žargon na běžný web nepatří
  • 33. Strukturujte informace neděle, 20. června 2010 - 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
  • 34. ... najděte si copywritera! neděle, 20. června 2010
  • 35. Cílem copywritera je napsat text, který osloví své čtenáře a dovede je k požadované akci (objednání produktu/služby apod.). http://cs.wikipedia.org/wiki/Copywriter neděle, 20. června 2010 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ě
  • 36. Formuláře neděle, 20. června 2010 - mimo odkazů druhý stavební kámen webových aplikací
  • 37. Kvalitně navržený formulář váš web buď podpoří, nebo pohřbí. neděle, 20. června 2010 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á
  • 38. neděle, 20. června 2010 csob pojišťovna k čemu tam jsou ty ikonky? potřebuju ikonky na používání schránky?
  • 39. neděle, 20. června 2010 co dřív? Způsob dodání nebo dodací adresa? dtpobchod.cz
  • 40. neděle, 20. června 2010 co dřív? Způsob dodání nebo dodací adresa? dtpobchod.cz
  • 41. neděle, 20. června 2010 co dřív? Způsob dodání nebo dodací adresa? dtpobchod.cz
  • 42. neděle, 20. června 2010 co dřív? Způsob dodání nebo dodací adresa? dtpobchod.cz
  • 43. neděle, 20. června 2010 co dřív? Způsob dodání nebo dodací adresa? dtpobchod.cz
  • 44. neděle, 20. června 2010 co dřív? Způsob dodání nebo dodací adresa? dtpobchod.cz
  • 45. neděle, 20. června 2010 co dřív? Způsob dodání nebo dodací adresa? dtpobchod.cz
  • 46. neděle, 20. června 2010 co dřív? Způsob dodání nebo dodací adresa? dtpobchod.cz
  • 47. neděle, 20. června 2010 co dřív? Způsob dodání nebo dodací adresa? dtpobchod.cz
  • 48. neděle, 20. června 2010 co dřív? Způsob dodání nebo dodací adresa? dtpobchod.cz
  • 49. neděle, 20. června 2010 ekonto - většina zná - historické souvislosti
  • 50. neděle, 20. června 2010 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
  • 51. neděle, 20. června 2010 řešením jsou inline validace...
  • 52. neděle, 20. června 2010 ... pokud je výrobíte správně co se tady stalo?
  • 53. Formulář musí vypadat jako formulář neděle, 20. června 2010
  • 54. Nevymýšlejte kolo neděle, 20. června 2010 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í
  • 55. Testujte neděle, 20. června 2010 testujte na svých lidech testujte v úzkém i širokém okolí testujte, testujte, testujte
  • 56. Buďte konzistentní neděle, 20. června 2010 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á
  • 61. Buďte konzistentní neděle, 20. června 2010 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á
  • 62. neděle, 20. června 2010 nebo taky můžete skončit takto...
  • 64. K čemu je vám nákupní košík, když ho neumíte prodat? neděle, 20. června 2010
  • 65. neděle, 20. června 2010 ... 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ů
  • 66. neděle, 20. června 2010 trochu jiný přístup - zase zpětka - změna počtu - pokračování výrazné
  • 67. neděle, 20. června 2010 - opět klasická tabulka - doporučení produktů
  • 68. neděle, 20. června 2010 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ší
  • 69. neděle, 20. června 2010 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í...
  • 70. neděle, 20. června 2010 stejně tak hifishop říkám si, kde asi tak vzali inspiraci?
  • 71. neděle, 20. června 2010 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?
  • 72. neděle, 20. června 2010 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í.
  • 73. Krása? neděle, 20. června 2010 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í.
  • 74. Chápete? neděle, 20. června 2010 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í.
  • 75. Tweak, don’t redesign... Steve Krug, sensible.com neděle, 20. června 2010 - 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áší
  • 76. neděle, 20. června 2010 Na závěr ikona mezi šopy Jak se vyvíjela?
  • 77. Amazon.com neděle, 20. června 2010 Na závěr ikona mezi šopy Jak se vyvíjela?
  • 78. neděle, 20. června 2010 1998
  • 79. neděle, 20. června 2010 2000
  • 80. neděle, 20. června 2010 2002
  • 81. neděle, 20. června 2010 2008
  • 82. neděle, 20. června 2010 dnes
  • 83. Použitelnost JE konkurenční výhoda. neděle, 20. června 2010
  • 85. Díky soundake.cz neděle, 20. června 2010