UX/UI Design, User Research, UI Design, Microinteraction Design, Mobile App Design
UX research and UI design for a mobile HTML editor app. This project focuses on building a microinteraction that will ease performing unconventional tasks using a smartphone. The task at hand in this project requires finding a solution that will improve the way we write HTML & CSS documents on our mobile devices (or do we?).
Writing code requires a platform that allows quick multitasking features. Insufficient multitasking features, as well as the lack of a physical keyboard on a smartphone, make it extremely difficult to compose HTML & CSS documents using a mobile phone.
Allowing users to lock selected snippets of code to avoid editing them unintentionally.
Creating an editor feature that will autocomplete HTML tags as the user writes them.
Creating pre-made commonly used code library that will allow the user to easily implement code snippets by copy & paste them into the editor, and eliminating the need for manually typing the code.
To further refine the concept, and to be able to conduct a first session of user testing, I created low-fidelity wireframes for all three concepts.
After conducting the first session of usability testing and receiving valuable feedback from my participants, I've decided to further develop the concept of pre-made code library (concept #3). Here are the insights I've gained from testing the concept:
The user-flow for the interaction of selecting where to paste the code to, and which code to copy is completed in this order:
Created with Figma
This user flow describes the steps that a user takes in order to complete the task of copying a pre-made code from the library, to the editor window.
The final visual design is based on Google's Material Design guidelines, for the obvious reason of easy UI recognition by a wide range of users. The interface itself and its color scheme are inspired by many HTML editors which use color-index to mark similar HTML tags, for quick and easy recognition of their range.
The interface animation and the specific microinteraction follows the Material Design guidelines of UI animations. The animation itself was created with AfterEffects.