UXA Unit 1: Analyzing Design

For my first assignment with UXA, I decided to analyze a few websites that I have been frequenting the past few months. I’m a designer in NYC and sometimes my life does seem like it can be summed up by that famous quote in Sex and the City (I have actually never watched it)— “In New York, you’re always looking for a job, a boyfriend or an apartment.” In the past 6 months, I have been looking for both a (new)job and an apartment, and this search hasn’t been all that easy despite the many apps that exist for this purpose. I have somewhat managed to find both; I am taking the UXA course towards a new job and found a new apartment in downtown Manhattan. Just when the search seemed to be over, I realized that I needed to find new furniture for the new apt. The “looking” never really ends. In this UXA assignment, I am going to review and analyze five search engines/tools that I’ve used during the apartment and furniture search.

Craigslist — for sale

Craigslist is bare and straightforward. The website gives you everything you need right from the landing page. The content can seem overwhelming at first, but the categories are self explanatory and easy to navigate. It’s organized into a grid system which categorizes every need and want from everything tangible needs in their “for sale” category to the intangible desires — community, personals, discussion. There aren’t many drop down menus or interactive functions that try to minimize or hide the items on the website, which keeps the website bare but also incredibly transparent for the user. There isn’t much digging involved when it comes to navigating Craigslist.

Craigslist main page

Craigslist is minimalistic when it comes to aesthetic. The gray boxes and bold typeface help distinguish sidebar functions and overarching categories, but beyond that it doesn’t use any graphics or conspicuous color tones to impose any sort of aesthetic.

I am using Craigslist in order to find a new dining table for my apartment. When I type in “dining” into the search box, Craigslist already starts to suggest types of categories for you to filter your results.

One of the best things about Craigslist is that along with its variety of categories, there are also plenty of ways to filter your search. Once you get to your list of matching search items, you are given a sidebar with locational, conditional, and categorical filters.

The many filters in the sidebar of the search page helps you narrow your results.

After you narrow your search, you can also organize your matching search items by relevancy, date, and price by using the drop down menu on the top right corner. There is also the drop down menu on the top left corner, to the right of the sidebar, which help you see the search results in different formats — list, gallery, thumbnail, map. This side bar is separated from the search results by a simple gray scroll bar — it is all you need to distinguish it.

Once I click on one of the items shown, it leads me to a description page with whatever information was listed by the author.

Craigslist’s item description page.

Even though this page seems like the HTML project you did in 5th grade, I think it actually has really great, subtle design choices. It certainly follows the “Z” eye movement theory pretty well, except the “reply” button isn’t on the bottom right corner of the page. There isn’t some extensive color scheme or graphics on the page, which help make it easier to focus on the information listed. Even though the several links on the page are underlined in a bright blue, it’s easy to overlook these details because they are different from the informational text.

I’ve been pretty successful with Craigslist in my past experiences. I’ve scored mint condition snowboard boots for $30 a few years back and they’re holding up quite well. As a local goods/services search engine, Craigslist bears very well, but I imagine the availability and amount of goods varies depending on the area.

Facebook’s Marketplace

Another local goods/services search engine that I think could be very successful is one of Facebook’s new feature, Marketplace.

Marketplace page on Facebook

The biggest difference between Facebook’s Marketplace and Craigslist is anonymity. In the few transactions I’ve had with Facebook Marketplace, I’ve found that Facebook sellers are more accountable and less flaky than Craigslist anons. I assume that this is because people have their virtual personas at stake when it comes to Facebook interactions. In the future, I hope to see some data on Facebook regarding the success of Marketplace exchanges…

Back to analyzing Marketplace. The units listed in Marketplace are represented in thumbnails with its price. This visual organization is easy to comprehend and comparable to Craigslist’s thumbnail layout. Marketplace doesn’t offer four different types of layouts like Craigslist, but I usually stick to Craigslist’s thumbnail layout in my search so it is not an issue. Marketplace’s sidebar shows you different user functions (buying, selling) and a variety of categories with colorful corresponding logos. Craigslist lacks this type of design decoration(?) but I don’t think it is necessary for its function. If all the logos had a blue background, it would still maintain its effectiveness without arbitrarily introducing new colors to the scheme. Furthermore, the orange used for “Housing” is too similar to “Family” and if the purpose for these colors were to distinguish each category, the similar oranges are already making this choice counterproductive.

Right above the search results are small dropdown menus which further filter your search by distance, category, and price, but it is missing a date filter, which I sorely missed after taking Craigslist’s for granted. Most of the items listed on Marketplace is random.

Items listed in Marketplace CANNOT be organized by date.

I frequently come across items that have been listed many weeks prior and users often do not update their items as being sold or unavailable.

Another issue with Marketplace is the search box. Right above the Marketplace search box is the Facebook search box. When you scroll through your items, the Marketplace search box becomes buried within the scroll while the Facebook search box remains in place.

Facebook search box remains in place while Marketplace’s search box disappears.

I have mistakenly looked for items using Facebook’s main search box, which leads to a normal search and it looks something like this:

Item search using Facebook’s general search box.

Facebook usually recognizes that your search is for an item and will show you the Marketplace feature in your results but I can’t say that this will be the result for every search. If you click “See All Marketplace Items,” it takes you back to the Marketplace page and maintains your original search words.

Once you click on an item, the description page that prompts a new window is simple and easy to use. It is similar to opening a photo on Facebook, in which the background page is darkened so that the user can focus on the photo, description and comments. Just like Facebook photos, Marketplace item pages allow you to click through images and instead of commenting, it gives you the option of messaging the seller by clicking a good sized, classic facebook-blue, button.

Item description page on Facebook’s Marketplace.

On the bottom right corner of the item image, there are “save” and “share” functions. You could easily miss it, since it is small and in white, but this is good since it doesn’t distract you from the image. Craigslist actually doesn’t have a saving (or favoriting) function yet, which could be useful for those contacting multiple items. However, Craigslist automatically attaches the original Craigslist listing link to your email when you contact someone, so that you can keep track of what item belonged to which user, whereas Facebook’s “Message Seller” feature doesn’t give you the option to link back to the original post. I often have to search for the item again to find its original description.

Both Craigslist and Marketplace have working functions that help find local services/goods, but Craigslist has a much more diverse set of filters and organizational features that help you find exactly what you’re looking for. Marketplace may have a very slight upper hand when it comes to having more of a color scheme.

Craigslist — Apts/Housing

I know I am reviewing the same website, but the comparison function (housing) is different. I will be comparing three different housing search engines including Craigslist.

I’ll begin with Craigslist. Craigslist’s Apt/Housing search works similarly to its For Sale category. You can either start by typing in a location, program (kitchen, living room, etc), in the search box which will then give you the same drop down list of categories and number of matching search items in each category.

Automatic drop down menu from the search box.

If you start by clicking the Apts/Housing, it takes you directly to a page that asks you what kind of housing you are looking for — specifically whether you want to search only for no-fee apartments, vice versa, or both. Even though this is a filter category that could easily be placed on the sidebar, this page is important because it also gives the user useful information to aid them with the housing search; it notifies the user of their tenant rights and links to supporting documents. This is a great way to introduce the user into their search.

An informational filter page that the user is led to before going into their housing search results.

Once a category is chosen in that page, Craigslist takes you to their familiar gallery layout of items. (This may vary if the user has already specified for a different layout in the upper left drop down menu) It includes the usual sidebar with a variety of search filters ranging from location, price, amenities, price, and even open house dates. A filter that I found useful was “Availability.” I like to start looking for listings months before the move out date so that I get an idea of the current market. By using the “Availability” filter, I can look for listings that begin thirty days after the current date. Instead of having to look through listings that usually are available for immediate move in, I can easily conduct an early search. I have yet to see this feature in other apartment search websites.

Craigslist’s Apt/Housing sidebar filter for availability date.

As I stated previously, Craigslist may seem to lack aesthetic, but it is extremely easy to use and has many useful functions that aid your search. Its minimal visual cues (only a few fonts, boldface, gray highlighted fields, “Z” layout, etc) smoothly guide the user throughout the search process.

Naked Apartments

Naked Apartments was recently redesigned to have a more relaxed, user friendly interface.

Naked Apartments main page.

The main page features a big search bar in the center with a eye catching orange button to initiate the search. Visual cues are good, the user focuses on the center of the page, which is all they need to start the search. The overall layout is relaxed and not overwhelming. It uses a variety of blue tones and juxtaposes it to its (somewhat) complementary color, orange, to distinguish it from the rest of the page.

Naked Apartments search results page

Here’s where things start to get messy. The muted green in the main page is now being generously used to highlight random listings at the upper left corner, the beginning of the viewer’s “Z” eye pattern. These highlighted listings no doubt generate revenue for Naked Apartments by allowing brokers and owners to pay for better exposure to apartment hunters. It is functional in that it does what it was intended — to gain the user’s attention — but it also hinders the 0verall search by suggesting units that may not be the best fit for the user. The light green highlighted listings also show a photo of the broker, which adds random colors to the overall page and attracts the eye almost as much as the photo of the apartment. I find this detail distracting and unnecessary.

The orange search button is consistent with the main page, but it has lost its conspicuousness due to the orange dots in the map located right below it. The map is also not too informational. Once the user zooms into the orange dots that represent locations of listings, it doesn’t scale appropriately to the zoom. The orange dot covers a large area and makes it difficult to understand where this listing may be, especially when these dots overlap.

The colorful search result page is in stark contrast to the simple main page. I would like to see some of these colors to be muted to allow for the user to focus on the photos of the listing.

Streeteasy

Streeteasy’s landing page isn’t as simple as Naked Apartment’s but it is still relatively simple and comprehensible.

Streeteasy’s main page.

The search box is located at the beginning of the viewer’s “Z” eye pattern and keeps the filters simple. It uses minimal number of colors: blue, black, gray, and white. The “Featured NYC Apartments” block which features listings that owners/brokers pay for, is not blatant or distracting to the user, and still makes itself seen by using a bold title.

Towards the bottom of the main search menus is “Advanced Search.” When expanded, this reveals a diverse set of filters that the user can choose to specify.

Streeteasy Advanced Search Expanded

This interface is similar to that of Craigslist. It features a number of click box filters and drop down menus that help narrow the search. The spacing between the click box and the category text has yet to be perfected. Once the filters are all arranged, the only colored box button initiates the search.

Streeteasy’s search results page stays consistently minimal in color.

Streeteasy’s Search Results Page

The color scheme slightly expands with the addition of a light blue and a muted yellow. The light blue color is similar enough to the header’s blue that it doesn’t seem too unfamiliar, (opposed to the variety of greens that battles with the blue and orange in Naked Apartments) but it also is able to subtly distinguish itself as a special detail for No Fee apartments. The muted yellow is thin and not overwhelming. Streeteasy also has the same featured listings placed first in the search results with a black box labeled “featured” underneath the listing image, but it doesn’t make itself as conspicuous or distracting as the green highlighted listings in Naked Apartments. If anything, this may be more effective in trying to attract clicks from a user, since it is hard to distinguish it from the non featured items.

I ended up finding my apartment through Streeteasy. I found that it is a slightly more refined version of Craigslist and the quality of listings were superior to those in Craigslist. Functionality and scope wise, I still find that Craigslist has the more extensive set of filters and search options.

Disclaimer: I am a UX designer noob, please feel free to disagree and help me learn! There may be several grammatical errors in this post.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.