GUI elements and terminology

One thing I find that makes writing difficult is the confusing mass of terminology around GUI interface elements such as buttons, menus, pages, windows, tabs and so on. Many of the tools that I work with have standard elements that have standard names. For example in the Eclipse platform the main ones are workbench windows, perspectives, editors and views. There are also title bars, menu bars, progress bars and tool bars. Pop-up dialogs, status lines, wizards and other stuff. These elements and their names can be confusing enough… and this is relevant to most GUI interfaces, it doesn’t matter which platform, operating system, tool, product or technology you are talking about..

Those bits can be confusing, but what I find harder is when you start to get down to naming individual bits of a GUI. When is something a ‘page’ or a ‘tab’ or a ‘pane’ or even a ‘window’? Things like radio buttons, menus, drop-downs and check boxes can be fairly obvious to write about if they have good and meaningful labels. Harder can be interface elements within other interface elements, for example an editor that has several panes or boxes, and then other elements within that. Perhaps a tree structure, or multiple tabs or expanding sections.

Sometimes it can be really hard to explain or find the right terminology to talk about bits of an interface. Giving instructions can be really hard. Select a so and so from the such and such menu at the bottom of the right pane in the so and so editor. Ewww!

Another tricky area is buttons. Especially ‘smart’ buttons that seem to mutate and magically appear and disappear when you least expect it. And buttons all over the place. As a former IT trainer I have to admit to being rather keen on having buttons in places I expect. Especially in the place that I last saw them. It’s kind of embarrassing as a trainer to tell someone to click on the such and such button, and when they tell you they can’t find the button to have to admit that you can no longer find it either! This is also a problem when you are trying to write documentation associated with software! I don’t want to have to describe where on the interface they might be able to find the button they want! It’s also not terribly accessible to talk about the green button with a cross on it, fourth from the right hand side on the menu bar that is on the middle left beneath yellow arrows in the so and so editor. I exaggerate of course… but you get the idea!

I’m an advocate of keeping stuff simple, and especially keeping things consistent. I do sympathise with developers. But I think for the benefit of users and hapless technical authors, it might to have nice consistent GUI interfaces with easy to identify elements, that have an obvious way to name and locate them for the user. 🙂

An alternative I guess is to have a map of interface elements with labels giving a name to each sub-element within it. And maybe actually that would be useful in a number of ways – but you’d be surprised at how hard meaningfully naming bits of an interface can be!


2 thoughts on “GUI elements and terminology

  1. If you have the answer to the question “When is something a ‘page’ or a ‘tab’ or a ‘pane’ or even a ‘window’?” — please let me know 😀
    I’m trying to figure out what the distinct sections within a pane (which is part of a web page) are called called? For simplicity, those are dynamic in number and position as well … just to make things simple *sigh*

  2. 🙂 sounds complex – I don’t suppose the sections have handy titles you can refer to?

    According to the IBM style guidelines:

    A page is any document that can be accessed by a URL

    A pane is a separate area in a split window. A window can be split into two or more panes

    A panel is a formatted display of information that can also include entry fields

    A tab is a control used to organize distinct sets of information and to provide an easy means of navigating between these sets.

    A window is a part of the display screen with visible boundaries in which an application program or information is displayed. (although I would expect this to be self container like a pop-up or wizard)

    Um, maybe what you’re describing is a panel – got a screen capture? 🙂

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s