How to display a large quantity of (read-only) fields?

Question

I have a page in a site I'm working on that requires we show the user a large amount of field information when the user requests it. This is an account information page, so will list their personal details, payment details, addresses, various statuses... lots of stuff. It's all read-only.

There could be as many as 70 fields here so I'm trying to determine the best option of displaying it all.

Imagine something like this, but even longer:

So the options I'm considering are:

1. hide each group of information within an expander so the user can choose to open the one they are currently interested in (but that makes it harder for them to view everything without doing lots of clicks).

2. Keeping all the details in just a long format but have some anchor jump-links at the top so the user can jump to the place they're interested in (but that's going to mess up the back button and still be quite visually overwhelming)

3. Leave it all as one long page and let the user read it as they see fit (again, quite overwhelming).

4. Stick each group into a separate page, and have the headings as submenu items (drawback being lots of clicking, and not having full visibility of all the information at any one time).

Considering this is all read-only, and they've chosen to view this page (from a link like 'show me all my account information'), what is the best option? Is there an obvious idea I've considered? I think I'm leaning towards #3, just because the user has requested all this information so why make it harder for them to see it all, but I'm not sure.

How can I display a full page of read-only information, keeping it usable but not overwhelming?

Answer 1

What are the user needs?

Based on the information from your questions I would also go with 3) and I'd like to mention 3 points:

• Long pages using a scroll bar is widely accepted UX Myth #3: People don't scroll

• Make the content sexy: use images, categories, charts, comments, ... Whatever is possible.

• Make it more comfortable for the user. E.g. a fixed index on the side helps a lot - bootstrap is using that pattern:

Answer 2

Show all items on a single page in a vertical list

This obviously has limits as it is almost never a good idea to display thousands of items at a time. Though putting a list of a hundred items on a single settings page is fine especially providing some way to quickly filter the list at the top.

1. Chunking them into groups as you have done is a good first step.

2. Highlighting alternate rows also helps.

3. Provide an easy way to search/filter the long list items.

---

Demo of a filterable list of key value pairs

---

---

Answer 3

Observations

It's hard to answer this without a better understanding of what style constraints you're facing, but:

• Account information is related, so I'd be inclined to keep it on one page if possible.
• The principle issues with long-page data are user orientation and navigation. Field layout is secondary to those concerns IMO.

As a result, typical UX goals here are:

• Section the content. You've already done this.
• Provide clear and constant orientation so that the user knows where she is on the page (this should be "always present" if possible).
• Provide easy navigation for users to navigate between sections (e.g. avoid having to scroll back to top to select a different section, if possible)
• Provide consistency of layout (e.g. grid) to order the presentation of dense, diverse data.

---

Modern approaches

Current thinking on long, sectioned pages attempts to solve the goals quite literally by using persistent orientation and navigation panels which degrade gracefully for non-JS or small-screen sites.

1. Provide a sticky, live navigation panel. The panel contains section headers (sometimes sub-headers), is sticky as the user scrolls, and ideally updates itself to show where the user is in the document.
   • The panel can be docked into a sidebar, or float along the side margins.
   • This approach can be implemented in a way that degrades gracefully for non-JS sites, and for mobile sites via responsive layout (e.g. hide the panel for small screens).
   • An excellent example of this approach is the dropzone website (check it out). Try scrolling up and down to see how the navbar is updated.

2. Use sticky section headers. Here, the current section header docks at the top of the screen while the user scrolls. This provides some of the benefits of accordion organization, without the inconvenience of needing to expand sections.

   • These can also be made to degrade gracefully for non-JS and mobile sites.
   • You can also add a "back to top" link on the section header to provide quick navigation back to the top of the screen.
   • This approach is more appropriate for pages where sections are long (as in the animation below) and there is risk of the user getting lost/disoriented within a section.
   • Here's a demo of what the interaction looks like.

   

---

These approaches are (hopefully) complementary to the other answers here in the sense that chunking, striping, grid, and other layout approaches can be used within the overall interaction architecture.

Answer 4

I'd be inclined to say present it as a whole page (your option 3).

With a caveat...that you present it in a way that doesn't feel like one long page, but a collection of things.

You say you worry about it being overwhelming, but it doesn't have to be like that. Provided you chunk the information well, making the headers and titles clear (but not shouty), and the content easy to get the gist at a glance; read; digest, or skip past to the next main chunk, then you can make it less of an onerous task for readers to decide what's relevant and what's not.

Where it gets overwhelming is when you make the user work hard to see what's there, where the information breaks are and how the information is subdivided.

A good example of this is (believe it or not) LinkedIn. A good LinkedIn profile has top level chunks like summary, experience with current and past companies, skills and endorsements, education, recommendations, groups, following, and additional information. Each of these can have a fair number of entries.

But each chunk is separated (card style), each sub item is well divided, and the layout changes according to the type of information being presented. Because of this, as you scroll down, you don't keep thinking 'this is just more of the same'.

Yes superficially you might look at LinkedIn and think "Oh, another card style UI - just like FaceBook, Twitter etc." However, it's a decent technique that works to break up the content and make it manageable because it helps to focus on the content by distinguishing the figure from the ground and exposing what's important.

Whole pages do work - but you can definitely make them overwhelming and boring if you want to!

If the content doesn't lend itself to being presented differently enough between sections, try using colour in a clean and crisp way to separate the chunks out. Not too much colour, but just enough to make it interesting. (In fact, test with half of what you think is enough colour :)

Answer 5

I had a similar situtation a while back and my fix was to use an accordion style UI.

Despite having all those fields, your headings give you one advantage: organization. Since your data is organized, you can put them in accordions, that can expand/collapse. By default you can collapse them all, so the user can visually see all the headings, instead of having to scroll.

Of course, this only works for readonly fields that are categorized. If this was a form, then you could use the accordions as a wizard.