Tweakers mobiel Redesign

[maxplanck]

Hallo Tweakers,

Ik ben nieuw hier op het forum. Nadat ik mijn mening moest laten gelden in de review over het responsive project van Tweakers.net vond ik dat ik de daad bij het woord moest voegen.
Dus ben ik in Sketch aan de slag gegaan om wat ideetjes over de mobiele website van Tweakers vorm te geven. Dit is het resultaat geworden, je kunt hem het best bekijken op je telefoon:



Een van mijn uitgangspunten was dat de mobiele site makkelijker leesbaar moet zijn. Daarvoor heb ik de typografie groter gemaakt en meer lijnhoogte gegeven. Ik heb ook van een horizontaal en verticaal grid gebruik gemaakt zodat alle elementen netjes op hun plek staan en het ontwerp niet rommelig wordt.

Een ander uitgangspunt was dat de gebruikerservaring van bezoekers beter wordt. Hiervoor heb ik voor ieder onderdeel gekeken of het noodzakelijk is om te laten zien. Vervolgens keek ik hoe dit het beste kan worden gepresenteerd en wat ik er persoonlijk het mooiste uit vind zien .

Nu ben ik vooral benieuwd wat jullie ervan vinden! Zou je hiermee willen werken? Wat vind je goed? Wat vind je slecht? Ik hoor het graag.

Dit is voorlopig alleen de homepage omdat ik er door mijn onverbitterlijke perfectionisme langer mee bezig ben dan ik durf toe te geven. Afhankelijk van jullie interesse ga ik misschien de pagina van een nieuwsitem met reacties uitwerken. Ik heb er in ieder geval al een paar ideetjes voor.

Ik denk persoonlijk dat de huidige oplossing voor de navigatie de meest intuïtieve en begrijpelijke manier is. Hieronder staan nog wat mogelijkheden, welke vinden jullie de beste?



Fijne wedstrijd alvast!

Thomas

[Misha]

Wat tof dat je dit hebt gedaan! Het ziet er leuk uit. Een paar punten alleen

- Je gaat er een beetje aan voorbij dat met een responsive design, er ook bepaalde restricties zijn. Zo kun je geen eigenlijk geen content tonen die er niet is op bepaalde grades, tenzij je die op bepaalde grades gaat verbergen of injecteren met extra code. Bij Tweakers wilden we dat juist niet hebben. Ik vind je frontpage op de mobiel aardig leuk ogen en we hebben ook dergelijke ontwerpen intern gehad, maar die haalden het allemaal niet domweg omdat we dan ook de 'desktop site' moesten aanpassen. Vandaar dat het uiteindelijk gewoon de eenvoudige lijst is geworden. Ik had zelf heel graag een kleine thumb gehad voor ieder artikel, maar gezien we die ook niet op de normale site hebben, zit die ook niet op de site als je met je telefoon of kleine tablet gaat
- Op Tweakers zijn er gi-gan-tisch veel use cases. Iets wat veel van onze power users veel gebruiken, is de tracker. Deze zie ik niet in je ontwerp terugkomen. Wellicht zit hij onder de drie bolletjes, dat kan. Ook zie ik niet direct het profiel. Bij de bolletjes denk ik zelf eerder aan de normale navigatie, en niet expliciet meteen aan de navigatie als ingelogde gebruiker (waarbij je ook meteen bij je eigen profielpagina's kan komen, je DM's en je notificaties. Deze laatste wordt de afgelopen tijd ook steeds vaker gebruikt door het vernieuwde notificaties bij het reactiesysteem).
- Ik vind het geheel niet fijn scannen, mede doordat de datum _na_ de headline staat. Wat ik zelf doe, is dat ik terugscroll tot het moment dat ik al op tweakers ben geweest en vanaf daar weer 'omhoog' lees. Ik weet dat anderen het andersom doen: die scannen van bovenaf tot ze bij het tijdstip komen waar ze waren gebleven. Bij jouw oplossing moet je veel te veel zoeken naar de datum, wat het scannen er lastig maakt. Ik denk dat je interace op deze manier wel wat makkelijker kan zijn voor de nieuwe gebruikers, maar niet voor de poweruser
- In de footer zie ik "desktopsite" staan. Die hebben we natuurlijk niet we hebben 1 site, die zich toevallig schaalt naar je apparaat. Ik gebruik daarom ook steevast aanhalingstekens daarvoor, ook in het commentaar hierboven
- De grijze subnavigatie vind ik erg elegant en kan best wel gebruikt worden voor bijvoorbeeld de categorybar, goede suggestie
- Als ik je plaatje open op mijn smartphone, dan zie ik vrij weinig. Op een smartphone heb je heel weinig schermruimte tot je beschikking, en moet je dus kiezen. Uit de besloten beta-periode bleek al heel vlug dat het praktischer was als we gewoon zoveel mogelijk headlines boven de 'fold' (where ever that one may be) moesten tonen, en tegelijkertijd voor onze marketingafdeling die persé altijd de ankeilers in beeld wilden hebben ze toch te tonen (overigens is dat niet negatief naar markering: het is een goed en valide punt van hun). We zijn daardoor uiteindelijk op dit uitgekomen, wat volgens mij een prima oplossing is
- Je hebt ons logo mooi verstopt, maar wat voor nut heeft dan nog het logo? Dat is ook de reden waarom ik enkel tweakers in zijn geheel heb laten staan en fancy oplossingen voor het logo achterwege heb gelaten

Zo, genoeg getypt, tijd voor slaap

Nogmaals, leuk dat je er zo fanatiek mee bezig bent geweest!

[maxplanck]

Bedankt voor je bericht. Mijn idee was om vanuit dit ontwerp ook een nieuw ontwerp voor tablets en de desktop te maken (de mobile-first benadering). Ik denk namelijk dat zowel mobiele als desktop bezoekers het prettig zullen vinden om plaatjes op de homepage te zien. De content wordt voor alle resoluties dus anders.

De knoppen voor het profiel zitten in het ontwerp achter het Tweakers logo. Het getal 2 dat daar wordt weergeven staat voor het aantal notificaties maar dat moet inderdaad duidelijker gemaakt worden.

Ik ken geen power users en waarom zij de tracker gebruiken, maar ik stelde me voor dat zij naar de website gaan op een desktop. In de huidige mobiele website kost het twee tik acties om bij de tracker te komen en dat is niet erg praktisch als je bijvoorbeeld ieder half uur wilt kijken of er updates. Het lijkt mij handiger om daar een aparte pagina aan te wijden in dezelfde stijl zoals ik de homepage heb ontworpen.

Ik weet natuurlijk dat er geen aparte desktopsite is maar de bezoeker weet dat niet, of hoeft dat niet te weten. Voor hem/haar is het woord "desktopsite" veel begrijpelijker dan "Weergaveopties”.

Wat ik jammer vind dat de huidige mobiele website is dat er eigenlijk niets interessants staat op het eerste scherm dat je ziet. In mijn geval vind ik de uitgelichte reviews bijna nooit interessant, terwijl ze veel ruimte innemen. Daaronder staan een aantal koppen van nieuwsberichten die ook niet mijn aandacht trekken omdat er geen afbeelding of pakkende tekst bij staat. Het is altijd even doorbijten om erdoorheen te komen (dat is overdreven) omdat de homepage mijn aandacht niet trekt en vasthoudt. Ik moet eerst een selectie van een artikel maken die mij interessant lijkt en de lead doorlezen om te weten of ik het daadwerkelijk interessant vind.

Je hebt gelijk wat betreft het logo, het is beter om die helemaal te laten zien. Uit interesse: wat voor telefoon heb je?

[Misha]

tjaadvd schreef op zondag 06 juli 2014 @ 09:58:
Bedankt voor je bericht. Mijn idee was om vanuit dit ontwerp ook een nieuw ontwerp voor tablets en de desktop te maken (de mobile-first benadering). Ik denk namelijk dat zowel mobiele als desktop bezoekers het prettig zullen vinden om plaatjes op de homepage te zien. De content wordt voor alle resoluties dus anders.

Een dergelijke strategische aanpak zou echter betekenen dat we heel veel zaken volledig opnieuw moesten ontwikkelen. Die resources hadden we simpelweg niet. Vandaar dat retrofitten (je bestaande site responsive maken) de enige logische optie was voor ons om een responsive design te doen. Mochten we wel de resources hebben gehad om alles opnieuw te doen, dan weet ik ook niet of we voor mobile-first waren gegaan. Ik heb sowieso wat moeite met die strategie wanneer het aankomt op een website a la Tweakers, die al jarenlang bestaat en bulkt van de user scenario's

De knoppen voor het profiel zitten in het ontwerp achter het Tweakers logo. Het getal 2 dat daar wordt weergeven staat voor het aantal notificaties maar dat moet inderdaad duidelijker gemaakt worden.

Dat had ik er niet direct uit gehaald

Ik ken geen power users en waarom zij de tracker gebruiken, maar ik stelde me voor dat zij naar de website gaan op een desktop. In de huidige mobiele website kost het twee tik acties om bij de tracker te komen en dat is niet erg praktisch als je bijvoorbeeld ieder half uur wilt kijken of er updates. Het lijkt mij handiger om daar een aparte pagina aan te wijden in dezelfde stijl zoals ik de homepage heb ontworpen.

De power user komt op onze site met wat voor apparaat hij dan ook maar in zijn handen heeft. De tracker is eigenlijk niets meer dan een activity stream die vanaf iedere pagina oproepbaar moet zijn, zonder dat je persé naar een andere pagina hoeft te gaan. Dat is alleen wat tricky op de mobiel. Voor nu vind ik de oplossing voor de tracker good enough

Ik weet natuurlijk dat er geen aparte desktopsite is maar de bezoeker weet dat niet, of hoeft dat niet te weten. Voor hem/haar is het woord "desktopsite" veel begrijpelijker dan "Weergaveopties”.

Heel goed punt. Ik denk dat dat vooral geldt voor nieuwe bezoekers, onze vaste bezoekers hebben er denk ik wel een beter begrip van (en dat is even een forse aanname gebaseerd op mijn jarenlange Tweakers lurking )

Wat ik jammer vind dat de huidige mobiele website is dat er eigenlijk niets interessants staat op het eerste scherm dat je ziet. In mijn geval vind ik de uitgelichte reviews bijna nooit interessant, terwijl ze veel ruimte innemen. Daaronder staan een aantal koppen van nieuwsberichten die ook niet mijn aandacht trekken omdat er geen afbeelding of pakkende tekst bij staat. Het is altijd even doorbijten om erdoorheen te komen (dat is overdreven) omdat de homepage mijn aandacht niet trekt en vasthoudt. Ik moet eerst een selectie van een artikel maken die mij interessant lijkt en de lead doorlezen om te weten of ik het daadwerkelijk interessant vind.

Ik kan me dit wel voorstellen, maar dat is wederom een restrictie aan onze gekozen strategie.

Je hebt gelijk wat betreft het logo, het is beter om die helemaal te laten zien. Uit interesse: wat voor telefoon heb je?

Ik heb het even gecheckt met mijn Nexus 5, iPhone 4S en HTC Desire op portrait. Daarnaast kun je je het e.e.a. wel voorstellen hoe het eruit zou zien in landscape

[maxplanck]

Ik begrijp dat mijn voorstel redelijk wat ontwikkeling vereist en dat jullie het goed vinden zoals het is.

Mijn doel was eigenlijk om te laten zien hoe de mobiele site een betere gebruikerservaring (UX) kan bieden. Mijn motivatie was eigen frustratie en ik kan me voorstellen dat andere Tweakers hetzelfde ervaren. Omdat ik al een lange tijd Tweakers bezoek vond ik het jammer om te zien dat de hele website naar mijn mening achterloopt op het gebied van UX. Ik zou het zonde vinden als Tweakers hierdoor niet verder groeit en de aandacht krijgt die hij verdient.

Ik had het liefst een blogpost willen maken om te horen hoe andere bezoekers over het ontwerp denken, maar kwam er pas later achter dat je daar een reputatie voor nodig hebt Het zou leuk zijn als er via deze weg alsnog bezoekers laten weten wat ze ervan denken.

Edit: Nu ik even rondkijk in het forum vraag ik mij af of jullie er geen baat bij zouden hebben om een UX Designer aan te nemen. Nu worden er 100 berichten gewijd aan een vlaggetje (Dat lelijke vlaggetje rechtsboven) terwijl iemand met UX ervaring daar makkelijk een oplossing voor kan bedenken. Ik ben beschikbaar

[ Voor 17% gewijzigd door maxplanck op 06-07-2014 14:59 ]

[Quas]

Persoonlijk vind ik de mobiele site ideaal werken. Het hoeft geen krantje te worden met kleine verhaaltjes en als je er op klikt dat je dan het hele bericht leest.

Wat ux betreft mag tweakers de review pagina aanpakken en er echt iets moois van maken, het zijn nu vooral lange nieuwsberichten en niet iets bijzonders.

[dmvdberg]

Om nog een andere mening te geven. Ik was erg blij met de Tweakers App op iOS.
Daar zat enorm voor potentie maar ik snap natuurlijk dat een responsive design veel meer kosten dekkend is.

Voordelen naar mijn idee van de app:

• In App aankopen van bv abbonomenten, karma uitgaven etc
• Camera support voor uploaden foto's (reviews, forum)
• Betere UX van van Tweakers profiel pagina
• Snelheid / Buffer in de app voor dingen opzoeken
• Wenslijsten maken
• Notificaties & Messaging

Dat gezegd hebbende. De mobiele variant ben ik momenteel erg te spreken over!
Daar hoeven echt geen plaatjes bij de artikelen.

[ Voor 3% gewijzigd door dmvdberg op 07-07-2014 09:41 ]

[Femme]

tjaadvd schreef op zondag 06 juli 2014 @ 09:58:
Bedankt voor je bericht. Mijn idee was om vanuit dit ontwerp ook een nieuw ontwerp voor tablets en de desktop te maken (de mobile-first benadering). Ik denk namelijk dat zowel mobiele als desktop bezoekers het prettig zullen vinden om plaatjes op de homepage te zien. De content wordt voor alle resoluties dus anders.

Het ontbreken van aantrekkelijke visuals op de frontpage is iets dat we zelf ook onderkennen en waar we in de toekomst wat aan willen doen. De huidige lijst met headlines is zeer doelmatig voor onze vaste bezoekers, die in één opslag kunnen zien wat er nieuw is op de site. Een incidentele bezoeker die we meer moeten verleiden om onze content bekijken zal niet snel aangetrokken worden door een lijst met kale links. Door de compacte weergave van de headlines hebben we ook nog eens erg weinig mogelijkheden om content anders dan nieuws en reviews aan te keilen op de frontpage. Er is effectief erg weinig ruimte omdat onze gebruikers niet scrollen op de frontpage (want niet nodig).

De knoppen voor het profiel zitten in het ontwerp achter het Tweakers logo. Het getal 2 dat daar wordt weergeven staat voor het aantal notificaties maar dat moet inderdaad duidelijker gemaakt worden.

In algemene zin vind ik dat we er qua navigatie naar moeten streven dat de overeenkomsten op de verschillende device grades zo groot mogelijk zijn (nu zie je op een desktop nog een compleet andere header dan op een mobiel device). Op een klein scherm is er logischerwijs minder ruimte. Een hamburgericoon waar een inschuifbaar menu achter zit is een ingeburgerd ontwerppatroon dat we goed kunnen hergebruiken. Het logo wijst bij ons altijd naar de frontpage. Het zou niet consequent zijn om notificaties er achter te verborgen in de layout voor mobiele devices.

tjaadvd schreef op zondag 06 juli 2014 @ 14:31:
Ik begrijp dat mijn voorstel redelijk wat ontwikkeling vereist en dat jullie het goed vinden zoals het is.

Edit: Nu ik even rondkijk in het forum vraag ik mij af of jullie er geen baat bij zouden hebben om een UX Designer aan te nemen. Nu worden er 100 berichten gewijd aan een vlaggetje (Dat lelijke vlaggetje rechtsboven) terwijl iemand met UX ervaring daar makkelijk een oplossing voor kan bedenken. Ik ben beschikbaar

Discussies zoals die over het vlaggetje hou je toch wel. Er spelen nu eenmaal verschillende belangen. Helaas hebben we niet de middelen om de hele site altijd up to date te hebben met ons laatste inzicht over over Tweakers eruit zou moeten zien of zou moeten functioneren, dat gaat moet kleine stappen vooruit.

[jopie]

- Ik vind het geheel niet fijn scannen, mede doordat de datum _na_ de headline staat. Wat ik zelf doe, is dat ik terugscroll tot het moment dat ik al op tweakers ben geweest en vanaf daar weer 'omhoog' lees. Ik weet dat anderen het andersom doen: die scannen van bovenaf tot ze bij het tijdstip komen waar ze waren gebleven. Bij jouw oplossing moet je veel te veel zoeken naar de datum, wat het scannen er lastig maakt. Ik denk dat je interace op deze manier wel wat makkelijker kan zijn voor de nieuwe gebruikers, maar niet voor de poweruser

Dit vind ik ook een punt in de huidige responsive forum weergave. Daar zie je niet het tijdstip van de posts in je bookmark overzicht, terwijl er genoeg ruimte voor is.