2

When a user wants to create a new post, my app has a Grid with "Post Types" as the first step, and below the Grid, it has the rest of the form where users can type a Title and a Body.

enter image description here

When the user selects a Type, the square becomes "selected" and they are automatically scrolled down to the Next step ("Title/Body" fields).

I'd like to add 3 more Types, but also add a description to each of the Types.

So, for example, if the user selects "Type 2", the app will show a small description such as "Apples, oranges, pears..." (as examples of what can go in that type)

What would be the best way to do this, in a way that looks good and is functional?

I was thinking we can have the description appearing in the middle, on click, and scroll the user down to the next step ("Title/Body" fields)

enter image description here

Is this a good UI/UX? Is there a better way to do this? (taking Mobiles in consideration - so we can't have "on mouse over" events)

Improve this question
2
  • 1
    Have you considered to split the type selection and form elements up into multiple steps? If so, what are the arguments against it?
    – jazZRo
    Commented Feb 18, 2021 at 12:12
  • Sorry to say but I don't see this design a good one and has limitations. What if there are more than 9 types / 16 types . I will suggest to have a simple combo have Post Type option and after selecting any type, you can show description of it(otherwise show nothing). This will save complexity and can support any reasonable number of post types.
    – Moksh
    Commented Feb 18, 2021 at 19:53

1 Answer 1

Reset to default
1

I think your suggestion is too confusing and not a known pattern for the user. Creativity is good, but UX & UI have to be consistent to users' expectations.

(Without knowing the context of your app,) I would suggest something more simple:

Place the description below the selection

enter image description here

Or: A help mode you can enter and then press on the posts to trigger a dialog

enter image description here

Even though that is probably not as practical, since the description has to be visible instantly. But just giving you ideas.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.