StyleEye Derek Tseng / Jennifer Sloan / Sunny Peng / Katy Hulsman / Jia Le He
Problem Sometimes, people see an image, a pattern, or a style that they really like. Currently, there is no easy way for people to find items with a specific style that they are looking for. StyleEye UW CSE 441
Instantly capture a design or style with a picture on your phone Solution Instantly capture a design or style with a picture on your phone Post picture to send request Wait for community responses Respond to others’ requests Follow styles of other users StyleEye UW CSE 441
Procedure: Measures and Tasks Results UI Changes Going Forward Summary Outline Method Procedure: Measures and Tasks Results UI Changes Going Forward Summary StyleEye UW CSE 441
Location: CSE private study room Time: late afternoon Roles: Proctor Method Set up Location: CSE private study room Time: late afternoon Roles: Proctor Notetaker Timer Photographer StyleEye UW CSE 441
Nexus Android phone with StyleEye app Method Materials Nexus Android phone with StyleEye app Laptop: for questionnaire and notetaking Phone stopwatch Participants 5 college students : acquaintances/friends of testers 3 grabbed from the cse labs 2 brought in from other departments StyleEye UW CSE 441
1 girl , 4 guys : all in their 20's Method Demographics 1 girl , 4 guys : all in their 20's Varying range over the amount of android familiarity Distributed levels of fashion sense StyleEye UW CSE 441
Initial questionnaire demographics Procedure Measures Initial questionnaire demographics Timed how long it took each participant to do each task only quantitative data Follow-up questionnaire some rating questions (on scale from 1-5) some open ended questions for further explanations StyleEye UW CSE 441
Had each start with an initial questionnaire Procedure The Procedure Had each start with an initial questionnaire Introduced the StyleEye app Had participants complete our three tasks Explained what they were expected to do beforehand Had them talk aloud Had each follow out a follow-up questionnaire StyleEye UW CSE 441
- understanding the following page - typing in a person's name to add Procedure Tasks Simple: Suppose that you admire Jessica Simpson's style and that you want to stay up-to-date with her StyleEye submissions. Go to your following page and add her to the list of people that you are following. Her username is JessicaS. testing: - understanding the following page - typing in a person's name to add StyleEye UW CSE 441
- taking a photo with our app - typing in a description Procedure Tasks Medium: Imagine that you are walking down the street and you see an item that catches your eye. Take a picture of it and, without cropping, add an optional personalized description indicating what you like about the item, or what you would want to see changed about it. Submit this for a search and then look at the details for the submission you just made. testing: - taking a photo with our app - typing in a description - finding and looking at the new post StyleEye UW CSE 441
- understanding the popular page Procedure Tasks Complex: You are interested in seeing what styles the StyleEye community currently considers to be the best, and you would like to find a style that you like amongst these. Look through the latest popular styles, find something that someone else has posted, and re-post it to your style. Then, go to your style page to see your re-post. testing: - understanding the popular page - learning how to repost someone else's post - finding and looking at your repost StyleEye UW CSE 441
Clicked through bottom icons first Results Activity button icons Clicked through bottom icons first While talking through their actions, most testers sounded unsure about which buttons led to following and popular though they did guess accurately All had no problem recognizing the camera Many indicated confusion about the icons for the bottom buttons in their follow-up questionnaire StyleEye UW CSE 441
currently our app supports sideways swiping Results Direction of swiping The first thing several testers tried to do upon looking at the app was to scroll up and down to view more of their MyStyle's page currently our app supports sideways swiping made more sense for a visually continuing bar Also, a few tried to do so while in the following list unsure if there was more to the list or not StyleEye UW CSE 441
One tester got confused when his image was automatically cropped. Results Camera Issues One tester got confused when his image was automatically cropped. When going back to look at his new post, he couldn't recognize the image he just took When saving, text box appears stating that "Image saved to: [blank]" StyleEye UW CSE 441
Results reinforced changes we were already discussing Overall Learning how to navigate and use our app was reported to be quick and easy, even for non-Android users Most found the app to be mostly intuitive or else very easy to figure out Results reinforced changes we were already discussing No participants complained about the app being too female oriented "Thought it was pretty sexy." -Tester 5 StyleEye UW CSE 441
Change the icons for the action bar: a house icon -> "home page" UI Changes Activity button icons Change to three buttons on the bottom representing different activities Change the icons for the action bar: a house icon -> "home page" a camera icon -> "take a picture" (center again) a list icon -> "following page" Have three post pages shown by labelled tabs at the top: MyStyle Popular Following (a filter on popular showing just following) StyleEye UW CSE 441
Having tabs enforces sideways swiping changes the tab UI Changes Direction of swiping Having tabs enforces sideways swiping changes the tab Up and down now allows people to view more postings on a particular page already intuitive to most smartphone users Show indications of lists continuing (on following page) Show indication of more postings on the page show another bar at the bottom StyleEye UW CSE 441
Direction of swiping (cont.) UI Changes Direction of swiping (cont.) Help prevent confusion about which page they are on Bars seem to continue left and right Change color/texture of bars for each tab StyleEye UW CSE 441
Remove that "saving..." dialog box Change the camera so that it does UI Changes Camera Issues Remove that "saving..." dialog box Change the camera so that it does not automatically crop Change posted images so that they are longer vertically no need to make image square StyleEye UW CSE 441
Do another usability study after implementing new UI Going Forward Do another usability study after implementing new UI Include a task that is shopping based see if a store has made a comment about an item you are looking for Include example "user suggestions" users helping tell where an item can be bought stores commenting on items that they might have StyleEye UW CSE 441
The overall navigation will be changing Summary The results from our usability study confirmed the problems we knew existed with our UI We already have a new plan for our UI and know which direction to go from here The overall navigation will be changing Hopes for another usability study before finishing StyleEye UW CSE 441
The End Questions? StyleEye UW CSE 441