How we write user interface guidelines for wireframing
|
|
Many designers and developers use UI platform guidelines such as Apple’s Human Interface Guidelines or Google’s Material Design system to help them decide how and when to use the various UI components available to them. But these highly detailed guides are often too esoteric or technical for the purposes of wireframing, where designing an interface consists of simply dragging and dropping controls from the UI Library.
We feel that having guides that support the iterative and open nature of wireframing is an important part of Balsamiq’s whole product concept.
If you’ve been following our newsletter for a while, you will have seen the evolution of the user interface control guidelines we’ve written from our “UI Design 101” MVP to the version we migrated to our Wireframing Academy site.
While these guides served as a good foundation for UI design best practices, they were a bit dry and didn’t show many examples. Also, we only had 15 of them, which covered just a fraction of the controls commonly used in wireframes.
With this in mind, while searching for articles to share in our UX/UI Links of the Month, I came across several great articles by UI Designer Tess Gadd about UI “cheat sheets” for various kinds of UI controls. They were engaging, easy to follow, and a great mix of practice and theory. So, we reached out to her and asked her to write a similar series of articles for us, but more specific to using UI controls in wireframes.
And now, I’m really proud to officially announce the first batch of articles from her. Check out the first 6 brand new guidelines on the updated UI Control Guidelines page of our Wireframing Academy. They include Buttons, Text Input, Dropdown Menus, Radio Buttons, Checkboxes, and On/Off Switches.
|
|
Even better, she’s in the process of completing guidelines that will cover all of the UI controls available in Balsamiq Wireframes, so that, whatever you’re designing, you can find help on how to use each control and best practices for using them, including visual examples of what to do and what not to do.
Stay tuned for another batch of guidelines coming soon, with more to follow over the next several weeks.
But wait, there’s more!
As a special treat for you, our inner circle, we’re giving you a preview of part of Tess’s upcoming guide on designing Menu Bars. Application and navigation menus are central to organizing and getting around in websites, mobile apps, and desktop applications. The tips below should help you the next time you’re wireframing and know what pages or screens you have but aren’t sure how to group them or how users should get to them.
If you find this helpful or have any feedback before it goes live, we’d love to hear from you. Just reply to this email and let us know what you think.
|
|
Advance Preview: UI Guidelines for Menu Bars and Menus by Tess Gadd
|
|
The top-level navigation of a website is called a menu or a navigation bar (navbar). These links allow users to move through different pages or screens. On larger websites, there may be instances where multiple links will get stored under one main link, creating a dropdown menu.
|
|
App navigation on mobile is closer to browser navigation, as it allows you to switch between pages.
This pattern is often confused with tabs. However, there is an important distinction between the two: tabs navigate between similar panes, whereas mobile app navigation switches between different pages.
|
|
Application menu and dropdown menus
|
|
Unlike website navigation, application menus don’t take you to different pages; instead, they surface options for you to interact with. These options can include settings (e.g. view), formatting options (e.g. edit), analytic tools (e.g. word count), creation options (e.g. insert image), and much more.
|
|
Application menu that shows current settings
|
|
Some settings in the dropdown menus are actually toggles that allow you to switch something on or off. If that is the case, you can show that it is currently active by using a checkmark.
|
|
Balsamiq how-to:
Using formatting text in Balsamiq, you can show what settings are currently active.
|
|
|
Application menu that shows shortcuts
|
|
Most robust applications or programs encourage the user to use hotkeys or keyboard shortcuts. These shortcuts are often indicated next to the action in the dropdown menu for ease of reference.
|
|
Balsamiq how-to:
You can show keyboard shortcuts or right-aligned text in a menu by separating the text with a comma (,).
|
|
|
Application menu with multiple levels
|
|
Depending on the complexity of your software, you can have multiple levels of dropdown menus. For websites, this isn’t encouraged as it is not the best user experience. However, you can get away with it for software applications so long as the sub-menus are logically ordered.
|
|
Balsamiq how-to:
You can create an arrow in menus by using the right chevron (>) after the text.
|
|
|
An options or kebab icon is a button that launches an options menu. These menus should contain ways that the user can interact with the current page; they shouldn’t be used to navigate too far away.
|
|
There are a few best practices when it comes to menus and menu bars. Overall, you want to make navigating as simple as possible for the user.
|
|
Consider adding a secondary navigation menu
|
|
Sometimes there is not enough space in the primary navigation. You can either reduce the number of pages or add a secondary navigation menu with the less important pages at the top.
|
|
Add a dropdown arrow to show that there is a dropdown menu
|
|
While not always adhered to, it is best practice to include a dropdown arrow if an item in a navigation bar will reveal a dropdown menu. This lets the user know what to expect.
|
|
Keep responsiveness in mind
|
|
When designing primary navigation for websites, you should always consider how it scales down for mobile or scales up for desktop. In a desktop design, you should be able to see all the essential pages, whereas on mobile, you should be able to collapse all the pages under a hamburger menu.
|
|
Only put links that will be used often in the top menu
|
|
Only links that you expect users to interact with often should be in the primary navigation. All other essential links should sit at the bottom of the page in a footer.
|
|
Your links’ labels should be as straightforward as possible. You should avoid jargon and keep your labels short and simple.
|
|
Choosing what goes in the menu
|
|
There are many different schools of thought about how to choose what goes into a menu. Here are a few techniques that you can try to determine what should be in your top navigation.
|
|
Plot links according to suspected popularity
|
|
Order your links by which ones are used the most often. Once you have ordered them, draw a line separating what should be in the primary navigation and what should be in the footer. There is no exact rule as to where the line should be drawn, but remember that your top navigation should only include the links your users will use the most often. As a rule of thumb, avoid including more than 7–9 links in your top navigation.
|
|
Once you have decided on your top links, test it with users and see if they agree.
|
|
While it is good to look at what the users will interact with the most often, you may have a business rule or requirement that means you may have to push some pages more than others. If this is the case, plot your links on a matrix and prioritize the ones that users use the most often and the ones that make business sense.
|
|
Once you have created these groupings, you can decide what is the most important. You can also test which navigation structure leads to more sales.
|
|
Affinity sorting is organizing similar concepts into groups. Unlike the previously discussed methods, this one is better when you have many interactions, like in software or application designs.
To use simplified affinity sorting for navigation, create category groups, then plot the different pages or links into each group. These groups can become the top-level navigation link, and the items in each group can become options in the dropdown menu.
|
|
One of the best ways to do affinity sorting is to interview users and ask them how they would group different pages or user journeys.
|
|
Product news
|
 |
|
|
We shipped a few new features recently!
You can now search our documentation and contact support directly from inside the app (from the Help menu), and you can quick-draw arrows by holding down the A key and drawing the arrow with your mouse.
Also, if you use Balsamiq Cloud on a touch-enabled device, you will now be able to use a new toolbar, which lets you draw several shapes with your fingers. It’s SUPER fast and intuitive, check it out:
|
|
Wireframing Academy news
|
 |
|
|
|
Some highlights from this past month:
|
|
As usual, August is a slower month for us, as many of our employees take vacation. We’re still working on lots of projects though, including running a great internal workshop on stress management, planning for our Q4 engineering work, and wrapping up 2020 financial accounting work.
Help us make Balsamiq Better! We want to offer a pleasant and solid wireframing experience across devices. Please, complete this survey if you'd like to help us learn and improve on this topic. It's quick!
Sponsorships and raffles: We’re back with more of our upcoming sponsored events, including REFACTR.TECH, Render(ATL), MicroConf Local, and more!
|
|
That's it for this month!
|
|
As always, thanks for reading, and riding along with us on our journey.
See you next month, with more behind-the-scenes news from your friends at Balsamiq!
|
|
 |
Leon for the Balsamiq Team |
|
|
|
|
|
