Wireframe ideas for menus, palette and debugging

[joykirat18]

I studied the wireframe discussed in the discussion, and I feel that there are a lot of buttons when we open the application. A new user might get confused. So I wanted to put the buttons in the drop-down on the right side of the screen and only the essential ones at the top. So I drew some wireframes in Figma.

The link to the wireframe https://www.figma.com/file/DCvREdser1BWaoL2rpRjbY/Untitled?node-id=0%3A1

1. The palette section is kept on the left side of the screen, and initially, only three icons are visible.

2. On clicking the search, load, setting, and language button section ( top right corners), a separate working area is opened on the right side to not interfere with the blocks kept. The rest of the buttons can also be grouped into different sections similar to these sections.

3. There is a different debugging section in the app, which eliminates the run slowly and run step by step button from the main screen and puts it in the debugger menu. You can set breakpoints and get various values at the top sections and print and console logs in the bottom section. (The blocks become red when selected as breakpoints)

Wireframedemo.mov

4. For easy searching of things, we can enhance the search button's functionality, we can implement something like Mac OS does. (basically, implement a global search that searches the block as well as the buttons)Here is a screenshot of how it works.

Would love to hear your feedback and thoughts on this. @meganindya @walterbender
Thanks.

[meganindya]

Well, I want to have more thought on the vertical menu bar — don't want to eat up space on the narrower side.

I think your palette design could see more work, but I like your ideas about the things you have on the right side. Would be nice if you can build up more on those.

I don't really get you 4th point.

[daksh4469]

So, are we now looking for a horizontal palette menu? Asking this as @walterbender mentioned in #5 (comment),
(1)we were thinking the menus would be vertical on landscape displays and horizontal on portrait displays

[walterbender]

I agree with Anindya re the palettes: One goal is to minimize the impact of palettes on the lesser dimension of the screen. But we also don't want to confuse. Having, for example, the logic palettes appearing under the music icon is confusing. Maybe the icons shift as well? Also, while the subpalette design on the right is nice, we need to think about what is "low shelf" -- always at hand -- vs "high shelf" -- a few clicks away. In practice, showing/hiding blocks, erasing the screen, grids are all low shelf. Typically, you only change language once ever.

…

On Sat, Mar 20, 2021 at 6:51 AM Anindya Kundu ***@***.***> wrote: Well, I want to have more thought on the vertical menu bar — don't want to eat up space on the narrower side. I think you palette design could see more work, but I like your ideas about the things you have on the right side. Would be nice if you can build up more on those. I don't really get you 4th point. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#39 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA6PXYOFV2LUAPZ2GUTTJBTTER42HANCNFSM4ZPVV3OA> .

-- Walter Bender Sugar Labs http://www.sugarlabs.org <http://www.sugarlabs.org>

[joykirat18]

I thought about the palette section and how can I redesign it, and I agree it would be better to keep the palette section horizontal so that it has no impact on the lesser dimension of the screen. So I tried to redesign the blocks. Here is a video demonstrating that idea.

Screen.Recording.2021-03-21.at.5.23.18.PM.mov

In this way, the user will not be confused and it would be a minimal design.

In the 4th point, I was trying to demonstrate something like this. This is adobe illustrator and since it has a lot of features so it is sometimes difficult to find what you are looking for. We can improve our search similar to this.

Screen.Recording.2021-03-21.at.5.29.24.PM.mov

Would love to hear your thoughts on these ideas. @meganindya @walterbender

Thanks