Usability Evaluation – Craigslist


An expert usability evaluation I conducted as a part of a team project, for a class titled “Usability Evaluative Methods”. We conducted heuristic analyses and cognitive walkthroughs as a part of the formative evaluation, after which we conducted a usability test.

The test was a comparative study of Craigslist and a competing website called There were 5 tasks per website. Half of the participants started with Craigslist, and the other half started with Oodle, so practice effects were taken care of. The participants were asked questions in the form of a semi-structured interview at the beginning of the test, and were asked to fill out a post-test questionnaire consisting of a modified System Usability Scale (SUS), and a unique card-sorting session which helped us glean information about the participants’ thought process.

Formative Study- Heuristic Analysis and Cognitive Walkthrough

We conducted heuristic analyses and cognitive walkthroughs individually and combined our findings. Some of them were:

Craigslist Home page

  • The lack of categories order, Boring design.
  • Difficulties in changing location.
  • The search filters are not working.

Account page

  • Difficulty in finding the “create a post” option once logged in to account.
  • Difficulty in navigating away from the accounts page.

Search Results

  • Search filters do not work.
  • Search alert function not clearly explained.

Summative Study- Usability Testing

In order to diagnose areas of improvements, we tested against a similar site, We compared these findings with the usability issues we identified in our expert review. Some of our expert review findings were confirmed by the user testing and new issues were revealed as well. There were two evaluators present during each user testing session. One would facilitate the test. The other would observe. A total of 8 user testing sessions were conducted.

Task Descriptions

Each session included the following tasks for

  • Logging in to User Account
  • Post a Listing
  • Add an Image to a Posting
  • Search for an Apartment to Rent
  • Save a Search

Each session included the following tasks for

  • Logging in to User Account
  • Post a Listing
  • Add an Image to a Posting
  • Search for an Apartment to Rent
  • Mark a Listings as Favorite


Summary of Findings

Here are a few graphs showing a summary of our findings:





General Recommendations:

Here are some recommendations that we found as a result of our card sorting exercise:

  • Adding the text box where user can “Search by Location” that is used on several other classifieds websites
  • Adding notification about waiting time for processing new listing after the users had posted their new products. Currently website doesn’t notify its users that the new postings take about 20 minutes before they can be viewed by other customers.
  • Adding product location distance that shows users how far they will have to travel in order to pick up their purchase. Few websites, together with Google maps, are already using this feature.

Other Recommendations:

  • Restrained social media integration
  • Clearly labeled icons

FULL REPORT: You can view the full report, which includes all of the detailed information here: Full Reportbox_expand-512

My views on Google's new Material Design UI

Google introduced a UI refresh as a part of the Android L developer preview at their recently concluded developer conference, Google I/O. A lot is being said about the new design language labeled “Material Design” and Google has provided extensive guidelines to help developers design their apps in this way, moving forward. A very important aspect of this design is unity, as Google’s VP of design Matias Duarte says: 

We wanted one consistent vision for mobile, desktop and beyond, something clear and simple that people would intuitively understand.

Unity is important for Google as it will make it easier for users to access Google services through different devices. Surely, Google has taken design cues from both Microsoft and Apple in its material design, but it does not look like a patchwork of disjointed ideas- it seems very cohesive, and thoughtful.

It’s all about “Paper Craft”

Paper is the fundamental design paradigm of material design. Every pixel drawn by an application resides on a sheet of paper. A typical layout is composed of multiple sheets of paper. 

Toolbars and menus can be configured to look and feel like papers on a notepad.

Toolbars and menus can be configured to look and feel like papers on a notepad.

Depth as Hierarchy, not Ornamentation

In previous versions of Android and iOS an excessive amount of textures, gradients and shading was used which appeared overdone, disjointed and ugly. IOS 7 saw a radical change towards taking away all these superfluous graphics giving rise to a “flat” UI paradigm without any gradients, shading, etc. 

Instead of going to extremes as is the case with iOS, Google has adopted a more subtle and nuanced approach. Material Design uses depth not as ornamentation, but as a way of communicating hierarchy and as a way to focus users’ attention to a task. Shadows can be added to aid the perception of depth and to highlight objects. 

While the “Flat UI” paradigm is all about taking things away (gradients, shadows, highlights, etc), this new philosophy seems to be based on adding movement, animation and colors to spruce up the user experience. 

Responses to Input

Until now, precious little was done in terms of providing users some positive feedback while interacting with the system/application. Material design incorporates visual and motion cues in an attempt to engage the user, providing input acknowledgement through animated effects that look quite refined, and not overdone.

Upon receiving an input , the system provides an instantaneous visual confirmation at the point of contact.

Use of Color

Android's Gmail app, before and after the new Material Design interface.

Android’s Gmail app, before and after the new Material Design interface.


Taking a leaf out of the Windows Phone UI playbook, Material Design seems to have a distinct focus on typography. The Roboto font, a mainstay on android devices ever since android 4.0 ICS, is modified slightly; it is wider and rounder in an an attempt to be more pleasing to the eye, especially since text is almost always white juxtaposed against a vibrant background in the main title bar of applications. 

Simplified Icons

The trend of moving towards more simplistic icons instead of gaudy texture rich ones is pretty evident ever since android ICS and can also be seen in custom OEM skins like HTC Sense 6. 

Each icon is now reduced to a minimal form, every idea edited to its essence. Even the navigation buttons have been reduced to geometric shapes. The designs ensure readability and clarity even at small sizes. Every icon uses geometric shapes, and a play on symmetry and consistency gives each icon a unique quality. Emphasis is laid upon consistency of icons for both mobile and desktop icons, and small details like rounded/sharp corners have been touched upon.

Focus on Imagery

imagery-focusThe focus on visual content is also very obvious on observing the new Android L design. The image takes center stage, and designers are encouraged to use vibrant and bright imagery without using stock photos. The focus on vibrancy of images has always been a part of the smartphone user experience, users prefer oversaturated images and vibrant colors in the photographs they take, they like colors to “pop” rather than look natural. The popularity of AMOLED display technology and display calibration by OEMs that favors the oversaturated over the true to life colors supports this observation. 

Just like the Windows Phone UI, Material Design relies on images that go right up to the edges of the containing area without any window borders. It’s all big, bold squares/rectangles rather than icons and windows. 

The “Card” Concept extended


Google has been shifting to the “card” user interface, a rectangle or tile that contains a unique set of related information. Cards are typically an entry point to more complex and detailed information. These cards or tiles have been a part of the UI in Google Now and a host of other applications like Google+. The way that these tiles update the user with live information is similar to Microsoft’s live tiles in the Windows Phone UI- for instance, showing the details for your next appointment on the calendar tile. Cards provide the user with summarized and glance able information and will be used extensively in the future as the focus on wearable technology increases. 

Moving Towards Consistency

Google’s new design language is a good refresh, and brings a lot of good things to the table in terms of design. However, one of the most important aspects of Material Design is the depth and detail of the documentation and its systematic nature. After a long era of designers and developers creating Android experiences that often feel renegade or pieced together, Google have undoubtedly stepped up their efforts to standardize and improve the UI and UX across their app ecosystem. If it’s adopted, it’ll certainly lend a much-needed consistency to that world. 

Keeps up with current design trends

Google is trying to incorporate uniformity by  trying to get ahead of all of the screen sizes they have going now and provide some real structure. It seems they really tried to set up a fail proof way to design around all of the screen sizes, from the desktop experience to Glass to the watch. The effort is extremely expressive and is obviously about controlling the experience. Instead of trying to impose a strict visual aesthetic, Google defined a set of principles that leave more freedom to individual designers, while still pushing their numerous apps in the same consistent direction. 

In Conclusion…

Many will see Material as a further extension into a flat era of design, in the same way Windows 8 and iOS 7 use large areas of solid color and wide open spaces with a focus on typography. I think it’s more than that – the current design trends are the only sane way to support a wide range of display sizes, ratios, and pixel densities. Physics, animation, and some of the layering effects are only now possible because the hardware allows it to be. The new design has elements that dynamically shrink and expand, adds more white space between elements, offers lots of animation, and provides a more 3D look emphasized by shadows and lighting effects. It’s designed to put the emphasis on the most important content of a screen. Although these are just visual effects today, they could be handy in future years with 3D displays and the possibility of tactile touch screens that actually raise portions of a display. 

Maybe this is Google’s way of filling the void left by the demise of richly textured skeuomorphic designs? In any case, we can only hope it will add a little warmth and humanity to digital design and save us from a world where every app looks and behaves the same. Overall? I like it, I’m glad it’s here, but I don’t find myself bowled over by any of the components of the new system. It’s a well-considered stride in a necessary direction. I see this a great effort forward in laying the groundwork for a very Google-driven future ecosystem.

The video below reveals how the Material design language works across all devices Google touches, from smartphones to Glass to wearables.

Ingenious Touchscreen UI for Cars

An Ingenious "Eyes-Free" Touch Based Interface for Cars

Cars these days have a lot of features built in to “enhance the driving experience”. Radio sets, central controls, GPS navigation, CD players… and for every new feature that’s added into the central console, there’s an ugly, unintuitive, horrible user interface. On one hand you might have knobs, buttons and dials that can be used without looking, or you can have a touchscreen interface that’s a but better to look at, less clunky, but requires you to take your eyes off the road. There’s always a tradeoff between form and function, visual appeal versus ease of use. 

Touchscreens today

Touchscreen Interfaces on cars these days, too similar to the button/knob paradigm that preceded it.

Touchscreen Interfaces on cars these days, too similar to the button/knob paradigm that preceded it.

The touchscreen interfaces found on cars today are Skeuomorphic. They adhere to the same layout, the same design language and basically the same way of interaction as the preceding standard, buttons-and-knobs, changing only the input method, which is the touch screen. Skeumorphism is not a bad thing in and of itself, Resemblance to real world objects helps understand and learn things better, as is seen in smartphone operating systems today- iOS and android use icons, text and buttons to great effect. 

However, there is a great difference in the usage scenario here. Smartphones can get away with skeumorphism because the user of the device looks at the display, and not anywhere else, while operating it.

While driving a car, the driver’s attention needs to be on the road. Touchscreen interfaces, in the form that they are in today, can’t simply be ported over for use in automobiles.  Virtual buttons and knobs offer no tactile feedback, and the user needs to search for the button every time.

A new solution

Designer Matthaeus Krenn has created a touch based user interface that can be operated completely without

 A car UI that departs from traditional skeumorphism

A car UI that departs from traditional skeumorphism

having to look at it. Instead of buttons, icons, text or menus, the interface is based on the number of fingers used to touch it, and some gestures like pinching and swiping.  Dragging upwards with two fingers turns up the volume; dragging up with three changes the audio source. Four fingers controls temperature; five for airflow. Each has a unique sensitivity based on its function and can be triggered starting anywhere on the touch surface. Moving up or down with your fingers spread a bit wider offers an additional set of controls. All eight of these can be remapped to the driver’s preference.

This new UI seems totally built from the ground up specifically for touch devices. However, it will take some time and effort for users to train themselves and learn this new interface, something which the designer himself admits needs to be addressed in future iterations. The application is currently available only for the iPad, and can be downloaded here.

In the future…

This focus on building a new touch interface from the ground up is a welcome change, and a step in the right direction. New control methods can offer exciting advantages previously impossible. But they also come with their own set of challenges. 

Augmented reality is another aspect of human computer interaction that looks promising. A user interface that combines both touchscreen technology and augmented reality may very well be the way we interact with our cars in the future. Critical information popping up on the windshield of the car, or Heads up displays found in Sci-Fi movies and video games may not be a fatfetched prospect. The only issue here is that augmented reality displays on car windshields may distract the driver, defeating the purpose of it all.

What do you think is the future of automobile interfaces? Let me know in the comments!


stLight.options({publisher: “2814c680-1ca3-4692-a110-0627022150af”, doNotHash: false, doNotCopy: false, hashAddressBar: false});

var options={ “publisher”: “2814c680-1ca3-4692-a110-0627022150af”, “position”: “left”, “ad”: { “visible”: false, “openDelay”: 5, “closeDelay”: 0}, “chicklets”: { “items”: [“facebook”, “twitter”, “googleplus”, “stumbleupon”, “pinterest”, “digg”, “reddit”]}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);