search

hedyorg / hedy

Hedy is a gradual programming language to teach children programming. Gradual languages use different language levels, where each level adds new concepts and syntactic complexity. At the end of the Hedy level sequence, kids master a subset of syntactically valid Python.
https://www.hedy.org
European Union Public License 1.2
1.3k stars 285 forks source link

💻 Redesign of Adventure page within tryit endpoint #5648

Open Annelein opened 3 months ago

Annelein commented 3 months ago

Fixes #5535

https://www.figma.com/design/wrT20i7nKRBm66eVrf5A8F/Class-%2F%2F-Adventures-ideas?node-id=111-107&t=WR6z6PvgzdUO63sk-0

Annelein commented 3 months ago

A few good points that @AnneliesVlaar mentioned in #5517 , I've also added some

Few points of discussion:

Missing in the design:

Please leave a comment if there is something else you're missing or that needs to be discussed

https://github.com/hedyorg/hedy/assets/48122190/4e42357b-c353-4bd3-b991-f47c8304821f

Felienne commented 2 months ago
  • If the user uses the copy symbol, will the copy symbol (and button) than change into a paste symbol? And what behaviour will it have? Clean and paste?

Ow that is a great idea, I would love a copy button that changes into a paste button on theory. However in practice, no other tool has that (as fas as I know) so I fear it will be more confusing if we do it. We can disable the copy button if something has already been copied? But I also see how we can, for now, just aline with other tools do with is nothing.

Paste at the end? Paste at the cursor?

This is an unrelated interesting question! We have long discussed pasting at the end instead of over for the yellow example buttons. I am fine with that but maybe it is out of scope here? Do we need to discuss that now?

  • [ ] Do we want the explanation to be smaller in height and thus scrollable?

Another very hard question!!!! I think it does not look nice that the explanation "hops" when switching tabs. However kids might not care so much? I fear that they will not scroll and then miss important explanation if we don't show it all (but on the other other hand, maybe they never read?)

In conclusion I think I'd keep it as we have it, but I can easily be swayed.

AnneliesVlaar commented 2 months ago
  • If the user uses the copy symbol, will the copy symbol (and button) than change into a paste symbol? And what behaviour will it have? Clean and paste?

Ow that is a great idea, I would love a copy button that changes into a paste button on theory. However in practice, no other tool has that (as fas as I know) so I fear it will be more confusing if we do it. We can disable the copy button if something has already been copied? But I also see how we can, for now, just aline with other tools do with is nothing.

I can see that an all-in-one copy/paste button can be confusing. I was wondering, if you copy your code (to use it in a different level/adventure I guess), how do you paste it there without a paste button. Can we easily teach student to use a button to copy and ctrl+v for example to paste?

Paste at the end? Paste at the cursor?

This is an unrelated interesting question! We have long discussed pasting at the end instead of over for the yellow example buttons. I am fine with that but maybe it is out of scope here? Do we need to discuss that now?

I will make separate issue about the yellow button.

  • [ ] Do we want the explanation to be smaller in height and thus scrollable?

Another very hard question!!!! I think it does not look nice that the explanation "hops" when switching tabs. However kids might not care so much? I fear that they will not scroll and then miss important explanation if we don't show it all (but on the other other hand, maybe they never read?)

In conclusion I think I'd keep it as we have it, but I can easily be swayed.

gisellandrade commented 2 months ago

@Annelein Here's the new buttons for the design and new modifications image

And also I just add the language buttons that shows this Captura de pantalla 2024-07-09 093735

Annelein commented 2 months ago

@jpelay @Felienne just to be clear:

jpelay commented 2 months ago

For example the For Teachers page has more pop than this page, and this one is meant for kids.

image

jpelay commented 2 months ago

@jpelay @Felienne just to be clear:

Annelein commented 2 months ago

I like the redesign, and the UX, but I feel like we are overcorrecting going from a very colorful site, to a rather monocrhomatic one.

image

I understand what you mean and I agree! Only thing is, I have today and tomorrow left to work on this and we agreed on this design long ago so not sure what you want me to do with it for now.... Maybe @gisellandrade can make an updated design with a bit more colours which can easily be implemented in a different PR?

Annelein commented 2 months ago

@jpelay I wasn't there on Tuesday during the meeting. But I will leave the "enforced developers mode" option.

One more question, the cheatsheet, language and read outloud dropdowns should be visible. But which of these things do we want to be visible in "enforced developers mode":

jpelay commented 2 months ago

@jpelay I wasn't there on Tuesday during the meeting. But I will leave the "enforced developers mode" option.

One more question, the cheatsheet, language and read outloud dropdowns should be visible. But which of these things do we want to be visible in "enforced developers mode":

  • level dropdown
  • adventure dropdown
  • next adventure button
  • program name input field
  • share button
  • submit button
  • progress bar

I think it could be similar to this, just hiding the adventure and making the editor bigger:

image

jpelay commented 2 months ago

What do we think about moving the "Read outloud" button down here?

image

AnneliesVlaar commented 2 months ago

What do we think about moving the "Read outloud" button down here?

image

The "read outloud" functionality reads out loud the output and not the input, maybe it is better under/in the output screen?

jpelay commented 1 month ago

I've been thinking about this design, and I rearranged things a bit, in a way that I think improves usability of the page:

proposal_hedy

The changes I propose are the following:

  1. Move the Read aloud button to be bellow the output window (like @AnneliesVlaar suggested)
  2. Place the progress bar in the bottom of the page, as well as the next adventure button. It is more natural to go from top left to top right.
  3. Replace the percentage with the number of adventures completed, and the number left. I think this can be more understandable by students who might not be familiar with percentages.
  4. Move the code related buttons away from the editor.
  5. Remove the text box with the title of the program. I think it's better if by clicking share, a modal is shown that prompts the student to title the program, and make it public or private. There might some badge in the UI showing that it was shared.
  6. Make the adventure dropdown bigger, so it serves as a title to the current adventure. Another option would be to have a button and open the adventure list to the side, like the folks at Code Academy do:

image

gisellandrade commented 3 weeks ago

I'm leaving here the drawer, and how it would look like image image image

Felienne commented 4 hours ago

As discussed in the meeting, if @boryanagoncharenko does a sanity check and merge, @MarleenGilsing can test it on alpha!

jpelay commented 3 hours ago

As discussed in the meeting, if @boryanagoncharenko does a sanity check and merge, @MarleenGilsing can test it on alpha!

Yes! The url to try the new design is: localhost:8080/tryit