Open adriannelee opened 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.
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.
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.
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)
Relevant research
Developer onboarding 06/2024 - Slide 32