CHI-WEB Archives

ACM SIGCHI WWW Human Factors (Open Discussion)


Options: Use Forum View

Use Monospaced Font
Show Text Part by Default
Show All Mail Headers

Message: [<< First] [< Prev] [Next >] [Last >>]
Topic: [<< First] [< Prev] [Next >] [Last >>]
Author: [<< First] [< Prev] [Next >] [Last >>]

Print Reply
Mathijs Panhuijsen <[log in to unmask]>
Reply To:
Mathijs Panhuijsen <[log in to unmask]>
Wed, 11 Apr 2007 17:37:37 +0200
text/plain (90 lines)
Hello everyone,

I'd like to hear your input on a fairly fundamental design choice for
the user interface to a content management application, which I'm
helping to design. This application runs in a browser and allows its
users to edit content in the browser window.

The GUI must include a large number of controls (over 30, so they
wouldn't fit the width of the screen) for rich-text formatting, such as
a bold button, an italic button, a CSS style selector etc. But these
controls are very often not needed, because the specific implementation
of the content management application enforces a visualization of the
content, rather than leaving it to the user. Also, the buttons almost
always apply to a certain area of the Web page only.

What we're trying to determine is where to place these controls. We've
identified the following options:

Option 1-Place the controls in a toolbar at the top of the viewport area
of the browser, analogous to normal desktop applications. 
Advantage: The controls are always visible and easy to find.
-High cost in valuable vertical space: the browser itself already has a
menu, button bar and possibly custom controls such as Google Toolbar,
and our GUI adds a menu of its own. It might be possible to show and
hide these formatting controls as needed, but that is visually
-Very often, the controls will be unavailable and/or unnecessary, and
waste space.

Option 2-Use tabs to toggle between the main application menu and this
toolbar, like the Ribbon in Microsoft Office 2007.
Advantage: This option costs less vertical space and does not display
controls unnecessarily.
-The user needs to discover these controls, and perform a click to
access them.
-There is still some cost in terms of vertical space.

Option 3-Place the controls in a grid inside a panel to the side
(compare floating panels in, say, Adobe Photoshop). The GUI already has
an accordeon-style side panel, similar to MS Outlook, to display other
types of information.
-On a Web page, horizontal space is 'cheaper' (the left and right sides
of a Web page are often empty)
-Controls can be hidden (by the user or the system) when they are not
-This is an unexpected place to find buttons and the like (especially in
the context of a content editor)
-Either the user needs to discover these controls, and perform a click
to access them, or the application needs to show and hide the controls
as the user selects or deselects an area on the Web page that needs them
(visually disruptive).
Note: Early user testing showed this option to be confusing to users,
especially if they had to open the panel themselves.

Option 4-Display the controls close to the area that needs them (and
only when that area is selected). This is similar to Microsoft Office
2007, where selecting a piece of text makes formatting buttons appear
above it. 
-Controls appear and disappear as needed.
-Controls are close to the area on which they operate.
-Showing and hiding these controls is visually disruptive, especially
considering the number of controls.

It seems that every option has its advantages and drawbacks, so I was
hoping to find out if any of these options has your strong preference.

Thanks a lot for your helpful input,

Kind regards,
Mathijs Panhuijsen
Technical Writer
Tridion Development Labs B.V.

.This e-mail is intended exclusively for the addressee(s),and may not be passed on to, or made available for use by any person other than the addressee(s).Tridion rules out any and every liability resulting from any electronic transmission.

    Tip of the Day: Use the archives to research common questions
     CHI-WEB: POSTINGS: mailto:[log in to unmask]
              MODERATORS: mailto:[log in to unmask]