AUI: UI design

wxPython Users
1

Hello,

I'm using AUI (wx.lib.agw.aui) in my application. AUI is very useful for me, because it allows me to position several documents/windows next to each other. The user can customize and save the application's layout.

However, there is one main problem in regards to UI design I have with AUI. Suppose I need to manipulate data in each of the show documents/windows. Those windows are quite heterogeneous, i.e. you can have a code editor, an image editor, some tree control etc. So the actions you can perform on these documents are also manifold. My initial thought was to add a toolbar to each of the windows, so it's easy to e.g. select the brush tool in the image editor. This has several downsides though.

First, I don't like toolbars with small buttons. I always have to hover over the buttons to get the tooltips if I didn't use the application for a week or so (this can partly be resolved with good button images, but that does not always work). Second, some documents can have many actions, yet their size on screen is not very big, so the actions don't fit into the toolbar. Third, having toolbars all over the place takes up valuable screen area which would be better spent on the document data itself.

So I googled a bit how other AUI users solve this problem. Here is one of the screens I came across: http://www.dialogblocks.com/images/screens/screen01.jpg . That's a very bad UI in my opinion. It is crowded with lots of little buttons, tabs and the remaining area for the things the user actually wants to see is maybe not even 25% of the whole. It falls to all of the three points I made above.

So what are other alternatives? I'd tried a Ribbon bar (wx.lib.agw.ribbonbar) as the main toolbar. It has recognizable buttons (image + text) and you can group them nicely by context. It's also a good replacement for a wx.MenuBar. Then I wanted to dynamically add pages/panels to the Ribbon bar depending which AUI windows are currently visible. This has one downside: If there are 3 text editors open in my AUI, I have three identical panels in there and it is not very obvious which panel belongs to which AUI window.

I've also thought about making a small area at the top (or in a corner) of each aui window. When the mouse is hovered over this area, a ribbon bar is shown for the chosen aui window. The advantage here is you only waste a bit of screen area, the disadvantage is you have to hover the area each time you want to perform an action.

Another alternative I was thinking about was to not use toolbars at all, but to offer context menus on right click.

Are there better alternatives? What do you use in your aui applications to overcome the mentioned problems?

-Matthias

3

Hi Matthias,

Hello,

I'm using AUI (wx.lib.agw.aui) in my application. AUI is very useful for me, because it allows me to position several documents/windows next to each other. The user can customize and save the application's layout.

However, there is one main problem in regards to UI design I have with AUI. Suppose I need to manipulate data in each of the show documents/windows. Those windows are quite heterogeneous, i.e. you can have a code editor, an image editor, some tree control etc. So the actions you can perform on these documents are also manifold. My initial thought was to add a toolbar to each of the windows, so it's easy to e.g. select the brush tool in the image editor. This has several downsides though.

First, I don't like toolbars with small buttons. I always have to hover over the buttons to get the tooltips if I didn't use the application for a week or so (this can partly be resolved with good button images, but that does not always work). Second, some documents can have many actions, yet their size on screen is not very big, so the actions don't fit into the toolbar. Third, having toolbars all over the place takes up valuable screen area which would be better spent on the document data itself.

So I googled a bit how other AUI users solve this problem. Here is one of the screens I came across: http://www.dialogblocks.com/images/screens/screen01.jpg . That's a very bad UI in my opinion. It is crowded with lots of little buttons, tabs and the remaining area for the things the user actually wants to see is maybe not even 25% of the whole. It falls to all of the three points I made above.

So what are other alternatives? I'd tried a Ribbon bar (wx.lib.agw.ribbonbar) as the main toolbar. It has recognizable buttons (image + text) and you can group them nicely by context. It's also a good replacement for a wx.MenuBar. Then I wanted to dynamically add pages/panels to the Ribbon bar depending which AUI windows are currently visible. This has one downside: If there are 3 text editors open in my AUI, I have three identical panels in there and it is not very obvious which panel belongs to which AUI window.

I really like how iWork solves this problem - a contextual toolbar below the main toolbar that has only the set of toolbar operations which apply to the current mode / selection. So if you select an image, you'll see the set of image manipulation icons. If you have a text selection, it'll be font, color, etc. options. You can see examples in the screenshots here:

Notice the difference between the toolbar in the "Streamlined Word Processing" screenshot vs. the one in the "Powerful Page Layout" toolbar. iWork does not have that crowded UI feel that I get from other office suites, where there are always 100 choices in my face, but at any given time a considerable number of them are disabled.

Unfortunately, I don't know of any high-level class in wx that would encapsulate this. I suppose you'd basically just maintain a list of toolbar items for various contexts, then rebuild the wx.ToolBar with the items for the current context each time the context changes.

Regards,

Kevin

···

On Jun 14, 2010, at 3:39 AM, Nitro wrote:

I've also thought about making a small area at the top (or in a corner) of each aui window. When the mouse is hovered over this area, a ribbon bar is shown for the chosen aui window. The advantage here is you only waste a bit of screen area, the disadvantage is you have to hover the area each time you want to perform an action.

Another alternative I was thinking about was to not use toolbars at all, but to offer context menus on right click.

Are there better alternatives? What do you use in your aui applications to overcome the mentioned problems?

-Matthias

--
To unsubscribe, send email to wxPython-users+unsubscribe@googlegroups.com
or visit http://groups.google.com/group/wxPython-users?hl=en

4

Thanks Steve and Kevin!

What you propose seems to make sense. Not having that crowded feeling is something I want to achieve. I think I am going to use a main ribbon bar at the top. When giving a focus to a window, this ribbon bar is adjusted, so the toolbar for the focussed window is shown in addition to the main ribbon bar items. Forcing users to give focus to windows is something I wanted to avoid initially, but it might not be that bad after all.

Thanks for the tips,
-Matthias

P.S.: I don't like the UI of the GIMP a lot. All those floating windows are irritating :slight_smile:

···

Am 14.06.2010, 19:53 Uhr, schrieb Kevin Ollivier <kevin-lists@theolliviers.com>:

I really like how iWork solves this problem - a contextual toolbar below the main toolbar that has only the set of toolbar operations which apply to the current mode / selection. So if you select an image, you'll see the set of image manipulation icons. If you have a text selection, it'll be font, color, etc. options. You can see examples in the screenshots here:

http://www.apple.com/iwork/pages/

Notice the difference between the toolbar in the "Streamlined Word Processing" screenshot vs. the one in the "Powerful Page Layout" toolbar. iWork does not have that crowded UI feel that I get from other office suites, where there are always 100 choices in my face, but at any given time a considerable number of them are disabled.

Unfortunately, I don't know of any high-level class in wx that would encapsulate this. I suppose you'd basically just maintain a list of toolbar items for various contexts, then rebuild the wx.ToolBar with the items for the current context each time the context changes.

Am 14.06.2010, 14:39 Uhr, schrieb <GadgetSteve@live.co.uk>:

Hi,
One alternative is to have a detachable toolbar, that the user can position as needed, with just the actions available for the current AUI window that has has focus, then you only have one set of buttons reducing screen area lost and there is no question of which is the item that will be acted upon. The only down side is that the user has to move the focus to the item they wish to act upon first, however this is probably not a bad habit for users to get into. You can of course have some buttons that are permanently present, those that act upon most of your window types, some of which may be disabled if the current context, (focus), doesn't support that action. A good example of an application that works this way is GIMP.