Category Archives: Good or Bad Designs

Four Reasons Why I Love airbnb

As a big fan of traveling, I was thrilled to find airbnb.com. I am attached to it and visit it frequently even when I am not planning for any trip. It is not only usable but also enjoyable.

This website gives me great experience mainly because of the following 4 reasons:

  • Clean navigation and prominent searching area. As a platform offering choices of accommodations for travelers who have destinations in their mind, searching function should be significant and easy to find. Airbnb does a great job of placing the core function at the very center of the home page, which will also take the central place of on a commonly sized laptop screen. A “search” button colored with bright pink will ensure that you don’t miss the search box embedded in colorful cover photos.   

Screenshot 1:30:13 11:30 AM           In case you are new to the website and just want to wonder around and check it out, the fixed   search bar at the very top of the page will stay what ever page you are going to visit and quickly help you get back to track when you are ready to search for specific destination.

      This simple but thoughtful navigation design can always remind and facilitate users to complete the key task without hassle.

  • Pleasing visual enjoyment. For all online shopping sites, visual attraction is a key to attack and retain visitors. Airbnb is also a form of online shopping sites, where people make purchase decisions without seeing and touching real products. What the difference between airbnb and other online shopping store (e.g., Amazon, Nordstrom, and eBay) is that airbnb is not only selling the product itself, it is also selling the living experience and life styles. These hidden selling points are in no way negligible. Thus, I appreciate the attention and value airbnb has put on the quality of the images and delightful color schemes of the website. I have no doubt that users will be attracted by most of the photos posted and feeling hard to make a decision not because the options are undesirable but because they are all too fancy to just choose one. Furthermore, the whitespace among images is reasonable, rendering great visual effect.
  • Integration of social functions and wish list. This newly-added feature showed a salute to the good idea and experience on Pinterest. I viewed it as a tipping-point that airbnb evolved its focus on exploration rather than just search. Much like a soymilk-maker company in China spent great efforts to advocate and advertise the benefits of drinking soymilk in order to sell its products, airbnb offers contexts and atmosphere of different places around the world to arouse the pleasant yearn for traveling, and indicating living with airbnb is the best way to really immerse oneself in the local culture. I love the wish list function because I can “pin” interior designs that I love, save places for future trips, broadcast on Facebook about my taste, and plan trips with my friend collaboratively. Airbnb introduces the wish list function in the home page, right below the prominent search function. Users can easily browse popular wish lists. What adds to enhance this joyful experience is the great coding – it brings almost infinite scrolling, smoothy and robust. Screenshot 1:30:13 4:48 PM

      In each individual space page, saving to wish list or sharing function (to Twitter and Pinterest) is handy. It is convenient at any stage to bookmark favorite choices. Overall, airbnb enables different pathways for users do discover fun places and ignite their unconscious desires.

  • Trust system and adequate product information. Another formula of successful online shopping site is to build the sense of trust and ease the process of making purchase decisions. Airbnb succeeds in setting up a trust by using traditional user reviews system and approachable profile information of house-renters. Below shows randomly pulled two renter’s profile bar on the property’s page: Screenshot 2:7:13 11:23 AM

      The font used to spell their names is handwriting style, creating a sense of friendliness. Other performance matrices reflect their working style. They helps users to make good matches with the renter they are going to deal with and be aware of what to expect. By clicking the name of the renter, users could check more detailed information and business record of her. All the means very much secured users trust towards the website.

      To help users make informed decisions, useful information is also ready available and easy to navigate through. For example, information regarding a renting property could be viewed in photo’s form, geography form, street-view form, and availability form, using tabs to toggle among. Detailed description, amenity list and house rules (e.g., no smoking, and no pets) are also specified right below the photo gallery. Screenshot 1:30:13 11:03 PM

Above are the major 4 reasons why I have great experience on airbnb. As I browse it, I discover more lovely features that reflect those fine considerations from the website designer. A lesson learned.

Advertisements

Eyes on USA TODAY’s New Design

USA TODAY disclosed it’s redesign of its logo, paper, and website, as a gift for its 30th birthday. As a media that is best known for its visual story telling, I am curious to see if the redesign succeeds its traditional advantage on visual representation.

Upon browsing through the beta website, I spotted the following 3 highlights that I would like to share and discuss with you:

  1. Similar reading experience with tablet-based e-magazine 
  • While reading one news section, next section is shown with its coded color on the right side, indicating a slide-effect can be used to view next section.
  • Visual-based story telling strategy is consistent in the new design, without any cluster of characters in main pages.
  • If choose to read one story, the story body will be loaded as a pop-up window above the current page, as shown in the second snapshot. Cross out the pop-up window can lead you back to the original page, which is snapshot #1. You can also click left or right arrow to view previous or next news in detail. This design actually lightens the navigation burden (adding breadcrumb trail…) and decreases the sense of loss, as the cross-out action is very intuitive and users know they can always go back easily.

    2. Simple, clean, and color-coded menu.

If you hover your mouse over one of the un-chosen menu item, the coded color will expand and fill in the rectangular menu button. This gives quick visual feedback and proper clue of affordance for users.

    3. Social media sites (e.g., Twitter & Facebook) alike features

Another thing I like about the redesign is its natural integration of common UX features adopted in modern SNS. For example, in the first snapshot, the expandable “RIGHT NOW” tab is a good stimulus for users to keep up to date. It forms an acute image of USA TODAY, compared to other static-looking news websites. Another example would be the continuous scrolling interaction mode, which is very common for SNS, such as Twitter and Facebook. Compared to the traditional pagination interaction mode (see below), continuous scrolling enables a more fluent browsing experience, with much more appealing looking.

Image

Overall, with the new look, USA TODAY would definitely be one of the news sites that I visit often. Because with the easier and fun interaction, it brings enjoyable reading experience. How do you like it?

Control Sensitivity in Design

I run into the problem everyday: when I try to adjust the temperature of my shower, it is just way too sensitive. I have to move the lever as carefully as I can, however, it still surprises me with sudden change of temperature. I end up taking a shower either too cold or too hot.

This occurs to me today because I read about “control-display ratio” today when I went over the human factor class that I am taking this semester. Control-display (C/D) ratio is measuring the change of control compared to the change of display (or outcome, response). If the C/D ratio is high, then the control sensitivity is low, and vise versa. C/D ratio is very important for HCI design as well. Low C/D ratio (high sensitivity) could save time when users are approaching the target, while high C/D ratio (low sensitivity) could help user with fine adjustment when they reach the target area. So a carefully designed C/D ratio is important for improving user controlling experience. For example, the movement of mouse or controlling stick should have a reasonable C/D control so that users could minimize the effort when they try to move their mouse to reach a target.

The following is a common example in our everyday life: when you try to adjust the window, cursor has to be moved within a narrow area in order to change the shape. If the control sensitivity is too high, it will be very very annoying.

Travel with Flexible Dates: Flight Search Should Help You

The more I browse other flight booking websites, the more I like StudentUniverse.

People always have the chance to travel with flexible dates: say, you have a 7-day Spring break, you aren’t really strict about which day to depart and which day to return; rather, the flight cost often plays a big role in helping you to decide the traveling date, since it varies depending on different dates.

When searching for flights, if you check the “my travel dates are flexible” box, StudentUniverse wisely offers a 7×7 metrics of prices, corresponding to different combinations of departure and return days that are within 3 days of your pre-set dates. In this metrics, pre-set departure and return date combination is in the middle, highlighted with dark blue color; and the cheapest prices are also highlighted with light blue color, trying to catch attention. With this metrics, you could easily decide which combination fits you the best, in terms of both price and schedule.

StudentUniverse: Search Results of Flexible Dates

Compared to StudentUniverse, other traveling agents’ websites are not so considerate over the flexible traveling needs. They only provide the results of exact dates you offered in the search engine. Want to check adjacent dates to see if there are cheaper options? You really need to work hard: each cell in the above metrics means one round of search(change departing and/or returning dates and search again), plus needs to jot down search history so that you don’t forget after so many rounds. User-centered design is small, but it is everywhere.

Search Result from other Websites

Gmail’s New Look: How Do You Like it?

Earlier yesterday, I updated my Gmail to the new look. I personally like it because those new functions actually show the sincerity of Gmail group’s efforts of making more clean user interface and more fluent user experience. You probably have seen this video when you update the account, but it does no harm to review it again to remind yourself of all these well-designed features:

To summarize, we have these NEW FEATURES IN GMAIL:

  • Enable customization of the sidebar
  • Redesign the conversation (with profile pictures)
  • Set high-resolution background image
  • Advanced Search
  • Control the display density (comfortable, cozy, and compact)

Among all these features, I could see one common trend — returning more control back to the users in a smooth way. For example, you could now customize the left-hand side bar according to your preferences, which allows me to accomplish more tasks within the first screen by hiding those rarely used tags and moving chatting window up:

New Sidebar Design                 Old Sidebar Design

A wise bonus gained through these kind of “customization” designs might be the enhancement of users’ sense of control and sense of identity, which then leads to a good impression and experience towards Gmail.

If you are about to say “cheers!” to Gmail group, save it for a little bit longer.

Since I want to compare the two versions, I switched my Gmail back and forth between the two (before the old version is totally shut down!) to play with it. Below are some comments I wanted to make.

1. Design of Grouping and Hierarchy

Compared the basic themes under both versions:

See the arrows pointing to the headings called “Starred” and “Everything else”? I really appreciate the old version providing me darker blue color with bold fonts to make them stand out. However, in the new version, these headings are being put quietly in the background color (white), it took me a while to realize there are still different sections. This task will be even harder if you are scrolling the window up and down quickly and trying to scan through items.

2. Visibility of System Status

Now look at the circled “Inbox”. In the old version, they gave it a strip like background to indicate its activation. In the new version, strategy is changed to adapt to the new visual design style, thus it is highlighted through bolding. I would say the old version is more “eye-catchy” because it is more distinguished from other inactivated options. If you think it looks still Ok in the new version, try other themes like this one:

New Gmail

Isn’t it much challenged to find bolded “Inbox” (and also all other texts) in this theme under the new version? But the old version is performing reliable, with not that fancy design. I was using this theme under the old version, after switching, I had to change it to the basic theme in order to ease my eyes.

3. Duplicated Functions

As the carrier of most of the new features, the new setting option is really helpful:

However, with two identical function logos in the upper right corner, it is a little bit confusing and annoying. Since the upper one is inherited from the old version, it carries some functions that overlapped with the new setting button. That means you could get things done (e.g., change email signatures, change themes, and add filters) through either way — then don’t make users think which one they should choose! I would definitely say the newly added one is better, since it pulls out frequently used functions.

Overall, brilliant design of the new Gmail! Very thoughtful new features to fulfill the needs that users even didn’t see. Also very interesting to compare between different versions when they are both available. Play with it and tell me how do you like the new one?:)

EXCELLENT UX BLOGS: Konigi

Konigi is a relatively different UX blog compared to UX booth, which I recommended before, or to be precise, different with most of UX blogs. Written by Michael Angeles, it is a blog sharing showcases, tools, and knowledge with UX practitioner.

As mentioned in many comments of this blog, it is a fantastic website to check out inspiring designs and useful tools. I took a quick tour around the website and found something definitely invaluable for my future use. For example, you could find Konigi designed tools such as Graph Paper, and OmniGraffle Wireframe Stencils, or you could find other popular used tools recommended by Konigi. For example, I found Usaura, a website running free 5-second test quite interesting. And by the way, the graphic interface design of Konigi itself is a good showcase for UX designers, great alignment, great hierarchy and grouping, simple and easy to find information. Another section of Konigi that appeals to me a lot is the Wiki section. You could find fruitful lists of  UX related information, including terminology, deliverables, and even UX jobs resources.

Well, at the end, if you still insist on finding some recent topics about UX design, as what you could do in UX booth, Konigi actually has its blogging articles under “blog” section. I will say, it is definitely a website worth checking out from time to time.

Major hierarchy of Konigi: Home, Blog, Showcases, Tools, and Wiki

Major hierarchy of Konigi

Recommended tools by Konigi

Recommended tools by Konigi

All About Designs — Equation Editor in Word

As we discussed before, a good design should have a user-centered approach, that being said, don’t let your users think, let them use the product nice and easy. A bad design does the opposite:

Equation Editor in Microsoft Word

What I am using is not the newest version of Microsoft Word (2008 version for Mac), and I noticed that it has already been improved somehow on this, but still, it is worth talking about as a case study.

Say, if I was working on my document and need to insert an equation.First thing to do, find where the function is. I started, naturally, with Insert menu, but could not find an option called “equation”, which is the searching goal in my mind. Then I googled it, thanked to so many same questions posting there, I knew it should be in “Object”. That does’t make too much sense for me, since everything insert might be count as an “object”. I am even not sure if I could remember where to find it next time.

Next, clicked the equation option in the “Object”, typed in equations and ready to insert it. But, I was scared when I found no bottom saying anything like “Insert it!”. What am I supposed to do now? Copy and paste equations in this editor window, find other bottoms in the tool bar, or just close it? Will I lose the equation I’ve typed in if I close it? With so many question marks in my head, I decided to try my luck and just close it to see what will happen. To my surprise, the equation was in the right place in the document waiting for me! After all these confusion and surprise thing, only one question left: why not just give me a simple “insert” bottom?

Equation editor view

According to J. Nielsen’s ten usability heuristics, there are some design principles the design confronts here.

First, visibility of system status. An “insert” bottom with in time feedback (the equation inserted to the text) could let the user know what is going on. Or even a realtime updated display in the document will let the user know (s)he won’t lose anything if (s)he close the editor since the equation is already inserted the same time (s)he types it.

Second, recognition rather than recall. That being said, make things visible! The designer should put the function of inserting equations visible for users, rather than testing their imagination and asking them to remember the path if they want to use the function again.