P5js Mobile Editor
P5 is an open source platform for educators, artist, and enthusiast to express their artistic vision through coding. The current implementation makes it almost impossible to use in mobile devices. The goal of this project is to introduce mobile views so users can now edit and view their projects on the go.
Collaborator
Linda Paiste
Dewansh Thakur
Visit live at
editor.p5js.org
Backgrounds
p5.js is a javascript library with their own pre-defined syntax. User can create beautiful artworks through these syntaxes. There are two primary pages that we will need to translate to mobile devices:
Sketches editor - User mainly create and preview their "sketches".
User hub - contains user sketches, collections, or assets
How might we optimize coding experience and managine sketches in mobile device?
General usability issue on mobile coding
The most use area in the web platform is its editor. We want to gather as much usability issue as possible. With enough research and user test, we found a few insights that are related to coding in small screens:
Need easier access to symbols
It is fairly common to find symbols from the keyboard when coding, aside from letters and numbers
Importance of syntax suggestion
Suggest or autocomplete syntax and functions names could speed up their workflow
Quick actions
User wish there was an easy way to auto-align and previews the result of their code
Editor navigation proposal
Here are the initial proposal for the editor navigation:
1. Quick switch between code & preview
Given the limited horizontal space on mobile devices, displaying the code and artwork side-by-side was not feasible. To mitigate this, the "Play/Stop" button was transformed into a floating action button positioned at the bottom of the screen. This ensures that users can effortlessly switch between the editor and preview mode.
2. Adaptive bottom bar
The bottom bar is customized to contain handy feature depending on where user is at within the editor. For example, functions like code alignment, file access, search is present at all times as they code. Common symbols were suggested base on users' cursor, say if they are in a closing tag.
3. User Central Hub
Individual items within sketches, collections, and assets tabs are presented as cards instead of a table interface. This allows us to display metadata in a more flexible layout, rather than the column-based approach used in the desktop version. To accommodate sorting capabilities, we introduced a sort icon with options to sort by date created, date modified, file size, and other criteria. This ensures users can easily organize their content.
Revised navigation exploration
We realize that we only have 3 months to finish the whole project, so we want an MVP version, keep as much desktop behavior as possible:
Remove keyboard specific UI, move "files" beside file name like in desktop
Have a more relatable icon for user profile
Refrain from adding menu under logo as it doesn't look clickable
Make play / stop icon visually more prominent
Takeaway
Smaller resolution requires more creative use of space
Understand the platform you would build your products in and work with that constraint
Don't grew in love with your initial idea, pivot if needed
