Interaction Excercise
Constrained Redesign
UX learning studio solo exercise at Purdue University with no affiliation with Dropbox
​
August 2022
Goal
I was given a UI from Dropbox and was told to make three visual changes and to justify my changes with rationale.
Original UI
Interface given to redesign, designing at least three changes to the above given interface for drop box.
Analyzing The Interface
I started this project off by analyzing the design elements that could easily be changed via CSS. The items I chose to focus on were the upload button, create button, settings button, search bar, and star button.
After choosing these items I was unsure why the photo file was purple. I wondered if other users had the same problem identifying the folder meanings.
Lastly, I noticed that the file member count was far away from the file name. I wanted to see if users had trouble quickly locating the number of members in a file.
Testing Overview
I wanted to test users of their intuition with a file management system. The users would need to locate items without them being visible to see where they would move their eyes to naturally.
On top of locating the elements on the interface, I chose to test the users on file details. Participants would be tested on the file icons and the file member count. As there was no clear explanation or legend on what the file icons mean, I chose to test the users to see their assumption on what the file icons represented. For the member count, I tested if users could clearly see how many users were in a file without much effort.
Interface shown to users for testing. The dropbox logo, upload button, create button, setting button, search bar, and star buttons were all covered up.
Testing Procedure
Participants: 5
​
User Group: People who use a file management system
(example: Windows file explore, Google Drive, Dropbox)
​
Procedure:
​
-
Participants were told to close their eyes while laptop with edited interface is in front of them. Their hand is on the mouse.
-
Participants are told that their eye movements must be represented via controlling the mouse. They are told that they are using a file management system.
-
Participant opens eyes
-
Participant told to upload a file.
-
Participant told to create a file.
-
Participant told to search for a file.
-
Participant told to locate the setting menu.
-
Participants told to favorite a file.
-
Participant asked how many members are on file “CHI2014 Submissions."
-
Participants asked what each of the below files represent.
Testing Results
Below are the results of the test given to participants. Each icon the participant was given is shown below and where the participant went to find the location of the item is shown below the item. Over half of the participants for a subject would need to correlate for a task for it to be changed.
= Correlation
File Upload:
​
#1 Top Right
#2 Top Right
#3 Top Right
#4 Lower Right
#5 Top Left
Settings Menu:
​
#1 Upper Left
#2 Top Left
#3 Top left
#4 Left Side
#5 Top Right
Create File:
​
#1 Top Right
#2 Left Side
#3 Bottom Right
#4 Top Right
#5 Top Right
Search:
​
#1 Left Side
#2 Top Left
#3 Top Right
#4 Top Right
#5 Top Left
Star a File:
​
#1 Right Click, add Favorite
#2 Left Side of File Name
#3 Wanted to Find a Star
#4 Left Side of File Name
#5 Right of File
Member count:
​
Users seemed to have to first find the file name, then they were guided to where the participants were shown, the current location is fine.
​
File Meanings:
#1 Video
#2 Something that can be played
#3 Camera
#4 Unknown
#5 No Idea
#1 Shared File
#2 More than one person
#3 Shared File
#4 Shared
#5 Shared
#1 Upper Left
#2 Top Left
#3 Top left
#4 Left Side
#5 Normal File
Takeaway
More than half of the user's first action when asked to create or upload a file, was to move to the upper right side of the interface. Currently, these action items are located on the upper left side of the interface.
Two users did not know why the photos folder was purple or what it meant. This folder is the camera uploads folder.
Redesigned UI
Redesigned interface, using the original interface and applying changes where test results shown.
Changes Made
Change #1 - Moved the upload action button to the right side from the left side of the interface. This was done due to testing user intuition on where the Upload button should be. Over half the tested users wanted the Upload button to be moved from the left side to the right side.
​
CSS:
.upload {
right: --px;
}
​
Change #2 - Moved to Create action button to the right side from the left side of the interface. This was done due to testing user intuition on where the Create button should be. Over half of the tested users wanted the Create button to be moved from the left side to the right side.
​
CSS:
.create {
right: --px;
}
​
Change #3 - Recolored and icon change of the camera uploads folder. Over half of the users tested did not correctly identify this folder. The folder was changed to blue to lessen confusion as to why it was purple, and the icon was changed to better represent a photo.
​
CSS:
.camera {
color: #91CEFE;
}
Reflection
This was our first assignment for our learning studio this semester. When I was first assigned this project, I was unsure of how I would approach my redesigned interface. Seeing that we needed to provide a rationale for our project, I decided that I would do a form of usability test on the interface to see how it flows for the user. I have noticed that I point out user intuition a lot in my day-to-day life since starting this major, so I wanted to experiment with user intuition on this project.
I do not have much experience on how to test or prove user intuition, so I created a test myself. I do not have access to any mouse tracking programs, so I had to run this test by observation. I believe my test for this went well, as each user responded as I expected to the test.
In the real world of UX, I believe that finding user intuition would play out differently. The elements I chose from the interface were also biased by me as I chose elements that stood out to me for my test.
After identifying the changes that I would make to the design of our given interface, I looked into the CSS. I found that not much would need to be done to change the position of the create and upload buttons. For the camera uploads folder icon, I changed the color in CSS. I found that to change the image I would need to use HTML, so I did not supply that code.