Adding SuperOffice look to your web panels or applications

In this article

    Practical Design Hints

    Here are some practical design ideas you can use when building your own software

    • Use whitespace instead of boxes
    • Use small indicator lights to hint at more (extra) information
    • Use progressive disclosure to show more and more information gradually.
    • Prevent errors from happening instead of complaining about them
    • In this article will cover these in more detail.


    Whitespace aka "air"

    If you stuff your screens with knobs, buttons and widgets for the user to interact with, your design will feel cramped. The screen will have bad feng-shui. Users will feel intimidated by all this stuff going on.
    A good screen design is readable, like a book. One set of controls leads naturally to another.  You can figure out how the program works just by looking at the screen.

    Whitespace lets you create groupings without having to draw lines.

    Boxes are very explicit ways of grouping things. They also serve no useful function except for grouping things together. The screen will still work without the grouping boxes. They are “visual noise”. Noise in the sense that they distract from the things they are grouping.

    Since you have to move things further apart to make room for the box, you can often get away with not drawing the box. The extra space will do the job, without being as distracting as the box.

    Less is more.

    A more spacious layout is generally perceived as more relaxing. A screen where everything is packed together is tight and stressful.

    Information hinting

    If you have taken all sorts of information away from the display, you need to show the user that more information is available, and ideally also present a mechanism for getting at it.

    Progressive disclosure means that the interface shows you first a little bit, then a bit more when the user asks for more detail.

    The MORE button (the two triangles button) is an example of this. When you first start using SuperOffice Sales & Marketing you see the simple version of a dialog.

    Clicking the triangle will display more of the dialog. This gives the user access to the more sophisticated fields like the file name which the beginner does not need to know about.

    To make the user’s life easier we remember the state of the more button, so the next time the user opens the dialog, we display it in the MORE state. This way we save the user one click.

    Another example is in the person list. Here we display an icon if the person has interests registered, and another icon if the user has information text written about him.

    The icons will provide details with a tooltip if the user parks the mouse pointer there.

    The user can see which people have interests without having to open each person in a dialog. The information is available at a glance.

    Information Hinting Examples

    Another example is the interest tab on the contact card. Here the tab changes color when there are interests present. The user can then tell if the interest tab is worth looking at without having to look at it. We save the user a click, and they avoid disappointment.

    Status information like this is also common in a browser window. The padlock icon tells the user that the connection is secure without the user having to ask.

     Imagine if this information was only available in the File Properties dialog. It would be frustrating to have to go to this dialog every time you wanted to know the security status.


    Readiness to hand

    The user’s time and effort is valuable. Every time the user has to click something to get more information or to perform a task, we are making the user more frustrated.

    So instead of forcing the user to always use menus, we present the most common commands as buttons in the user interface – as buttons on the surface of the window, not hidden inside a sub-window, but directly accessible by the user.


    The less work the user has to do to execute a command, the closer to hand the command is. The trick is to figure out which commands are most common and to put those closest to the user.

    Think of how a messy programmer organizes his desk. In the center, closest to hand is the keyboard. In piles around the keyboard are reference books and papers the programmer is using to do his work. He doesn’t read them all the time, but looks at the material every now and then. Over in the bookshelf are books the programmer isn’t using.

    SuperOffice tries to organize its displays in the same way – the most useful things are closest to the user.

    If you start SuperOffice CRM client, you’ll see buttons laid out around the edges of the window. Click on the PROJECT button on the left side, and a history list drops down along with a search field. The search field automatically receives the keyboard focus, so that the user can just start typing to do a search on name (the most common type of search). So the number of clicks is reduced.

    The initial sketches we had worked more like the IE Back button. You clicked once on a small button to activate the list, or on a different button to do another search. The big problem with this was that we suddenly had three little buttons that people had to click in order to get the history list or the search results. Small buttons are hard to click. More clicks are frustrating.

    Since clicking on things in the history list was the one thing that users would be doing all day long (typically users work with just three or four companies during a day) we wanted to make that less work. So instead of waiting for a button click, we just show the history once we know what area of the application you are interested in.

    Error Removal

    In a user interface it can be hard to predict where the user will click next. Sometimes the user will click in the wrong place. This might be a mistake.

    The wrong thing to do is to complain to the user with a dialog box: “Don’t click there”

    The user is trying to get work done. Anything that gets between the user and the work is annoying. A dialog that tells him he was stupid is not helping, and he has to click a button to get rid of it.

    If you disable the button when it does not work, the user can see that clicking it won’t work. Ideally you should put in a tooltip explaining what the user needs to do in order to get the button to work.