2

I have been looking all over the web for good examples of how represent 4 major categories on a web page from a design perspective.

I am designing a web site help centre. There are 4 major categories:

  • Troubleshooting
  • Orders & Payments
  • Account & Learning
  • Products

If I divide the web front page into sections, the top section has to contain a search box and those 4 categories (needs to be visible above the fold).

Note: When a user clicks on a category, they should see extended and related content down without page reload.

I'm considering 2 actions:

on hover - to show that element is clickable
on click - show under which category customer is now

It would be great to see any exciting examples of web pages where both actions are presented. On most websites, a 'click' (selected state) action redirects users to another page. I haven't had any luck finding an example where 'clicks' reveal more information but don't reload the page.

I did some research already:

  1. support.twitter.com - categories are quite big (with icons and extra explanations) - this won't work for my application, because the user will not be redirected to another page with just breadcrumbs. In our case, the user needs to be able to see all 4 categories and should easily be able to switch between them. There is no need to give a description (maybe in a pop-up way only).

  2. I was thinking about a dot navigation menu (way to present categories) as well, but my client said that it's not that intuitive without icons.

  3. I used a flat, minimalistic design style and really want to find an extraordinary way to convey those categories.

If I decide to apply icons, where can I find stylish icons and what do you feel will best represent “troubleshooting”?

For us “troubleshooting” means everything about issues, bugs, mistakes, etc. from tech perspective.

I would be very grateful if anyone can share your insights and maybe some web examples that could give me some ideas.

Sketch is attached here: enter image description here

  • How much content goes under each section? Will it be super long if it expands? – Ashlee Palka Oct 5 '16 at 20:57
  • 1
    Welcome to the community, by the way! :) – Ashlee Palka Oct 5 '16 at 21:07
  • Hi Ashlee Palka, content will be no that heavy (it would be a list of topics related to each category). – natalia Oct 6 '16 at 3:33
3

You could treat them as tabs, did a quick mockup:

enter image description here

Like you pointed, changing color on :hover and :active state on click(and for a better feedback, use "arrow" to show which category is selected(clicked).

For icons, i usually go to icon8 for reference.

  • Dear Takebo, thanks a lot for your sketch draft. It is really helpful and gave me some extra ideas! – natalia Oct 9 '16 at 7:18

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.