Navigatiebalk is onnodig leeg bij C-niveau

[ACM]

Ik vind de navigatiebalk wel erg leeg in C-modus.

Met C- en D-niveau verdwijnt alle duiding en kanalisatie die we met Tweakers 7 zo specifiek uitgezocht hebben om achter en bij onze merknaam te plaatsen... Met name 'Pricewatch' en 'Forum' zouden er zo lang mogelijk moeten blijven staan lijkt me. Voor Nieuws geldt dat de portal waar 'men' op binnenkomt wel redelijk het nieuws biedt. Voor Reviews en andere zaken moeten we ook oppassen dat we het zomaar buiten beeld gooien.
Eigenlijk geldt voor ieder van die opties: waarom consumeert de bezoeker (of waarom zouden we willen dat ze het gaan doen). Voor ad-hoc informatie opzoeken zijn het forum en de pricewatch waarschijnlijk erg belangrijk, voor meer informatie over de aankoop van een product vergaren zal de review-sectie (maar wellicht vooral via de pricewatch) relevant zijn.

Let er op dat niet iedere bezoeker al de site Tweakers goed kent, die willen we natuurlijk wel proberen langer te laten blijven dan een vluchtige pageview. En niet alleen maar omdat ie via zijn tablet of smartphone voor het eerst komt niks over Tweakers melden (want zo duidelijk is onze naam ook weer niet ).

Aangezien de Pricewatch momenteel op de C-niveau frontpage ook helemaal onderaan weggemoffeld pas genoemd wordt, verdwijnt die effectief daardoor gewoon buiten beeld... En dat is toch wel erg zwaar offer voor een van de meest gebruikte links vanaf onze frontpage. Het forum heeft straks op de frontpage helemaal geen directe link meer.

Ik vraag me verder af of de menu-knop wel voldoende 'discoverable' is. Je gaat er hooguit op klikken als je weet dat iets bestaat, maar je er geen link naar kan vinden. Hoeveel bezoekers zullen er uit nieuwsgierigheid op klikken?

[Misha]

Ik ben het met je eens dat het te leeg is en er te weinig duiding is. We hebben het een en ander hierover bedacht maar uiteindelijk gekozen voor de oplossing van D voor nu. We kwamen met allerlei patterns wat andere problemen tegen.

We hebben bijvoorbeeld de volgende patterns ook overwogen:

Bestemmingen weghalen tot het moment dat merk, nieuws, pricewatch, forum en meer niet meer past

Je krijgt hierbij hetzelfde idee als op B/A. De belangrijkste tonen we standaard, de rest verplaatsen we onder de 'meer' indien er een gebrek aan ruimte ontstaat. De lange lijst gaat dan alleen een probleem vormen op high-reso phones met een kleine viewport (die ook nog eens in landscape staat). De lijst valt ver onder de viewport, wordt ook niet bevorderend is voor de vindbaarheid.

Dit valt vervolgens wel weer op de lossen door het horizontaal te tonen ipv verticaal. Dat vind ik nog steeds een idee om verder te ontdekken.

Hoe dan ook zou met bovenstaand pattern de functies voor de DM & Notifications in de side-bar van het profiel komen zitten. Ik zie nu dat de search-icon in de schets is weggevallen; die hoort standaard links van het gebruikersicoon te staan.

Hidden sidebar + primaire bestemmingen

Er was tevens een idee om de primaire bestemmingen te blijven tonen, en de secundaire alsnog in de hidden sidebar te zetten. Dit wordt alleen een aardig maf pattern, omdat enerzijds de gebruiker van links naar rechts over de nav-bar gaat, maar als hij meer wil, hij eerst terug naar links moet om er meerdere op te vragen. Dat is verre van een gewenste situatie

[ACM]

Ik denk dat die eerste de meest logische is als je de huidige site al kent en ook iets logischer is als je 'm niet kent.

Verder van de daarbinnen uitgeklapte menu's past de 2e versie het best bij met name landscape-orientatie, omdat je anders daar al snel een scrollbar zou krijgen in de hoogte (en dat is natuurlijk zonde als je die ruimte wel hebt).

[Verwijderd]

Navigatie is een van de moeilijkste dingen om goed te krijgen in een responsive design. Ik kan dit artikel erg aanraden:

http://bradfrostweb.com/blog/web/responsive-nav-patterns/

Het laat een brede selectie aan patterns zien waar je zelf de juiste keuze in kunt maken. Het is lastig te zeggen welke de beste voor tweakers is, persoonlijk ben ik gecharmeerd van het idee wat jullie zelf al beschrijven: op de kleinste viewport slecht een "menu" link, op de grootste viewport alles, en op alles wat daartussen zit laat je zoveel mogelijk zien in volgorde van belangrijkheid.

Een andere grote kanshebber is het side-menu, a la Facebook. Groot voordeel daar is dat je heel erg veel ruimte hebt voor navigatie.

[Misha]

Dat is ook iets waar we flink van hebben afgekeken. De hidden sidebar/off canvas a la Facebook hebben we voor grade D. Het nadeel is dat, zoals ACM zegt, alle duiding wegvalt. Op D ontkom je daar niet aan, voor C zou het nog wel kunnen. Ik heb het idee hierboven iets verder nog uitgewerkt wat ik vanavond even zal uploaden

[Misha]

Hierbij nog de schets voor C.



De inhoud van de navigatie is nog nader te bepalen. Ik heb er nu Nieuws, Pricewatch en Forum ingezet, maar kan nog wijzigen door invloed van derden. Ik denk niet dat het veel zal wijzigen overigens.

In totaal zitten er drie varianten in:

De bovenste 2

Hierbij staan de (wat mij betreft ) belangrijkste bestemmingen die ons definiëren bovenin de navigatie. Gezien de viewport erg klein kan zijn, worden de notificaties en dm's onder het profiel geplaatst zoals op device grade d. De gebruiker kan meer bestemmingen opvragen door op 'Meer' te drukken, waarop de overige bestemmingen gegroepeerd worden weergegeven (mits mogelijk). Het enige wat hier vervolgens mist is de tracker, en het logo van TRUE dat moet ergens nog een plekje krijgen, maar dat kan vast ook wel naar de footer.

De middelste

Bij de middelste heb ik een icon voor de tracker aan de linkerkant erbij gezet om deze toch toegankelijk te houden. Het icoon zelf moet nog wel veranderen. Het moet duidelijk worden voor de gebruiker dat deze dan ook van de linkerkant naar binnen komt schuiven. Wellicht kunnen we kiezen voor eenzelfde aanpak als het profiel, al worden dat dan wel heel erg veel streepjes in 1 icoon. Tevens moeten we, als we daar een icoon plaatsen, ontzettend goed oppassen dat nieuwe gebruikers het gaan zien als ons beeldmerk, wat in mijn schets absoluut het geval gaat zijn. Een streepje er tussen zetten is niet voldoende. Wellicht is een echte knop dit wel, daar zouden we nog even mee moeten spelen

De onderste twee

De onderste twee heb ik stiekem afgekeken van onze collega's van Polygon . Ik vind het alleen niet helder dat ze een stacked icon gebruiken. Ik heb er een driehoek in gezet, zodat het voor de gebruiker helder is dat als ze er op klikken, er 'iets naar beneden klapt'. Dat mis ik zelf nogal vaak bij een stacked icon die _niet_ naar links of rechts beweegt. Het enige wat we dan weer niet hebben is de extra duiding. Een mix van de middelste en de laatste twee zal niet echt gaan werken denk ik. Het is onlogisch dat je rechts van onze merknaam drie bestemmingen hebt staan en om meer op te vragen je rechts van onze merknaam moet klikken. Sowieso moeten we dan direct ook kijken hoe we weer een directe link plaatsen naar onze frontpage. Dat kan eventueel een extra optie worden in de dropdown, maar ik vind dat we nu al erg veel opties hebben

[ormagon]

Ik denk dat het sowieso een goed idee is om in de navigatiebalk zo lang mogelijk de belangrijke onderdelen te blijven tonen. Dus wat dat betreft versie 1-2 en 3. De tracker is een functie die volgens mij heel herkenbaar is qua logo, maar ook een functie die voornamelijk gebruikt wordt door intensieve gebruikers van Tweakers (jullie hebben daar vast gegevens van).

Ik vind 'de middelste' versie dan ook het beste. Deze biedt net zoveel informatie maar maakt een belangrijke functie sneller toegankelijk.

[Misha]

Thanks voor de input. Ik ga hier verder intern nog wat over discussiëren. Wat collega's zeiden dat we wellicht een pay-off kunnen gaan gebruiken om het ook direct aan de bezoeker duidelijk te maken wat we doen en wie we zijn. Daarvoor dienen de navigatie-items nu ook, dus zijn ze vervangbaar. Als we dat doen, dan betekent dit dat op de kleinere devices de navigatie altijd soortgelijk is (dus altijd middels een hidden sidebar)

[Misha]

Ik sluit het topic nu even. Zodra we weer wat wijzigen/meer bekend over is kunnen we er over verder discussieren in een nieuw topic of deze weer openen