|Menu Tree - www.lushai.com|
- Provide means to go from a place to another without overcomplicating the connections.
- Communicate the relationship between the elements it contains.
- Communicate the relationship between its contents and the page the user is currently viewing.
This type of navigation design provides access to the main areas or key points of a site. Every place where the user wants to go, eventually, will arrive there.
In this kind of navigation design, the user moves through the parent, siblings and children. Moreover, this style provides access to nearby elements in the architecture.
This navigation design provides shortcuts to different parts of the architecture that are not easily reachable by global navigation or local navigation but at the same time maintaining a hierarchical structure.
Sometimes while navigating content, the user need extra information. Instead of scanning through the content or outside the site, it adds hyperlinks embedded to the extra data. Not understanding the user needs and using this type of navigation design can lead to confusion.
It's useful to provide elements that are not needed on a regular basis but they are provided because of convenience. Typical examples are feedback forms, contact information and policies and principles.
In this design, the navigational device is not embedded in the structure and it's independent from the content or the functionality. For instance, site maps and index (also called "web site A-Z indexes") are clear examples of this type. When a user can't find what he wants using the other kind of navigational styles he lean toward to this type. The site map is a outline of the architecture of the site with links in a hierarchical order. Site maps usually provide two levels of depth at maximum. The most common way of generating index navigation is with a list of links of important elements alphabetically ordered.
Screen Layout Diagram
These are all the elements that forms the interaction context and how they are placed into a window or page. The layout defines the size, spacing, emphasis the GUI elements and location of the elements. Good layouts helps users to find what they are looking without forgetting the visual appearance. Nowadays is a highly searched characteristic in the market for products of any kind. Google's Play Store and Apple's App Store have basic guidelines that each app can follow concerning design, screens layout and also internal programming structures and details. Sometimes the process starts drawing the layout in paper with the elements placed to see how well they suit. There are also tools like inVision and balsamiq which facilitates designing layout prototypes with predefined drag-and-drop elements.
PatternsAlthough how we access the information is important also it is how the user consume it. Users unconsciously use different patterns while reading the content of a website depending if attracts or repulses the attention.
Users reads from the left to the right and from the top to the bottom following the layout or visual structure of the page. During the reading, most of the words are read but the content that seems unimportant or requires a lot of effort is skipped. This pattern is assimilated to the pattern used while reading a book
In a study conducted by Jakob Nielsen, he recorded how 232 users look at thousands of website pages. Their findings indicate that the looks like an F shape and has three components:Using heatmaps for tracking eye movements he distinguishes an F pattern.
In this pattern, the user scans the page starting in the upper left corner and ends in the lower right. The upper right corner, strong fallow area, sometimes is being notice and the lower left corner is called weak fallow area. This way of scanning path is also known as Guttenberg Path.
Small Screen Pattern
In devices where the screen size is limited like smartphones and some tables, the scanning pattern is different. The path starts in the upper left corner and goes down until the end of the screen following a straight line. Once the device is turned right, the screen width is expanded and the pattern converts to something similar to the reading pattern.
"Monologue conversations" explain to the user everything. They answer every question that he could have without involving the user. Sometimes it is a good approach but the user doesn't have a voice in deciding what to read or what to omit.
|Sign Up with Long License|
Pyramid inverted style conversations display a summary with the important or essential information first and continues progressively disclosing details of content. This approach let the user decides when to stop reading because he finds sooner the useful information and if he think it is necessary he can continue reading for extra data.
|Inverted Pyramid Style|
They are documents that compile and explain all the information regarding a software product (or suite of products) user interfaces. In general companies include templates, design control and rules, logos, colours, typographies, illustrations and photographies. The main purpose is to have centralised storage for consistency developed in an iterative process and to communicate user experience standards across an organisation.
Some important concepts should be kept in mind while creating or updating a styleguide.
- Keep the audience in mind - Different people inside a company such as developer, designers and business analysts can use these elements.
- Plan for success - Think in advance what can make your styleguide successful in your organisation.
- Keep it alive - Styleguides become soon outdate, for that reason they should be produced in way that they can be easily maintained and supported.
- Define a review process - Define a specific process for reviewing and modifying the styleguide.
- Think of the platform differences - The different platforms available in the market make us to choose if we support a specific platform or be neutral. If it is neutral in reference to the platforms, will be harder to maintain and bigger the spreading.
- Socialize the document in your organisation - Promote the use of it throughout all the levels of the organisation. This ensures that everybody knows the existence, understanding and actively use of it. The more, the better.
- Clearly define mandatory and flexible standards - Ensure supporting new platforms and new creative ideas setting mandatory standards that are also flexible.
- Make the styleguide as scannable and searchable as possible - Facilitate searching and browsing capabilities that will make easier to find what they are looking for. Visual examples are desired always if possible.
- Provide real world example - Illustrate with examples from real applications to demonstrate your point. Try to cover as many applications if it is a large organisation with different applications.
Everything counts at the moment of enhance the user interaction, so better focus effort on it.
"Interaction design is about behaviour, how things work. [...]Defining what happens when a person uses a product or service is what interaction designers do.[...]The reason we do it is to enable connections interactions between people.[...]All of these things and many, many more are about connecting people and helping them communicate better between themselves and the world." (by Dan Saffer)