1

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?enter image description here

3 Answers 3

1

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.
2
  • 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.
    – Izquierdo
    Aug 23, 2020 at 1:26
0
  • indenting and numbering questions
  • the columns (development comments and company) should also be visible a bit more strongly

Hope it helps!

0

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

https://www.interaction-design.org/literature/topics/visual-hierarchy#:~:text=Visual%20hierarchy%20is%20the%20principle,guide%20them%20to%20desired%20actions.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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