xrpl-dev-portal
xrpl-dev-portal copied to clipboard
XRPLF
Quickstart Prerequisites format improvement for better UX
Problem: Currently we don't emphasize downloading the Quickstart Samples archives enough and it's easily glossed over. If the user skips it, they’ll be missing the core code they’re working from.
Proposal: Let's break down the Prerequisites section into 3 steps and add a warning message to encourage users not to skip this step.
In addition we can also reducing the top and bottom padding on the 'npm install xrpl' code block to 24px so it takes up less vertical space (this is not shown in the proposed mock).
Current design:
Proposed design:
Warning asset in SVG and PNG:
Just discovered that we have these Callout UI elements that already exists in the doc, so we can repurpose this component instead of using the asset I attached earlier.
Personally I'd like to explore alternatives to offering a zip file because it's hard to track the diff of the zip's contents. It would be easier to offer the sandbox page directly on the site—but I'm not sure if that provides for the same amount of learning. I'll explore that a bit.
Sandbox area directly on the page would be cool, a lot of people have been asking for that during our Learning Portal user testing as well
Two things:
We can discuss why I strongly advocate for the use of the Zip file, particularly as the examples grow. Most of the current tutorial examples demonstrate atomic behavior rather than how to perform a complete practical task. A real sandbox would allow developers to manipulate and run the code in place, with a console window that shows each step of the process as the transaction progresses. Just pushing a button and receiving a response isn't a learning experience for the developer.
"Warning" is overkill here, and should only be used in cases where there is a possibility of losing work or money. A note or information label would be more appropriate.
Makes sense, we can use a more informative label, the reason I was thinking Warning could be appropriate is the fact that it's a pretty important step and if they miss it they won't be able to get the core code they'll need to work from. Warning maybe too severe but we should definitely make the callout more apparent.