Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

As the title suggests, I need to list over 100 items on a landing page. I'm hoping to make the page as responsive as possible. I don't think a table is the best option, and I'd also like to stay away from popups or anything that brings the user away from the page itself.

Do you have any suggestions as to how I could present this data somewhat concisely and without overwhelming/distracting the user?

share|improve this question
2  
Welcome to UX.se. Could you please provide more information about what exactly the items are that need to be listed, as well as any work that you've done on in already. –  JohnGB May 7 '13 at 2:34
    
It's a listing of over 100 engineering terms/topics that are being covered in a special edition we are publishing. The terms range from short ("hot spots") to long ("timely corrosion rate and remaining life calculations"). I've already tried using a 5-column table, but it's not mobile-friendly and still compacts everything too much. –  Nick S. May 7 '13 at 2:41
    
@NickS. When you say "as responsive as possible" do you mean responsive in the sense of a responsive grid to adapt to changing screen sizes? or in the sense of the speed with which the page responds to user actions? (Having a large number of items could present problems for either type of responsiveness.) –  3nafish May 7 '13 at 2:57
    
I think I was using responsive wrong. What I meant was mobile-optimized. So, I'm assuming that tables are out, for the most part. –  Nick S. May 7 '13 at 3:41
add comment

3 Answers

I don't think your problem is limited to choosing a layout pattern for so much data. How are your visitors going to find the item they're looking for? If it's just an alphabetical list or table, how do I know what subject is where? If you could do categories, this also gives you an opportunity to collapse parts of the list. Even if it's just alphabetical, you could order them like an index.

To tackle your main problem though, if you're targeting mobile (or otherwise provide a fallback for IE9 and older), you could use CSS3 multiple column layout. This is easy to make responsive by just changing the number of columns for each break-point. Unlike a table, the content will just re-flow when necessary.

share|improve this answer
    
Good point. A bit more consideration on how best to display the information: Categorisation, tagging, search are all ways you could make the content more easily accessible. An A-Z list could be a fall back? –  Sheff May 7 '13 at 8:05
add comment

Simplicity is key when it comes to designing interfaces for mobile devices.

Google feels the speed of all web pages is so important (for their own reasons as well) that they've made a page optimization app for developers that tells them what needs to be fixed on the pages in terms of delay. Here are Google's best practices in terms of making a happy visitor. Since their goal is making people "stick" or stay on the site they provide a link to, it is in everyone's best interest to try to help them out if they want to be found on an internet search engine. With that being said, these not only benefit Google on the whole but they also benefit your visitors as well as your own web server. While this isn't the ethereal ultimate user experience everyone strives for, you can use this as a basis for any web project to ensure rapid application response.

With that being said, mobile applications and sites are in a different world from regular websites where people browse for hours on end. For mobile sites should be easy to use, few distractions, fast load times since most people are likely focusing on something other than being on the Internet while they're browsing on their mobile devices. This study indicates environmental factors are a major impact on mobile app performance.

  1. You could easily design a layout with divs instead of tables. The divs could wrap depending on screen orientation and they require less code than tables - <div><div> vs. <table><tr><td></tr> - so they are easier to load and more fluid to help with styling. Check out html5 boilerplate, which is designed by massive companies with their investment backing with mobility in mind (speed = happy visitors).
  2. Use a sprite for the main image(s). Sprites are single images that require fewer server connections. If you've loaded the image once then it should be cached meaning faster response times.
  3. Enable server compression. This makes the files load quicker to people's devices. Also it makes the 100 items on the page load faster to the device the user is on making it a much more responsive experience.
  4. Giving people what they want immediately (on the first screen) increases their stickiness. Organize the 100 links into a hierarchy based on what people are more likely to select. (Hot stuff first). All of the other links like company info, about, and the usual can be way down at the bottom. You can watch this over time on Google Analytics. (They have an interface in GA for showing which links are clicked most.)
  5. Make the layout scrollable is one of the more recent findings in studies. It seems that since people can flick pan that pagination is out. Smashing Magazine has a good bunch of usability findings they've published.
  6. Start simple then add complexity. If you start with an overly complex layout it will be much more difficult to make it have the same user experience on all of the platforms. Also it's much harder to work on the code when there are multiple templates. This means that some templates may have features others do not.
  7. If you're hosting with PHP you can use php-mobile-detect from code.google.com to make the layouts work for tablets vs cell phones. If you're designing for specific sizes you can load multiple templates to take advantage of screen real estate. Also you can tell whether the users should get the sprite or a heavier interface.
share|improve this answer
    
Okay, but how does this relate to user experience? –  Brendon May 7 '13 at 7:23
1  
@Brendon the OP meant to say "mobile-optimized" according to comments on the question. When you're designing for a mobile device speed is everything. Bad user experiences happen when people can't connect to a site or the server times out. Most of these suggestions are in response to that. –  AbsoluteƵERØ May 7 '13 at 7:36
add comment

Who is the target viewer? Are they other engineers who will likely be searching for specific terms? Will it be non-engineers casually viewing? I would ask myself what kind of person will be accessing the information and try to use that mindset as a broad template to being organizing the content.

However, without knowing that or the entire list of terms, my first inclination would be to attempt groupings -- for me, I think 6-8 would be ideal, though it depends on the breadth. I would also allow the option to sort alphabetically so viewers looking for something specific may more easily find it.

Also, why not consider a two-column, sidebar-content arrangement; sidebar contains the top-level categories and the content lists them. I'm also imagining two buttons fixed on top: "List by Category | List by Alphabet."

I think icons will also be key for two reasons: (1) obviously it lends itself to quicker comprehension but (2) it also gives you some functionality options (e.g. allowing the sidebar to somehow collapse showing only the icons but allowing for more main content space).

Not sure if any of this is helpful but they're just some of the first things that jumped to my mind. /stream of consciousness

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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