Quick Gesture

01. Introduction

This project explores a micro-interaction that equips the user with a new capability, provides greater efficiencies and pushes the boundaries of the mobile phone. We are living in a world where we are relying more heavily on our mobile phones. For some, phones have almost completely replaced the standard laptop or desktop computer. However, there are still many limitations that are left to be improved.
Services: Interaction, UX, UI & visual design
Role Interaction, UX, UI and visual designer
Type Student Project

Final Microinteraction Motion Study

02. Research : User Testing

I began my research with the goal to identify current mobile phone limitations and which tasks users still preferred to complete using a desktop computer. I took a user poll and discovered that writing a paper, creating a digital presentation and watching a movie were the top three tasks still done on a desktop computer. I conducted user testing based on each of these three tasks and created personas.

User Testing

User Personas

03. Research : Insights

After considering all of the research results, these were my top three insights that were the key benefits/features that users enjoyed on a desktop computer.

1) Working with multiple browsers: Users tended to have multiple browsers open at the same time while completing their tasks. This allowed them to gain quick access to different types of information while completing their tasks.

2) Using a desktop as a temporary holding space: When searching for images, users would drag an image they found online onto the desktop, and used the desktop as a temporary space to house all of their research images.

3) Using keyboard shortcuts: all users relied on a combination of keyboard shortcuts and a mouse to navigate between various windows/programs, and undo actions.

Research Insights

04. Ideation

I began ideating and sketching based on my top three insights. I thought about ideas that could help translate the top three benefits of a desktop into a mobile context. I narrowed down my ideas and created paper prototypes of my top three concept directions.

Sketches and Low Fidelity Prototypes

05. Concept Direction

Based on my insights from user testing my top three prototypes, I was able to decide on the “Quick Gesture” concept. This concept resonated most with the users and had the most potential to reach the widest audience.

“Quick Gesture” offers customizable, gesture-based shortcuts for the mobile phone. A user can draw a gesture on their phone that will launch a pre-determined shortcut action.

Imagine at the swipe of a hand-gesture on your phone, you can instantly launch any given app, take you to a saved destination in googlemaps, call a friend, undo an action in any program, and more.

Keyboard shortcuts have become an integral and indispensable part of user behavior on desktop computers (think of the “command-z” option on macs). By applying a similar concept to a phone, this capability could open up many new and powerful user inter-activities.

Conception Direction

06. Paper Prototypes

Paper prototypes were created on various layout and interface concepts. The most challenging part of this process was to solve for how a user will be able to initially activate this “Quick Gesture” feature on their phone. I tested two variations of this:

Version 1) users tap on a constant floating button on their screen.

Version 2) users tap on their home button twice.

Both versions failed to meet users needs. Users didn’t like having a floating button constantly getting in the way on their screen, and tapping twice on their home was already tied to pre-existing iOS functionality.

Paper Prototype

07. Mid Fidelity Wireframes

After a few more rounds of user testing the mid fidelity wireframes, I discovered two more important insights:

Insight #1: Once the “Quick Gesture” had been activated, users did not know their next steps. They needed a visual prompt. This was solved by providing haptic feedback when the mode is first activated, more visual contrast on the active state, adding supporting text and creating a visual gridded texture overlaid on top of the screen.

Insight #2: Users wanted to see consistency in the notification panels. This was an easy solve, which was to just make all notification panels locked up to the bottom of the screen.

Insight #1

Insight #2

08. Storyboard

Below is a storyboard based on Carol K., one of the main personas. She is a 1st year graduate student. She has a midterm coming up, so she is over at a classmate’s house studying.

Storyboard

09. Visual Design

I moved into visual design based on all of the insights gained from the design process. In this instance, the user was previously on the Facebook application and has decided to activate the “Quick Gesture” functionality.

Visual Design Walk-thru

10. Next Steps

I am continuing to conduct more user tests and gain further insights. My next steps for this project are to address the two key problem areas of this feature:

Problem 1) Accessing the “Quick Gesture” mode. Throughout the testing process, accessing the feature was an ongoing issue for users. Although there are other solutions like using multi-finger touch gestures to activate, those types of actions would require two hands. The hope of this feature would be for users to be able to complete single-handed. My plan is to ideate and test until I reach a successful solution.

Problem 2) More Prompts. I quickly realized that users desired a lot more visual prompts in order to successfully use the “Quick Gesture” feature. Users were particularly concerned with wanting to see more prompts to guide them as they are drawing a gesture. Although my current design is on the right track, there is still more ideating and testing to be done.