Redesign UI to Support Better Instructions

[brandonjackson]

The current UI makes it difficult to give the user helpful instructions that help the user understand what is going on instead of simply telling them what to do. For inspiration, we should look to the way that Codecademy gives users instructions.

After you have successfully entered a command, two new sets of text are loaded. The first is the Learn panel, which teaches the user about the command that they just executed. It is sort of a debrief on what just happened. Then there is a second panel called Instructions that tells the user what to do next. FWIW they also have a third panel that makes it easy to report a bug / getting stuck.

I think that something like this is desperately needed in this app. As a writer the current UI makes it very difficult to give nuanced messages, because the interface is clearly designed to display single lines of text. I suppose it would be possible to include longer messages as Markdown but still the UI should have better designed containers for specific kinds of messaging.

[brandonjackson]

I suppose one way to describe what is different about Codecademy and Make Art is that in our UI the old message completely disappears in a way that completely shifts attention forward to the next step, whereas in their system the Learn panel encourages the user to linger and read and understand, and they can move on at their own pace by clicking the next button in the bottom right corner. They can also move backwards.