How to design fixed position elements in your interactive prototypes
Using fixed position UI elements can speed up the navigation of your UX design and keep users happy
When we design a web or mobile experience from scratch, a lot of the time it’s a game of lassoing elements and components so that they don’t fly all over the interface. That usually requires a firm understanding of complex coding methodologies such as CSS Grid or wrapping your head around a UI framework like Bootstrap or Foundation.
In Justinmind, however, everything is done for you. If you want a fixed position element in your prototype all you need to do is drag one onto the canvas and it’s ready. These fixed position elements are useful if you want to create dynamic user interfaces where some components move while others stay static.
With that in mind, we are going to show you how to design fixed position elements in your interactive prototypes so you can create interesting and fun UI designs.
Image credit: Pixel Push
What is a fixed position element?
A fixed position element is an element which has a fixed position relative to the viewpoint. That is to say, it doesn’t move when the rest of the page scrolls.
A navigation bar at the top of a website or at the bottom of a mobile app is usually fixed in its position and that’s why when you scroll, it will stay there.
Every element on a web page is a block, a simple rectangle. We put content into these rectangles and then position them where we want on a webpage. When we talk about positioning elements on a page, we are figuring out where exactly to place those elements and what sort of behaviour those elements will have.
Prototype fixed position elements in your UX designs. Download Justinmind.
What other types of positioning are there?
Aside from fixed position element, there are other types of positioning frequently found in web and mobile applications. They are:
- Static: all elements are static by default meaning the elements will flow into the page as expected
- Relative: elements are positioned relative to their normal position
- Absolute: elements are positioned separately from one another
- Sticky: elements are positioned based on the user’s scroll position
Fixed position elements: dos and don’ts
Fixed position elements are great because they’re 22% quicker to navigate than static elements. Imagine you’re on a page with a ton of content and you get halfway down the page. Then, suddenly, you’re bored of the story and want to move on. On many websites, this would involve arduously scrolling back to the top of the page to navigate elsewhere.
It might not seem like a lot, but that is taxing for the user because there’s additional clicks and movements in the flow. It’s disruptive. A fixed nav bar is always there, like a reliable friend, if you need to go elsewhere – saving you having to go back to the top of the page.
However, it’s not all UX navigation heaven with fixed position elements. If they’re designed too large they can become cumbersome and intrusive to the overall design and user experience of a web or mobile application. If a navigation bar is too large on a mobile, it possibly takes up too much real estate and dominates the layout.
A fixed position element can disrupt UX design in other ways aside from its size. Because of its fixed nature, it can be difficult to see the content underneath it. A workaround to this issue is to have a navigation bar that’s slightly transparent so users can see through it, although this may not be the best design solution to your problem.
Let’s look at how you can implement and experiment with fixed position elements in your web and mobile prototypes in Justinmind. This way you can find out which method works best for you.
How to prototype a fixed position element for your website or mobile app
First, you want to open Justinmind and create a new prototype. In this instance, we’re going with a web prototype with the default dimensions. But if you wish to customize your design to your own preferences, go ahead. We’ll show you how to create a fixed position navigation bar.
Now in front of you, you should have your blank canvas ready to be designed upon.
In Justinmind, we already have a wide range of pre-defined widgets that can make your life easier when designing user experiences for web and mobile. And don’t forget we have a whole library of additional free downloadable widgets.
Among the pre-defined widgets in Justinmind is a group called Parallax Elements. In there you’ll find numerous pinned elements such as left, right, top and bottom. For our top navigation, we want to use the floating menu widget. Place it at top of your canvas.
You’ll see a default menu – this is entirely customizable to your own needs and wishes. Before you customize it, however, we should make sure all the elements are fixed, as we want them.
The menu, by default, will not show when users are at the top of the screen. When users scroll, then the menu will appear. You can decide at what position on the screen the menu appears in the Events panel – when you’ve decided the functionality then you can begin to customize it.
When you’ve adjusted the setting to how you want them, you are free to style and customize the menu as you see fit. Remember that all elements in the floating menu are grouped together.
And that’s how you create a fixed position navigation bar, with a little help from Justinmind. It’s entirely possible to create a sticky element for the sidebar in the same way. If you wanted your sidebar to be fixed to the right, then you would follow the above but use the pinned right widget.
Fixed position elements are a useful way of keeping key navigational features on the screen in the view of the user at all times. This allows for quick navigation through a web or mobile application’s flow and saves the user having to scroll back to the beginning. Because who wants to waste time scrolling?
- The ultimate mockup tool to design websites and mobile appsOur powerful mockup tool lets you create and share highly interactive mockups, while getting feedback on every aspect. Your whole team can benefit from enhanced collaboration and seamless developer-designer handoff. And best of all? It's absolutely free to download.