Mobile HTML Editor

About the Project

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?).

The Problem

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.

‍

Proposed Solutions

Concept #1

Allowing users to lock selected snippets of code to avoid editing them unintentionally.

Concept #2

Creating an editor feature that will autocomplete HTML tags as the user writes them.

Concept #3

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.

‍

Low Fidelity Wireframes

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.

Concept #1

Concept #2

Concept #3

‍

Usability Testing Insights

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 users appreciated the idea of ready-made code library. Some mentioned that they would love to have this feature in the desktop HTML editors they currently use.
• A few users mentioned that a search bar is necessary in the code library, to enable an easy search for a specific ready-made code.
• Some users wondered about the ability of the editor to predict where a specific code is required to be placed (between which <tags>).
• After further exploring copy & paste options, I've decided to redesign the library, so that users will not have to drag & drop the code from the library into the editor window, though they will first select the appropriate <tag> they wish to paste the code into, and only then they will select the actual code they wish to copy. This provides more precision to the process.

‍

Mid-Fidelity Wireframes

The user-flow for the interaction of selecting where to paste the code to, and which code to copy is completed in this order:

• The user tap & holds the HTML tag they wish to paste a code under.
• ‍The user selects the library option from the pop-up menu revealed after selecting the tag.
• ‍The library window appears as an overlay window which contains all the pre-made code.
• The user then selects the desired code to copy by tapping it.
• ‍The code is pasted into the editor window, under the selected HTML tag.

High-Fidelity Wireframes

Created with Figma

‍

Task User Flow

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.

‍

Visual Design

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.

Main Screen

Code Library Overlay (two list versions)

Code Pasted & Applied

‍

Microinteraction

The interface animation and the specific microinteraction follows the Material Design guidelines of UI animations. The animation itself was created with AfterEffects.

View the full case study