Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Embed: improve the visual distinction between example and exercise #1150

Open
galeyang opened this issue Jul 15, 2019 · 0 comments
Open

Embed: improve the visual distinction between example and exercise #1150

galeyang opened this issue Jul 15, 2019 · 0 comments
Labels
from: study p3 ux
Milestone

Comments

@galeyang
Copy link

@galeyang galeyang commented Jul 15, 2019

UX study result

When few participants first saw many visually identical editors (some are examples, while others are exercises) in the Future codelab dart-lang/site-www#1659, they were unsure what they were supposed to do (entering code vs. clicking the Run).

Going from code window where you're supposed to write in, to code window where you're not supposed to write in in the same scroll is confusing to me --- the confusion between which ones were supposed to be edited, just like got a glance.

Sometimes, I wasn't sure like whether I should just to code something or I'm supposed to just run it to see it.

For short term, @legalcodes has made two changes to the Future codelab

  • use light theme for examples and dark theme for exercises
  • add a prominent title (Example or Exercise) above each embed

Improvements to considered

  • Change the tab label to Example or Exercise (or add extra heading, like W3School)
    image
  • Style the placeholder #1156

Example from Kotlin
image
Matching the our color theme
image

  • Or maybe in the demo mode, hide the format, reset, and analyzer UI unless users start making changes

Feedback welcome!


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

@galeyang galeyang added ux p3 from: study labels Jul 15, 2019
@RedBrogdon RedBrogdon added this to the Backlog milestone Jul 24, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
from: study p3 ux
Projects
None yet
Development

No branches or pull requests

2 participants