P5js Mobile Editor
P5 is an open source platform for educators, artist, and enthusiast to express their artistic vision through coding. The goal of this project is to identify usability issue with mobile coding for improved experiences.
Tools
Cassie Tarakajian
How might we optimize coding experience for mobile device user?
The greatest problem with mobile coding is the limited space for keyboards. Developers tend to focus on where the keys are instead of what they are coding. We realize that there are two potential areas for improvement. First is the coding experience itself and the second is navigating around the editor.
Navigating the editor
The main entry point of the web platform is its editor. Since this page contains information from file setting, login, to resources, we want to know whether the existing grouping makes sense before translating them to mobile interface. We wrote down all the features and have users sort them into bucket that make sense to them.
We also did some research on existing editors and found that a bottom bar could be utilize for some handy features. We decided this could be a place to house some of our sketch-related settings like opening project directory, saving sketch, and tidying up code to support user as they code. Run sketch is another common action, but we elevate its hierarchy so it is more distinctive.
Keyboard limitation
Base from the user tests earlier, we noticed that no matter how robust the keyboard is, user still spend approximately 15-20 minutes to get used with it. And the most useful functions are autocomplete, cursor placement, and access to commonly used symbols.
Since p5 is not build on top of an app, we are constrained with using native iOS and Android keyboard. We modified our bottom bar further to create illusion of an extended keyboard. This contains the commonly used symbols when user focus on the code area. Same logic gets translated to the search function also.
Coders move back-and-forth on screen when they code. We mapped out a few possible solutions to support this behavior. Comparing their pros and cons clarify which direction we should implement.
