ribbon user interface design pitfalls

Here are several tips that will make your Ribbon UI look great across all Excel versions!

Tip 1: Where to add custom ribbon controls

Are you about to create a couple of custom Ribbon controls and you are wondering where to add them? This tip demonstrates why your controls shouldn't be located in the Home tab or any other built-in tab, contrary to the advice given in numerous tutorials.

The new Microsoft Office Ribbon User Interface (UI) replaced the old system of layered menus with a simple system optimized for efficiency and discoverability. All built-in Office tabs have been designed with user productivity in mind.

One of the Ribbbon's notable features is its ability to adapt the size of controls according to the space available inside a window. Obviously, the maximum size of any window depends on monitor resolution and orientation (landscape or portrait). So, controls like groups, buttons etc. can be shown in large, small, compact or in an overflow state.

The bounds of elements on the Ribbon are controlled by Microsoft's layout engine inside the Ribbon. The layout depends:

On the available horizontal space inside a window
The defined size of controls by the developer (Small / Large)
The state of autoScale property of groups (True / False)

Unless your application is deployed in HD or Quad HD 27/30+ inch monitors, any additional controls placed inside the heavily populated built-in tabs may force Excel's controls to resize. Users will have to adjust to an unfamiliar layout. Additional clicks will be required for navigating overflown controls, so frequently used controls will be harder to reach.

Custom controls inside built-in tabs wipe-out Ribbon's usability & discoverability benefits!

Excel's 2013 native Home tab fully expanded (1920 x 1200 monitor in Landscape mode)

Custom Ribbon group (My Tools) shown in Home Tab (1920 x 1200 monitor). Styles resized due to lack of horizontal space

Multiple groups shown in compact mode in a Ribbon Home Tab (1440 x 900 monitor)

Home Tab groups shown collapsed in a 1280 x 800 monitor

Partially collapsed Ribbon Home Tab groups (1200 x 1920 monitor in Portrait mode)

Public Sub RibbonDesignPitfalls()
    
    With rxCustomUI.defaultInstance
        .Clear
        
        With .ribbon.tabs.Add(New rxTab)
            .idMso = "TabHome"
             
            With .groups.Add(New rxGroup)
                .Label = "My Tools"
                 
                With .Buttons.Add(New rxButton)
                    .Size = rxsLarge
                    .imageMso = "SearchTools"
                    .Label = "Tool Kit"
                End With
                 
                With .Buttons.Add(New rxButton)
                    .imageMso = "Info"
                    .Label = "About"
                End With
                 
                With .Buttons.Add(New rxButton)
                    .imageMso = "TasksLink"
                    .Label = "Share"
                End With
                 
                With .Buttons.Add(New rxButton)
                    .imageMso = "ChangeFolderDownloadSettings"
                    .Label = "Settings"
                End With
                 
            End With
        End With
        
        .Refresh
    End With
End Sub

Tip 2: Assign a label & ImageMso attribute to custom Ribbon groups

The group's ImageMso icon is not shown, unless a Ribbon group has been collapsed to a single control. Several developers are unaware of this behaviour and neglect to assign an icon or image to the ImageMso property of groups. Even worse, a custom group without a label in collapsed state cannot be identified! Tips:

Assign values to the label and ImageMso properties of custom groups
Enable the auto-scaling group property (available in Office UI 2010 or later). When the Ribbon is resized horizontally, controls in 'auto-scaled' groups resize from large, to small, compact and finally to an overflow state depending on horizontal window size.

You can read about auto-scaling of custom controls here.

Overflow state without label and ImageMso attribute

Custom Ribbon tab with 2 groups in overflow state. Label and ImageMso properties assigned

Tip 3: Do not use icons that do not exist in previous Excel versions

Avoid using ImageMso built-in icons that do not exist in previous Excel versions or are available in low resolution only.

'Report ...' built-in icons shown in Excel 2013

'Access Report More' icon shown in low resolution. Plus, at least 2 built-in icons are not available in Office Excel 2010

Compared to Excel 2013, only a handful of icons are available in 2007

FAQs

Is there an easy way to find out which icons do/not exist in previous versions of Excel, without resorting to testing in those previous versions? None that we are aware of, plus

Even if an icon exists in an earlier version, it may not be suitable for use in large size buttons due to its low resolution
Some icons can be shown only as gallery items in resolutions equal or higher than 39 pixels e.g. 'Tree Down ...'

What happens if an icon doesn't exist in the Excel version I am using ?
The icon will not be shown. By default, no error message will be displayed by the Ribbon UI. However, any Office application can be configured to display messages for errors that relate to the UI. Please read about how to Show UI Errors

Is there any workaround for missing ImageMso icons in my Excel version?
External images or icons can be used to replace built-in icons. Please read about where you can find free icons or how flags can be used for sheet navigation.

How can I manage icons across several Excel versions?
It is quite straightforward to use Ribbon Commander's object model

'Example based on Ribbon Commander framework
     
    If Val(Application.Version) > 12 Then
        .imageMso = "GroupClearSearch"
    Else
        .imageMso = "ClearGrid"
    End If

Tip 4: Preview icons on the ribbon!

Don't just trust the 'looks' of icons shown in web pages, userforms etc, as 'what you see may not be what you get' in the Ribbon.

Icons or images can be previewed in the Ribbon dynamically (Excel 2007 or later) using our free/unlocked Dynamic Icon & Image browser VBA Add-in powered by Ribbon Commander

Tip 5: Gallery behavior depends on the getSelectedItemIndex callback

Gallery behavior is modified by Office, if the getSelectedItemIndex callback has been registered.

Office changes gallery items' behavior from button-like (items don’t get selected when clicked) to radio buttons-like (items get selected when clicked and stay selected afterwards) when the callback getSelectedItemIndex is registered. When a selected item gets clicked, the gallery onAction event doesn’t get fired.

If the getSelectedItemIndex callback is not used, then the selection highlight is not retained between visits to the gallery.

The Ribbon Commander framework offers a .persistentItemSelection property, which is set to rxFalse by default (items clicked in a gallery control don't get selected)

Click to Download Ribbon Gallery Demo workbooks

Tip 6: Use square size icons with transparency (.png)

Use square size icons with alpha-channel transparency (.png format) instead of a white background. Here is why:

Various icons shown in Excel 2007

Icons shown in Excel 2010

Icons shown in Excel 2013 - Notice that labels auto wrap

Tip 7: How to show an ampersand character in a label

Here is how to show an ampersand character in a custom tab label

Use the double ampersand trick, as a single ampersand character is interpreted as a shortcut key e.g. the accelerator key that is shown underlined and can be used to click a button while the ALT key is held down.

TOP: Text in Excel BOTTOM: How the text in shown in Menu buttons using Ribbon Commander

Tip 8: Create DPI-aware ribbon customizations

Writing a DPI–aware ribbon customization is the key to making the UI look of your add-in consistent across a wide variety of DPI display settings. An application that is not DPI–aware. but is running on a high DPI display or across monitors of different DPIs will be scaled by Windows to the appropriate size so that it is still usable, but can suffer from visual artifacts, including incorrect scaling of UI elements, clipped text and blurriness, as demonstrated in the screenshots below.

By adding support for DPI awareness level, you can present your application’s UI in a predictable manner. By updating your add-in to respond to dynamic changes in DPI, you create an application that is crisp, making it more visually appealing to users.

The desktop scaling factor is a percentage that indicates how Windows scales the UI of a desktop application, when its DPI awareness level allows scaling.

In general, the desktop scaling factor is based on the DPI.
Recommended small / large pixel sizes for ribbon icons:

96 DPI = 100% scaling - 16x16 & 32x32 pixels
120 DPI = 125% scaling - 20x20 & 40x40 pixels
144 DPI = 150% scaling - 24x24 & 48x48 pixels
192 DPI = 200% scaling - 32x32 & 64x64 pixels