GR 6 - User Testing
Design
The final website for The Dress Exchange was built to be as simple and usable as possible, without falling into the trap of attempting to provide every piece of support which might exist in a retail online shopping site, as this was not the point of the project. The final site had five main pages - Index, Profile, Buy, Sell, and Save; however, Buy and Save had the same generic code, so we'll look at only four, as well as the menu most of them share.
Index
The index page was originally planned as just a placeholder, but we eventually realized through evaluations (and GR5) that people needed more clue as to what the site was about (learnability), and that the index would be the first thing they saw - so it needed to make an impression and actually be usable. Hence, we added a description of the site under the flavor quote and implemented a basic login system, which would be simple but visible.
Profile
The profile was likewise not one of the originally planned pages, but once we began trying to figure out how we would distinguish our design from that of a generic online shopping website, it became somewhat more complex as we tried to implement individual user-based dress selling.
Essentially, each user on our site has a profile page, which can be reached from a link through one of their listed dresses. At the moment, the History section lists all dresses that that user, or you (if on your own profile) has uploaded to the site, but is unfortunately not interactive. We did not want to go into immense detail on the backend, and were concentrating more on making the buying and selling dresses pages usable, so we used a placeholder image for the profile picture and didn't expand user-based information as much as we might have.
Menu/Titlebar
The menu, as illustrated above, is a simple left-justified sidebar that appears on every page after the user is logged in. We designed it with the intention of providing information and access to all parts of the site quickly; hence, all main pages of the site are listed with icons, and the most important information, the currently-logged-in user and his/her number of points available, is listed at the top.
Furthermore, we tried to be consistent with the use of words between the menu and titles. In the menu itself, options are listed mainly as "_verb_ Dress", and the title bars of each page match. While some of our testers appreciated the consistency, others thought the limited variation in menu options were confusing, as the options weren't different enough to pick out at a glance.
Sell Dresses
We conceived of this page as a large form to fill out about a dress the user was trying to sell, and didn't change it much over the course of the design except to make sure it was consistent with the Buy page (color, size, style labels); not many of our users provided much feedback on this page specifically. We did, however, change the picture-to-be-used to a link instead of an image upload, for mostly efficiency reasons.
However, we did try to include an explanation of the points system here, upon realizing that users were confused about how points worked during the user testing of HW2.
Buy/Save Dresses
We wanted to ensure consistency in the site's style and avoid unnecessary excess work, so we used the same template for both buying and saving dresses, only with a color change to make it more clear to the user at a glance which page they were on.
Essentially, this page is similar to that of an online shopping website, with displayed images for individual items, which can be clicked on to expand into a larger preview with more information, including the previously-mentioned color, size, and style values. We limited the number of dresses displayed on one page after users mentioned that the previous iteration (9 dresses) felt too cluttered and difficult to scan, and included variations in shades of grey as backgrounds and highlights, to make certain parts of the page stand out more. This page handles mouse interaction well, to appear more interactive; most items, such as previews or buttons, respond to mouseover with a cursor-hand or a hover effect.
The three "choose which dresses you want to see" buttons result in drop-down lists of checkboxes, which allow a user to select the dresses they want displayed. We used checkboxes to make multiple selection appear more feasible for users, although this eventually became less efficient due to the sheer number of checkboxes required for some items, like color. We also added a "sort by" option when users mentioned that they would have liked to be able to sort displayed dresses, so as to make the search more efficient.
Implementation
Our design was, fundamentally, a shopping site with many listed items which had to have certain pieces of information associated with them, and we ended up using SIPB-provided php script servers and databases to accomplish this. Essentially, all dresses and users are listed in a DB, which is queried for information each time a page is refreshed or loaded. This meant all information we stored on the site had to be as consistent in structure as possible; all dresses had to have certain values (name, price, color, image url, etc.) and all users needed to be similarly represented. This also limited the amount of variation we could have for different types of dresses or items in general, as each new type of item would have necessitated a new table structure. Also, because we were unfamiliar with file upload, we were unable to allow users to simply upload existing pictures of dresses, and had to resort to asking them to type in a link to the dress picture. Some users found this confusing.
While we felt this was the simplest possible implementation, we did run into several difficulties with this backend, especially communication with the server, figuring out occasional PHP foibles, and accounting for lag between requests to the server and returned information. (The latter necessitated the implementation of a "Loading" bar.) Furthermore, our current implementation retrieves every dress stored in the server, and then parses it client-side to show only currently available dresses. While this functioned well for our small test data, it wouldn't be feasible for an actual site that may have thousands of dresses in stock.
Evaluation
We found several users who were were college-aged girls who enjoyed wearing dresses and going to parties, all of whom were friends of one of the group members. We provided them with a briefing which included an explanation of the site's intended purpose (getting rid of old dresses, purchasing new ones) and a list of the following tasks:
- Sign up on the site with a new account,
- Log in to the site,
- Sell an existing dress (we suggested a small red knee-high skirt)
- Save one or several dresses that they found interesting,
- Buy one of the saved dresses (or more).