Hi Hopscotch Forum, Rodrigo here!

Hey @Rodrigo, the design stream was super interesting! Figma is awesome, and it was cool to see you use it first-hand! Although I couldn’t be in chat for long (due to real life responsibilities), I’m glad I got to pop in and say hi.

After reviewing the stream VOD, I’ve got the following thoughts about this part of redesign. I’m super passionate about UX/UI, and figured I’d give my two cents :)
I know how important good feedback can be, so I went super in-depth using what I’ve learned about UX/UI.

In summary, I really like this new UI so far! It’s modular, more transparent to the scene you’re working in, and there’s plenty of new UX implications. I do see a few things that could be improved for power users especially, who place many blocks very quickly.

I love how the new design language emphasizes visual transparency and clarity of thought via just being able to see your objects in the scene at the same time as when you’re coding. It feels amazing and immersive. The addition of negative space by removing the large static menu is absolutely refreshing.

The UI is great! The UX still needs a little bit of refinement compared to the old UX. I’ll explain why!

“When” Overview

Again, the UI is great, but I think it could be even better!

image

  • Bringing When a level up into the canvas is simple and clever.
    • The drop shadow is cool! It might look nicer if it was just a tad bit softer. (It’s hard to see it in the image due to video compression.)
    • This isn’t scalable with many When blocks (6+), but it looks great when there are only a few individual ones.
      • The presentation should be simple and repeatable:
        1. Replace the comma with a small round bullet, or a small arrow
        2. Make the block preview a font size smaller (or the When a font size bigger).
        3. Change the font to be extra bold where applicable.
        4. Add chips! The first rule could be a chip. Write (+ 3) instead of & 3 more... to simplify the UI. Coding is repetitive and you don’t want to repeat the same verbal language over and over (as they say, “show, don’t tell”). Visual clarity.
        5. Color code everything! I know this is still a WIP for you guys.
      • Custom rules showing up as just their name would be great. Also applies to rules with comments at the start.
    • Ability suggestions are great for beginners, but for big projects with many abilities, it seems easy to misclick. I don’t like when the app assumes how I want to code, because it doesn’t know my ideas.

Here’s my design idea:

  • Only use drop shadows on elements that are touchable.
  • Change formatting as discussed.
  • Two possible looks for the “add [event/sequence]” buttons. I prefer the bottom one because it’s more clear!

Possible improvements:

  • The bullet still seems a little out of place. It’s a nice separator, so maybe that’s just me?
  • The corner width could still be tweaked.
  • My color choices could definitely be tweaked! (I used very vibrant colors, which looks cool but is hard to look at)
  • Why not change “sequence” to be “actions” or “blocks”?

Sequences Menu

The floating UI is a transparent and interesting step away from the full code menu in the current UI!

Horizontal Sequence UI: Feedback

Block Drawer

The old UX is better because it’s faster to scroll → click to add many blocks quickly. A cozy vertical menu hinders my ability to do this quickly. The newer UX adds more clicks and scroll time. (If this UX is to be an improvement over 3.0, it needs to do the same things the old UX can do with the same amount of clicks or less, and streamline it!)

  • Collapsible menus are cool, but they add another click, which really adds up every time you want to place a specific block. Also, you have to click in very specific spots each time to close the menus quickly, and that extra precision makes it harder to navigate the drawer.
  • The text search will definitely be nice on PC, but on an iPad it’d take more time to type the block name out every time. More clicks. Another consideration is that the user has to memorize the block names to type them out, which embeds Hopscotch’s learning curve directly into the block placement workflow.

Options include:

  1. Make the drawer expandable horizontally as a toggle. Then you could keep the OGs happy, at the cost of screen space.
  2. Make the code buttons smaller. The old UI’s drawer uses 3 elements per column with small buttons, which results in a nicer UX due to less scroll time. This can be replicated quite nicely in this new menu (either 2 or 3 smaller buttons wide, maybe with a slightly wider menu to compensate).
  3. ^ Both options at the same time!

Once that’s done though, it’s a really, really nice looking menu with a lot of new power.

To summarize, the vertical drawer should be either compacted a bit, or expandable for those who prefer a bigger drawer.
Less clicks per placement = better UX as a whole, especially for power users.


Long Sequences

I also hope that long sequences will not be sorted horizontally as a scroller…! lol

Although horizontal seems faster for simpler projects, sorting a massive amount of code horizontally is a challenge, especially when you consider loops and nests. The tradeoff for a more transparent workflow is code readability. There are some interesting non-linear things you can do with the UI to mitigate this (which, to your credit, you did start brainstorming towards the end of the stream!) However, it would be easier to read the entire rule as a whole if the whole UI shifts and adapts vertically, based on how many blocks are added.

So, if you flip the sequences to be vertical, you could place the modules and block list horizontally, and it would still look very legible. The trade off is total screen space, of course, but the trade off is well worth it for complicated sections. The more complex/lengthy your code becomes, the more the horizontal workflow would start to hinder your workflow.

This UI example is certainly in the right track! It would be nice to scope into a specific rule (ie. be able to close the left menu and reopen it):

I spotted this example on the stream @ 1:20:21 which looks exactly like what I’m imagining, though I would add a “Show All Rules” button to reopen the leftmost Rules overview, like the screenshot above shows.

image

If this code window scaled based on the widest block/loop placed, that would save screen space!

Also, switch statements would be nice in this version to reduce the infinite Check-If-Else paradigm, which would save screen space. It’d also be easier to think about and organize the code within. (Even when learning programming, it’s easy to make Check-If-Else loops that are long and arduous, and it’s always discouraged.)


Closing Thoughts

The new UI layout is simple and modular. While context was never truly an issue, this emphasizes it and adds a layer of transparency below, which I really like. It’s super nice how the scene is contextualized in the background by removing the full window. Being able to decide how things should behave based directly on the object positions you see in front of you leaves a really nice and interesting impression. The lack of static code screen also leaves more negative space, which truly feels like a breath of fresh air.


I really hope this helps!
CC @Awesome_E!

8 Likes