Best way to display large amounts of user data on a single page?

Question

I've been searching around for some related posts, but I haven't really found anything that has been a lot of help. I've found a few posts that might help generate some ideas.

Here is what I'm working with:

This is the old design. I'm redesigning this section for an intranet portal. Basically all of these little header sections in blue are part of the user's profile they've completed or entered data. When you click on the header it expands as an accordion style to display the information. This page can get very long. To give you an idea with everything expanded it's over 8,000 pixels long. While not all users will have it all expanded at one time, some sections do contain large amounts of data that get very long with just one section expanded.

So the obvious question is how to organize such enormous amounts of data onto one page? Is there some categorizing method that could better help display this to the user? One of my developers suggested tabs, but that's not going to happen inside of an already tabbed UI (the top tabs are staying there just getting a UI refresh - summary, school list, career list, scholarship list).

Or are the accordions probably the best method in this situation?

Answer 1

There's absolutely no reason for all of that info to be on one page. Such a number of options is overwhelming to the user and makes it incredibly hard to find what they're looking for (especially with the sparse negative space & extra-bold font you have there). You're already doing progressive disclosure (accordion) so moving them into a dedicated tab won't make them less discoverable.

The summary tab is supposed to give a quick overview of the key points. In your case, such key points would be how many milestones have been completed, how many college & scholarship applications have been filed, what information is missing, etc. The only way to figure out what is actually needed is to talk to your users (I suppose that's some kind of advisors) and understand their workflow. See Quora questions about good dashboard design examples: one and two.

The second part of the redesign is organizing all of the sections into relevant groups to be represented with tabs on top. It seems to me that they can be grouped into at least Academic, Personal, and Financial with Career list being merged into Personal and some of the existing sections being moved to School list and Scholarship list. This task can be accomplished with card sorting exercises with your users.

Summary

Your current Summary tab should become a dashboard overview of each profile. The information that is there now needs to be reorganized into additional tabs and/or merged with the existing ones. The re-organization has to involve the users with interviews about their workflow and card sorting exercises to understand how they group profile sections.

Answer 2

You're right: that's a ton of data.

You can keep the concept of expanding sections, but first determine what is the most important information in each section, and second rearrange how you are displaying them.

In the expanded Milestone Dates section, what is more important: the most recently completed milestone, the fact that something has recently been completed, or the milestones that haven't been completed? Once you know this, you can collapse the section into one, concise line:

Milestones (6 incomplete)

If it's really important and needs attention, give it some highlighting. But the point here is with that much information, you want to show the least you can.

Secondly, think about the page structure. Replace the accordion with a two-column design: the minimized and/or highlighted headers on the left, and the content on the right.

This design works better for two reasons:

1. Screens are wider than they are tall, so you are using more screen real estate to display more information with much less (or ideally no) scrolling.
2. With so many headers to choose from, it becomes harder to find the one you're looking for when the accordion's movement and content length changes their location. A list on the left that doesn't move will keep every element in the same place. As your users use it more, they'll start to learn exactly where to expect the header they're looking for.

As a last tip, if you're highlighting something in the headers (for example, a resume that hasn't been submitted yet), it's a nice touch to highlight the corresponding element in the page you open up.

Answer 3

You need to find out how people currently use the application before you can make any major positive changes.

• Define the type of tasks your users need to complete using the application.
• Find out the workflow associated with each task.
• Understand which data is currently accessed most frequently
• Start to think about ways the interface can be organised to aid efficiency based upon your research.

Answer 4

condense groupings

why not condense some of the groupings, put them under one "slider"? examples are:

• i see that there are at least 5 for parents with siblings data, merge them under parents
• sports, clubs, outside activities are extra-curricular, hence called non-academic activities.
• personality, preference and priorities describe a person's psychology, they should be grouped as personality.
• tax, assets and income related are financial status

summarize data

each slider will now have a ton of data after condensing. now you should get a gist of each section, like a generalization.

an analogy is if one goes to a grocery and buys stuff, all one cares about in a very long receipt of items is the tax, net and gross totals - they don't scroll through every item, nor look at the headers and footers of the receipt. they can do that later when they have time or need details.

white spaces are your friend

don't compact everything into one page. break them apart from each other. also, use short headers. you can describe what it is later in a tooltip perhaps.

also, accordions are old-school

they should have been dead like those multi-level nested menus. use a sidebar off to the left. that way, you have a big work area for stuff to load on it's right.

Answer 5

Here is what I ended up doing based on some of the feedback. I was really stuck on some certain restrictions; one being a 2 week delivery time and redesigning all that content wasn't going to happen in 2 weeks ... so really this was the only method to make it easier that we could implement. The content within the tabs had to stay the same. So in other words the only thing I was allowed to do (right now) was to redesign the navigation structure in which to access the content.

Answer 6

If you can shorten the section names, I would put some navigation on the side that scrolls with the viewport to help them to get to different sections with out scrolling above and below the content to find the header to click on to get to the data that they want (already sounds exhausting). Also, if it's possible to categorize each section as completed/incomplete, maybe color coding or an icon to show the status of the data in that section to guide the user to problem areas.

An accordion would help keep the page length small, but with the size of the data that you are describing, I feel like that mechanism breaks down. If it's at all possible to break this up into either more tabs, or abandon the section idea altogether and put the information on separate pages, that would be good.