I have created a webpage, but my boss came back saying that the page is too busy. I was just wanting some ideas of how to split up the page e.g. accordion, tabs etc. What tactics have you implemented to break up a page into different sections?
closed as too broad by JonW♦ Mar 29 '15 at 22:11
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
If you could explain the type of page this is it would help. public page, personal page (someone signed in), html page, RIA page etc.
The options you mentioned and Vitaly has mentioned are key UI elements or options.
Basic options: tabs, accordions, content rotators, bubble filters, containers/pods
Additional options: (if the user is signed in) group areas together and allow overlays/modals to access more info or options for each grouping container.
Maybe i am stating something obvious, but sometimes things feel busy if they are not well aligned, use of too much different styles and colours.
This could be solved by
- align items using a grid
- use a simple style and limit the amount of colours and fonts and fontsizes. And with limiting i mean something like 1 or 2 main colours and 1 or 2 fonts (headline and body).
But maybe that is already well covered, and then indeed you will need to use tabs/accordeons/...
While these are very helpful: it allows the user to focus on 1 thing at a time, sometimes it is useful to be able see everything in one glance (so 1 page). But that also depends on the use of the page. Do you need overview, or a grouping of detail-views.
In addition to nathanvda's answer: don't be afraid of whitespace.
A cluttered look can be caused by sections intruding on each others 'personal' space. It may help to give a section more breathing room by increasing its distance from other sections.
I sometimes alleviate clutter with images to identify sections or even paired with pieces of content to call them out and provide separation from other content. Images might not be appropriate or be hard to source without an in-house designer or budget for stock photos, but are worth considering.
Another technique is to truncate content items with a shorter summary or less text from the content piece on the page. Like others have said here, without knowing more about the nature of the content it's hard to be more specific.
One thing you might also do is to follow up with the boss to find out what's behind the feeling of the page being busy. Knowing what specific parts feel crowded could guide you to a few trouble spots rather than having to re-jig the whole page.
I think also you need to study what is the user interested in and what not interesting to him. Example of one good implementation of this idea is "interesting tags and ignored tags in stackoverflow.com"
Could you be more specific? What does the page contain? This could be a problem with UI, with Information Architecture, with Graphic Design, and probably with a bunch of other things as well.
Accordions, tabs, internal navigation, visual grouping, rearranging the elements or plainly spacing them out could all be good solutions, for different kinds of "too busy".
How you break up a busy page into sections depends critically on the importance of the actions / information being shown. In general, you want a UI that puts the things that are done 90% of the time front and center, while de-emphasizing or hiding infrequently performed actions, perhaps using progressive disclosure.
That should drive your design, as opposed to arbitrarily picking a container like tabs or carousel.
What you boss is saying is TMI. Too much information
What action do you need the user to make and what is the minimum information required to make the decision. (Eg buy something)
Also from your perspective the layout (eg tabs order) will depend on the sequence you will need to present.
Ir the order on presentation is critical to theimpact so disclose in stages