2

Backstory

A discussion came up in my organization where we're looking at the conventions for ordering the Forward/Backward and Front/Back buttons for our desktop application, which runs on Mac, Windows and Web. This is for the z-ordering of elements on a canvas, so keep in mind that Back means below or down in the z-order and Front means above.

I think it has made for an interesting problem, since there doesn't appear to be a single pattern that's followed in different platforms. I've found a few different conventions in use, looking at standard Mac and Windows applications.

Keynote groups Back/Front and Backward/Forward. Note that Back is on left and Front is on right.

Keynote and Pages

Pages

Microsoft's puts the Front and Forward actions first. PowerPoint puts all of the arrangement functions in one dropdown in the Ribbon and Word separates under 2 groups.

PowerPoint

PowerPoint

Word

Word

Also of note is that Sketch moved and combined these controls in the toolbar and Front/Back is now accessible if you press Option while clicking the Forward/Backward buttons. Adobe buries Arrangement under the menus.

Here is my question.

There are some conventions within the Mac and Microsoft product families. We're trying to use familiar patterns.

On the Mac arrangement the order of buttons is left/right. My gut instincts tell me that perhaps this arrangement is reflects other patterns like the rewind/fast forward controls we're familiar with in audio/video controls? Maybe it's a right-handed bias? Another designer I've spoken to thinks it's more obvious that a left button would imply moving up in Z order, and Right button would imply moving downward. We don't agree on this. Interesting to note that he's left-handed and I'm right-handed.

One observation that I can make about the Microsoft drop downs is that since they are arranged vertically in their ribbon drop down, it make sense that Front is above Back.

So the conundrum is this. Our buttons for arrangement have been horizontally oriented in our UI for years now. We are trying to reflect the conventions from familiar applications so the are quickly recognizable, but we have different opinions on whether Back or Down is intuitive on the left or right.

Given that we don't want to change the horizontal arrangement, can you offer any insight into what you think the convention should be and why?

How would you approach this issue?

  • Is this even a problem? I mean, do you see users having difficulties finding the right button in a reasonable time? – jazZRo Mar 26 at 8:08
  • A quick look at OmniGraffle for MacOS, they put forward and front under the same button and backward and back also (toggled with Option key). So is there a convention? I guess the only convention is using icons with labels, in conjunction with grouping to promote the discoverability. – jazZRo Mar 26 at 8:14
  • @jazZRo Sketch has done the same as OmniGraffle. I believe they used to have separate icons, but they also use a key modifier to toggle between front/forward, back/backward. We do use labels. We're just wanting to make the design in each platform reflect expectations, or conventions if there are any on each platform. – Mike Mar 28 at 3:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.