Overwhelming toolbar buttons

amyjko commented 3 months ago

What happened?

At the CSTA Wordplay workshop, many found the number of toolbar buttons overwhelming. Most are for experienced users and could be hidden away in toolbars. Go through each and decide which buttons could be tucked away in a large set of buttons, and which must always be shown on touch screens.

Anything else?

No response

What browsers are you seeing the problem on?

Chrome

What operating system are you using?

Windows, macOS

alissalau commented 1 month ago

I would like to be assigned to this project with @sdahl4

amyjko commented 1 month ago

Thanks Alissa! @sdahl4 will have to comment for me to add them. Lots to design here!

sdahl4 commented 1 month ago

I didn't know I needed to comment separately, thank you! I would also like to work on this issue.

amyjko commented 1 month ago

(Just a GitHub limitation: people not added as collaborator can only be added after commenting).

alissalau commented 1 month ago

Got it, thank you for letting us know!

On Wed, Oct 9, 2024 at 8:43 PM Amy J. Ko @.***> wrote:

(Just a GitHub limitation: people not added as collaborator can only be added after commenting).

— Reply to this email directly, view it on GitHub https://urldefense.com/v3/__https://github.com/wordplaydev/wordplay/issues/538*issuecomment-2403876977__;Iw!!K-Hz7m0Vt54!lHgd35sctFJLW6Evv2MZzQHOsdYm-K5L4wzkWcM15uUc2P05rWfW4BbpdXnYov98zshXkikezh4fJ2eNXTWrP7s$, or unsubscribe https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/BLVRQR725XMDGTJWQRECR73Z2XZUNAVCNFSM6AAAAABLFRMQ3CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMBTHA3TMOJXG4__;!!K-Hz7m0Vt54!lHgd35sctFJLW6Evv2MZzQHOsdYm-K5L4wzkWcM15uUc2P05rWfW4BbpdXnYov98zshXkikezh4fJ2eNGBoOhn4$ . You are receiving this because you were assigned.Message ID: @.***>

alissalau commented 3 weeks ago

### Purpose:

The Wordplay toolbar is a key aspect of the software that supports beginner coders with navigating coding. Clear UI is crucial to creating accessible experiences for new coders, creating a comfortable and encouraging experience for students using the platform. We looked at elements from Scratch MIT and drew inspiration from the multiple tabs and minimalist design that has all the necessary elements while maintaining a clean workspace.

Going into our toolbar redesign, we aimed to centralize the most useful buttons, cut down on repetitive features, and group buttons with similar functionality in dropdowns.

We agreed to copy, cut, paste, undo, and redo in the main bar in the top left since they are useful functions that students will use frequently. We grouped together all the select functions, because they have similar functions and would mostly be used by more experienced users.

### Group together - open on hover/click

Select container and program called “select”
The move forward functions under the stage
The move backwards functions under the stage.

### Tools removed

Remove select neighbor after (diagonal arrows)
Change expand bottom toolbar to just hide it away completely and not just expand and add whitespace
Removed top name entry– doesn’t change the name of the project, and doesn’t save?
Remove stage/code icons

### Move

Move select program button
Make the slider longer to make it easier for students to track through their progress
Parentheses to bottom menu right next to searchbar
The maximize and minimize buttons were moved for the code source to the right hand side, as well as for the stage so they both match, so the stage maximize and minimize buttons can be in the same line as the stage lock buttons that are also on the right hand side.
We also moved the animation button so when it appears at the button of the stage screen with the other buttons that deal with motion, like play and pause.

Figma link: https://www.figma.com/design/X04XErPpkgO9zegypVBuV0/Wordplay-FIGMA-draft?node-id=0-1&m=dev&t=rmE5Zu23L4E9k9SB-1

alissalau commented 3 weeks ago

Wordplay FIGMA draft.pdf

@amyjko

amyjko commented 2 weeks ago

A few process notes:

@sdahl4 is also assigned on this. Is this a joint proposal?
Remember, per the workflow, no PDFs for design proposals, just embedded screenshots with image descriptions. PDFs are not accessible to contributors who are blind.
When you share a design proposal, you need to describe it: what is the proposal, why did you make these choices, what are the tradeoffs?
There is a related issue, #454. How does this design proposal interact? Talk with @nathanbek to learn more.

sdahl4 commented 2 weeks ago

Yes this is a joint proposal! Here is an embedded screenshot with image description:

Here is a more through description of why we made each design choice:

We propose four main types of changes for the toolbars:

1 Group together - open on hover/click:

We decided to make three groupings of buttons that served similar functions to eliminate confusion causing clutter.

Select container and program : We decided to group the select container and select program because they served a similar purpose, a user would select a program and a container to have further clarity on how their code is grouped together, so we put them in the same drop down bar.

The move forward functions under the stage: We moved all the move forward functions stored under the stage area of the screen because the served similar functions of helping a student move forward.

The move backwards functions under the stage: For a similar reason, we grouped all the back arrows under the stage because they served a similar function.

2 Remove unnecessary tools

Remove select neighbor after (diagonal arrows) - These do the exact same thing as the mouse and left and right arrows and cause confusing clutter.

Expand bottom toolbar – We changed this button to show and hide the menu away completely, instead of expanding and adding white space.

Remove source photo and stage photo – We found these features unnecessary, since there is already a word that indicates which window you are on. We removed this to reduce visual clutter.

Removed top name entry – This feature doesn’t change the name of the project, and doesn’t save to the project

3 Move

Move parentheses to bottom menu right next to search bar – We moved the parentheses and brackets here because they are notation functions similar to the other symbols in this menu. This reduces the number of features on the top menu, while keeping them easily visible because they are central features that are used often when coding.

Move the maximize and minimize window – The maximize and minimize buttons were moved for the code source to the right hand side, as well as for the stage so they both match. This makes it so the stage maximize and minimize buttons can be in the same line as the stage lock buttons that are also on the right hand side.

We moved the animation button so when it appears at the button of the stage screen with the other buttons that deal with motion, like play and pause.

4 Modify

Make the progress slider longer – We extended the progress slider below the stage to take up excess white space, and make it easier for students to track their progress

amyjko commented 1 week ago

Thanks for the proposal. Here's feedback to address:

I don't think I'm understanding what a "drop down bar" widget is. Is this intended to be a menu bar? It looks like a kind of non-standard mix between a drop down menu and menu bar. It should be a WCAG-compliant standard widget, so that it is screen readable.
Moving all of the stepping buttons into menus makes them very hard to press repeatedly. This is problematic because it is such a common use case: creators don't just step back once, they step back many times, quickly. This would slow them down.
The select neighbor buttons do not do the same thing as the mouse and left/right arrow keys. They choose the adjacent item in a list. This is possibly not frequently helpful, and can be hidden in some kind of collapsed advanced commands area, but they should not be removed.
If you remove the source file name editor, how will creators change the name of source files? (It is not the project name, it is the source file name).
Are you proposing to move the tile minimize and maximize buttons to the right on all tiles, or just code and stage? (If just code and stage, why only those, as it would be inconsistent across other windows?)
For the time slider, it's not clear what the behavior would be here. Are you proposing that it always fill the remaining space, and that when it is larger than the remaining space, it scrolls, as it currently does? Or something else?

Also, just a note to @alissalau: you submitted this for credit, but the design hasn't been approved yet, so it's not eligible for credit yet.

sdahl4 commented 1 week ago

@amyjko Thank you for the feedback!

Yes, this would be intended to be a menu bar, after looking at your comment though perhaps a better design would be having the ‘undo, redo, cut, copy, paste, and tidy buttons in an advanced commands area menu bar. As proposed in the screenshot below, this revised design would put tools that are less used cases into a menu bar that appears after a user clicks on it, similar to the ‘autocomplete menu’ except the menu would be the tools as shown in the image below.
We will leave the stepping buttons into the main bar, as also shown in the updated design above
We can move the select neighbors into the collapsed advanced commands area, as shown in the updated design above.
We will move the source file name editor back.
Yes, It would be across all the windows, those were the two we chose to show in our example, but it would be across all windows!
Yes, that is what we are proposing, it would work as it does currently, but with our new design we feel like it is easier to use and track through specific points in the code with the longer time slider area. Thank you again for the feedback hopefully this provides some clarification, and we can talk more tonight!

amyjko commented 6 days ago

Thanks for the clarifications. Make sure to coordinate with @nathanbek on this. Add a final design proposal with everything all in one place and I'm happy to do a final review.

sdahl4 commented 12 hours ago

Final Design Proposal @amyjko

Grouping items

We plan to declutter the toolbar section by grouping undo, redo, cut, copy, paste, select neighbors, and tidy buttons into a dropdown menu bar. The menu will open on hover to ensure that students are aware that it is there and can easily access it while coding.

Remove source photo and stage photo

These photos are unnecessary because they convey the same message as the titles of the windows, and takes up additional space.

Moving Parentheses

We propose to move parentheses and brackets to the bottom bar to maximize space in the top toolbar.

Moving animation button

The animation button will be moved to the bottom of the stage screen with other buttons that control motion in code visualizations.

Moving maximize/minimize window

Maximize and minimize buttons will be moved to the right side of the window across all windows to maintain consistency and and put them in the same line as the stage lock buttons.

Make progress slider longer

The progress slider will be extended to make it easier for students to track through their progress in their code.

Change expand bottom tool bar

The bottom toolbars expansion button will be changed to either show or hide the toolbar, instead of adding additional white space.

What will stay the same

We will not remove the source file name or stepping buttons. We also will not put the fast forward buttons into a menu to maintain the functionality of these features.

wordplaydev / wordplay