Metaphoraction | A Creative Tool to Inspire Meaningful Interaction Design

Web Application | June 2019- Oct. 2022

Instructor: Prof. Xiaojuan Ma

Team: Zhida Sun, Sitong Wang, Chengzhong Liu, Adam Liu, Xiaojuan Ma

Skill: User Research, UX/UI design, Graphic Design

Introduction

Previous work has demonstrated the effectiveness of meaningful interactions in engaging users, but designers mostly designed such interactions on a case-by-case basis. Interaction designers struggle to systematically generate feasible ideas for innovative and meaningful interaction. Therefore, we designed and developed “Metaphoraction“, which helps interaction designers to generate meaningful ideas through four critical components: gesture, action, entity, and meaning.

Background

Below shows four example cases of interaction designs that engage users with innovative and meaningful experiences.

Research

Before designing the framework, we first conduct qualitative user studies by in-depth interviews with interaction designers. Our research question focuses on:

How designers ideate interaction designs? & What do they need in such an ideation process?

We conducted interviews with three expert interaction designers to fully understand their behaviors and needs. Some selected quotes are listed below:

“I am not sure about the feasibility of my interaction design.” ——Participant A

“It is hard to generate ideas that links meaning with interactions.”——Participant B

“I am not sure whether the action and object convey my intended meaning precisely.”——Participant C

Persona

We made a persona to summarize the user study results and precisely define the issue. According to the interview, we find that designers need a reliable “interaction dictionary“ to help them look up deployable interactions with interesting design ideas. It should present multiple options, which includes the interaction, the real-world action, the objects, and the related meaning.

Ideate

After defining the issue, we start to design the wireframe of this tool. It allows users to log in to their accounts and search for meaningful interaction ideas. After searching, they can customize the search results to inspire their ideation for interaction design.

The most critical UI page is the result page. We first design two options for the result page and compare their pros and cons. Option B is eventually selected due to its higher feasibility, more stable information panel, and capability of showing all the results without being hidden by any floating components.

We adopted the Sankey Diagram to visualize the meaningful pathways in a structure of “gesture-action-entity-meaning“. A critical issue is to indicate the background information of a gesture, such as what kind of interaction it represents, and whether it is conducted by double hands or a single hand. We propose two options to tackle this issue. Option A consists of a series of dots and rings, while Option B adopts more realistic graphics such as hands and phones. We test these two options by applying both to the system to find that Option B is too small and detailed to read. Therefore, we select Option A as the visualization method for the “gesture“.

Prototyping

Based on the previous design studies, we further design the main result page into a high-fidelity UI. It allows users to input one or more keywords of a meaningful pathway and search for relevant results. The information panel is fixed at the right side, showing the data of the clicked item. Furthermore, users can operate on the search results by pinning or deleting the selected items. The items appear in different colors according to their status.

We complete the UI design of this product according to the wireframe and the high-fidelity UI page we designed. Users first log in to this web tool and search by keywords. Afterwards, they can customize the results by pinning, deleting certain items. They can also pin multiple items and filter out all the items that are not pinned. After editing the results, they can save the page to their accounts to inspire future design ideation.

Validation

We recruited four expert designers to validate this tool. Each of the designers was required to design two specific interactions with or without the tool. Using “Metaphoraction“, they quickly generated relevant ideas that were stuck without the tool.

“It is awesome to instantly obtain so many ideas.” ——Participant A

“I became more confident in selecting feasible solutions for my interaction design.”——Participant B