The hidden navigation design of reading interface in iOS read it later

Article Description: read it later software's reading interface in iOS.

One of the most important characteristics of mobile device reading software is to enlarge the reading area as much as possible, to do so, you must make the screen as much as possible to minimize the navigation, or even hidden, mobile browsers are basically reading software, the recent popular Dolphin browser even the computer's "mouse gestures" into the mobile browser.

What is hidden navigation

The following figure is the reading interface for the read it later software in iOS, in addition to the top of the status bar, the reading area is full of the entire screen, no such as "back", "Off" navigation buttons, the actual buttons are hidden, I put this hidden invisible navigation called "hidden navigation."

Read it later reading interface

The common hidden navigation

Drop down Refresh

The most popular "hidden navigation" to count "Drop-down Refresh", the first to appear in the Twitter client's Drop-down update timeline features quickly popular in such software, iOS under the web version of Gmail, Sina Weibo, and even NetEase news, all use this design.

NetEase News client's Drop-down refresh

Slide left and right

Also impressive is the UC browser's forward back function, back as long as the thumb to the right slide, forward as long as the left to slide the finger, you do not have to find the forward back button, this set the browser full screen will not affect the fluency of the operation.

Similar design has a lot of, under the Yreader sliding is the previous article after the switch, in ibooks, QQ reading E-book reading software is left and right before and after the page. Android QQ Client's current session, friends and groups are three tags, left-right sliding can be from the three functional areas quickly switch.

QQ reading of the left and right page

Double click, long Press, return to top, etc.

In the top read it later software, the double-click screen is a pop-up bottom operation navigation menu; In Android, a pop-up menu appears (like the right menu under Windows); In almost all iOS software, Click on the top of the status bar is a quick return to the top (this seems to be system-level, do not believe you try), there are different locations based on the screen call out different functions, other hidden navigation design methods are many, no longer one by one repeat.

Design principles

Friendly Tips

Hidden navigation is invisible, there must be a tutorial or prompts the user how to use these features, generally this hint only occurs when the software is first used. These tips are particularly important, when users look at the full screen of text can not find return, may panic, many attempts have not been successful words are very likely to press the home button, forcibly quit, or even directly uninstall the software.

Tips for reading QQ

Avoid conflict, before and after, around, globally unified

The most beautiful reading software I have ever seen under iOS is the zaker,windows phone7, which integrates Sina Weibo, Googlereader's bindings, directories like Flipboard's carefully designed magazine, For a long picture, you can view all the pictures like a slideshow.

It hidden navigation design Double-click the text area is closed, if you accidentally hit the picture, the picture will be opened alone, this is not what users want. If browsing is Weibo, up to the top after sliding is loading the latest, browsing is subscribed to RSS, to the top and then Drop-down is to return to the list of articles, the same software in the same gesture unexpectedly different results, undoubtedly increased the cost of user memory.

The upper and lower is corresponding, the left and right are corresponding, if the gesture is to the left-hand side to browse left, then there is no doubt to starboard to the right to browse. In Tencent Love Fancy, in the article list, slide to the left is to view the subscription channel, slide to the right is invalid operation, in the article page, slide left or view subscription channels, right is to view comments. There is no relationship between the two and the feedback is different.

In NetEase reading to the top is "Drop-down refresh", to the bottom is "click to show the following 20", you can not be made up after the load after the 20 bar? I have to say, deliberate imitation, do not understand the extrapolate. Said the secret software in the same time the "pull refresh" and "drop load more". In addition to unification, the greatest advantage of doing this is to maintain the posture of the hand. General hand-held mobile phone is a single hand, the thumb operation screen, pull and pull down to maintain the original finger state, click the operation needs to lift the thumb and then press, click and then back up and down sliding state.

Mental models, user habits

The purpose of the scroll bar is to quickly locate the current position and page length, in the reader it later, a slender scroll bar appears when the page slides (does not cover the reading area, only to indicate the current position), and when the thumb is positioned at the right scroll bar on the screen, the scroll bar becomes black and thick For easy finger sliding and positioning. On the PC, the user is accustomed to the mouse wheel (the touch on the screen relative to the top and bottom sliding), want to jump quickly, is the direct mouse drag scroll bar, then the mobile phone users want to quickly drag the first thought of the inevitable is also drag the scroll bar, but in most mobile software, the scroll bar is not drag.

Reader it later scroll bar

Downgrade policy

Not all software is suitable for recessive navigation, software to give users the first impression is clear, concise, easy to use to win the praise of users, hidden navigation because of its obscure, difficult to remember the characteristics of the general application of advanced users, so should provide an optional downgrade strategy: For example, in the settings plus full screen browsing options, Let the user choose whether or not to hide the navigation bar.