We're redesigning our a page of our web-based application after complaints that this particular page was too data-dense. The page currently has 6 filters at the top and a data table with 10 columns. Each row is clickable, and when clicked a pop-up modal displays that contains additional information about that row.

The table needs to stay as we've also heard complaints when we did a big overhaul a few months back of our interface. The main change we are making is shortening the table with to 5 columns, and displaying the other 5 columns worth of information below the row.

How can I best display the information below the row given that the information should always be visible to the user?

I attached a Balsamiq mockup of the page. http://imgur.com/358lLiZ The timestamp, alert type, etc... would be the table headings and are fixed at the top. The image, and all the text in the whitespace to the right of that is the information I need to display below the row.

  • 2
    I don't see any attachment, maybe you forgot to add it – Devin Jan 19 '15 at 23:30
  • Just added a link! – Fernando Jan 20 '15 at 2:25
  • Are you requesting for a revision of the design or asking for hint in implementation? – warcops Jan 20 '15 at 11:57
  • use of color coding could help or icons that sit by each data piece. it's a weird experience to just have the headings in one area. – jayly Mar 9 '18 at 10:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.