We are trying to improve and modernize the design of our desktop, dialog-based application:

This is the way our Software looks now

If I look at the examples of modern user interfaces they all look pretty, but contain just a fraction of controls (edit fields) we need to show. This is an imperative for us. Our customers want to see as much information as possible, without having to switch to other tab or to scroll through page. This is an example of pretty design with too few elements:

Pretty but too few elements

My question is: are there any guidelines or examples of how to design user interface with lots of elements, while retaining clean and pretty screen?

  • 1
    "Our customers want to see as much information as possible, without having to switch to other tab or to scroll through page." i highly doubt that this is your users main goal. Research what they really want to achieve with using your application and design it accordingly. – Pectoralis Major Jul 12 '18 at 12:43
  • I really mean it. Those are complex processes, involving different information each time. We can not decide to remove some of the fields. All of them are needed 60% of the time. – Bojan Hrnkas Jul 12 '18 at 12:53
  • 1
    Here's a question that might interest you too: ux.stackexchange.com/questions/31595/… – Big_Chair Jul 12 '18 at 13:34

Progressive disclosure is your friend.

Most modern windows intefaces hide tools until they are needed (on roll over etc). If you do user tests of your products you will notice that users are now pretty good at moving their cursor over an item to reveal other tools/menu options/tooltips. So this has now become a pretty normal pattern on the desktop. I think you would be suprised if you tried it and then user tested it. Users really do like the fact that the interface is presented in a more simple form and tools are only presented contextually.

See for example this in google mail when you hover over and item is shows the drop down arrow and the grey background indicates focus. The more option is also an example of progressive disclosure - so that key elements are shown and then less used items are hidden most of the time.

no tools on display . on hover

People are also pretty used to just having icons in tool bars - as Tufte has been telling us for years reducing your data ink really does allow the key information to become more salient. This reduction in noise is really key in allowing people to feel that an interface is simple and usable.

| improve this answer | |
  • 1
    Seems interesting. Do you have some links with examples of progressive disclosure in business applications? Only examples I could find are either Mobile design or web design related. – Bojan Hrnkas Jul 12 '18 at 13:47
  • Pretty sure Google mail uses it - I would call it a business application. Will find the example I was looking at earlier this week. – Lisa Tweedie Jul 12 '18 at 17:27
  • I unterstand that, but I have a different problem. Our "products" table has 250 fields. Now, we don't display all of it in the front end, but as you can see from the screenshot, the front end is rather detailed. I can not choose which fields to hide, because most of them are needed at least on the weekly basis. I could group them semantically, but what to do with groups? One click more to open the group is not an option. Data needs to be accessible in as few clicks as possible. – Bojan Hrnkas Jul 12 '18 at 17:46
  • I think the comment above is pretty spot on... you need to identify the key tasks and flows and optimise for that. I work on Tibco LiveApps which is a pretty complex enterprise level tool. Get a trial subscription for a few enterprise level tools like that and have a see what people are doing in this space. – Lisa Tweedie Jul 13 '18 at 9:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.