Me: Hey Tim, Google+ is released
Tim, current fb employee: Yeah?
Me: Unless you buy me a burger tonight or I am saying goodbye to fb for good.
Tim: That’s serious threat! Wait a second, I believe G+ needs a better name to fully convert you.
Me: What’s that name?
Tim: G++
Me: Oh well, looks like we need a Bing#, too.

Okay here are my quick impressions of Google Plus.

I really like the welcome screen successfully pitching the three features:Circles, hangout and sparks.

Here is the navigation. All I want to say is: the design follows the tradition on the internet, top level navigation, primary functional navigation on the left, secondary information on the right hand. I’m pretty confident to predict that average internet user can pick up Google+ rather easily.

So time to post something. Hello world! If you paid attention to my first post, I shared it with “limited group” which should be very typical among current internet users. Yes, privacy, that’s everyone’s most important but sensitive issue. Facebook did a great job by doing the dropdown “friends, friends of friends, everyone”, albeit Google did a even better job this time.

Drag and drop is the best way to group friends.

Finally, as a heavily addicted Google Reader user, I like the Sparks. It aggregates information about the topic that I am interested in. I don’t know how Google did the content curation but that’s definitely a twitter killer. I am loooking forward to integrating Google news & Google reader into the Sparks.

I remembered reading that facebook would be releasing something interesting this week. Can’t wait!

Groupon First News Release

So here is the question, what are the key factors that affecting Groupon’s success?

• The business model - a perfect rephrase of coupon. Think about two options, “this is a $30 coupon and it’s can be applied to any purchase that’s above $40″ in contrast to “save 50%, spend $30 and get $60 value of food”. Which one would you choose? Of course the magic word “save 50%” but in reality, these two options are the same. The way groupon did it successfully attracted the users.
  
  

  Groupon Sample Screenshot

• The business model – profit sharing. After a consumer placed an order for the $30 coupon, what percentage does Groupon take? I talked to several business owners who tried to sell on Groupon and the answer is a whopping $15, or half of the price. In other words, Groupon reaped the majority of the benefits.
• The business model – promoting niche businesses. You may wonder why does Groupon dare to collect such a huge share of profit? Groupon mostly does business with “soft service”, or in other words, business with relatively low fixed cost and hence the price may fluctuate a lot. By reducing the price and tapping into the crowd source of Groupon, the business can get more attention and much more products/services than they used to.
• The marketing strategy – media exposure. Groupon got lots lots lots of help from the world of journalism. Famous tech blogs, newspapers, information hubs and discussion boards all brought Groupon in the headline. As a result, consumers buy it!
• The marketing strategy – more and more ads. For those major cities, Groupon spent tremendous amount of money on location specific ads on Google. You can also spot Groupon’s presence on mobile ads. All these solutions are precisely targeted at Groupon’s potential customers.
• The sales strategy – raise the price and offer a discount. During Valentine’s day, the flower delivery service showed up unsurprisingly on Groupon with an much elevated price. With Groupon coupon counted in, the price of flower is exactly the same as it used to be. Someone exposed that Groupon salesperson often suggested fake discount to promote their business.
  

  groupon sales

• The users perception – easy to use. Within four clicks, a new user can easily spot the “buy” button and finish the transaction.
• The users perception – increased user stickiness. Groupon release deal on a daily basis which encourage users to visit back. To make it more effective, Groupon has those neat email reminders about “your purchased deal is about to expire” to invite users come back again in an extremely friendly way.

Groupon is an albeit successful example and according to a recent article, Groupon is planning to roll out more exciting services. Excited!

According to the official post from facebook, http://developers.facebook.com/docs/opengraph/, the Open Graph Protocol enables you to integrate your Web pages into the social graph.

Open graph has four required properties:

• og:title – The title of your object as it should appear within the graph, e.g., “The Rock”.
• og:type – The type of your object, e.g., “movie”. See the complete list of supported types.
• og:image – An image URL which should represent your object within the graph. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1. We support PNG, JPEG and GIF formats. You may include multiple og:image tags to associate multiple images with your page.
• og:url – The canonical URL of your object that will be used as its permanent ID in the graph, e.g., http://www.imdb.com/title/tt0117500/.

It also has several optional properties

• og:site_name – A human-readable name for your site, e.g., “IMDb”.
• fb:admins or fb:app_id – A comma-separated list of either Facebook user IDs or a Facebook Platform application ID that administers this page. It is valid to include both fb:admins and fb:app_id on your page.
• og:description – A one to two sentence description of your page.

A sample:

    <meta property="og:title" content="The Rock"/>
    <meta property="og:type" content="movie"/>
    <meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
    <meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
    <meta property="og:site_name" content="IMDb"/>
    <meta property="fb:admins" content="USER_ID"/>
    <meta property="og:description"
          content="A group of U.S. Marines, under command of
                   a renegade general, take over Alcatraz and
                   threaten San Francisco Bay with biological
                   weapons."/>

Deprecated

Short answer: edit the “title”, “description” and “image_src” tags in the head tag. <html> <head> <meta name=”title” content=”A title for you” /> <meta name=”description” content=”Some description text for you” /> <link rel=”image_src” href=”http://wenbowang.com/wp-content/uploads/2010/03/recipe-300×142.png” /> </head> <body> <p>Your html page</p> </body> </html>

The title and description is pretty standard; a good web designer should always include these two meta tags. One thing to keep in mind is: facebook will only show the first 100 characters of your title. So, don’t make it too long.

For the “image_src”, facebook will use it as preview image. What’s great here is that facebook automatically scales for you. Hassal free!

If you want a sample preview, here it is:

Add a preview to facebook share

This week I found another reason makes me love it even more. The platform voice instruction system. Long story short, on one direction, it’s forever female voice while on the other always male voice. This subtle design helped passengers from taking the wrong direction train.

Hat tip to the designer.

I was digging into my memory and was looking for recipes online, trying to find a perfect recipe. I noticed most recipes are “step by step” format and in some cases the recipe can be incredibly long.

I devised another format of recipe, mainly in Grid. See the image below, it’s pretty self-explanatory.

Recipe Design - Wenbo

I like this grid style, cuz:
1 – in terms of length, it’s not that daunting
2 – it gives u a hint of “which ingredient interact with which” in neighboring blocks.
3- it offers multi-tasking possibilities.

However, during the real cooking process, I found it not optimal. The underlying reason is: It’s not as straightforward as the step-by-step style;

User wants simple no-brainer instruction during cooking and user’s need determines everything. That’s why step-by-step instruction flourishes.

Have fun!

Internet Marketing - Search Engine

Rules of thumb

- Speak users’ language, be concise but not ambiguous
- It never hurts to do one more dry run.
- Response rate: 20%-40% for target email invitations, 10%-15% for web popup windows, 1%-2% web banners

Prelude: Survey and you

We all agree that online survey is a very effective method to unveil l the answer to product stakeholder’s questions and collect quantitative data about target users. It is especially superior in making strong claims about narrow phenomena.
There are several ways of attracting users to take your survey, ranking in efficiency, from highest to lowest: email campaign, popup window (which I dislike most) and website banners. In my case, I used a sliding animation, hoping to have user’s attention with minimal negative influence on browsing experience.

FRBSF Survey

Apple Survey

Step 1: Formulate Goals

What’s the question in your mind? Do you want to know your users’ characteristic information, their behavioral preferences or their attitude toward your product? In my case, we hope to know users’ impression of usability/visual appeal/functionability/web page speed and we can prioritize them. List all questions out, group them semantically, and eliminate ones that you don’t really need, because, the shorter the better.
A gorgeous example is from apple.

survey frbsf other

Step 2: Design the questions, make it short

The rule of thumb is: make it short. If this survey is a single-question-one, GOOD, if a multi-questions one, don’t be discouraged, remember not to put too many questions on one page, because a long-and-daunting-survey is not that friendly to users. If possible, try to use as many as many as many close-end questions as possible, which will save both users and your time. If you hope users to surprise you, it is ideal to have an open-end question with the survey.
Or you can do what I did here, using a little bit Javascript, asking for “why” “other” when user clicks on “strongly disagree” or “other” button. A tiny interaction makes a difference, right?

Agree/Disagree Array

Another nice approach I would like to mention is the agree/disagree array. If you have a group of somewhat related questions all asking agree/disagree, why not put them into an array, reduce the reading time of the user and make the survey more visually appealing.

Survey Design

Step 3: Test, Pilot and Start the survey

Actually a better phrase for this section is: Iterative test, iterative pilot and finally start the survey. The test of the survey helps u refine your wording in the survey, and the pilot helps u balance the amount of information you require and the time users need to spend on it.
Send out the survey using: email, popup window, banner or even telephone calls. Remember, the invitation message needs to be short, and full of incentive. A subtle example shown below is from msdn while in contrast an annoying survey is displayed side by side.

Last Step: Data analysis is important

Either a home-built survey application or 3rd party online survey tools will generate reports. Do spend GOOD amount of time on it, totally worth it.

According to the post, iPhone turned out to be the best selling phone in Korea in the week of November 30, hitting 10.2% market of all mobile handsets (not just smartphones) sold in Korea. Remember that not until late Sept, South Korea gave thumb up to iphone. This sales figure is impressive, and its carrier KT’s market share is booming, beating the market-leader SK Telecom.

I hope we can see more data on this, allowing further analysis. One comment I have in my mind is: a truly nice item will claim the victory.

A friend of mine wrote an analysis of the unsatisfactory sales figure in Chinese, providing several possible answers.

• Late entry into China Market
• No wifi due to Chinese cell network policy
• Ridiculously high price
• Not a generous amount of app available

Altho CEO of China Unicom claimed the figure beat the expectation and is confident in iphone becoming the most popular cell phone in China, I would say this outcome is a fiasco.

There is no room for debate on the negative effects brought by lack of wifi and grey market; I would like to add that this fiasco also comes from a marketing failure and a user experience acceptance failure.

My telecommunication working experience in China tells me China Unicom has a notorious reputation in the industry, for its delay of denial of last 10% or even 20% of the payment such as cellphone network station construction, and it is seldom good at providing effective marketing strategy to cater to different users’ need. I really have no idea why iphone pick Unicom as network carrier partner in China.

The second point I would like to stress is the acceptance of elegant usability in China. There are a good amount of user experience professionals working as evangelist in China but an even larger amount of developers believe user experience is just merely graphic design plus some fancy coding effects or libraries. A side example is, Japanese cellphone manufacturer Sharp, who specializes in the cellphone industrial design, gained significant revenue without promoting its brand. We can’t really influence the taste of consumers but we CAN bring products with excellent usability to our consumers.
Take iPhone homescreen as an example,

iPhone_homescreen

iPhone hints users to use their thumb to swipe the screen leftward or rightward with no explicit text notification. The only trick apple uses is the five dots on the bottom of the screen, giving users a subtle but super effective hint, “there’s something on the right”.
Also, iPhone app logos share the same pattern and blending effect, this harmonized effect unifies all apps and makes the iPhone more usable.
Back to the topic of iPhone. My attitude is, “positive”. iPhone didn’t become an influential player in Japanese market until the 3rd generation. Considering the fact that Japan and China share similar Asian patterns – games and susceptibility to new technology – we can see a promising future for iPhone.

Thanks for reading. Next time, possibly this Wednesday, I’ll discuss more on our website redeisgn progress, specifically, the visitors survey.

Here is a comparison. In one of our application we have a text submitting form with a character limit of 600. Unlike the traditional “you have reached 600″ alert, I tried to implement in a more user friendly way.

1. Provide a live word count. If exceeded, it will turn into a negative value with red color the color I believe is a good metaphor for “stop”
2. Take of the “600″ alert
3. Disable the “submit” button after user exceed the limit, providing a soft alert
4. While the textarea is blank, show a hint message “this is 600 limit only”

Usable vs unusalbe warning

So, how do you feel about it?