Reading a magazine on a tablet can be a challenging thing – especially when there is no good navigation and the user does not know where to go next at the end of a page. In fact, there are four possible directions to swipe to.
Here I show you seven examples of great navigation that improves the usability for the reader.
INSPIRE (BY ADOBE)
The bottom right arrow shows that the user has reached the end of the article and would have to scroll up to go back to the beginning of the article. However, it does not tell the user where to scroll next in order to read the NEXT article. The user has to find that out himself. Adobe should have thought about the user-friendliness a bit more here.
I did the ZMK Aktuell app for the Spitta Verlag in Balingen (Germany). Based on the print design, the user can see the category in the top right corner. At the bottom left, the user sees where he currently is (third page of three pages of the article). To the right of it you see „zum Artikelanfang“ (translation: „back to start of article“). By tapping this, the user is directed back to the beginning of the article (page 1/3 in this case). The bottom right arrow shows the user to scroll to the right to get to the next article.
THE RED BULLETIN
At the end of each article in the Red Bulletin, the user sees small arrows pointing to the left and to the right. They indicate where to scroll for the previous or next article. The home button in the middle directs the user back to the starting page of the app magazine. The app icon top left opens up the content table. Well executed, I think.
The Wired Magazine (UK edition) has a black navigation bar on the left handside all the way through the article. The white arrow pointing down shows the user to scroll down to continue reading the article. Reaching the end of the article, the white arrow pointing up with the hint „top“ explains exactly what it does.
Based on the print editorial design of my long-term client Blickpunkt LKW+BUS, I designed the app magazine. The white arrow at the bottom right shows the user to scroll down to read the article. The black arrow in the bottom right corner tells the user to swipe to the right to get to the next article. The white arrow with black outline brings the user back to the beginning of the article when tapping on it.
The navigation of the ZF Drive app is really interesting. A plus symbol in the light grey box at the bottom left opens up the navigation. Reaching that, the user can go to the Kiosk, start page, table of contents, to the previous or next article. The minus symbol closes the navigation again.
INFOGRAPHICS BY HCG CORPORATE DESIGNS
When creating my app „Infographics by HCG corporate designs“, I decided to go for a consistent white menu bar at the bottom of each page. As this is not a magazine but a collection of static and interactive/animated infographics I’ve designed over the years, it’s quite practical for the user to go to different pages at any time. The arrows pointing left and right show how to get to the previous or next page.
If you want to publish your publication on a tablet, simply get in touch with me to get a free quote.