Embed: users scrolled too much between editor and instructions

[galeyang]

Study result

In a UX study, we evaluated a Dart Future codelab dart-lang/site-www#1659. In Round 2, we made the exercise instructions much clear but it also took more space. Most participants scrolled up and down between editor and instructions. 4 out of 10 complained that they scrolled so much and would like to have the instructions and the editor on one screen.

Here's my part one, my part 2 and part 3. As I'm coding it, I had to go up and down. My personal preference would be not having the scroll so much.

Improvements to be considered

• Support multiple steps within Dartpad [@InMatrix & Khan Academy]
  

• Have instructions side-by-side or in a playground layout, like Kotlin's Koan [@InMatrix & user]

• Put instructions in Dartpad [@johnpryan & user]: comments can be removed or not ideal for formatting

• Instruction: display multi-parts in a tab or slider layout?

• Make instructions scrollable? [user]

• Simplify tasks or assign a separate embeds for sub-parts

Feedback welcome!

cc: @legalcodes

[legalcodes]

Thanks Gale for opening this ticket.

Looking at the helpful images, it just occurred to me that we might be using a fontsize for the instructions that is larger than it has to be (the font size within the DartPad embed is much smaller).

If we reduce the instruction font size and change the instructions from bulletpoint format to paragraph format, that might go a long way toward reducing the amount of scrolling needed.

[galeyang]

Another idea: allow users to detach embed Dartpad. With this, users can work on exercises while referring to instructions and previous example code at the same time.

Example: coding tutorial

Example: Youtube - a button that can display the mini player

cc: @InMatrix

[RedBrogdon]

Are there specific changes we can make in DartPad to help here, or is this more of a codelab construction issue (i.e. something that should be fixed in the containing page of the DartPad embed rather than DartPad's UI)?

Other than putting instructions in DartPad, I'm not sure what we can do with this codebase to help on this one.

[galeyang]

Discussed offline.

For the future codelab dart-lang/site-www#1659, @legalcodes will prototype "putting the instruction on the left and a narrower embed on the right" using the layout embed-new-inline.html.

Since this is less applicable to Flutter use cases, we discussed the detached editor. @johnpryan pointed out the implementation challenge with iframe: the control over layout is from the parent site. He will see if we can use inserted scripts.

---

Status of this issue is also tracked in https://github.com/orgs/flutter/projects/3.

[parlough]

As part of the new, simplified version of the DartPad frontend, the exercise functionality this was related to was removed.

If anyone would like to see similar functionality brought back, please check out #2702 or open a new issue. Thanks so much!