A Special Preview of Balsamiq’s New and Improved UI Control Guidelines

The latest news from Balsamiq:
Learn about our completely rewritten UI control guidelines and get an exclusive preview of an upcoming guide.
Trouble viewing?
View it online.
How do you decide what goes into a navigation or app menu and where? Read on to find out!

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

Types of menu bars

Website menu

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 menu on mobile

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.


Options dropdown menu

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.
 


Best practices

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.
 


Make your labels direct

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.
 

Plot links on a matrix

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

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:

UX/UI links for August 

Company news

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!
 
Notable recipients of our Free Software Program:

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
Tweet
Website
Email Balsamiq
View in Browser  |  Update Your Preferences  |  Unsubscribe

Older messages

Should Balsamiq Have a Podcast?

Wednesday, July 28, 2021

What's it like to host a podcast? Should Balsamiq start one? The latest news from Balsamiq: What's it like to host a podcast? Should Balsamiq start one? Trouble viewing? View it online. There

Balsamiq’s Unique Way of Thinking about Sponsorships

Tuesday, June 29, 2021

Why sponsorships are an important way of giving back, and how we've been doing them. The latest news from Balsamiq: Why sponsorships are an important way of giving back, and how we've been

How to Design a Sign Up Flow in Balsamiq

Friday, May 28, 2021

Designing a Sign Up flow for a web app is much harder than you'd think. Let's go through it! The latest news from Balsamiq: Designing a Sign Up flow for a web app is much harder than you'd

How to Make the Most Out of Balsamiq Cloud’s Collaboration Features

Wednesday, April 28, 2021

The best wireframes come out of several rounds of feedback and iteration. Let's explore how to do so in Balsamiq Cloud. The latest news from Balsamiq: The best wireframes come out of several rounds

Education Is a Feature of Balsamiq's Whole Product

Wednesday, March 31, 2021

Learn how our company values drive our marketing strategy. The latest news from Balsamiq: Learn how our company values drive our marketing strategy. Trouble viewing? View it online. We're about to

#320: New CSS Techniques

Tuesday, September 28, 2021

Richer, life-like CSS shadows to better form outlines, responsive background images, clip-path and multi-line background gradients. Issue #320 • September 28, 2021 • View in the browser 💨 Smashing

iPhone Experience, Red & Green, Okhsv and Okhsl, Globalizing UX, Interactive Play

Tuesday, September 28, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar September 28 2021 The iPhone experience told by the accessories

✏ UX vs UI Design, The Speed of Time, How to Start a Freelance Business, and more...

Monday, September 27, 2021

How to Start a Freelance Business QUICKSPROUT.COM COMMENTS The 25 Best Website Designs-and the Creative Businesses that Power Them SHOPIFY.COM COMMENTS The Speed of Time BRENDANGREGG.COM COMMENTS UX Vs

Learn How to Wireframe Your Website Copy with Balsamiq

Monday, September 27, 2021

Writing marketing copy can be tough for a product person. Here are some tips for improving the content of your website. The latest news from Balsamiq: Writing marketing copy can be tough for a product

A First Look Inside The Iconic Home Show House

Monday, September 27, 2021

Plus, a first look inside The Iconic Home Show House (image) Architectural Digest AD PRO Logo The US Now Has a Museum Dedicated to the American Arts and Crafts Movement Read More → interior renderings

An Artist's Country in the City Bed-Stuy Home

Monday, September 27, 2021

Design editor Wendy Goodman takes you inside the city's most exciting homes and design studios. Design Hunting A visual diary by Design Editor Wendy Goodman Nivola in his home studio. Photo: Annie

Accessibility Weekly #259: The Accessibility of Conditionally Revealed Questions

Monday, September 27, 2021

Sponsored by Automattic. They're hiring. September 27, 2021 • Issue #259 View this issue online or browse the full issue archive. Featured: An update on the accessibility of conditionally revealed

Accent-Color, FettePalette, Access Guide, Colorblind Accessibility, Self Provisioning

Monday, September 27, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar September 27 2021 Simplifying Form Styles With accent-color

✏ The Developer Experience Case, How To Get Testimonials, Markdownify Editor, and more...

Sunday, September 26, 2021

How to Get Testimonials and Use Them the Right Way [Infographics] QUICKSPROUT.COM COMMENTS 19 Examples of Beautiful Blog Layout Designs QODEINTERACTIVE.COM COMMENTS Markdownify - A Markdown Editor in

Sketching as a strategy

Sunday, September 26, 2021

Issue 59: The value of keeping things sketchy ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌