HTML interactive editor - user testing

MDN
#1

In the ongoing project to bring interactive examples to MDN, we have finished the JS pages and are very close to finishing the CSS pages. The next phase of the project is HTML.

@schalkneethling implemented a prototype editor for HTML examples, and in the last sprint we user-tested it. We showed participants the editor embedded in a couple of test MDN pages:

We summarised the results in this document:

HTML interactive examples user testing - results & recommendations.

To summarise the summary: there are a few small changes we’d like to make, but in general the prototype performed really well. Next steps will be to build the HTML editor as a production-quality component, and to start writing HTML examples.

3 Likes
#2

These are looking really good Will, thanks for sharing the details. A couple of points:

  1. In terms of making the output more obvious, why not add a heading about the output pane saying “Output”, or similar that is the same height as the HTML and CSS tabs? then you could make the output pane the same height as the code editor panes, which would probably improve the consistency of the look.

  2. We’ve heard a few people in different places mention about tutorials being hard to find. I guess we need to devise a plan for adding more worthwhile tutorial links into reference articles. I’m not sure there is really a way to automate that, so it’d probably be a whole load manual work.

#3

about 2. Wouldn’t some kind of tagging take care of the issue, with a greping over the code to create some kind of representation. That said… I am not yet knowledgeable of the infrastructure.