Week 5: User Interaction Design | User Testing

This week I was focusing on designing the user interaction and user testing. I designed the interaction mode first in order to give the user a clearer understanding of how to use this app when doing testing. This video shows how it works:

TapTop

I also uploaded it to YouTube:

I designed this user interaction with InVision Studio, a digital UX design software. Compared to Marvel we used in class, InVision Studio allows the user to design a more complex animation and transition. It’s very user-friendly, in which user can easily design the connection between different views and edit them in an intuitive way. The image below shows how I drew the connections between different views. And it allows the user to directly import files from Sketch, which saved me a lot of effort.

The transitional animation can be easily designed with the InVision Studio. Similar to the magic transition function in Apple’s Keynote, the animation building process in the InVision Studio requires the user to set a starting and ending point between two views and it will automatically calculate the transition for you. This also requires the object to remain the same between two views, which also requires a lost of copy-and-paste work. Once the animation has been set up, the user can edit the timeline to polish the transition process.

My basic idea of designing this animation is that I wanted to build a so-called leading object between different views in order to integrate them together, in other words, no matter how the user switch between different views, there will be some objects they are familiar remain on the screen with a smooth animation. For instance, when the user switches from the main screen to the short-video screen by swiping up, all those bubbles represent different people will automatically change their size and move to the top of the screen. And it’s similar to the ME bubble which exists almost in every screen. Through this way, I am hoping to design an integrated and elegant experience, and the leading object will serve as a guide to lead the user go through different views and encourage them to try new things.

The user testing gave me some positive feedbacks. It showed that most of the users were able to tell what they are doing in each step. The controversy was among two views, the homepage and the friend list. Some users were wondering what if they have hundreds of friends who are using this app, the homepage will become too crowded. The same concern applies to the friend list view, users were confused about searching for certain friends and cared about how to find the person among hundreds of friends. Also, some user raised the concern that will they be able to see their friends in a far distance. During the testing, some users proposed some quite useful using scenario such as finding nearby friends to go to eat together and using it for dating, which were quite inspiring and I might document those thoughts in my later posts.

To deal with those feedbacks, I will focus on redesigning those views and adding new views in my later work. A testing user suggested me to change the friend list view to clusters of bubbles, which are categorized by their names, which I thought is very inspiring. I will also add a map of large scale for the user to see where their friends are regardless of the distance. And different places, such as theaters and restaurants will be added to this view, so the user can easily plan their activities with friends. And I am also working on the business model of this app.

And I also designed the logo using Sketch:

 

 

Leave a Reply