Qing Li

Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes | Smashing UX Design

2012-02-24T12:33:00.000-08:00

What the Mobile Platform Guidelines Say

Apple’s iPhone Human Interface Guidelines recommends a minimum target size of 44 pixels wide 44 pixels tall. Microsoft’s Windows Phone UI Design and Interaction Guide suggests a touch target size of 34px with a minimum touch target size of 26px. Nokia’s developer guidelines suggest that the target size should be no smaller than 1cm x 1cm square or 28 x 28 pixels.

While these guidelines give a general measurement for touch targets, they’re not consistent with each other, nor are they consistent with the actual size of the human finger. In fact, their suggested sizes are much smaller than the average finger, which can lead to touch target problems for users on mobile devices.

Small Touch Targets Lead to Big Problems

Small touch targets make users work harder because they require more accuracy to hit. Users need to reorient their finger, from finger pad to fingertip, to hit the target with clear visual feedback. Using the finger pad would cover the entire target, making it impossible for users to see the target they’re trying to hit. Users use the fingertip to hit small touch targets because it gives them the visual feedback they need to know that they’re hitting their target accurately. But when users have to reorient their finger, it slows their movement down, and forces them to work harder to hit their target.

Not just that, but small touch targets can lead to touch errors. When small touch targets are grouped near each other, users can accidentally hit neighboring targets and initiate unintended actions. This is because the user’s finger overlaps on to the neighboring buttons. And if pressure is not carefully applied in the right spot, it’ll trigger the wrong action. It’s easy for users to make these errors with their index finger. But it’s even easier for them to make these errors if they use their thumb, because their thumb is much larger than the target. Sometimes users will tilt their thumb sideways and use the thin side to hit a small touch target. But this is a lot of unnecessary work.

Thumb use among mobile users is popular. Some users won’t always have two hands free when they’re on their mobile device. Many prefer the convenience of using only one hand and their thumb. Users shouldn’t have to switch from using one hand to two hands, or from their thumb to their index finger to hit a target accurately. And more importantly, the size of a target shouldn’t cause them to make touch errors. Small touch targets make things harder for users, where a finger-friendly target does not.

Pixel Width of the Average Index Finger

An MIT Touch Lab study of Human Fingertips to investigate the Mechanics of Tactile Sense found that the average width of the index finger is 1.6 to 2 cm (16 – 20 mm) for most adults. This converts to 45 – 57 pixels, which is wider than what most mobile guidelines suggest.

A touch target that’s 45 – 57 pixels wide allows the user’s finger to fit snugly inside the target. The edges of the target are visible when the user taps it. This provides them with clear visual feedback that they’re hitting the target accurately. They’re also able to hit and move to their targets faster due to its larger size. This is consistent with Fitt’s Law, which says that the time to reach a target is longer if the target is smaller. A small target slows users down because they have to pay extra attention to hit the target accurately. A finger-sized target gives users enough room to hit it without having to worry about accuracy.

Pixel Width of the Average Thumb

There are many users who use their index finger to tap mobile targets. But there are just as many users who use their thumb as well. The big difference with the thumb is that it’s wider than the index finger. The average width of an adult thumb is 1 inch (2.5 cm), which converts to 72 pixels.

For users who use their thumbs, 72 pixels does wonders. They’re easier and faster to hit because they allow the user’s thumb to fit comfortably inside the target. This makes the edges visible and easy to see from all angles. This means that users don’t have to reorient their thumb to the very tip to see it hit the target. Nor do they have to tilt their thumb to the side to hit it. One tap with their thumb pad is enough to do the trick.

A Target Size Study for One-Handed Thumb Use on Small Touchscreen Devices found that user errors declined as the target size increased. Users were able to tap the target faster without having to make intentional physical accommodations to increase accuracy such as reorienting the thumb, which would have slowed performance.

Another study on Touch Key Design for Target Selection on a Mobile Phone also found that the number of errors decreased as the touch key size increased. In addition, it was provided that the larger the touch key size, the higher the success rate and pressing convenience.

Finger-Sized is Ideal, But Not Always Practical

As many benefits there are to using finger-sized targets, they’re not always practical in every situation. On a mobile device, you’re working in a limited space. This means when you have many finger-sized targets together, they can take up more space than your screen can afford. However, when you have a few finger-sized targets together, that’s when you can fit them all on your screen without trouble. You will need to measure the size of your screen and touch targets to know exactly how big of a touch target you can afford. If you can’t afford finger-sized touch targets on your interface, use the guidelines the mobile platform gives you instead.

Finger-sized targets are much easier to apply on a tablet than a mobile device because there is more screen space available. You can use them liberally without the fear of taking up too much space and improve tablet usability instantly. However, mobile devices are where users have the most trouble hitting touch targets. And that’s where finger-sized targets are needed the most. The challenge for designers is to figure out how to make the most of finger-sized targets on the mobile screen. This might require using less touch targets than you normally would. But this is a plus because it forces designers to keep their navigation simple and minimal.

Thumb-Sized Targets for Gaming Applications

Another thing to think about is when to use a thumb-sized target over an index finger-sized one. It’s difficult to know whether most of your users will use their thumbs or index fingers on your application. However, if your application is a game, it’s likely most users will use their thumbs to play instead of their index fingers. This is why thumb-sized targets are particularly useful for gaming applications. By making your game control targets thumb-sized, users can play the game with better handling and control. They’re able to see the game control targets as they move their thumbs, and the game will feel more adaptive to them.

Gyro13 Steam Copter Arcade has larger touchscreen targets

It is without a doubt that matching your touch target sizes to the average finger size improves mobile usability for many. Whether your application is a game or any other, touch targets are designed for users to tap. If the user has to take their attention away from using your application to the way they move, orient or arc their finger to tap a target, it degrades their experience of your application. With this new-found insight, you can create applications that are truly finger-friendly. Finger-friendly design isn’t reserved for the few. It’s a new design standard for mobile applications to follow everywhere.

Raphaël—JavaScript Library

2012-02-24T12:11:00.000-08:00

Raphaël—JavaScript Library

Understanding the Coolest Web Design Ideas for 2012 - DesignModo

2012-02-17T23:03:00.000-08:00

Discover the Latest Web Design Trends

Responsive Functions: The web design is about to become truly responsive. This thing relates to some new functions and capabilities which are introduced in its infrastructure. The concept, which relates to a fully responsive web design, is still quite new. This thing indirectly means that we might not get it in 2012. However, the developers will definitely impress us with these capabilities very soon.

Circles: None can deny the fact that web design presents a few steady trends. One of these trends is the so-called “circles”, which are some effects that can be completed with the help of the CSS3 feature. This feature is capable to create some truly fancy box effects which can easily compete against any rounded corners and drop shadows desktop-based effects.

New Menus: The latest web design ideas are proposing users some new menus which come along with multi-column choices. The multi-column alternatives are ideal especially for those websites which must handle numerous links. These new menus allow websites’ owners to keep core links at the top of their pages, which actually improves the overall web experience.

Vector Art: The vector art is also about to change. The new codes and formats allow people to create some truly adorable mascots which are ready to claim their own spots on various virtual pages. The “big vector” illustration work is quite new although the concept which relates to its basics has been around for a few years. These days, the website creators are ready to cheer up their boring cyberspaces.

HTML5 and iQuery: This new formats are finally able to enhance the user experience with bonus animations and fancy aesthetics. These new code formats allow website builders to create some truly outstanding effects with fewer code lines than before.

New Banner Graphics: As you might already know, the website designers are proposing a variety of banner graphics these days. If you take a look over the web, you are able to find numerous tutorials which help different people to create unique page bookmarks, banners, and ribbons.

Slab Typefaces: Although slab typefaces have been recently introduced in web design, they can help you to create a great web page, which highlights a wonderful graphic. Moreover, slab typefaces are essential in order to convince the readers to check specific website sections.

One-Page Layout: This function actually requires you to remove the unnecessary lines from your content. It is essential to bear in mind that most readers only scan the content, without actually reading it. This thing indirectly means that you have to create some short texts that can attract the readers to check your website. However, it is important to know that one page layout fits the personal web designs much better than the corporate ones.

Infographics: Although this element does not affect the web design of a page, it is related somehow to the overall user experience. And the truth is that the new elements, which describe infographics these days, have changed the new-age media. Thanks to these elements, the consumers are capable to get any information they want in a truly easy-to-consume way.

Font Faces: You can change any CSS styles by getting the Typekit tool, which allows you to write custom fonts into the CSS. By choosing a specific font, you can easily create a new look for your website.

Oversized Headers/Logos: If you wish to impress your website’ visitors, you can use oversized headers or logos. However, if you intend to use oversized elements on your page, make sure that you do not use too many. In most cases, the oversized graphics are meant to attract the attention of your readers with regard to specific website elements.

Hand-Drawn Designs: For example, if you intend to develop a website for an artist, the best thing that you can do is to get hand-drawn graphics. You can even choose software which allows you to create your own design. This way, you can be sure of the fact that your creation is unique.

Typography: The web designers have also developed some new typographic trends. The truth is that in most cases, the designers are afraid to use new fonts in order maintain the usability of websites. However, you can use different fonts to create a twist where it is needed. Moreover, you can modify fonts to fit your purpose. Although typography is quite new, it will definitely become a very important component of websites.

Simplicity Remains the Key: In order to give customers quick access to different virtual points, you should definitely choose intuitive but simple interfaces. The more elements your interface provides, the more time it takes to download. This thing can convince a part of your visitors to choose another website, which provides similar products and services but faster downloads. Therefore, if you want to stay on top, make sure that “simplicity” remains the word which describes your website.

By applying these web design ideas and many other alternatives that you are able to find over the web, you can definitely create some truly wonderful web pages, which present the unique touch of the future. Thanks to different website and graphic design company designers and developers, jumping into the latest trends is easier than ever before.

Source: http://designmodo.com/web-design-ideas-2012/#ixzz1miMoY9N0

Responsive Web Design: 50 Examples and Best Practices - DesignModo

2012-02-12T23:25:00.000-08:00

Responsive Web Design: 50 Examples and Best Practices - DesignModo

CSS 3 HSL HSLA | zenelements

2012-02-10T13:27:00.000-08:00

CSS 3 HSL HSLA | zenelements

CSS3 HSL

The HSL declaration sets color/colour using Hue (H), Saturation (S) and Lightness (L).

Hue is derived from a degree on the color wheel: 0 & 360 being red, around 120 for the greens, 240 for the blues and everything else in between
Saturation is a percentage: 0% being grayscale and 100% in full color
Lightness is a percentage: 0% is dark, 50% the average and 100% the lightest

Cross Brower Compatability
HSL & HSLA is currently well supported in FireFox, Google Chrome and Safari, also not requiring any prefix.
All articles in the CSS3 will be updated to show future support & development.

CSS3 HSL

The above HSL example uses the following CSS 3

CSS 3 HSL
div.L1 { background:hsl(320, 100%, 25%); height:20px; }
div.L2 { background:hsl(320, 100%, 50%); height:20px; }
div.L3 { background:hsl(320, 100%, 75%); height:20px; }
div.L4 { background:hsl(202, 100%, 50%); height:20px; }
div.L5 { background:hsl(202, 50%, 50%); height:20px; }
div.L6 { background:hsl(202, 25%, 50%); height:20px; }

An example for those on alternative browsers not seeing the effects of HSL…

CSS3 HSLA

Alpha allows us the ability to set a level of opacity. An element with opacity/alpha value of 1.0 will be fully opaque (visible) while an element with opacity value 0.0 will be the complete opposite, invisible. Any value inbetween will determine how opaque (or transparent) the color or object is against its background.

The above HSLA example is set in another layer containing a background texture and each layer uses the following CSS 3

CSS 3 HSLA
div.L1 { background:hsla(165, 35%, 50%, 0.2); height:20px; }
div.L2 { background:hsla(165, 35%, 50%, 0.4); height:20px; }
div.L3 { background:hsla(165, 35%, 50%, 0.6); height:20px; }
div.L4 { background:hsla(165, 35%, 50%, 0.8); height:20px; }
div.L5 { background:hsla(165, 35%, 50%, 1.0); height:20px; }

An example for those on alternative browsers not seeing the effects of HSLA…

The Zen Elements CSS3 Series

Add Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect | Blogger Widgets | Tips | Tricks | Templates : Way2Blogging

2012-02-07T13:57:00.000-08:00

Add Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect | Blogger Widgets | Tips | Tricks | Templates : Way2Blogging

What a web desginer supposed to do?

2012-01-19T11:36:00.000-08:00

This is a project post on ifreelance.com. Get an idea what people are looking for when they hire a web designer......

"......You could be…• a talented visual designer who makes masterpieces on 980px-wide canvas (that also look great at 320px or 640px), can turn a URL into a identity that conveys our entire brand, and could design a gorgeous custom WordPress or Tumblr theme in a couple days.• a gifted interaction designer who knows how lives to turn four-step processes into single-page actions, understands user psychology as well as A/B testing, and loves to design tools that are as easy for Baby Boomers to use as they are exciting for 20-somethings to evangelize.• a brilliant front-end engineer who debugs AJAX in your sleep, loves design but hasn’t touched Photoshop in years, and named your dog jQuery. You’re closer to an engineer than a oil painter, but you still know how to make things look nice. We’d probably hire out for initial branding, but look to you for everything else. Ideally, you are all three of these, wrapped up nicely with a bow. But if you are strong in any two, or absolutely nail any one of them, let’s talk. LOCATIONAnywhere in the U.S. — we run a virtual office, and collaborate online. (If that stresses you out, apply anyway. We’re very good at replicating the best parts of office life in a virtual setting.) Send a cover letter and a resume . We are an equal opportunity employer."

border-radius and -moz-border-radius < CSS | The Art of Web

2012-01-14T21:53:00.000-08:00

border-radius and -moz-border-radius < CSS | The Art of Web

1. Definition and syntax for border-radius

As with many CSS properties relating to margins, padding and borders, there are four individual properties - one for each corner of a box element - and one shorthand property. Each of the corner attributes will accept either one or two values. The border-radius property will accept up to two values in WebKit browsers and up to eight now in Firefox 3.5.

Here are the CSS and browser-specific attributes in question:

CSS3	Mozilla equivalent	WebKit equivalent
border-top-right-radius	-moz-border-radius-topright	-webkit-border-top-right-radius
border-bottom-right-radius	-moz-border-radius-bottomright	-webkit-border-bottom-right-radius
border-bottom-left-radius	-moz-border-radius-bottomleft	-webkit-border-bottom-left-radius
border-top-left-radius	-moz-border-radius-topleft	-webkit-border-top-left-radius
border-radius	-moz-border-radius	-webkit-border-radius

Prior to IE9 these CSS3 properties do not work in Internet Explorer. The 'Mozilla' versions however work perfectly well in Firefox and other Mozilla-based browsers and the 'WebKit' ones in Safari and Chrome as well as the iPhone/iPad.

Each of the individual corner CSS3 properties take either one or two length values (generally 'px' or 'em' values). If a single value is supplied then that becomes the radius of a rounded corner. If two values are supplied then they become the horizontal and vertical radii for an elliptical corner.

The Mozilla syntax before Firefox 3.5 only supported round (as opposed to elliptical) corners and adding a second value would result in a standard square corner.

The border-radius property in WebKit accepts one or two values and uses them to style all four corners making a nice symmetric shape. The new Firefox syntax allows you to define four different round or elliptical corners. A slash has been introduced to separate the horizontal and vertical length settings.

There is no pure-CSS solution for rounded corners in IE8 or other primitive browsers. Only a range of JavaScript patches which can be found by searching online.

2. Using -moz-border-radius in Mozilla (Firefox)

The following examples will only work if you're using Firefox or another Mozilla browser that supports -moz-border-radius properties.

Example 1

-moz-border-radius: 1em;

Example 2

-moz-border-radius-topright: 2em; -moz-border-radius-topleft: 2em;

Example 3

-moz-border-radius: 2em 0;

Example 4

-moz-border-radius: 3em 1em;

The Mozilla properties used here do not conform to the standard (hence the -moz- prefix) and until Firefox 3.5 only supported round corners. In newer versions of Firefox elliptical corners are also possible.

As some people have pointed out these properties can be used not just for 'boxes' but for many other HTML objects including form elements.

For those of you still seeing square corners, here's a snapshot from Firefox showing the rounded corners effect:

There are a number of tricky JavaScript solutions that allow border-radius and other CSS3 properties to be seen in Internet Explorer and other browsers - but the overheads don't really justify the results.

3. Using -webkit-border-radius in Safari (Webkit)

The latest versions of Safari now support -webkit-border-radius. Previously only the 'nightly builds' contained this functionality In Opera the syntax for the corners is the same as in Safari, but the behaviour of border-radius with two values matches that of Firefox, as seen in Example #7 below:

Example 5

-webkit-border-radius: 1em;

Example 6

-webkit-border-top-right-radius: 24px; -webkit-border-top-left-radius: 24px;

Example 7

-webkit-border-radius: 24px 0;

Example 8

-webkit-border-radius: 36px 12px;

Example 9

-webkit-border-top-right-radius: 50px 30px; -webkit-border-bottom-right-radius: 50px 30px;

For those of you still seeing square corners, below you can find asnapshot from WebKit showing the rounded corners effect. Note particularly the change in syntax and the effect of passing two values to -webkit-border-radius as compared to the -moz-border-radius example above.

WebKit also has limited support for other CSS3 border properties such as: multiple backgrounds; border background images; and various advanced selectors (::select for example) making it a great test platform for forward-looking developers. Stay tuned to the Surfin' Safari blog linked below for the latest exciting developments.

4. Other special effects

WebKit, Firefox and Opera now support a number of other CSS3 features, including the following simple effects and transforms. Thankfully, unlike rounded corners, for the shadows and transforms there does seem to be agreement on a common syntax.

-webkit-box-shadow

Shadow Example

-webkit-border-radius: 36px 12px; -moz-border-radius: 36px / 12px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);

Clearly there are still some anti-aliasing problems, but for corners and gentle curves it can look pretty cool.

Then there are various -webkit-tranform option that can be used to create all kinds of wierd and wonderful shapes:

-webkit-transform: rotate()

Rotate Example

-webkit-border-radius: 36px 12px; -moz-border-radius: 36px / 12px; -webkit-transform: rotate(-5deg);

-webkit-transform: skew()

Skew Example

-webkit-border-radius: 36px 12px; -moz-border-radius: 36px / 12px; -webkit-transform: skew(5deg,5deg);

For the browser-impaired here is a screenshot from Safari showing the effect of these CSS rules. The same effects are now possible in Firefox, Opera and related browsers. Just replace -webkit with -moz or -o, except for border-radius and box-shadow where Opera uses no prefix.

Also in Safari these and other transformations can be implemented as animations using just CSS effects triggered by hovering over an element - no JavaScript required.

5. New short-hand properties

The following syntax is now working in Firefox and Opera allowing you to specify not only matching elliptical corners, but also different elliptical corners in one shorthand property.

Here we've recreated two of the WebKit examples above using the new syntax. You can see that the individual corner settings work exactly the same now in Firefox as in WebKit, but for the short-hand property you need to include a slash:

Example 8

-moz-border-radius: 36px / 12px; border-radius: 36px / 12px;

Example 9

-moz-border-radius-topright: 50px 30px; -moz-border-radius-bottomright: 50px 30px;

And now to the scary part. Using the short-hand property, all valued before the slash apply to the horizontal radii and all values afterwards to the vertical. In this example we've created a hybrid of the previous two examples.

Example 10

-moz-border-radius: 36px 50px 50px 36px / 12px 30px 30px 12px border-radius: 36px 50px 50px 36px / 12px 30px 30px 12px

Here you can see what these boxes look like in Firefox 3.5:

Responsive Web Design Guidelines and Tutorials - Smashing Magazine

2012-01-06T18:25:00.000-08:00

Responsive Web Design Guidelines and Tutorials - Smashing Magazine

Top 10 Startups of 2011

2012-01-05T16:14:00.000-08:00

Top 10 Startups of 2011

By Alicia Eler / December 23, 2011 5:05 PM / 9 Comments

BestOf2011.png" src="http://rww.readwriteweb.netdna-cdn.com/images/lead-images/BestOf2011.png" class="mt-image-none" style="" height="150" width="150">What happened to startups in 2011? E-commerce and mobile payments continued to grow, and group buying startup Groupon went public. Facebook, the biggest social network around, expanded in a huge way, announcing Timeline, frictionless sharing and a settlement (finally) with the FTC. It also swallowed up many promising startups, including group messaging service Beluga, social network-enhancing service Friend.ly and software company WhoGlue.

The mixing of social gaming and mobile payments, social network alternatives to Facebook, consumer cloud storage and apps that actually make you feel productive (read: not like you're just wasting more time online) came out on top as just a few of the most important startups of this year.

This year's top 10 startups list is a combination of companies that launched in 2011, and others that gained considerable attention. We chose these startups based on how they've changed or disrupted their niches and how they've influenced trends this year and for the year to come. They are listed in no particular order. Take a look after the jump.

Fab.com: Social Shopping That Works

jpeg" src="http://www.readwriteweb.com/fab-150.jpeg" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" height="150" width="150">Fab.com wasn't always as glamorous as it is today. The site first launched in April 2010 as Fabulis.com as a "cross between Facebook and Yelp" specifically designed for gay male consumers. Yet by February 2011, the site had come to a serious halt with 130,000 members, only 30,000 of which were active. Co-founders Jason Goldberg and Bradford Shellhammer decided to trash it and start over, retaining only the social graph and a flash sales feature that had already been working quite well called "Gay Deal of the Day." In the wake of total mainstreamification of the gay market - Glee, Lady Gaga, gay marriage becoming legal in New York and Don't Ask Don't Tell finally being repealed - the need for gay niche sites was declining. Instead of closing down the site for good, Goldberg and Shellhammer decided to reinvent it as Fab.com, a flash sales site aimed at the design-conscious shopper (who may or may not be gay and male). The experiment worked.

By September 2011, Forbes reported that member numbers were up to 600,000 and sales were in the six-figure range. Shellhammer handpicks every product that is sold on the site. It doesn't rely on email blasts or fatigue-inducing daily deals. And unlike other flash sales sites, merchants who sell on Fab.com don't lose money on their products.

To make the e-commerce experience more social, Fab.com launched its Live Feed, which aggregates everything that the site's users are buying, liking, tweeting and sharing about on the Web. The new feature is opt-in, meaning that Fab users don't one day wake up and realize that everyone in their network knows their purchasing habits. As I said in my 2012 predictions post, this social networking-turned-flash sales site will continue to grow. Fab.com's only real competitor in the flash sales market is Gilt Groupe.

Dwolla: Mobile Payments That Act Like Cash

Apparently Des Moines, Iowa, is the mobile payments capital of the U.S. It is also the home of mobile payments platform Dwolla, which has been on the RWW radar this year. Here is how it works: Sign up for Dwolla, load up your account and then head over to a retailer that's using Dwolla for mobile payments. The company says it is working on partnerships with banks and financial institutions so that money can go right from user's bank account to the retailer.

Dwolla sees itself more like Visa than a PayPal type of mobile payments solution, except it uses cash instead of credit. Its main competitor is Square, which offers Square Card Case, except that relies on a user's smartphone and the retailer's iPad cash registers. Dwolla is much simpler.

Users benefit from Dwolla's location and social features, and that it's basically digital cash rather than credit-based money. In that way, Dwolla acts like cash in your wallet, except it's digital and your wallet is your smartphone. And at the end of the day, Dwolla wants to partner with retailers to make this concept work. Its "Grid," which launched back in June, works like Facebook Connect for payments - a user's personal information is stored on Dwolla, not the merchant's servers. If a third-party app wants to connect to Dwolla, it has to first ask permission just like Facebook Connect. That's one way Dwolla makes users feel more in control of their accounts, which are also based entirely on cash. Dwolla transactions are 25 cents regardless of the amount unless it is under than $10, in which case it's completely free. PayPal, on the other hand, always charges 30 cents per transaction plus 2.9% of the transaction.

Zaarly: Mobile Local Commerce Comes To Your Neighborhood

zaarly150.jpg" src="http://rww.readwriteweb.netdna-cdn.com/archives/zaarly150.jpg" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" height="150" width="150">Zaarly is one of the few startups on our list that did in fact launch this year. It launched in May 2011, positioning itself as a mix between Craigslist "For Sale" section and an online auction house. To use it, sign up for a Zaarly account, post what it is you want to buy and how much you're willing to pay, and then sit back and wait for folks to submit bids. The kicker here is that you select the time frame for the product you want, and the distance you're willing to travel. This brings a more instantaneous element into the entire mobile local commerce experience. Zaarly shares your request to its company Facebook and Twitter pages in addition to the web and mobile versions of the site. After enough bids come in and the buyer is satisfied, they pick one and either pay with cash or the Zaarly integrated payment system.

Whereas EBay is entirely bidding based, Zaarly acts more like the local commerce facilitator. Zaarly users don't need to limit themselves to stuff, per se. They can also post about errands they need done and tasks they want someone else to do for them, from "delivering a candle" to "finding an indie music expert to make me feel cool again." The company raised $1 million in its seed round from investors such as Ashton Kutcher, Ron Conway, Paul Buchheit and Chicago's Lightbank, which also backed Groupon. In late October, it raised $14.1 million from Kleiner Perkins and Sands Capital Ventures, just to name a few.

BankSimple Finally Launches, Rebrands Itself As Just Plain "Simple"

Web-native bank BankSimple said it would launch in 2010, but waited until nearly mid-way through 2011 to send its social Web application out into the world. The idea behind BankSimple is simple: Create a Web-based bank that let users deposit checks by photographing them with its mobile app. Make cash withdrawals from ATMs anywhere without the obnoxious fees. Receive recommendations and value-added services based on the private data that you provide.

BankSimpleCardspic.jpg" src="http://rww.readwriteweb.netdna-cdn.com/images/BankSimpleCardspic.jpg" class="mt-image-right" style="float: right; margin: 0 0 20px 20px;" height="276" width="242"> While the "location optional" feel of BankSimple seemed great, in the wake of Occupy Wall Street and people transitioning back to local credit unions, the idea of putting all of your money into the cloud felt a bit less appealing. The service finally launched in late September, but raised concerns about the security and potential sale of customer data. In November, BankSimple rebranded to just "Simple" and officially opened for business. It is not actually a bank, but it does work with FDIC-insured banks that handle a user's money.

Instagram: The Web's Second-Biggest Mobile Social Network

Instagram already has nearly 15 million users, and the app hasn't even come to Android yet. This year saw huge growth for Instagram, edging it closer to Foursquare in terms of number of users. Instagram even wandered into the Art World for a hot minute this year with a London art show called "My World Shared," which is focused on recording images of the world through the manufactured quirkiness that is the über-popular app. Instagram's growth occurred around the launch of the iPhone4S. Apple named it the iPhone App of the year.

Next page: The next five top startups of 2011

Path: If You're Serious About Not Being On Facebook

In the second to last month of 2010, former Facebook Platform Manager Dave Morin, Napster Co-Founder Shawn Fanning and quite a few star investors launched Path.com, the social network that isn't about size, popularity or social status. Friend lists are small and personal. Path notifies you immediately when someone looks at a photo of something you post. It is essentially a "path" of your life as you go, which is essentially what Facebook Timeline wants to be. Except on Path, things stay small. The company calls itself an app that helps you "share life with the ones you love" by streaming your life, taking you on one big ego trip.

As Jon Mitchell wrote in his smartly titled post "Path, Timeline and Worship of the Self," the big difference between Path and Facebook Timeline is that Path is closed, though you can choose to syndicate your content to Facebook or Twitter. Some have said that Path is what Facebook should be, a space for real friends not thousands of Facebook "friends" that you've met twice. In the wake of social Web overload, could Path be the way to bring some balance to your socially networked life?

Pinterest: Start Pinning Pretty Pictures And Forget About Socializing

2011 was a big year for visual social bookmarking site Pinterest, which is growing at rapid speed. It launched in March 2010. During the week ending December 17, the site received 11 million visits, which is 40 times what it received six months prior. We first wrote about it in September 2011 just as it was gaining speed on the social Web. The concept is quite simple: Users sign up for the site and then add the Pinterest bookmarklet to the browser. Find an image on the web and then "pin it" to the site based on category and a brief description. Users with the iPhone app can snap a photo and do the same thing. Pinterest's user interface is wholly visual. Sites like Delicious and Q&A social network Quora are starting to look like Pinterest, too. Ben Silbermann, a West Des Moines native and the CEO of Pinterest, noted that the first people to understand and use the site were women in the Midwest. Pinterest is growing larger everyday. Don't be surprised if you see a steady stream of email invites continuing well into the new year.

SCVNGR: The Gamification Of Location-Based Commerce

We've been keeping a close eye on SCVNGR since 2010. A Google Ventures-backed mobile location startup launched in 2010, initially vowed to beat Facebook Places. The now 22-year-old founder Seth Priebatsch launched SCVNGR as the game layer on location. Initially, it was a consumer product, but has since changed the mobile payments game all together with its game dynamics. Earlier this year it launched LevelUp, a platform that brought together gameification and daily deals, allowing users to receive better deals so long as they keep using the system and unlock levels with merchants as they go. The LevelUp app gives its users a personalized QR code that ties to debit/credit cards that are already in the system, but not on the device itself. Bringing together mobile payments to location-based games is unique from both Foursquare and the now-defunct Gowalla. We'll keep a close eye on SCVNGR in the coming year.

Evernote: How To Organize Your Life

Evernote CEO Phil Libin said that only 13% of its users had the Evernote Web version, which indicates one thing and one thing only: It's all about the app. Initially only a product used by professionals, Evernote has expanded to many new users, including students. Evernote added ways to share with individuals over Facebook and email, the former of which felt pretty slow in coming. Evernote made its Windows app more social, updated its Chrome extension for better web clipping, added audio for Macs and greatly improved its Android app. When it scored $50 million in new funding from Sequoia Capital, Libin boldly declared that the company would be around for another 100 years. Evernote updated its iOS app with rich text editing within notes, mobile access to shared notebooks, search features and a new way to look the app using a passcode.

Everything seemed to be going well for Evernote this year until the introduction of its Evernote Hello app, which is supposed to help users remember people they meet in real life by taking their picture. Unfortunately, it's only available for iOS and it assumes that the user is willing to hand over his or her phone to a stranger. ReadWriteWeb's Joe Brockmeier notes that this could be awesome, if "Evernote is using Hello as a prelude to acing contact management features into Evernote." If it does, this could be a great way to manage contacts. Even better, it could collaborate with LinkedIn's CardMuncher iPhone app to sync everything up. Next up, Evernote wants to conquer the world of "Read Later" apps; it just added its "Clearly" clean-reading extension to Firefox. We named Evernote one of the top 10 consumer Web products of 2011. It is certainly one to watch in 2012.

Dropbox: Consumer Cloud File Sharing At Its Best

Last but not least is Dropbox. It is a concept so simple that you'd think someone else would have thought of it sooner. Basically, Dropbox is a folder that syncs to the Internet, and allows for super easy file sharing between users. Gone are the days of YouSendIt megafiles. Just go for Dropbox. BusinessInsider named it the world's 5th most valuable startup, but is it? A complaint against Dropbox was filed with the FTC, stating that Dropbox misled users about its security and privacy, which is sure to scare any startup. But despite this little roadblock, it has nailed down its place as a key player in the consumer cloud right alongside iCloud.

Do you agree with our picks? Did we miss anything? Let us know in the comments below.

Draw a Stickman - StumbleUpon

2012-01-04T11:11:00.000-08:00

Draw a Stickman - StumbleUpon

Layer Styles

2012-01-03T11:17:00.000-08:00

Layer Styles