With more and more users leaning towards mobile devices than desktop systems, creating mobile first designs has become a necessity for web designers. When creating designs for the mobile, most of us, pay attention to improving the look and functionality of the design and making it simple enough for users to understand. However, we overlook how the navigation works. Remember, providing navigational aids is equally important to offering great mobile first designs.
In essence, rather than just craving for visual simplicity we need to ensure that our visuals are easy to navigate. Wayfinding is an excellent technique that helps inspire us to introduce navigation to our designs.
Understanding the Significance of Wayfinding
Wayfinding, as the name suggests, inform about our surroundings and how we can navigate in the virtual space around us.
We all depend on hints in our environment, to figure out where we’ve been and where we should head to next. For instance, if you have taken a flight to a place, you can recall your experience to know what you need to do when boarding a flight in an unfamiliar airport.
Similar to the way we find directions in real life, we also look for information when browsing the web via our mobile. And, probably we are bound to experience the same frustration and struggle we went through while searching for our intended destination.
A Look At Wayfinding Concepts
There are three different wayfinding concepts that can be implemented into mobile and responsive designs for making navigation easier for the users:
1. Circulation systems
It represents an infrastructure allowing people to move around inside a fixed space. In simple words, they help define the navigation path to users. It facilitates users diversified options to reach to their intended destination. When it comes to designing for the web, circulation systems acts as navigational structures like the hierarchical tree menu, nested doll navigation used in mobile web applications, etc.
2. Spatial cues
Circulation systems shows the path, determining people where they need to move further. Spatial clues, on the other hand, determines the observable qualities of a space, making people know their surroundings. Web designers depend on the spatial clues to help users locate the path they need to navigate. There are two form of spatial clues: landmark and edges.
Landmark: In terms of UI design, a landmark are elements placed in a fixed position that helps visitors know about their position relative to those elements. Let's take a look at some elements (the ones that are visible throughout a site):
- Logo
- Guide us to return to the home screen
- Primary navigation
- Provide access to landing pages, helping users to explore other sections quickly.
- Breadcrumbs
- It serves as a ladder that enable users to traverse up the site map
- Search
It provides an alternate way to users to find out about the required information.
Edges: As the name implies, tell us about the boundaries where we can tap targets (i.e. area of clickable links and buttons). When we talk about UI design, defining the edges of the objects as well as regions of mobile device help users become acquainted with its interface quickly.
3. Signage
This concept is about incorporating instructional signs, symbols and iconography guide people how to navigate in their mobile devices. In mobile design elements such as menus, labels, buttons, etc., serves as signage. Since symbols take less space compared to text, they're massively used in UI designs. Considering the fact that, people make use of images and text in a different manner, it becomes needful for designers to keep certain factors in mind, when determining: how and when an image or text should be used. Here are a few ways that will let you know how you can utilize icons effectively.
Using Icons: Icons are considered to be one of the most effective means that enables people to communicate information. In addition, they even help highlight navigation options of a mobile device screen. One downside to using icons is that they can be misinterpreted, as users often find some icons that are hard to understand. But icons work in an excellent way when they people are familiar to them. Let's take a look at some of the most common icons:
- + (Plus): Adds or expands
- - (Minus): Remove item
- x (Cross): Close or Exit a window and more..
Text Labels: Well-written text labels compared to icons are more easier to understand. In mobile designs, text makes it easier for users to scan and process different options. Especially, text helps you understand the meaning behind icons that you might not be aware of. For example, as you can see in the below screen shot there are a lot of symbols in the web design that you might be able to relate to, however the text written beneath those symbols clearly define what they're meant for.
Wrapping Up!
There exists a lot of difference between the physical and digital space, however, there is a similarity between them in the manner how we familiarize and determine where we need to move in both those spaces. Just like we depend on cues in our surroundings to know where and how we need to go to our destination, similarly there are visual cues using which we can understand how we can navigate smoothly in a mobile design. This can be done effectively with help of wayfinding assistance.
About the author: Lucie Kruger is an application developer working with Mobiers Ltd, the leading mobile app development company. She provides concrete information on latest technologies like iOS, Android mobile apps development.
0 comments:
Post a Comment