Tekstmenu-navigatie (webwinkels): verschil tussen versies
(18 tussenliggende versies door dezelfde gebruiker niet weergegeven) | |||
Regel 7: | Regel 7: | ||
Misschien handig om af te vragen waarom sommige mensen op deze manier navigeren: Dan kunnen we ze beter van dienst zijn. Dit zijn mijn theorieën - Ik heb het niet geverifiëerd: | Misschien handig om af te vragen waarom sommige mensen op deze manier navigeren: Dan kunnen we ze beter van dienst zijn. Dit zijn mijn theorieën - Ik heb het niet geverifiëerd: | ||
− | * Sneller, want de pagina hoeft niet opnieuw te laden | + | * Sneller, want de pagina hoeft niet opnieuw te laden: Alle voorbeelden hieronder laden tekstmenu's ''asynchroon''; ze zijn dus beschikbaar zonder dat er opnieuw iets geladen hoeft te worden |
− | * | + | * Meer overzicht, want meer keuzes per pagina - Dat klopt voor bijna alle voorbeelden hieronder |
− | * Minder bandbreedte | + | * Minder bandbreedte: Handig bij een slechte internetverbinding |
− | * Minder rommel - Cleaner & kaler. | + | * Minder rommel - Cleaner & kaler |
+ | * Uit gewoonte of omdat het beter bij ze past of whatever: De voorkeur hoeft niet rationeel te zijn. | ||
− | == Amazon.de == | + | == Top-level tekstmenu's == |
+ | |||
+ | Hoe zien top-level tekstmenu's (dus de eigenlijke menubalken) er tegenwoordig uit? Zit daar nog veel variatie in? Nieuwe ontwikkelingen? Nieuwe inzichten? Etc. Hierbij een evaluatie (juli 2020) ahv. deze selectie van 36 sites, afkomnstig van [[Websites - Voorbeelden]]: | ||
+ | |||
+ | {| | ||
+ | | | ||
+ | * [http://www.ah.nl/ Albert Hein] | ||
+ | * [http://www.alibaba.com/ Alibaba.com] | ||
+ | * [http://www.amazon.com/ Amazon.com] | ||
+ | * [http://www.apple.com/ Apple.com] | ||
+ | * [http://www.bluelagoon.com/ Bluelagoon.com] | ||
+ | * [http://www.bol.com/nl/index.html Bol.com] | ||
+ | * [http://www.cpooutlets.com/ CPO Outlets] | ||
+ | * [http://my.deejo.fr/en/ Deejo.fr] | ||
+ | * [http://www.hickoryfarms.com/ Hickory Farms] | ||
+ | * [http://www.oliverharvey.co.uk/ Oliver Harvey] | ||
+ | | | ||
+ | * [http://www.staples.com/home Staples.com] | ||
+ | * [http://www.superdry.nl/ Superdry.nl] | ||
+ | * [http://www.walmart.com/ Walmart.com] | ||
+ | * [https://boldking.com/ Boldking] | ||
+ | * [https://boostedusa.com BoostedUSA.com] | ||
+ | * [https://medium.com Medium.com] | ||
+ | * [https://pitch.com Pitch.com] | ||
+ | * [https://proforto.nl/ proforto.nl] | ||
+ | | | ||
+ | * [https://usabilitygeek.com UsabilityGeek.com] | ||
+ | * [https://www.airbnb.com/ AirBnB.com] | ||
+ | * [https://www.bouwonline.com/ Bouwonline.com] | ||
+ | * [https://www.coolblue.nl/ Coolblue.nl] | ||
+ | * [https://www.dormerpramet.nl/ Dormerpramet.nl] | ||
+ | * [https://www.dropbox.com Dropbox.com] | ||
+ | * [https://www.festool.com/ Festool.com] | ||
+ | * [https://www.frankandoak.com FrandAndOak.com] | ||
+ | * [https://www.gyzs.nl gyzs.nl] | ||
+ | | | ||
+ | * [https://www.hbm-machines.com/ HBM-Machines.com] | ||
+ | * [https://www.kruis.nl/ Kruis.nl] | ||
+ | * [https://www.manandshaving.nl/ manandshaving.nl] | ||
+ | * [https://www.scandicshop.nl/ Scandicshop.nl] | ||
+ | * [https://www.schroeven-online.nl/nl/ Schroeven-online.nl] | ||
+ | * [https://www.semplice.com Semplice.com] | ||
+ | * [https://www.semplice.com/ Semplice.com] | ||
+ | * [https://www.slijpexpert.nl/ Slijpexpert.nl] | ||
+ | * [http://eu.suitsupply.com/en/home Suitsupply] | ||
+ | * [https://www.tricorp.com/ Tricorp.com] | ||
+ | |} | ||
+ | |||
+ | === Afwijkende vormgeving === | ||
+ | |||
+ | * Slechts één site gebruikt tabbladen ([https://www.manandshaving.nl/ manandshaving.nl]) (2,7% van de sites). Het ziet er mooi uit | ||
+ | * Een stuk of drie sites gebruiken ''hamburgermenu's'', wo. [http://eu.suitsupply.com/en/home Suitsupply] (8% van de sites) | ||
+ | |||
+ | === Traditionele hoofdmenu's === | ||
+ | |||
+ | De rest gebruikt allemaal traditionele hoofdmenu's, met maar verbazend weinig variatie: | ||
+ | |||
+ | * Soms zonder enige afscheiding tov. de rest van de site | ||
+ | * Soms met pijltjes die naar beneden wijzen | ||
+ | * Soms zonder afscheiding tussen elementen, en soms met rechte strepen, schuine strepen of zoiets. | ||
+ | |||
+ | == Voorbeelden inhoud tekstmenu's == | ||
+ | |||
+ | === Amazon.de === | ||
{| | {| | ||
Regel 23: | Regel 87: | ||
Dit gaat op dezelfde manier op desktop als op mobiel. Alleen zijn de menu-items anders. | Dit gaat op dezelfde manier op desktop als op mobiel. Alleen zijn de menu-items anders. | ||
− | == Bol.com == | + | === Bol.com === |
Interessant: | Interessant: | ||
Regel 31: | Regel 95: | ||
{| | {| | ||
− | |[[file:20200723-1821.png|Het primaire menu heeft drie items: ''Categorieën'', ''Cadeaus & Inspiratie'' en ''Aanbiedingen'']] | + | |[[file:20200723-1821.png|thumb|Het primaire menu heeft drie items: ''Categorieën'', ''Cadeaus & Inspiratie'' en ''Aanbiedingen'']] |
− | |[[file:20200723- | + | |[[file:20200723-1822.png|thumb|Uitgeklapte menu ''Categorieën'']] |
− | |[[file:20200723- | + | |[[file:20200723-1823.png|thumb|Met een submenu]] |
|} | |} | ||
− | == gall.nl == | + | === gall.nl === |
{| | {| | ||
Regel 44: | Regel 108: | ||
|} | |} | ||
− | == Walmart.com == | + | === Walmart.com === |
{| | {| | ||
Regel 53: | Regel 117: | ||
Dit gaat op desktop en mobiele devices op dezelfde manier. | Dit gaat op desktop en mobiele devices op dezelfde manier. | ||
+ | |||
+ | === Wordpress === | ||
+ | |||
+ | {| | ||
+ | |[[file:20200723-1908.png|thumb|WordPress kan standaard gelijk al hele aardige submenu's maken - Ook als je dat niet goed kunt zien]] | ||
+ | |[[file:20200723-1909.png|thumb|WordPress kan standaard gelijk al hele aardige submenu's maken - Ook op mobiel]] | ||
+ | |} | ||
+ | |||
+ | === Meer voorbeelden === | ||
+ | |||
+ | [https://www.gap.com/ Gap.com]: | ||
+ | |||
+ | * Horizontaal hoofdmenu | ||
+ | * Groot tekstmenu, één laag | ||
+ | * Ook mobiel (hamburgermenu) | ||
+ | |||
+ | == Zie ook == | ||
+ | |||
+ | * [[Webwinkels - Voorbeelden]] |
Huidige versie van 27 jul 2020 om 10:19
Verschillende bezoekers navigeren sites op verschillende manieren. Sommige mensen navigeren bij voorkeur via buttons en andere grafische uitingen. Andere bezoekers bij voorkeur via tekst en/of tekstmenu's.
Maar kan dat wel? Tekstueel navigeren door een webwinkel? Een probleem wat je namelijk snel krijgt, is wat te doen als een menu een submenu zou hebben. Is dat op een voldoende ergonomische manier te realiseren? Een paar interessante voorbeelden:
Misschien handig om af te vragen waarom sommige mensen op deze manier navigeren: Dan kunnen we ze beter van dienst zijn. Dit zijn mijn theorieën - Ik heb het niet geverifiëerd:
- Sneller, want de pagina hoeft niet opnieuw te laden: Alle voorbeelden hieronder laden tekstmenu's asynchroon; ze zijn dus beschikbaar zonder dat er opnieuw iets geladen hoeft te worden
- Meer overzicht, want meer keuzes per pagina - Dat klopt voor bijna alle voorbeelden hieronder
- Minder bandbreedte: Handig bij een slechte internetverbinding
- Minder rommel - Cleaner & kaler
- Uit gewoonte of omdat het beter bij ze past of whatever: De voorkeur hoeft niet rationeel te zijn.
Hoe zien top-level tekstmenu's (dus de eigenlijke menubalken) er tegenwoordig uit? Zit daar nog veel variatie in? Nieuwe ontwikkelingen? Nieuwe inzichten? Etc. Hierbij een evaluatie (juli 2020) ahv. deze selectie van 36 sites, afkomnstig van Websites - Voorbeelden:
Afwijkende vormgeving
- Slechts één site gebruikt tabbladen (manandshaving.nl) (2,7% van de sites). Het ziet er mooi uit
- Een stuk of drie sites gebruiken hamburgermenu's, wo. Suitsupply (8% van de sites)
De rest gebruikt allemaal traditionele hoofdmenu's, met maar verbazend weinig variatie:
- Soms zonder enige afscheiding tov. de rest van de site
- Soms met pijltjes die naar beneden wijzen
- Soms zonder afscheiding tussen elementen, en soms met rechte strepen, schuine strepen of zoiets.
Amazon.de
Dit gaat op dezelfde manier op desktop als op mobiel. Alleen zijn de menu-items anders.
Bol.com
Interessant:
- Horizontaal menu
- Mét submenu's.
gall.nl
Walmart.com
Dit gaat op desktop en mobiele devices op dezelfde manier.
Wordpress
Meer voorbeelden
- Horizontaal hoofdmenu
- Groot tekstmenu, één laag
- Ook mobiel (hamburgermenu)