My take-aways from it are two points: (1) Embrace “natural” interactions – removing constrains and artificials; (2) Connections among things through sensors and cloud will lead to environment- and context-dependent future interactions. What is yours? Enjoy.

Connecting from Bassett & Partners on Vimeo.

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.   

           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. 

      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: 

      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. 

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.

Method 1: Responsive web design

Same HTML, different page layout.

• Pros: Same content; A single URL
• Cons: Content won’t be fully optimized for mobile devices; Slow; Difficult navigation.
• Examples: Starbucks, World Wildlife Fund, & The Boston Globe

Method 2: Dedicated Mobile Site

Different URLs: desktop website redirect to mobile website. Mobile-version website is basically a separate website from the desktop version.

• Pros: Easier to make separate changes; Fast; Easy navigation
• Cons: Multiple URLs; Different content and functionality; Content forking; Redirection required
• Examples: Walmart, Amazon, & BBC.

Method 3: RESS (responsive web design + server side components)

Two sets of code (HTML and CSS) for different devices, loading depends on server-side programming.

• Pros: Easy navigation; Less page bloat; Fast
• Cons: More server resources; Device detection required (which is unreliable)
• Examples: CNN, eHow, & Wikipedia

The first 3 chapters offer more general information regarding information dashboard design with extensive examples, while the rest 5 chapters provide further instructions on solving several important design issues.

The first thing discussed is the clarification of the idea of information dashboard. After examining some existing info dashboard products, he came up with a definition of information dashboard (p. 34):

A dashboard is a visual display of the most important information needed to achieve one or more objectives; consolidated and arranged on a single screen so the information can be monitored at a glance.

Notice how this definition can be decomposed to 4 meaningful elements, each could enlighten us on many design considerations. From the definition, I can see at least the demands on understanding visual perception, and users’ needs.

Bottom line here is: dashboard is NOT a technology but rather a piece of design that aims to communicate, and “the limited real estate of a single screen requires concise communication” (p. 44).

Secondly, Stephen introduced different categorization systems of dashboard. The one most relevant to visual design is the categorization based on the role of the dashboard: strategic role, analytical role, or operational role.

• Strategic role (e.g., CEO needs the overview of the operation status of the company): high-level measures / no real-time data / no interactions to support further analysis
• Analytical role (e.g., our DIA2 product): demands greater context / interactions with data / link seamlessly to other means to analyze data
• Operational role (e.g., monitor machine operation and take action when necessary): dynamic nature, real-time data / grab attention when need immediate operation

Our project clear fits best to “analytical role”, which requires a good mechanism to provide more contexts to the data, and enable comparisons, extensive historical views, & interactions with data to drill down.

Last, in Chapter 3, Stephen gave a list of 13 common mistakes in dashboard design:

• Exceeding the boundaries of a single screen

NO separate screen or scrolling, which ruins the benefits of monitoring information “at a glance”.

• Supplying inadequate context for the data

Just as what we discussed in the brainstorm meetings, the budget amount should be offered with   other information, otherwise the number won’t mean anything for the users.

The difficulty here is to show meaningful contexts without introducing distraction.

• Displaying excessive detail or precision

E.g., displays $98,978,407.78, while it should be $98,978,408 or $99M.

• Choosing a deficient measure

What to show with what unit? E.g., let users compare the amount or show the percentage change instead?

• Choosing inappropriate display media

What type of chart or graph to use?

E.g., Stephen is strongly against pie chart: hard to compare 2-dimensional area or angle.

• Introducing meaningless variety

Always use the display that works best. Users won’t get bored because of this.

• Using poorly designed display media

E.g., unrecognizable color differences, 3-D bar chart, and distractingly bright color.

• Encoding quantitative data inaccurately

This introduces mis-interoperation of data.

• Arranging the data poorly

With a large amount of data to show in a limited space, it is important to place information based on importance and desired viewing sequence. This is why we discussed about what information our persona Matt wants to see first.

Also, design and place information in a way of encouraging comparison.

• Highlighting important data inefficiently or not at all

Don’t make everything visually prominent, or users won’t know where to look at first.

• Cluttering the display with useless decorations

E.g., background images, and other distracting ornamentations.

• Misusing or overusing color

Color should not be used haphazardly.

Also, don’t reply purely on color to convey information: this excludes color blinded users (10% of males and 1% of females).

• Unattractive visual display

Simple but hard to achieve: don’t make it ugly.

Last weekend, I came across a very interesting and informative paper researching online identity construction on Facebook: Zhao, S., Grasmuck, S., & Martin, J. (2008). Identity construction on Facebook: Digital empowerment in anchored relationships. Computers in Human Behavior, 24(5), 1816–1836. doi:10.1016/j.chb.2008.02.012. As published in 2008, this paper is an early effort to research on online identity management in the context of nonymous Social Networking Sites (SNS).

Important things to notice before reading: the Facebook in 2012 is quite different from the version back in 2008. The most important difference is that now Facebook is not entirely nonymous: you can create fake account and you don’t have to be a college students. However, my interests will still be on those who use SNS to extend offline life and communication, and thus will need so called “identity management”; but not those who creates forged identities that have nothing to do with their offline presentation.

Back to this paper. The methods they used are content analysis of Facebook accounts and follow-up structured interviews. The literature review part of this paper gives very comprehensive review of theories of identity construction. I will list some important ones here as an index that can help to go back to the paper:

• “Identity is an important part of the self-concept. … and identity is that part of the self ‘by which we are known to others’ (Altheide, 2000, p.2)”
• Construction of identity = identity announcement & identity placement. Identity announcement is made by the individual to claim who she is while identity placement is made by others to endorse the claim. When there is intersection between identity announcement and identity placement, this intersection will be the constructed identity.
• Difference between identity construction through localized interactions and online interactions: here the authors discussed the famous work from Goffman (The Presentation of Self in Everyday Life). Basically the localized (offline) interactions place many constrains to hinder individuals from displaying inconsistent selves while anonymous online environment detaches the embodiment of an individual and frees one to present a totally new self. This new mode of presenting a “hidden self” online shows the ability of Internet to empower identity construction.
• A nonymous online environment is between those two extremes discussed above, since it is built upon offline relationships. The authors coined the term “anchored relationships” to describe this kind of offline-based online relationships. In this anchored online relationships, people are nonymous online and can be traced to their offline identities. Unlike anonymous online society, this nonymous online environment also places constraints on identity claims.
• The authors then introduced the concepts of “now selves” and “possible selves”. The previous one is who you are in others’ eyes right now and the latter refers to who you want to be in the possible future, which is an image unknown to others at this stage (Markus and Nurius, 1986). They then argued that the nonymous online environment differs from localized interactions and anonymous online environment, in that it empowers a new self-presentation as “hoped-for possible selves“.
• The concept of this “hoped-for possible selves” is so important that I list it alone here and quoted the definition given in this paper: “Hoped-for possible selves are socially desirable identities an individual would like to establish and believes that they can be established given the right conditions” (p.1819).
• As the authors review the dating-site (as a form of nonymous sites) research, they found that these nonymous dating sites provide opportunities to users to make public “identity statements“, which can be implicit and explicit. This is an important path for people to construct the “hoped-for possible” selves that are not known offline.

The results of the paper are discussed based upon these theoretical framework covered in the literature review. The major findings are two fold. First, the identity statements form a continuum of implicit to explicit claims. At one end, people adopt “showing without telling” strategy, using visual presentations such as photos to present themselves. This is an implicit way, which is the most common among participants. At the other end of explicit expression, people use narrative format to tell and label themselves. This is the least popular among participants. In between, there is an enumerative way to show the “cultural self” through listing one’s tastes on movies, songs, and hobbies etc. Second, the authors examined the types of self claims. Most participants chose to project themselves as “socially desirable” and hid pessimistic personas and academic identities. Though most results fit the hypothesis of showing the “hoped-for possible” selves that are positive, they did find some presented some types of “hidden selves”, through publishing “superficial or hedonistic images”, “less socially sanctioned” quotes, and “sexually provocative statements”.

Some reflections: As mentioned in the discussion part, living in this nonymous online environments, online and offline world is not separated anymore. The negative “hidden selves” being shown online is exactly the reason why we want to build this online identity management tool. People, especially students need to learn how to coordinate their identity claims in online and offline worlds, since they are highly connected. The “hoped-for possible selves” could be the ideal image we would like people to cast online. In my previous study of identity construction on another popular SNS Twitter, I also found the similar strategy continuum of implicit claims to explicit claims, which is very exciting. After reading is paper, I have several research ideas: 1. As suggested in this paper, we should compare the “objective” coding of online content with the “subjective” self-reported online identity construction methods. Basically compare “what people thought they did” with “what they actually did”.  2. Continue my previous study of identity construction on Twitter and compare it with the case on Facebook. To better compare, it will be better if the participants group are comparable. Understanding how people are presenting themselves online helps to discover areas that are commonly failing and yelling “SOS”.

With a more-than-7-year engineering background, I am not a typical “design” person, in terms of making things in a visually appealing fashion. However, my decision to make user experience designer as my career goal is not irrational or impulsive: because I know design for user experience is much more than visual elements, but includes deep empathy, and sensitivity to details, and requires a mind of systematic thinking. I am quite confident that my past and current academic training gave me a good foundation on these, and I will approach this career from a different perspective and skill-set compared to those visual designers or industry designers out there. But I am also fully aware that I need to pick up handy tools to turn my understanding of the users into an interactive and testable product. That’s the reason I am trying to devote some time learning technical skills to render different stages of prototypes.

Things I’ve been up to are: using photoshop to do wireframe and low-/ high-fidelity prototyping; leaning elements that should be sliced from photoshop to be used in frontend coding versus elements should be written just in HTML and CSS; learning HTML, CSS, and jQuery to build interactable websites. With other course work load and research work load, learning these parallel is a challenge and opportunity for me. The best lesson I learned along the way is: learn it when you need it; practice it once you learn it. With several projects in the line, I am pushed to pick up necessary skills as needing them for the projects. This has been an efficient learning journey for me since I don’t typically work in this way as a more “theory”-oriented person. I kept quick notes of handy skills and tried to practice them as soon as having a chance. I tried out different ideas, for both practicing newly-learned skills and preparing alternatives for the design.

Nearly 2 months have passed and I am making progress gradually. Now I would probably call myself a guru in Photoshop for Web design (not for creating arts or decorating photographs, though). I am glad that I figured out what my standpoint and my contribution could be to the UX design area, and I am acquiring corresponding knowledge and skills. I might not become a talented visual designer in my life, but I can really be a good UX designer who always have users in her mind, turn her understanding to product prototypes, and test & improve them constantly.

Finally, Lynda.com is a great resource I would like to recommend to everyone who wants to learn web design and development. Dig up the university’s database, hopefully you can get these great tutorials for free.

While it is always fun to watch videos with hand-drawing comics and I always have my thumbs up for integrating user experience components into product development, this video leaves some un-articulated questions behind the good-looking ROI. Things are just not that simple and straight-forward.

First, what to fix?
Before any sort of redesign, there should be intense usability studies to figure out the existing usability issues with assigned severity ratings. Because we need to figure out, in this case, what are the reasons caused those 50 customers leaving the website without donation. Further more, among all the reasons, there are some with higher severity level, which if fixed can result in major improvements; while others are minor, probably only contribute to 10% of the abandon problems. In this case, cost in terms of money and time should be considered by the business to decide to what degree these issues should be addressed at this time. It will be account for the estimates of the investment of redesigning and coding the website.
To read more about severity ratings:

• By Jakob Nielsen
• On Usability.gov
• On UXmatters

Second, what to measure?
It is seldom the case, if any, that the user experience improvements can bring all the lost customers back. Measurements are necessary and essential to evaluation the investment. Don’t forget that measurement itself costs man power and money, and monitoring the wrong metrics is a waste and can cause slow reactions to the market. @jmspool today wrote an interesting article to discuss the concept of KPI: Key Performance Indicator. To recap, there are three important characteristics of a good metric: related, important, and predictive.

Glad to see the importance of UX is more and more acknowledged, which encourages me as a student, a beginner on this path. Through today’s exploration, I felt I am still lacking experience regarding to the evaluation part though I had some scattered project experience. Will put more efforts on this part in the future projects and thesis work.

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.

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?

From Viget-Inspire blog: http://viget.com/inspire/smart-ways-to-use-adobe-photoshops-smart-objects

From Tutsplus: http://psd.tutsplus.com/tutorials/tools-tips/smart-objects/

Paper discussed: