I'm in the process of crafting a relatively complicated interface for a niche social networking website and I'm struggling to achieve a satisfying level of simplicity for the UI.

Given that "modern" design trends favor simple/large/bold/clear, and also the need to support multiple devices from mobile up (and therefore potentially forsake pixel perfection), are there any guidelines or good strategies for approaching complex user interfaces where the functionality simply needs to be there but the sum of the total feels over-whelming, or perhaps over-technical, and perhaps even a little old-fashioned.

This is my first post and I understand that this question is a little vague. I'd be very interested in hearing about some practical techniques for dealing with UI complexity, apart from just "remove everything you can".

  • 2
    Hi and welcome to UX.SE @Tom. I think you have a good enough question already, since it answerable even though it is not as super clear as technical questions you meet on StackOverflow. Still, perfectly valid for us IMHO. +1 – Benny Skogberg Jan 9 '13 at 8:44
  • 3
    Of course, it would help if you could be a bit more specific about the issues in the UI, maybe the use of diagrams or screenshots to aid the question :) – Kyle Jan 9 '13 at 8:52

Create a clear visual hierarchy

52 weeks of UX
tuts plus

This basically breaks down into making the most important parts of the page the most obvious through various techniques such as size, colour, contrast, use of whitespace, proximity to other items, etc.
The most important parts of the page are usualy the headings, content and primary navigation (or the most important parts of it).
Then items should become less obvious the less important they are. This is not saying they should be hidden in any way just that they should not be what the user first focuses on.

Try to only show things that are immediately relevant

For example if you have a lot of options for filtering content you can have a single button for 'filter content' which when clicked presents a panel with all the filtering options. This way part of the UI is hidden (but immediately available) until actually needed.
The yellow help button at the top right of the question/answer fields on stack exchange is another good example of this. Advanced users who already know or people who don't care about additional markdown options can ignore it but for those who want it the additional help is readily available.

User testing

There is no substitute for getting good feedback from your users. Sometimes this can change whole aspects of your system as you realize that something you thought would be very important or would be a problem turns out to be insignificant.
Remember, you are not the user.

Other ideas

Be sure to use progressive enhancement. (see smashing mag and tech republic)

You could try implementing an adaptive system that learns from the way individual users use it and adjust accordingly. For instance reducing/increasing the prominence of items depending on how much they are used over time. This can be (but does necessarily have to be) quite complex.

Sometimes splitting components into separate steps/pages can allow you to be more focused on each step.

Of course "reduce until you are left with the absolute essentials" is a great design philosophy and does not have to mean sacrificing looks.

These are only a few suggestions for what is a very broad topic.

  • 1
    +1 Thanks for pointing out visual hierachy - so important. – greenforest Jan 9 '13 at 13:16

I would stress 2 principles: Know your user, and graceful degradation. Knowing your user helps you to establish what they need, and hence what you should be prioritising in design. Creating personas can help with this and create common understanding in the project, and having a primary persona gives you a clear idea of who your key user is and what their needs and capabilities are.

Graceful degradation means that your application will always work, that the key features will always be available, and that if the users device / profile means they can access more complexity (e.g. via JavaScript for those with JavaScript available) then their experience is enhanced - without having a negative impact on those without.

  • Graceful Degradation and Progressive Enhancement are two different (though similar) concepts. Progressive enhancement is also quite similar to 'mobile first' and is considered by many to be the better approach. see andreasviklund.com – Tims Jan 9 '13 at 9:49

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.