Mobile Usability

[will-jac]

There's a lot that can be done to improve UX on mobile. Right now, I think a good goal would be to target the iPad.

A non-exhaustive and non-ranked list of issues are:

1. Editor
   Monaco does not officially support mobile. The recommendation is to use a different editor on mobile and upgrade to Monaco on desktop, with lazy-loading to prevent bundle sizes from being too large. However, it's unclear how poor the usability is on iPad - I will be testing soon. This is really an issue to address in Ivygate though.
2. Menu Bar
   The menu bar is too wide for vertical or horizontal iPad to fully display, although the newer iPad Air can fit the menu when horizontal.
   On phones, it's not even close
3. Reset Robot Button
   I think a common use case would be a user editing code, reset the robot, and running the code. Additionally, many users may not care about the specifics of the robot position.
   The robot state UI pane is pretty large, which means they must give up a lot of screen real estate for 1 button that they need to hit. This is especially a problem on vertical iPad:
   
4. Important buttons (collapse / close editor, for example) are small and very close to each other.

Proposed solutions:

1. Implement a mobile-focused UI. I think the ideal solution here would be to add a sidebar that allows you to open panes from it (editor/console, robot, and world). The panes should automatically collapse when they loose focus (when the robot is selected - although auto-collapse should be setting-toggleable).
2. Decrease the number of buttons in the main pane. Some ideas:
   • We can probably merge the run/stop into one button
   • Download can be moved to the editor pane
   • Settings, documentation, feedback, layout, logout can be moved into a hamburger button
   • layout and settings can be merged
3. Make a setting to auto-reset the robot before each run, and turn it on by default. This way, the reset robot button doesn't need to change, and we're making (what I think to be) the most common use case easier.
4. Re-think the expand / collapse / close charms - especially since the > one doesn't do anything on any pane but the editor, and even then it's really more of a toggle state than a separate button

Please respond with any mobile issues you've encountered, or any thoughts on these problems / proposed solutions. I'll start doing some testing on an iPad and my phone and keep updating this.