MakeCode Arcade Tutorial Update

Posted on September 24th, 2021 by Jaqster

In an effort to help optimize screen layout for everyone, we’ve updated our tutorial interface.

You may notice that when you open a tutorial or skillmap in MakeCode Arcade, the tutorial instructions are now on the left side of the screen instead of at the top.

Tutorial screen, before and after

Over the past summer, we conducted several user studies to get feedback on tutorials and skillmaps, and observed people using a wide variety of screen sizes across many different devices and platforms. We saw that with many of the smaller screen sizes, the vertical space in a tutorial was quite compacted and rendered the workspace almost unusable.

Small screen tutorial view

To fix this, we’ve moved the tutorial instructions to the left side of the screen as a tab, sharing space with the game screen. This gives people a lot more room to code using the Toolbox and the Workpace on the right. We also added a mini game screen in the bottom right corner, so you can always see your game. You can expand the mini game screen to the full view on the left pane.

Change locations of tutorial elements

Another small update we slipped into this release is the rotating banners on the MakeCode Arcade Home page that will highlight different activities and resources.

Rotating banners on home page

As always, if you find any issues, or have suggestions for improvements, please log them on GitHub.

If you have questions, feedback, or would like to participate in the MakeCode community, please join the Forum or follow us on social @MSMakeCode.

Happy Making and Coding!

The MakeCode Team