Any insights / ideas as to how I would be able to improve the information hierarchy on the screenshot below? The headliner's data and questions data (Development / Company's benchmark / Comments) are the same size... I wonder how I would be able to make it more appealing?
3 Answers
Some quick suggestions:
- The description text on the tabs at the top could be subordinated; try a smaller font. Once users have an idea of what the tabs mean, they won't need to refer to the descriptions again.
- The categories in each question section heading (Ease of Use, Expectation settings, etc.) could be visually stronger. Experiment with slightly larger and heavier fonts.
- Try indenting the questions under each section to make them look like they belong to their respective headings.
-
Thank you Stacy for your valuable insights. I will use a bold font as headlines. Additionally, the tabs grouping it's a new company concept - hence I added a description for now - the users/clients have to acknowledge the grouping of the questions within the survey. I have an additional question: Do you have some idea how can I differentiate the data visualization between a section heading and questions? At the moment the data (Development / Company's benchmark / Comments) has the same size. It's 18 px...I really got stuck with it. Aug 22, 2020 at 10:19
-
Taking a cue from Material Design, you could use color on the active section heading to make it look more selected -- either by adding a shading color to the background, or a color to the text. Also, I think the "zebra stripes" on the questions are a little strong and pop out ahead of the header; you could look at removing them and see if the questions are still distinct enough. Aug 23, 2020 at 1:26
- indenting and numbering questions
- the columns (development comments and company) should also be visible a bit more strongly
Hope it helps!
I would advise you to focus on improving visual hierarchy in your design
- make sure there's sufficient different between sizes and weights in your typeface
- use white space to make sure there's no overcrowding of information