I’m in the process of altering a travel application for my current client. The application serves as a way of requesting permission to travel for the company and registering travel expenses.
In such process, I always try to make some design changes to enhance the user experience. So I hope :-).
One particular part I’d like to share is the design of some dialogboxes. As an example, I want to show the Flight dialogbox, where flight information is filled out.
The current dialogbox
Take a look at the design (this opens a new window so you can look at it and read the remarks side-by-side):
The good thing about this layout, is the overview you have, the feeling that everything you need to fill out is there in one screen. No need to search behind corners for additional fields. Information at-a-glance.
What I want to see changed:
- The airplane: I don’t like being distracted by a prominent background image, even if it’s a cool Airbus. I want to see the fields.
- The grey part: the right part of the dialogbox brutally changes in a grey zone.
- The top buttons: the applications uses a principle called table walker to enter multiple rows of data (different flights). Therefor the navigational buttons on top are needed, but they confuse me next to the OK- Cancel buttons. Buttons are all over the place.
- The colors: a bit of purple, some blue and a little grey. Only the grey seems functional to me (these are computed fields, no need to enter anything).
- The size of the dialog: there’s a lot of open space here. I don’t mind some whitespace to lighten up things a bit, but we don’t need enough space to land the airplane, thanks.
- The fields: at first sight they seem randomly thrown on the form. If I look closer, I do notice a logic order. I guess the eyes don’t really know whether they should go horizontally and follow the airbus or have to go down to the ground.
- The field sizes: the font is small, so why are the fields so tall? It’s because of the default height of native OS-style fields in Notes.
The new dialog
“Great, Martin! Very easy to break down other people’s hard work on the web!” If I do that, I have to present a better alternative. And by no means I want to ridicule other people’s work: let’s not forget it’s sometimes easier to enhance what already exists than to create it for the first time.
This is what I came up with:
- No airplane: I removed the background image.
- System grey everywhere: no sudden color changes when system is used as the background color for the dialogbox.
- No top buttons: the navigational buttons for the table walker were removed – now we have Add – Change – Remove buttons in the main form.
- Less colors: I got rid of blue and purple and the bold for the field labels. I kept the grey, because those fields are only informative.
- A smaller dialog with still enough breathing space for the fields, but considerably smaller, so that we can still see the main form below it (I believe a dialogbox should cover only part of the main form). Of course the tabbed tables were helpful here, I’ll explain about that in another section of this article.
- Ordered fields: the tabs make the first distinction, the vertical ordering takes you by the hand after that.
- Smaller fields: I reduced the field height to 0,5cm.
I looked at the way Microsoft and other software vendors design their dialogboxes and a common feature are tab pages. This effect can be simulated with tabbed tables in Notes.
Some design considerations:
- Use small fonts for tabs and data: I used a Tahoma 8pt.
- Give every table column in the tabs an equal width: otherwise if the columns for the labels have a different width for each tab, the fields seem to jump around the screen while switching tabs.
- Give every row of the tabbed table the same height: you can do this by assigning a minimum height (>=height of tallest row) to the table cells in the table properties. I find it less disturbing to see a tab page with some free space at the bottom, than to see the bottom line jump up and down while switching tabs.