Navigera med tangentbordet

För webbplatser som är tillgängliga är detta inget nytt. En webbplats som är tillgänglig innebär att du ska ha möjlighet att använda webbplatsen oavsett dina tekniska eller personliga förutsättningar. Det vill säga om du använder en äldre dator, har en mindre skärm eller har någon form av funktionsnedsättning.

Jag ser en trend i att fler och fler har börjat med tangentbordsnavigering, vilket är en bra sak ur ett UX-perspektiv. Kort sagt skapar du genvägar till sidor och funktioner på din webbplats som användaren kommer åt via olika tangenter.

JavaScript biblioteket Mousetrap gör det ganska enkelt att komma igång. Med Mousetrap kan du ange tangenter som CTRL, Shift eller Alt att utföra särskilda funktioner på din webbplats. Vilket även fungerar bra i äldre webbläsare.

Agus på Hongkiat har skrivit en bra guide i hur du kommer igång med tangentbordsnavigering och Mousetrap.

Läs guiden How To Add Keyboard Shortcuts To Your Website →

Recension av nyhetstjänsten Omni i mobilen

Senaste tiden har jag börjat använda mig mer och mer av nyhetstjänsten Omni. Till en början via webbläsaren på iOS men senaste veckan via deras iPhone-app. Bra konvertering där! 😉

Efter några veckors användande finns det några saker jag tror skulle förbättra användarupplevelsen för mobila användare. Jag säger tror för jag har ingen aning om Omni-gänget har gjort några användartester på deras nuvarande version. Fullt möjligt att det är en vinnare av flera tester, jag kan ha fel.

Tänkte ändå skriva ett par rader med förbättringsförslag baserat på min erfarenhet av användartester för mobila appar/webbplatser och jämför också med några andra nyhetstjänster.

Positivt

  • Väldigt snygg och stilren tjänst överlag, bra typsnitt och fördelning av artiklar.
  • Liten navigering, fokus på innehåll – bra!
  • iPhone-appen: Direkt vid uppstart får jag tillgång till innehållet – bra!
  • iPhone-appen: Vid klick på menyknapparna har jag fortfarande möjlighet att gå tillbaka till innehållet
  • Djupdykningsalternativet ”Läs mer om” gillar jag också
  • Bra att ni inte har en annons högst upp som täcker 60-70% av min mobila enhet – tack.

Element med förbättringspotential

  • iPhone-appen: Likvärdiga ikoner för Huvudmeny och Nyhetsmix
  • Ingen meny i sidfoten/bottenläge
  • Ingen ”Tillbaka till toppen” länk i sidfot/botten

Mina förbättringsförslag

iPhone-appen

  • Ändra ikonerna för Huvudmeny och Nyhetsmix, de är väldigt lika varandra
Omni's toppnavigering i mobilen
Omni’s toppnavigering i mobilen

Vet att ”hamburgarikon” börjar bli utbrett men med text blir det tydligare och särskiljer sig mer från ikonen för Nyhetsmix. Alternativt lägga en border runt ikonen mer likt en knapp.

Också nyfiken på användningen av ”Toppnyheter” och ”Senaste nytt”, behövs båda eller är det en markant skillnad mellan dem?

Både responsiva sajten och iPhone-appen

  • Lägg in huvudmenyn i sidfoten/bottenläget så användaren snabbt kan byta kategori
  • Lägg in en ”Tillbaka till toppen” knapp
Omni's bottennavigering i mobilen
Omni’s bottennavigering i mobilen

* I iPhone-appen dyker toppnavigeringen upp när jag börjar scrolla uppåt igen men en meny i sidfoten/bottenläget ger ännu snabbare åtkomst till nyhetskategorierna.

Menynavigeringen i sidfoten/bottenläget hos andra nyhetstjänster

SvD och DN's bottennavigering i mobilen
SvD och DN’s bottennavigering i mobilen

Ergonomin i mobilen

När det gäller användarmönstret för mobila enheter har Luke Wroblewski skrivit en intressant bloggpost om beteendemönstret i våra olika enheter. Läs gärna Responsive Navigation: Optimizing for Touch Across Devices

Ergonomin i mobilen

Navigering i mobilen

Det var lite snabb feedback kring nyhetstjänsten Omni. Om du är en i gänget vore det kul att höra hur ni resonerat.

Fortsatt skön sommar!

Tack för en bra tjänst och Happy Optimizing!