Wat zullen we gaan doen met de inhoudsopgave?

[Misha]

Om maar meteen met de deur in huis te vallen:

Ik zou graag jullie input willen krijgen over de inhoudsopgave bij reviews. Op de huidige website (die je krijgt als je de site via de desktop bezoekt) hebben we een simpel lijstje met alle pagina's van de review. Gezien op de desktop gebruikers vooral met muizen of andere zeer precieze inputmethodes (Wacom tablets) werken, volstaat een simpel lijstje met links prima.

Voor devices waar touch als input wordt gebruikt, is een compact lijstje met linkjes eigenlijk niet gewenst. Je krijgt al heel gauw last van het fat finger syndome. Dit is natuurlijk eenvoudig op te lossen door bijvoorbeeld veel ruimte tussen de URL's te houden, maar dat wordt niet bepaald mooi. Ik zou graag wat input van jullie willen hoe jullie denken dat we hier het beste mee om kunnen gaan.

Een paar ideeën die ik zelf al heb:
- Toch ruimere marges, dan is het maar minder mooi
- De inhoudsopgave in een dropselector plaatsen, zoals we ook doen met de quick links op het forum en de acties. Dit zie ik best vaak op verschillende websites wat aardig goed werkt. Het OS zorgt er dan voor dat er voldoende ruimte is om een item in de dropdown te kunnen selecteren. Het nadeel is alleen dat je niet direct weet hoeveel pagina's er zijn, hoe uitgebreid de review is... je mist domweg het overzicht. Iets wat we nu wel hebben en ik graag zou willen hanteren
- We geven het ruimere marges, maar zetten er ook borders omheen voor de scheiding en een evt. background color/gradient. Dit maakt het voor een gebruiker direct goed duidelijk waar hij moet klikken en de kans op een misklik is een stukje kleiner. Het behoudt het overzicht, maar zorgt er ook voor dat de inhoudsopgave in zijn totaliteit een stuk meer ruimte inneemt. (guidelines zeggen bijv. dat een klikbaar element op een touchdevice een oppervlakte moet hebben van min. 44px hoog en 44px breed. MS zegt overigens dat het wel iets kleiner kan, waar ik het mee eens ben. Maar stel dat een review 8 pagina's heeft, dan wordt het 9x44px hoog. Wat een beetje veel is )

Wat is jullie idee? Hebben jullie voorbeelden van sites waar van jij het vind dat ze het enorm goed doen?

[Martinspire]

Een dropdown lijkt mij het makkelijkst en mooist. Als je dan in de waarden van de dropdown iets doet als: "1/6 Inleiding" weet je meteen hoeveel pagina's het is. Al kun je er natuurlijk ook voor kiezen om alleen de paginanummers weer te geven zoals je op het forum ook de pagina's weergeeft onder het topic.

Meeste sites die ik tegenkom, werken overigens niet meer met pagina's maar zetten alles gewoon onder elkaar. Hierdoor krijg je wel lange pagina's, maar dat is volgens mij ook niet zo erg. Verder heb je dan soms nog wel een index erbij (bv The Verge) zodat je wel snel naar andere plekken in het artikel kunt gaan. Vind dat zelf overigens ook wel de beste oplossing, maar gok dat dit niet zomaar kan in het CMS van tweakers

[Misha]

Alles op 1 pagina zetten gaan we niet doen en zit iig buiten de scope van dit topic . Ik moet wel zeggen dat ik een mega lange pagina op de telefoon niet prettig vind... ik denk ook dat je 3G-verbinding kan gaan stuiteren.

Een dropdown zou wel lekker wat opruimen. De link naar de volgende pagina wil ik sowieso wat dikker aankleden zodat ook deze goed klikbaar is (tomshardware heeft wel een aardige). Dan valt die ook direct wat meer op.

Paginanummers zal denk ik niet lekker gaan werken... we tonen niet alle pagina's, maar als gebruiker wil je wel snel naar een specifieke pagina kunnen gaan (de use case is ook wat anders dan bij het forum, waar je niet weet waar die specifieke pagina over gaat. Bij een review weet je dat wel)

[Elfjes]

Ik denk dat een dropdown-menu icm met een volgende-- en vorige-knop een vrij goed werkende oplossing is. Wel is het dan handig om deze zowel boven als onderaan de pagina te plaatsen zodat je na het laden van de review niet hoeft te zoeken om te kijken hoeveel pagina's er zijn.

[TimmiX]

Ik zou kiezen om standaard de vorige en de volgende 'reviewpagina' te tonen met daarnaast een knopje/button om het menutje met alle pagina's in en uit te klappen (togglen). Dit menu dan met meer marge weergeven bij de kleinere (mobiele) devices en gewoon zoals het nu is bij de desktopversies.

Dan is het geen onhandig dropdown menu en kunnen met met custom css (of eventueel misschien een algemene setting) het menu standaard uitgeklapt tonen als ze dit liever willen. Dan laat je de mensen zelf kiezen wat ze prefereren.

[hylke94]

Martinspire schreef op woensdag 07 augustus 2013 @ 12:06:
Een dropdown lijkt mij het makkelijkst en mooist. Als je dan in de waarden van de dropdown iets doet als: "1/6 Inleiding" weet je meteen hoeveel pagina's het is. Al kun je er natuurlijk ook voor kiezen om alleen de paginanummers weer te geven zoals je op het forum ook de pagina's weergeeft onder het topic.

Een dropdown met het aantal pagina's (1/6 "pagina") lijkt mij het handigste. Ten eerste omdat de meeste telefoons wel een mooi "extern/pop-up overzicht" geven zodra je de dropdown aanklikt. En je kan meteen zien (zonder de dropdown aan te hoeven tikken) hoeveel pagina's de review bevat.

[Rafe]

"Pagina: [1 v] / 6" waarbij de [1 v] een dropdown is? Zou wel mooi zijn dat je dan in het OS-afhankelijke keuzemenu dat dan verschijnt wel de paginatitels kan zien

[Misha]

Rafe schreef op woensdag 07 augustus 2013 @ 14:50:
"Pagina: \[1 v] / 6" waarbij de \[1 v] een dropdown is? Zou wel mooi zijn dat je dan in het OS-afhankelijke keuzemenu dat dan verschijnt wel de paginatitels kan zien

Maar dan zie je niet meer de titel van de pagina. Dat lijkt me niet gewenst. En de V zou buiten de dropdown moeten staan lijkt me

Allen, alvast bedankt voor de input! Ik ga morgen ff wat mockupjes maken

[Rafe]

Die v is het pijltje dat m'n Android laat zien, n00b ASCII-art Overigens zie ik net dat het forum eigenlijk dit nu al doet.

Maar wat is het nut van het zien van de paginatitel op de pagina waar je al bent? Die heb ik bovenaan de pagina al gezien en als ik ze met een touch op [1 v] te voren kan toveren ben ik tevreden. Dan zie ik daar wel opties a la:
1: inleiding
2: bladiebla
3: oeroeboeroe

[ Voor 12% gewijzigd door Rafe op 07-08-2013 15:02 ]

[posttoast]

Absoluut dropdown (zoals de acties op het forum). Maar dan wel met paginanummers en titels erin, niet enkel paginanummers.

Als je me dit een paar dagen geleden had gevraagd had ik een ander antwoord gegeven, maar ik merk dat ik het op het forum heel fijn en intuïtief vind werken.

Edit: eigenlijk precies wat Rafe zegt. Ik hoef de titels op zich enkel te zien in de uitklapper.

[ Voor 15% gewijzigd door posttoast op 07-08-2013 15:06 ]

[filenox]

Elfjes schreef op woensdag 07 augustus 2013 @ 12:51:
Ik denk dat een dropdown-menu icm met een volgende-- en vorige-knop een vrij goed werkende oplossing is. Wel is het dan handig om deze zowel boven als onderaan de pagina te plaatsen zodat je na het laden van de review niet hoeft te zoeken om te kijken hoeveel pagina's er zijn.

Dat lijkt mij ook de beste oplossing Zoiets dus?

[ Voor 48% gewijzigd door filenox op 07-08-2013 16:38 ]

[BeefHazard]

Dropdowns zijn mobile iig het meest wenselijk. Op die manier laat je aan het OS over hoe deze het aan de user toont (volledig scherm, mooie 3d effecten etc). Dit regelt ook dat de ruimte alleen verloren gaat wanneer de user het wil zien en je dus niet een hoop ruimte nutteloos weg moet geven. De andere vraag is dan wel weer hoe je zorgt dat alle paragrafen duidelijk worden.

Of: Je maakt rechts van de pagina een reeks knoppen die je aan kan klikken voor PC's en op mobile devices gebruik je een dropdown. Beste van 2 werelden.

E: Concept incoming

[ Voor 19% gewijzigd door BeefHazard op 07-08-2013 16:51 ]

[Misha]

Als we voor een dropdown gaan, dan zou het denk ik uiteindelijk zoiets worden:

[_David_]

Misha schreef op woensdag 07 augustus 2013 @ 22:43:
Als we voor een dropdown gaan, dan zou het denk ik uiteindelijk zoiets worden:

[afbeelding]

Niks mis mee, toch?

[soczol]

Lijkt me inderdaad prima

[Misha]

Ik vind de presentatie niet bijster mooi maargoed, daar kan Femme altijd nog even naar kijken

[posttoast]

Hij kan eventueel naast de "deel" knop met alleen de tekst "inhoudsopgave" erin. Als je er dan op klikt zie je alle pagina's. Is misschien geen standaard gedrag voor een dropdownselect maar hier op het forum werkt het ook prima met de "acties" dropdown.

[hylke94]

Het volgende-knopje lijkt mij wel een beetje groot, maar dat is eventueel op te lossen met de margin/padding... Voor de rest ziet het er goed uit!