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.

Currently, I'm working on creating a view from where the main purpose of it is to show details about a user.

Here is the initial view that is given when a user comes to the screen ("Certificates") is primarily what they will be looking at when using this view and the other pieces are supplemental but need to be available easily and quickly.

Initial View

Here is what it looks like when another header is expanded (so on and so forth)

Header expanded

I'm looking for advice on how I can improve this design. I have to admit, looking at it on here, I think more space could be used between the header and the above expanded content.

I would like some comments about the icons next to the headers as well. Is this a good design or should I include something in the expanded content instead? Every button has a tooltip associated with it to define what the action does.

share|improve this question

closed as off-topic by 3nafish, Benny Skogberg, greenforest, Matt Obee, JonW Oct 14 '13 at 9:28

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Site Reviews are off-topic because questions here are expected to be relevant for a variety of people in the same situation. Reviewing a site, flow or interface only helps one person at a specific time. Instead try to ask a focused question about a particular aspect of the design that solicits solutions, not opinions." – 3nafish, Benny Skogberg, greenforest, Matt Obee, JonW
If this question can be reworded to fit the rules in the help center, please edit the question.

    
What do you think does not work in this layout? –  kontur Oct 11 '13 at 17:58
    
The "icon" buttons seem a little clumsy to me, but I don't want to force the user to have to expand the content just to edit or add a new item. Perhaps the spacing between the expanded content and the following headers. Maybe fonts also...spacing in general...yea..a few things. I'm mostly a developer trying hard to be better at UX so I can make my applications more desirable. –  Justin Oct 11 '13 at 18:41
add comment

2 Answers 2

up vote 5 down vote accepted
  1. Dark colored areas of sections' headers dominates visually. It distracts an eye. More lighter is more clear.
  2. Text left paddings are too small. Increase it.
  3. There is too little space between unfolded sections. Add space to separate them.

This view is more clear.
enter image description here

share|improve this answer
    
This is where I wondered about the icons for the actions on the header. The + is an "Add New [Item Type]" action while the chevron initiates the roll up/down actions. –  Justin Oct 11 '13 at 19:30
    
@Justin So pluses in the section headers are add actions? It's more clear to use Add button. Now it looks like Certificates+ instead of action. I've updated the answer, take a look at the picture. –  Alexey Kolchenko Oct 11 '13 at 19:35
    
Is it really more natural to add the roll up/down action on the left side vs the right? I see the appeal of the right side holding the action –  Justin Oct 11 '13 at 19:40
    
It's used widely in foldable tree view, so it should be clear triggers for interaction. Also it will be good to handle clicks on the headers for triggering fold/unfold interactions. –  Alexey Kolchenko Oct 11 '13 at 19:45
    
You mention lighting up the header, but I don't want it completely devoid of color. How much light should it be made before if becomes a distraction again? Started with #3C73A8 and am looking at #568DC2 now –  Justin Oct 11 '13 at 20:01
show 1 more comment

The interaction concept of these expand/contract content areas is not bad. There is some visual noise being added to the screen that is rather unnecessary though.

Couple of suggestions for you.

Reducing Visual Clutter:

• Attempt to eliminate the alternating row colors, or reducing the gray value of these (they are breaking up the view and making it seem "striped").

• Place additional padding below each section. Try 30-40 pixels to start to separate the content areas from one another.

• Consider changing the tint of your large blue headers for the non-expanded content areas. Drop the tint a few values to make these recede from the users vision when inactive.

share|improve this answer
add comment

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