Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

enter image description here

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?

share|improve this question
10  
I wouldn't call that tab "Summary" - it shows EVERYTHING! –  peteorpeter Jan 17 '12 at 17:15
    
That's a detail page. I hope that's a detail page... –  Ben Brocka Jan 17 '12 at 21:51
    
@BenBrocka: It's a summary of sections available. –  dnbrv Jan 17 '12 at 23:41
    
@rohicks: If we've answered your question, you can select the best solution so that if anyone comes across the same problem in the future, they know the course of action. –  dnbrv Feb 7 '12 at 18:37
    
@dnbrv I'm not sure anyone has nailed it completely on the head, but there are excellent suggestions in here. I'll include a screenshot to what I ended up doing based on our restrictions. Keep in mind it was redesigned for the structure of it, but the content within HAD to stay the same due to certain restrictions. –  rohicks Feb 8 '12 at 5:41
add comment

6 Answers

up vote 5 down vote accepted

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.

share|improve this answer
    
Thanks for suggestions. You're correct that this should probably evolve into a "user dashboard" of sorts. Luckily this is not my design, and it is way outdated. So i have full creative control over what happens to it for our new portal design. I think the reason all of the information is there in the first place (what i get from our marketing people) that it was for our customer service rep to see all the information entered by our user if there were questions about their account. I'm also not even sure this was used that much by our clients to see their students progress. Prob cuz they can't –  rohicks Jan 18 '12 at 14:44
add comment

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.

share|improve this answer
    
Thanks for the suggestions. I like the idea of the pinned navigation. –  rohicks Jan 18 '12 at 14:54
add comment

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.

share|improve this answer
    
I did have an idea of a two column design inside the tab with navigation on the left and the content on the right. It's actually been wire framed up already as well. Thanks for your suggestions. However, some of the other suggestions of making this into a smaller dashboard for the user and separating the info into more tabs on top sounds like it might be effective as well. –  rohicks Jan 18 '12 at 14:51
add comment

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.
share|improve this answer
    
Currently no one is really using the application except our customer service rep. However, this will change dramaticaly as we relaunch the portal because it's being marketed as a web app to integrate into other companies. They will use this for their employees and students. So it will in fact be used by hundreds (thousands) of users before the year is over or even in the next few months. –  rohicks Jan 18 '12 at 14:55
add comment

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.

share|improve this answer
    
I had the idea of grouping them together as you mentioned above in your first point. Thumbs up to that. Thanks for the suggestions. –  rohicks Jan 18 '12 at 14:53
add comment

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.

enter image description here

share|improve this answer
    
That's a huge improvement! I suppose the large white space updates dynamically to show the data selected in the menus. –  dnbrv Feb 8 '12 at 15:54
    
@dnbrv Thanks. Yes, you are correct. Since the data styling wasn't apart of the ticket redesign it stays the same and will be added or removed based on the navigation vertical they are in. For now this works, but this is certainly something to be re-visited in the future. –  rohicks Feb 8 '12 at 23:45
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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