0

This is about the home page of a website which has 9 categories.

Each category is represented with a box which shows the category title with big bold fonts in the first line and then 3 lines of description text with smaller font size.

On this page user must select a category, fill a textbox and hit the ok button. There is nothing else he can/is expecting to do.

My layout is like this

enter image description here

Right now user clicks a category and the clicked category box's background turns to another color so it gives the feeling is "active". Then he fills some info to the textbox and then clicks the ok button. If user clicks ok button without selecting category or filling the textbox, balloons pop-up on appropriate positions explaining and pointing that he must select a category or fill the text box.

  • Categories cant broke down or reorganized, they are 9.
  • Descriptive text of each category is crucial, so it must be visible. Can't have hidden text that shows on hover etc...

The layout of the categories does not satisfy me, is there another approach to show 9 categories and their descriptive text?

| improve this question | |
  • what kind of things are input into the textbox? since 1 and only 1 category selection is required maybe there is a way to help the user select the right one based on what they type? – DaveAlger Jan 13 '15 at 20:02
  • Can you kindly convey the relation between selection of a particular category and the text field ? – Aniket Gajanan Varankar Jan 14 '15 at 6:22
3

I would make it clear to the user that there are two steps and that "selecting a category" is a first step and a required step. Also I would use a radio button for the category selection as it makes it clear for the user that he is actually selecting a choice (rather than just clicking and bg color changing)

mockup

download bmml source – Wireframes created with Balsamiq Mockups

| improve this answer | |
  • thanks for the help, yes im going to implement labels saying "Step 1 Select category" "Step 2 Fill text" and maybe enclose each step with borders or something. button will be alone in the bottom. if you know anything like this in a website which is already implemented please give a link :D – Sharky Jan 14 '15 at 8:36
  • you are welcome, can't recall any reference sites.. – Ades Jan 14 '15 at 10:01
1

I'm thinking it might not appeal to you because it is a bit text-heavy. You could consider adding icons or imagery to represent each category. That might also give you some different options with the layout (for example, your icon/image could be to the left or above your text).

Centering the Category title above the supporting text might make it look a bit cleaner.

What kind of information will be in the boxes? Are they purchasing something, are they doing a search, or something else?

Good luck!

| improve this answer | |
  • thank you for the answer, unfortunately what you have suggested was exactly the previous version of this :( If you have any examples on other websites please drop a comment here – Sharky Jan 14 '15 at 8:34
  • I'm not sure how similar this is to what you're trying to get users to do, but I like how trunk club goes about helping the user select their fashion style (this seems similar to your category selection). Just go to their site and click "get started": trunkclub.com – Lauren Dankiewicz Jan 14 '15 at 20:13

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.