Junhui Yao
Research + Design
Login Button
A pipeline that provides a method for testing prototypes online effectively and efficiently.
Team: Mingzhe Liu, Junhui Yao, Jibo He
My Role: UX Researcher
Context: Tsinghua Univerisity AI Lab Research Project
Problem Space
In previous researches, recruiting participants for user research was time-consuming. Designers had to wait for months until all participants finished their experiment, and after that, they could start to analyze data. Moreover, the recruitment fee contained transportation costs, which also placed a burden on testers.
The Solution
We developed a method for testing prototypes online, instead of asking participants to come to the laboratory. In that way, designers could save the budget related to a large number of participants. In our method, the current research uses three software, Axure 8.0 RP, Fox replace addon of the Firefox browser and Mouseflow.com web service, to achieve the above functions. Mouseflow serves to draw heatmaps, record the mouse trail and task completion time of users. Axure share hosts the website where participants do the AB testing.
The following is a demonstration of button design testing.
01
-
Experimental design
Three independent variables resulted in 32 different conditions, four (four shopping websites) *four(Display method, number of login portals, the existence of border in login button and degree of emergency in login in button)*two(A and B version). A controlled randomized design was used for investigating 32 sets of designs.
-
Shopping sites
In sum, four frequently used shopping websites were investigated, including JingDong, Taobao, Amazon, and DangDang (Alexa, 2019). According to the data provided by http://www.andrewkeir.com and with the use of google analytics, the best size for webpage design is 1024x768 pixels so all the pages in our study were designed in the same size (wide:1024 pixel×high:768 pixels)
-
Dependent measures
The dependent variables were the task completion time and heatmaps of users click, calculating the search time from when the web pages already had finished loading to when the login button was clicked by the participants’ mouse. Besides, heatmaps of each webpage were automatically produced by Mouseflow website.
-
Procedure
Participants were recruited online and signed a consent form before taking part in this study. The study began by completing the questionnaire about their personal information, including age, gender, their bank accounts (for participation fee) and time spent on using computers and mobile devices. When the user finished the questionnaire and clicked the start button, one of the experimental conditions was shown. Participants would see a black image with a reminder first, informing participants not to move their mouse until the experiment trial appears. After 6000ms, the black image would disappear from their web browsers and the experimental trial would be shown. The whole study lasted approximately five minutes.
02
The combination of making prototypes with Axure and analyzing directly through Mouseflow can be a great help for designers. According to our case study, the researchers found out that the buttons with the emergency phrase, two login portals, as well as buttons with border were superior to other kinds of login buttons tested in the case study.
03
-
The result mentioned above reflects the attention of users and the effectiveness of the webpage design. However, the experimentation pages have a similar structure of the login button which may lead to the learning effect. Also, due to the properties of dynamic page design, the internet speed of users could significantly influence their performance, leading to longer mean task completion time. Besides, the sample size is relatively small. Despite these limitations, this method proves useful in terms of understanding the silent message from user behavior.