22

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:

mockup mockup mockup

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?

  • 1
    What if you add an "open all/close all" button to the first option? – locationunknown May 11 '15 at 10:36
  • @locationunknown yes, that's an option I hadn't considered. Although it still has the issue of being a bit overwhelming 'click this button - whoosh! Loads of information appears!'. But it might be a viable compromise, yes. – JonW May 11 '15 at 10:38
  • overwhelming yes but if users knew how many fields there are in a group, approximately (the first group is open?), then they would expect opening every group would show a lot of information. – locationunknown May 11 '15 at 10:43
  • What will the users do with that information and how the will manipulate it? – Alejandro Veltri May 12 '15 at 3:53
  • @rewobs The information is purely for users wishing to see all the account details that we have on file for them. They cannot manipulate it, it is read-only. – JonW May 12 '15 at 8:19
8

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:

screenshot from bootstrap.com

  • Interesting idea around fixing the index on the side. My fields are only about 5-10 per category so I'm not sure if that idea would be useful or not, but I think I'll mock something up to test it out as it's a nice idea and gives the user a concept of how far down the list they currently are. – JonW May 11 '15 at 12:08
  • @JonW You don't need to have a 1:1 matching of Tabs and Categories - if you can group 2-4 Headings together under one Tab, you can divide The content into manageable chunks. – Falco May 11 '15 at 15:45
  • +1 for how Bootstrap does it.. that's what I thought of before seeing any of the answers – Sentient May 11 '15 at 16:27
15

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


enter image description here


enter image description here

  • 3
    Interesting idea, yes. I think that particular zebra-striping would be pretty harsh on the eyes if there are 70-odd items down the page, but I think there is certainly some merit in the search option. – JonW May 11 '15 at 13:54
  • 6
    if you use a really light color the zebra striping isn't as painful - just don't use bright colors – Albert Lang May 11 '15 at 13:59
  • 1
    I've updated the alternate row colors in the demo so it isn't as harsh on the eyes but I do think it helps make a long vertical list of paired items easier to read and comprehend. – DaveAlger May 11 '15 at 14:07
  • 3
    Janko wrote an article about table patterns and recommend zebra striping: jankoatwarpspeed.com/ultimate-guide-to-table-ui-patterns – Gustav May 11 '15 at 15:03
10

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.

enter image description here

  1. 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.

    enter image description here


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.

8

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 :)

  • That's a good point. I was trawling around looking for sites that display lots of such form information but kept coming up blank, but LinkedIn is a good example, and one I can cite to stakeholders if they query the issue. There may be some issues regarding styling the page (project has a pretty strict style guide and pattern library) but there's always wiggle room - if you look hard enough! – JonW May 11 '15 at 11:14
2

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.

  • 1
    I considered accordions, but that has too many drawbacks really. Firstly, it hides all the information - which is bad because the user already clicked the 'show me all my details' option. Secondly, you have to click to get to that page and then click multiple expanders in order to open up all the info to read. It's a solution that probably looks better visually, but will be a PITA if you have to keep returning to it to use it. – JonW May 11 '15 at 16:28
  • I agree, you are right about those. Accordion isn't the best solution. – harsimranb May 11 '15 at 19:33
  • @JonW The excesive clicks needed could be less of a problem is you use :onhover displaying jqueryui.com/accordion/#hoverintent – Alejandro Veltri May 12 '15 at 19:19

Your Answer

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

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