-–app structure and navigation design of the finger-pointing signpost

A small mobile phone application, but all-encompassing, integration of this complex information content or functional logic. To let users get the best experience in the use, quickly grasp the application of the framework structure, the navigation design is an important link.

The navigation of mobile apps is similar to the role of signposts or maps in the real world. It is the virtual framework of the application software, which has the function of indicating identity and recognizing the user.

For example, as a signpost, navigation can be in use, locate where the user is currently, highlighting the current view of the user important features, to inform users where to go, in different views and areas to quickly switch information, record the use of the operation of the track to prevent users lost and so on. So how should navigation be designed?

The steps of app navigation design are mainly as follows:
1. App Framework collation: Information Architecture or Task analysis
2. Frame level judgment: flat vs Tree
3. Navigation specific manifestations: control form and placement

Why do I need a framework?
This is the same as building a building. Prior to building a magnificent building, all the small rooms in the buildings need to be planned in advance to ensure proper planning and arrangement of the building's structure. In the initial stage of app design, it is necessary to establish an app blueprint to ensure that in the course of software navigation design, designers can control the hierarchy of functional products and the relationship between them.

The method of frame finishing

In the process of building a blueprint, it is necessary to choose the appropriate method according to the characteristics of the app itself. The current application of app can be divided into two categories, the application of content browsing and the application of functional operation. For the application of content browsing class, it is necessary to classify the information data by means of information architecture. For functional operation, it is necessary to use the method of task analysis to form a network operation mode which can be closed loop.

Definition and usage of information architecture

Information architecture is a method of organizing and classifying information, which improves the usability and accessibility of information so that it can be recognized by users more efficiently and orderly.

This method originated from the library classification of books, the librarian by classifying similar books and numbering, so that readers can quickly and conveniently in the tens of thousands of books to find the books they need. With the development of computer science and technology and the increasing amount of information, this method has been widely used in the management of virtual data and informations, such as database, CMS (contents Management System) and web design.

The architecture of large-scale data information is complex, and the architecture of this kind of information needs professional information analyst to analyze and collate from multidimensional degree. In the actual mobile phone product design, the information is relatively simple, the analysis methods used for this kind of message are mainly: information structure, logic tree and card classification three methods.

Information structure is mainly from the physical world people have been universally agreed to the information infrastructure to arrange information, if the title of the song is arranged in 26 alphabetical order, the logical tree is the logical structure of the general cognition in the people's mental model, combing the information according to the tree logic, such as category information (color, Materials, etc.), subordinate information (red belongs to color, wood belongs to material); Card classification is to some uncertain information, according to user habits, through card classification and statistical methods, to classify information, in the electrical quotient of goods category and site map design has been widely used.

Definition and usage of task analysis

(Image source: University of York, HCI course handout)

Task analysis is an act of analyzing a series of actions or cognitive processes performed by a user to achieve a goal. Through the task analysis, the designer can make clear the function level order that the current app will implement and the state that the information passes in the system, so that it can grasp the structure of the product and the operation that the user needs to do in the design.

Task analysis of the first task needs to understand the user's goal, and then the user to achieve the objectives of the operation of the dismantling, at this time each operation can be seen as a original task. Based on the original task, the task is further disassembled according to the degree of need. In product design, the endpoint of a dismantling is generally considered a subunits that can be designed and analyzed separately.

After analyzing the frame structure of the app, the logic level of the product function is also basically determined. It is suggested that some framework drawing software can be used to record the analytic framework and form a big blueprint. In the later navigation design, many functions and arrangement can be designed directly from the position relationship shown in the diagram.

In the navigation design, often meets the functional level mainly is two kinds: one is the flat level, namely belongs to the function to belong to the same level in the frame blueprint, this mainly appears in the information architecture to be more flat, the same level task function more view, like dashboard and list design The other is the tree level, that is, the information architecture is more hierarchical or the task has a subordinate relationship between the user needs to layer in depth of the view, such as the single into the iOS in the single out of the level of navigation.

Dashboard is one of the most widely used modes in flat-level navigation design, where the homepage of the system and the portal of the app are applied as global navigation. In the mobile operating system, the general use of icons plus the number of messages in the form of a match, so that users in the first page that can choose to use the software features.

Following this idea, in the app design, the application of the first page will be flat level of information presented to the user to choose, can let users quickly positioned to focus on their own function points. The advantage of this navigation design is that the functional structure of the app is flat, the user can quickly understand the global architecture, and because the function choice is too concentrated on the home page, the level of the individual function should not be too complicated, and it needs to provide a quick return home setting so that users can make a choice again

The list design is designed for flat information hierarchies that are applied to content browsing classes, aggregating the same level of category information in a vertical list. Operating system, the use of the navigation design of the main address book, song list, store applications, such as the project name to arrange the flat area.

Similarly, in the app design, the category information more Electronic business application, by the single item name aggregation application, the information subscription type news class application navigation pattern, all belongs to the typical flat information level, therefore the list navigation design also very applies. And according to their own characteristics, there are some subtle differences. such as Taobao category directory navigation, categories in the design according to the user's use of the heat for the Top-down layout, and Eataly menu navigation, because the name aggregation more, on the right to provide a convenient choice of alphabetical index; BBC News navigation is similar to the integrated navigation of category information and entry information. Therefore, the list navigation in the design, in addition to the user focus on the heat from top to bottom, category columns can be conveniently put up or in the browsing process hover at the end of the page.

(Photo source: http://www.androidpatterns.com/)

The design of tree-like hierarchy is widely used in the design of mobile devices. Unlike the "breadcrumbs" that are used in the traditional PC era, the tree hierarchy allows users to enter from only one entrance and return to the same place from the only exit. This design pattern works well for applications that have a very complex portrait of the functional hierarchy or information architecture, and the user is able to move backwards clearly on a branch without worrying about losing the current location in the app.

There are two forms of tree-level navigation in app design. One is the navigation bar design in iOS. The user selects an item from the list navigation to go to the next level, returns to the previous level by the "Back" button on the left-hand position of the navigation bar, the entire navigation gives the user the feeling like to climb along the vertical in a big tree. Another design is the Metro UI design on Windows Phone7. As shown in the figure, the subordinate content of the hierarchy, as the tile is generally displayed in the same dimension, and the level of navigation in the way of the left and right, the design of the navigation so that users in depth by layer, also throughout the overall design.

Through the analysis and design of the previous two steps, the navigation structure of app can be regarded as the basic completion. But because there are so many mobile platforms, users use different habits. So in the specific design of the product, in order to provide the best user experience for the product, also need to grasp the platform characteristics, select the appropriate control form, and according to the user's handheld device operating system, for the user to design the most convenient location for navigation.

As with the tree-level navigation bar design, the iOS navigation bar control is arranged on the top of the screen, because in the use of touch screen, the top area is the most complete area of information display rate, in the process of finger operation, the region's information is not easy to be blocked by the movement of the hand. This navigation bar allows users to locate their current location in real time and the top-level interface that can be returned.

The entire navigation bar control consists of the return button, page label, and optional management Area three child controls. The back button is generally placed in the upper-left corner area, allowing the user to go back to the previous level through this key after browsing the tree-level information. The design of the button itself the return button corresponds only to unique entry information and does not allow multiple-level return buttons to be placed. The page label should be a high generalization of the current view information, corresponding to the display view title, ordinal position, etc. An optional management block can place some important operations on the screen to manage the content of the screen (e.g. Add, edit, Flip, delete, play, details, etc.). But only one Management button can be placed.

(Photo source: http://www.androidpatterns.com/)

For Android, tree-level navigation is more dependent on the lower hardware entity navigation controls. Mainstream Android hardware navigation offers four features: Back, menu buttons, mobile desktop, and search.

The return button lets the user return to the previous step of the function operation. Menu buttons can display the relevant actions in the current view, up to 6, but are slightly different from iOS's "optional admin area", which is generally a global feature operation and therefore not necessarily closely related to each view. Mobile desktop, user clicks will quickly return to the Android phone desktop, is a global navigation embodiment. A search button that opens the relevant search section of the software if there are search settings in the executing application, and if there is no search, the system's default search engine is invoked.

In summary, the mobile phone product navigation design needs to clear the design of the overall framework and structure, according to the characteristics of the hardware and user's use habits to design. Through rational architecture analysis, perceptual experience design, good navigation structure can make your app design more effective.

Reprint please specify from "Baidu Mux"