search

cds-snc / design-gc-conception

MIT License
4 stars 0 forks source link

Make code builder's live updates to the preview more obvious #1006

Open adriannelee opened 1 month ago

adriannelee commented 1 month ago

The code builder was a helpful feature for: evaluating how comprehensive the types of parameters were and for editing and playing around with the code.

Some missed that the code builder updates the code preview. This may have been because the code preview itself wasn't noticed as a live example and/or because they had to scroll down to the code builder and have the code preview out of view when they input into the code builder. It may have also been missed because the preview wasn't always obvious as an example of the component (vs. a part of the page)

image.png

Relevant research

Developer onboarding 06/2024 - Slide 32

SmartMouthWords commented 1 month ago

Part of the issue is about the placement of the preview element on the page. Adding stronger intro text on how to use the code builder may address some of the confusion we saw in the usability research.

realdylanzheng commented 1 month ago

Also, on mobile the fields of the code builder are consistently out of view and require the user to scroll horizontally to bring them into view, this poses various usability issues too - while understanding this is the limitation of a table based interface.

MatildePerrusclet commented 1 month ago

Could having the preview in one iframe and the code in another one be an option? If there were two iframes, it would be easier to add an subsection H2 for the "preview" and another one for the "code" section.