Cognitive Walkthrough

Main Screen



Setting the location

At this point, the user wants to narrow down the search results. They see a location "tile" on the main bar, and expect that clicking on it will produce some effect.

Paper Location Paper Location

When they click on it, a map pops up, with pre-seperated segments that they can refine their search with.

At this point, they hit "done", to signify that they have completed this selection, and it takes them back to the main screen. They will know that their action was successful because the results page will have changed.



Setting the price

At this point, the user wants to specify a "target price" to narrow their search results. The price tile is prominently located on the page, so the user expects that they can use that to filter their results.

Paper Price

When they click on it and enter the price into the space, they will know that their action was successful because the listings on the page will change, and only listings with prices close to their target price will be shown. They may be confused about what "target price" means, and may think that it refers to a maximum or minimum, because they have not user a search feature like this before. We may want consider revising this.



Setting the number of bedrooms

The user wants to filter the search page down by the number of bedrooms listed for each apartment. The bedroom tile is prominently displayed, so the user will expect that interacting with it will allow them to narrow their search. Clicking on one of the number icons "turns it on", and will filter the results to only show listings with than number of bedrooms.

Paper Bedrooms

Clicking on additional numbers will show them as well. Clicking on a single number again will "turn it off". Because the listings on the page will respond immediately, users get quick feedback that their action behaved as expected.



Setting the date

If the user would like to specify a date range for their sublet they will click on the "Dates" tile.

Since the tile does not have any clear entry fields on its face they will most likely assume that another window will pop up letting them specify more info about their desired subletting dates. After clicking on the tile another window pops up with two selectable calenders for start and end dates.

Paper Dates Paper Dates

There is also a display which shows the specified start and end date in plain text. The user may be confused which of the two date specification methods to use. Hopefully since the text field does not look like a text entry box they will interact with the calenders and quickly figure out clicking on a specific date in the calender specifies start and end dates. There are arrows on either side of the displayed month which allow users to toggle between months. This allows them to specify any possible date. We currently do not display the year which needs to be incorporated in our actual prototype implementation to make our date selection feature robust. Once the user has specified a start date, a end date, or a start and end date they can select done to go back to the main browsing screen. One thing we need to incorporate is a clear dates features in case the user wants to deselect dates they specified.



Searching

We incorporated a search button at the top of the main browsing window in case the user wants to change the city or area which they are searching in. This streamlines the process by making is so they do not have to go back to the home screen to change their search. Once they enter a new location they press the search button which will reload the page with the new specified location.

Paper Listing


Clicking on a listing

At this point, a user has seen a listing that interests them and they want to see more information about it. The expect that clicking on a listing will produce some effect, and when they do, a side panel pops with detailed information about the listing they just clicked on. In this way, they get immediate feedback that their action produced the effect they expected.

Paper Side Panel


Going to Craigslist

Some users want to see the original Craigslist posting for a specified listing to get a feeling for the legitimacy of the listing as well as additional information which may not be provided by the Subletter. We Incorporated a Craigslist button on the expanded listing which redirects the user to the Craigslist posting.

For simplicity we just put "Craigslist" on the button but it will hopefully be clear what the button does. A possible refinement would be making the button say "Go to Craigslist" which would make the buttons function more obvious to the user. Incorporating this feature makes the user feel like our website is not hiding any information from them since we allow them to see the source of the data.



E-mailing a poster

At this point, the user has read the expanded section of the listing, and is ready to contact the poster. There is an e-mail icon prominently placed at the bottom of this tab, and they expect that when they click on it something will happen related to their e-mail that will allow them to contact the poster.

In this case their native mail program will pop-up, and it will be clear to the user that their action produced the desired effect.

HFID

Human Factors and Interface Design (HFID)