digital-form-builder icon indicating copy to clipboard operation
digital-form-builder copied to clipboard

Reorganise UI for component pages

Open delaynesr opened this issue 3 years ago • 2 comments

Is your feature request related to a problem? Please describe. At first glance, the page is a little hard to understand and takes some time working out what you need to do. The order of tasks on the page doesn't match the order that you need to complete the tasks. I also never noticed the warning at the top of the create component page regarding titles. It would be helpful to place this onto the component editing page underneath where the titles are shown. There is information on the page that is reserved for special use cases that could be hidden so as to not confuse the user (for example component name. I needed it explained to me that this was dev specific and I don't need to know about it as a designer). Some of the helper text copy isn't easy to understand at first. Ultimately all of these small things add up to more time spent trying to understand the page and less time completing the task.

Describe the solution you'd like Organising tasks/input fields in order of use, including moving component name section into a details component since it isn't often used. Moving the helper text about titles to the component editing page and making it visually distinct to help users understand an important constraint of adding titles.
Small adjustments to the UI, including title sizes to increase readability of the page at first glance. Some changes to helper text copy. See images for before and after, plus annotated image of the suggested changes.

Additional context Before: Screenshot (141)

After: Reviewed radios UI (2)

Annotated: Reviewed radios UI (1)

delaynesr avatar Mar 28 '22 14:03 delaynesr

Having a go at implementing some of this now ❤️

Thanks for the really clear and aesthetic suggestions, should be fun to work on! 💯

sentienthouseplant avatar Mar 30 '22 22:03 sentienthouseplant

Having a go at implementing some of this now ❤️

Thanks for the really clear and aesthetic suggestions, should be fun to work on! 💯

That's great! Thank you! The radio page is just an example, but I think it more or less applies to each component page. I haven't been through each page yet though to see what is needed individually!

delaynesr avatar Apr 05 '22 09:04 delaynesr