Preview might be confused with actual output

[janpaul123]

Right now people may confuse the output in the preview window with the output of the program. We can solve this by showing "preview". Or perhaps it'd be better to restructure the way dares are shown.

[benjohnbarnes]

"People may confuse"

– I did, quite a few times!

When I first started out I didn't realise there was a different tab available and it took me a while to figure it out. I think I believed it was broken, or I needed to sign up / do something initially. Later, when I understood, I still made a mistake with this a few times.

Analysis

I think the modality in the interface (which tab you have open is a mode and its not hugely apparent which mode the interface is in) isn't a great choice. It was one of only a few things that seemed to really need improving, to me.

At the moment, you have a tabbed view on top of the window. The tabs are "Dare", "Robot" and "Info". All the tabs show the code pane, which gives them a similar feel. The Dare and Robot feel particularly similar because they both show a kind of canvasy area.

What you have here is a modal / moded interface in which the mode is chosen by the current tab. Modal / Moded interfaces are notorious for causing user errors if the mode is not completely apparent from the context of what you are doing.

I suggest

• Instead of tabs, have a carrousel type thing so that the three areas feel like pages that are arranged next to each other (only one being visible on screen at a time).
• On the "Dare" page, don't show the code. Just talk about the dare. Have a large button labeled: "I Dare", with an arrow pointing right, which, when pressed, pages right to the "Robot" page. If you need to talk about the code in "Dare", show a picture of it that can't be mistaken for the real thing.
• Alternatively, for some (especially early) dares, it might be more useful to discuss the "Dare" above the "Robot" page. It can then be displayed in individual steps that walk the user through the individual stages they need to take.
• On the "Robot" page (and only on this) have the canvas and the code.
• Include the "Submit" button on the "Robot" page. That can pop something up that shows you how awesome you are, and showers you with points and sparkles.
• The "Robot" page can also have an "Info" button to see this (we never used it, but I'll look out for it in future dares).
• The "Robot" page should have a way to get back to the "Dare" page again, and then back in to the "Robot" page.

My key suggestion in all of this is that only the Robot page should look like the Robot page.

Final note

I don't know if Git Hub has voting. Having looked through the existing tickets and added a few, if I had a vote, this is the first thing I'd vote to improve in JSDare! The second would be a gentler learning curve on functions (another ticket I've added).

Everything else you've built is pretty awesome, and almost all of it works well as far as I can see. It's just the "flow" / "storyboard" of interacting with a Dare that doesn't seem right, which is a shame because it's fairly critical!