I have a large list (100+) of items to be listed on a landing page. What's the best way to do this?

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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