0

Homepage of my website needs to display lots of options to the user. Website has a search box at the top (that searches all the possible options) but we are planning to show lots of options to the user so that user can get a feel of what are the options she can explore. Currently, homepage looks like:

hackr.io homepage screenshot

I evaluated StackExchange sites page as well but it seems too messy to me.

StackExchange sites screenshot

These are the criteria am considering to display the options:

  1. The user should be able to find any option very easily (may be alphabetical order?)
  2. Page should look good on mobile as well.
  3. Options should look clickable (we want users to click on them to explore further. This is one of the reasons for not liking SE sites page)
  4. Should we consider anything else?

Thanks.

  • Alphabetical order will only help if users know the names of the options they're looking for. – Ken Mohnkern Aug 24 '16 at 19:28
  • @KenMohnkern in this case, am assuming the user will be interested in knowing which programming language she wants to explore. If the user is not aware what she is looking for even then alphabetical order helps explore better? – Saurabh Hooda Aug 25 '16 at 8:03
  • Programming languages have definite names, so alphabetical should work. I was worried about the case where the user is looking for concepts or other words that have synonyms. – Ken Mohnkern Aug 25 '16 at 11:44
4

The Stack Exchange communities menu is messy but likely not without a cause. You see, the actual example in the Stack Exchange sites for a better comparison would be the Tags search:

Tags search in UX

The reason is that in the Tags menu you already know what you want, so you'll just look for it and hopefully find it fast. For the communities menu you are meant to explore. You don't know what communities exist and as so you are provided a colorful, dynamic experience. I do think the communities menu is problematic, but not because is messy. Its because its hard to understand what the communities are about. If the name does not say everything you are bound to have to dig a bit (many times unnecessarily). Another problem is the almost absurd difference of box sizes (I think this bubble effect should be less exaggerated).

One point, however, is that when you give the user multiple unknown choices you usually provide some tools to make its life easier. Using the same example you have mentioned the communities menu has this top toolbar:

top toolbar in communities menu

, where a classification appears. Other important feature is to change the messy list, for a very straightforward one:

listed communities menu

But going back to your context. Personally I would start by profiling the expected user actions. When the User goes to your home page what will it want to do?

1) Search (Tags)

2) Explore (Communities)

3) Chose (Well known small list of options like your personal list of communities)

For 1: Let's say the user already known what it wants, and wants it fast. Every feature you implement must have as criteria the decrease of search time. As so autocomplete features are fundamental. Color coded tags depending on an intuitive classification (web languages, all-purpose, science, etc) is a strong possibility. Adding icons to your tags can also be positive (I'm a Python user and would easily recognize its logo everywhere).

For 2: The user is unsure of what it wants. It knows that is looking for some way of making plots in its webpage. How does it get a good list of possibilities (asking in stackoverflow is off-topic, although common ;p)? It would likely start by web, moving into visualization or plotting. StackExchange solves this by allowing any kind of sensible tag to exist. So the "Visualization" tag will lead you to questions about visualization. Crossing "Visualization" with "Python" would lead you to "Visualization" questions in the "Python" language (multi-tag search)*.

  • there is an important point here that is the expectation that a user that is searching in this point is a registered one. As so it likely has given its preferences in the registration process. This is an important source of information. Consider if this is your case.

If this last alternative is your objective than I think your current homepage is close to a good solution.

  • Can I search for "Python" and "Android Development" at the same time?
  • Once I start writing will the list be updated automatically?
  • Would it be a possibility to sort by most viewed (instead of alphabetically) when the search field is empty?
  • Can the most famous titles have their respective icons?

I'm sure there are other things to take into consideration. I'll be sure to comment if any comes to mind.

1

If you can break them up into general categories it will help user scan the list. Also, if the SE site seems too messy, you could maybe try a variation of it without the colors, or keep the colors but lose the icons.

  • Can you provide an example of what this would look like? – Andrew Aug 24 '16 at 13:04
1

As I see it your goals are twofold:

  1. Keep your home page design simple and attractive (beneficial for engagement, page load + render times, etc.)
  2. Give the user as many 'hooks' as possible to create engagement for whatever they care about.

One approach to your problem is to create a logic tree whereby you begin by suggesting the most common, most well-supported options you have, then show the user more options either:

1) Immediately after they make their first selections ('You selected Javascript. Would you also like to select Jquery, NodeJS, etc.')
2) Over time as they get into your site and you can track their engagement ('We see that you've been spending a lot of time on CSS. Would you like to delve into SASS / HAML?')
3) By prompting them to search for themselves. Show them major categories and have a big search box below that says something like, 'We have lots of other categories like Hadoop, LaTEX, and HAML. What do YOU want to learn about?'

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.