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
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

See Every Room Inside the 2022 Kips Bay Decorator Show House Dallas

Friday, September 23, 2022

Plus, 10 parks every design lover should visit View in your browser | Update your preferences Architectural Digest AD PRO Logo THE 10 PARKS DESIGN LOVERS NEED TO VISIT IN PERSON AD PRO asked design

User Experience Research (UXR) for Engineers

Friday, September 23, 2022

Why should you care what the user says and what to do about it ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

11 Design Studio Supplies That Pros Actually Use

Friday, September 23, 2022

Plus, more sourcing inspiration. View in your browser | Update your preferences Architectural Digest AD PRO logo image One of designers' greatest tools for promoting their business is their own

Make a Button, Randomness CSS, Color Fonts, Sustainable Products, Research vs Vision

Friday, September 23, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar September 23 2022 How to (not) make a button pustelto.com How

Is Your Next Big Break Going to Be in the Metaverse?

Thursday, September 22, 2022

Plus, this best-selling Pierre Frey pattern is getting an upgrade View in your browser | Update your preferences Architectural Digest AD PRO Logo Pierre Frey Toile de Nantes fabric and wallpaper THIS

Sharpen Your Skills: Finances

Thursday, September 22, 2022

AD PRO's Guide to Professional Development (image) Architectural Digest AD PRO Logo Sharpen Your Skills Let's talk finances. Designers are aptly attentive to details—from finishes and trims to

🎯 Engaging Productivity App Designs + 🏆 Challenge Updates

Thursday, September 22, 2022

Open Up This Week's Designer Digest 📖 First off, we'd like to congratulate CypheroxTechnologies, the winner of our latest 🍟 McDonald's Website Challenge! Also, here's a friendly

QR Codes, Details & Summary, Palette.fm, Validation UX, Watch Design

Thursday, September 22, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar September 22 2022 QR Codes typefully.com Ever wondered how a QR

This Room-Expanding Design Trick Is Having a Moment

Wednesday, September 21, 2022

Plus, 9 underrated decor ideas pros love View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Furniture, Chair, Indoors, Room, Interior Design, and Living

Toolbox Weekly 26 - UI Garage, Screely, Tint & Shade Generator, Doppel Me

Wednesday, September 21, 2022

Read on Website Toolbox Weekly 26 Follow on Twitter | Connect on Facebook | Visit Website Hello Creators on the internet, here is this week's stash of cool tools. My favorite this week is "UI