Photo credit:

Bottenmenyer på mobilwebb

Vi befinner oss i slutet av en smärre revolution vad gäller navigation i Googles mobilappar. Från att varit uttalat för en app drawer eller app drawer plus toppmeny har de nu gått över till en app drawer plus bottenmeny. För oss webbutvecklare är detta både intressant och problematiskt.

Det viktiga att komma ihåg är att detta inte sker godtyckligt eller för att det “ser bra ut” (till skillnad från tex ikoner som enbart består av ofyllda linjer). Navigationen bryts ur en app drawer och flyttas till botten av två separata (men ibland överlappande) goda skäl.

  1. Obvious always wins Har du inte sett Luke Wroblewskis (något långa) dragning om varför det lönar sig att vara uppenbar så tycker jag att du skall göra det så fort du får tre timmar över. En superkort tl;dr för dig som inte har tre timmar liggandes: Out of sight, out of mind. Det vill säga; visa det du vill att dina besökare skall klicka på. Lägg det inte ett swipe bort för då får du färre klick. Obvious always wins: Tydlig textlabel konverterar bättre än en ikon. Ordet Meny slår hamburgerikon.

  2. Skärmstorlekar Mobiltelefon är större och det är bekvämare att klicka på en meny som ligger nära tummen.

Så, precis som det är en no-brainer att lägga en rad med tre fyra snabbval, i botten av en mobilapp så borde det vara detsamma för en modern webbplats. Paradigmet är mobil, inte App vs Mobil. Det som funkar bra i en app funkar med andra ord bra på en mobilwebb.

Eller?

Det är nu det blir lite lurigt. Jag läste bloggposten All Thumbs, Why Reach Navigation Should Replace the Navbar in iOS Design och tyckte det lät vettigt. Inget det står i den är ogörligt på en mobilwebb så det är bara att tuta och köra. Fast då hade jag inte tänkt på att vissa browsers har sina egna bottenmenyer.

En googling senare och det blev uppenbart att till exempel Safaris bottenmeny ställer till med en hel del problem för webbutvecklare. Inte nog med att den tar upp 44px när den visas, den tjingar konstant dessa 44px vad gäller touch events. Klickar en besökare i botten av sidan, där folk helt riktigt vill placera viktiga GUI element, så tar Safari över klicket och använder det till att visa sitt GUI.

Lösningen på detta varierar i grad av kompromissande från att se till att Safaris bottenmeny hela tiden visas till att placera GUI element flytande ca 45px från botten av skärmen.

Ingen av dessa lösningar är direkt fantastisk men frågan är vad som annars går att göra?

  • Lägga menyn i toppen av sidan som det var förr. Detta retar mig då det innebär att en potentiell majoritet[1] får en sämre upplevelse pga en specifik browser.
  • Olika placering av menyn i olika browsers. Detta känns motigt. Hålla på och trixa med separata kodbaser är något som bör undvikas in i det sista.

Vilket val som än görs så betyder det att en andel av en sidas besökare får en sämre upplevelse än vad de förtjänar. Alla siffror pekar på att både besökare och de som tillhandahåller webbplatsen hade tjänat på att menyn låg i botten, så allt annat är en kompromiss.

I just detta fallet så verkar det tyvärr som att en kompromiss är resultatet oavsett vad som väljs. Jag skulle rekommendera att den aktuella webbplatsens besökarstatistik skall vara avgörande. Då återstår bara frågan om vad som är en representativ majoritet. Räcker det att 51% har massa cruft längst ner i sina browsers för att resten skall få en sämre upplevelse?

På 24HRs egen webbsida har vi till exempel flest besökare från stationära datorer (runt 75%), men vi skulle aldrig drömma om att strunta i att mobilanpassa den bara för det.

Ett annat troligt scenario är att Google lägger till en bottenmeny i Chrome också[2] och plötsligt är det standard att mobilbrowsers har en död zon i botten av skärmen. Så varje lösning måste ta hänsyn till webbens konstanta förändring. Objektivt bäst är att ha en lista med browsers som får menyn i toppen och sen rendera menyn i botten för de övriga. Men som sagt… separata kodbaser gör ingen glad.

Nu har dessutom Apple gått ut och bett apputvecklare att INTE lägga interaktiva element i botten av skärmen på grund av hur iPhone X fungerar.

Avoid explicitly placing interactive controls at the very bottom of the screen and in corners. People use swipe gestures at the bottom edge of the display to access the Home screen and app switcher, and these gestures may cancel custom gestures you implement in this area. The far corners of the screen can be difficult areas for people to reach comfortably.

I slutänden kan jag inte annat än känna en viss uppgivenhet inför problemet. En inbyggd bottenmeny känns som en black om foten för allt utom de mest rudimentära webbplatserna. Är det det gamla “Webben är för dokument, till allt annat finns appar” spöket som visar sitt fula tryne igen?

1 Safari, Opera och Samsung Internet Browser har alla en bottenmeny med fram och bak knappar, bokmärkning, delningsmöjligheter etc. Chrome är dock generellt sett en vanligare browser men det kan som sagt variera från webbplats till webbplats.

2 Så, då har det hänt. Chrome har lagt URL-baren i botten av fönstret i Mobile Chrome.