0

We are designing a website for our new software product. It's a versatile application and has more than 50 distinct features. It's one application but acts as a pack of different tools.

In the product's home page, there is a link that goes to /features. In there we aim to present a summary of all features (their benefits of course). How can we show case all 50+ distinct features in a page so that users get the whole thing and don't get bored?

One way is to have a grid like this:
Grid
with different icons & text but since the features are distinct ones, they cannot be grouped and this list gets too long ...
So what's the best way to show all these features?
Our home page design
Result:
Here's what we did at last.

  • As per @Long Eleven answer, please do consider if there is a Information Architecture design issue here, rather than purely a UI design issue i.e. are you organising info the way customer would prefer to navigate it. (Possibly even there may be a product management issue - most top products have realised highest feature count !=> best product) – Jason A. Dec 15 '14 at 11:18
  • @Jayfang I agree with you but please take a look at my answer to DA01's comment. – SepehrM Dec 15 '14 at 18:10
  • Ok, even from that, I'm still think there is likely an opportunity to apply a helpful "Information Architecture" e.g. Can you group these 50+ items by high level goals e.g. "Make documents and notes", "Follow the news", "Maintain your PC", "Mange your time". Compare say "Windows 7 Control Panel" - maps 34 options down to 8 categories. OS X example is arguably better. – Jason A. Dec 15 '14 at 18:44
  • We've grouped them. i.stack.imgur.com/4R7dG.png If we write a title for each group, is that your point? – SepehrM Dec 15 '14 at 18:48
  • 1
    @Jayfang Thanks, We'll add titles and refine the UI. – SepehrM Dec 15 '14 at 19:18
1

It's one application but acts as a pack of different tools.

How many tools? Does each tool have features that relate to it? You could try grouping the features by tool functionality, if that's the case.

Another way is to pick the top features, and give more space to explain and demonstrate and then list the lesser features in one column. Do you really need to explain every feature?

Another way is to list each feature as a text link and have that link to the feature/benefit explanation further down in the page. Users can skim the list and pick what they want to learn about.

  • Thanks, those ideas really help. There are about 50 tools. For example: RSS Reader, Notebook, Calendar, System Info, Disc Tools, Time Tools, etc. When I said 50+ features, I meant we wanted to write the most important feature of each tool. For example for Notebook: You can categorize your notes and never loose them. – SepehrM Dec 11 '14 at 20:31
  • Although all the answers are the same about "grouping", this is what we ended up doing. So I'm marking this as the answer. – SepehrM Dec 14 '14 at 20:18
  • RSS Reader and Disc Tools? You might want to step back from this a bit and get an idea of target audiences here. Sounds like a really eclectic range of features. At first glance, it sounds a bit like the "trying to be everything to everyone" problem. – DA01 Dec 15 '14 at 3:29
  • Glad the suggestion helped, @SepehrM – Mark Bubel Dec 15 '14 at 16:52
  • @DA01 Our application is a versatile windows assistant. I know it may sound odd to you but it's a move to reduce foreign pirated software and copyright violations due to some sanctions against our country. In our country, Iran, desktop application developments is very limited and this software, being one of a kind, has the support of 2 government organizations. We have also received overwhelming positive reviews in our demo show case. So yes, it does most things for most home users. – SepehrM Dec 15 '14 at 18:09
4

People are going to find it extremely hard to scan a list of 50 items, particularly if their presentation involves a less than 3-7 word description.

The tools you should consider (both, by the way, trace back to our working memory, which is cognition's biggest bottleneck):

Clustering

Divide features into logical groups, and even into sub groups. This will allow users to quickly scan through main categories, then sub categories, the individual items of interest.

Although not the best visual design, notice in the following image that features are grouped under headings, and that some feature can collapse to show sub-features. With some designs you see a small (i) button that reveals more details on the feature:

A feature comparison table

Progressive disclosure

From Universal Principles of Design:

A strategy for managing information complexity in which only necessary or requested information is displayed at any given time.

So essentially, don't display all information at once, but allow users to disclose further information upon action. This image illustrates it:

An image of an iPhone showing a div element expanding after the user has pressed show.

Another example can be seen in Google's extension store:

First you see the caption:

A screenshot of the Google Dictionary app

Then by hover you get a summary:

A screenshot of the google dictionary app when you hover over it

And by clicking you get many more details:

The window showing the full details of the google dictionary app

  • Could you please elaborate on progressive disclosure and give an example? – SepehrM Dec 11 '14 at 21:28
  • And one other thing I must add: This is not on home page & most users come directly from the home (introduction) page where there are 6 lines of introduction about some of the features. So they've decided to read more details. – SepehrM Dec 11 '14 at 21:34
  • Hi @SepehrM, I've added some examples. As for your second comment, it is hard to tell without seeing the actual design of the homepage and knowing more about your users and services, but do remember that just because someone wants to read more, doesn't mean they want to read everything... – Izhaki Dec 12 '14 at 0:20
  • Hi, Thanks for the time you've put into this. I've added a screen shot of our home page. Those 2 main images are going to be changed with some high quality ones though. I don't have enough reputation to vote and I think it's better not to mark it as answer for at least another day to see other ideas. I'm going to be working on your second approach at the moment. – SepehrM Dec 12 '14 at 7:57
  • What do you think about this? apple.com/osx/all-features – SepehrM Dec 12 '14 at 9:05
1

with number 50, they're not all features...they are functions.

You don't have to show all functions of your products in one page, you have a whole website to do this.

Back to features, usually most of products show no more than 3 features...range that people would remember about product before they use it. "Ah, this product A has ABC, APQ and AYZ, let's give it a try".

Problem solved.Your work now is finding 3 of 50 functions and call them "real features" to show.

I saw your "result" layout, in my opinion, it's better but still not good. You shouldn't use icons in that way.

We don't talk about how it looks or blah blah blah [ about Aesthetics ], we talk about how people recognize the meaning of each icons when there's 50s. I don't even scan these icons after seeing a lot of them.That's really bad behavior for your site :D

Problem will solve if you show icon and text together, for each function.By the way, it's still fine with text only.

  • Icons' title appears on tool tips (invoked by mouse hover or tap on touch screen). Will that suffice or should we add a text near each of them too? – SepehrM Dec 15 '14 at 18:02
  • tool tips is for product itself, like gmail or some web applications has a lot of functions and features to deal with. your website has only one job, talk about your product to people, just do it in a simple and clearly way. Don't hide anything. Don't make people must do some tricks to find out what your product have, just show them. "here is icon of functions and there's not a wall-of-text to explain about it" – Long Eleven Dec 16 '14 at 1:36
0

These experiments, [...] show that people are more likely to purchase [...] when offered a limited array of 6 choices rather than a more extensive array of 24 or 30 choices. Moreover, participants actually reported greater subsequent satisfaction with their selections [...] when their original set of options had been limited. Implications for future research are discussed.

http://www.columbia.edu/~ss957/articles/Choice_is_Demotivating.pdf

My suggestion is to consider grouping like functions together into larger parent categories ( http://en.wikipedia.org/wiki/Principles_of_grouping ) where the more refined tools are displayed inside.

Do you keep all your tools layed out in a grid on your desk? Or do you group them in "containers" based on their value to you during specific tasks?

Your designing for Human Computer Interaction, you have to make the computer display things in ways that make sense to humans.

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.