Â

For the past two years, the elegant iPhone has housed some of the most poorly designed applications you could imagine. The hype surrounding iPhone has prompted many designers across the globe to try their skills with the new mobile medium. The result are literally thousands of various iPhone-applications that are often hardly usable and counter-intuitive. However, some designers invest a lot of time and efforts into creating usable and original user interfaces (yes, there are usable and creative UIs).

This article explores the ways in which designers use graphical elements and screen interactions to create iPhone-applications that are easy on the eyes and mind. The aim of this article is to display common trends and design approaches in iPhone app design – please notice that they are not necessarily optimal ones from the design or usability point of view.

1. Mirroring Native iPhone UI Elements

“Tell them what you’re gonna tell them, tell them, and then tell them what you told them.” Creating a whole new OS within your app can be fun, but when you’re dealing with the mobile medium, people just want to get stuff done. Getting stuff done means that the designer has to get into the flow of the OS and create an app that requires zero explanation for the end user to operate. Mirroring the layout and UI elements that the user is already familiar with saves time and energy. So it seems quite convenient to use this approach when designing iPhone-applications.

Facebook (iTunes Link)
In the new Facebook 3.0, you’ll find a grid layout that users can swipe left and right to access more categories. Because it mirrors Apple’s native UI, users do not have to “learn” how to use it all over again. A similar approach exists in Web design: users expect to see a logo in the top left, navigation along the top, etc. Facebook has taken this concept mobile, using large buttons that are easily distinguishable and tap-able.

Where (iTunes link)
Where has a similar concept, allowing users to swipe left and right to access more data.

Tweetdeck [iTunes link]
Tweetdeck is a good example of user interface design on many levels. Notice how the design highlights recent updates. The application could display the updates in a new window, with a categorized or tabbed list. But it doesn’t. Instead, a more familiar dialogue menu is displayed — it serves as a springboard to jump to a specific category or to clear the messages altogether.

2. Simplifying The Interface

Simplifying user interfaces may sound like a mechanical task, but what lies beneath the surface of user interface design? The answer is simple: users. And what do users want? What makes them all warm and fuzzy? How do you deliver what they want so that they don’t even notice how they are consuming information?

Facebook’s first release did a great job of fitting a lot of core functionality into a small space. The problem, of course, is in laying out all that data and creating an intuitive interface. Compare 3.0 with the first release, and you’ll see how they took a “springboard” approach to streamlining the interface, keeping it intuitive and maintaining functionality.

Flickr [iTunes link]
Flickr is another example of how to achieve a good balance between functionality, visual design and the small display area on mobile devices. Think about it: what is at the core of Flickr? Photos. Its users probably do not want to look at big clunky navigational elements; instead, they are looking for pictures. Flickr has managed to fit all of its core functionality without heading down the highway to navigational hell. In fact, most elements in the navigation are handled by interacting with the photos themselves. Simple and smart.

3. Hardware-ish Look

Many utilities are breaking out of the conventional iPhone UI to take advantage of the device’s unique ability to respond to finger gestures. Many of these have hardware-ish interfaces that users are familiar with but come with perpetually shiny exteriors and clicks and pops that maintain their newness from the first to one-thousandth click. Next up, though: an app that gets dirtier the more you play with it.

Convertbot (iTunes link)
Convertbot reminds us of the proportion wheel we all used in grade school, except it’s more distinctive, original and creative.

Little Snapper (iTunes Link)
Little Snapper mimics the wheel that you turn on a typical digital SLR.

iHandy Level (iTunes Link)
iHandy Level simulates the look and functionality of a real, well-used leveler.

Where To? [iTunes Link]
This application looks like it belongs in a Mercedes. Plush leather, matte-finish tactile buttons: quality craftsmanship. We can just imagine how each button press feels solid, requiring the perfect amount of pressure.

4. Rich, Padded And Pretty List Views

You know that you are a geek designer when you get excited about the latest trends in list view design. And what do people do when they encounter a list view? Of course, they skim. And how do we make it easier for people to decide what interests them? That’s right: more visual cues!

Essentially, users are asking for a snapshot of what’s next, and then decide if they want more information. One way to do this is with big pretty buttons. Large and in charge, elegantly designed big buttons give the user a lot of information through their color, icons and typography.

Delivery Status Touch (iTunes Link)
Check out how Delivery Status uses appropriate colors on its big buttons to identify each brand. And it uses typography well to establish a hierarchy of information.

Be Happy Now (iTunes Link)
Be Happy Now’s big buttons convey the “be happy” mantra through a mellow color scheme and light, calm and clear typeface.

Next Read [iTunes link]
The Next Read application allows friends to share books. Here all books about a particular topic are presented, including the title, cover image, review rating and number of people who have recommended it. Notice the padding and a lot of white space for each navigation option; this makes the areas easily clickable and easier to navigate.

Nike [iTunes link]
Nike’s workout application for women includes a nice visual treatment and illustrations that match the brand. It breaks out of the traditional UI just enough to communicate the brand without making it difficult for users to understand the interface and how to use it.

Borange [iTunes link]
Borange is a “social availability” application that helps you coordinate meetings with friends. The list view presents a lot of information: friends you want to hang out with, the meeting location and a nice visualization of friends who are available.

5. Layered Interface

Several applications take advantage of the iPhone’s capabilities by layering the interface and making some elements stationary and others vertically or horizontally scrollable. This approach has several benefits:

1. It reduces the number of traditional navigation elements that are necessary (i.e. fewer buttons help to avoid a cluttered interface).
2. It gives users a faster route to the information they want.
3. More screen space is available for information.

Tweetie (iTunes Link)
Tweetie uses layers to organize information specific to each of your Twitter friends. Just look at all of the information packed into this one screen!

Barnes & Noble [iTunes link]
Barnes & Noble has a layered interface that allows you to quickly slide through new releases at the top or dive into more categories below.

USA Today [iTunes link]
USA Today takes a slightly different approach to layering the interface in its “Pictures” section: it uses sliding panels to display blocks of information. While the interface may look cluttered at the first glance, one can easily get around it. The interesting part is that within each panel you can slide thumbnails left and right to view more images.

myPantone [iTunes link]
Would we expect any less from Pantone? The color picker shown above is a layered interface that lets you pick from a range of colors, sort and scroll as well as open and close detail screens, all without too driving you crazy.

6. Icons For The List View

Icons aren’t just for springboard-loving folks. On small screens, icons can give a huge boost to an application’s usability and navigation. Let’s now take a look at some examples of applications that use icons to their advantage.

iStudiez (iTunes Link)
This application uses various educational metaphors as icons to clearly communicate the purpose of the application. Excellent visual cues tell the student what’s happening today at a glance.

Top Floor (iTunes Link)
Top Floor uses simple and easily recognizable icons to quickly guide users to their category of choice.

New York Times
Isn’t it great when applications just let you do whatever you want to do? For an app with as much information as the New York Times’, users are bound to have their favorite sections. Well, guess what? The New York Times cares: it lets you customize the tab bar’s navigation to include only your favorite sections of the paper. Drag an icon down the tab bar and you are set. The downside of the design is, of course, its lack of visual appeal.

Filemaker [iTunes link]
Here is another example of beautiful icons that aren’t obscure or confusing. Designers should never use icons just for the sake of having icons. As designers, we want icons that illustrate what users are actually going to get when they choose a particular path. Nicely done, Filemaker.

7. Illustrations in use

Applications that rely on graphics not found in the standard user interfaces are increasing in popularity, as developers try to set their apps apart from the crowd. Sometimes it works, but often it doesn’t. The more unconventional a design is, the more likely it is to have usability problems. Please always conduct usability testing before releasing a product with a “creative” user interface.

Magnetic Personalities (iTunes link)
An excellent example of how buttons don’t have to look like standard buttons.

SugarSync [iTunes link]
This interface could have easily followed the traditional list-view route. Instead, the designers played with the concept of “connectivity” to create a visual treatment that communicates the purpose of the app. It is unusual and requires some time to get used to.

Mom Maps [iTunes link]
Another example of how illustrations do a great job of pulling together the whole concept of an application.

8. Using Gestures

Classic linear navigation may look boring: a button that links to other buttons, which leads you to a list of something, which leads you to such-and-such an interaction. Not really spectacular. The possibilities for creative interaction in utility apps are huge and largely untapped (no pun intended).

Mover (iTunes link)
Mover exemplifies how to use gestures for sharing contacts, photos and bookmarks. Open two devices, and flick the shared files from one handset to the other.

ABC Animals [iTunes link]
This application teaches while it entertains. Being able to trace a letter with your finger is another example of how the iPhone responds to touch and movement.

All Recipes [iTunes link]
This applications allows you to mix in various elements to create your next meal using gestures.

Something is missing?

We missed some common design approach or trend? Please let us know in the comments to this post!

About the Author

Jen Gordon is the owner of Atlanta-based iPhone app design studio Clever Twist, which will release its latest app Farm Friends in just a few days. She specializes in usable interfaces, beautiful design and straight talk. She loves her family and the iPhone and periodically dreams that she’s close friends with Dolly Parton. Follow her on Twitter or drop her a line to say “Hi!”.

(al)

© Jen Gordon for Smashing Magazine, 2009. |
Permalink |
39 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: iphone, showcases, trends

by Dmitry Fadeyev

Your website represents your brand. New visitors will form a first impression of your service or product within seconds of arriving at your website, and the visuals, layout and aesthetic will play a large role in shaping that impression. Sure, your website may be very usable and have great content, but it’s the aesthetic that will evoke feeling, and it’s the aesthetic that will be used to judge the quality of your website in those first few seconds before the visitor has had time to browse around.

Use this to your advantage and fashion a unique style that will set your website apart from the rest — a style that will impress and delight your users.

Throughout history, great artists always found new ways to express themselves and create new techniques to set their work apart from the rest. Think about the styles of Leonardo da Vinci, Vincent van Gogh, Pablo Picasso, Salvador Dali and Jackson Pollock. Think about the different movements of art, from Impressionism and Expressionism to Surrealism and Minimalism. These styles couldn’t be more different from each other — and that’s the point. The artists’ names live on because their art is unique.

Do you want to simply follow the latest design trends and create a website that works well but looks just like many other websites out there? Following trends won’t set you apart from the rest; it won’t help your work make a strong impression. To make something memorable, you’ll need an element of creativity and novelty.

Unlike certain other forms of art, such as painting and sculpture, Web design is very limited in its expression because more often than not your website has to serve a very specific function and achieve certain goals. Successful designs are influenced and driven by those goals. There is, however, still room to develop your own unique style and aesthetic. Doing so will help you stand out from the competition and allow you to develop a strong identity.

Web design isn’t art

Having said all that, Web design isn’t art. Art is self-expression that is meant to be enjoyed and appreciated on its own. Design is communication; and, more specifically, Web design is an interface for content. Sure, there are websites out there that are purely art, but the large majority of them perform a certain function or deliver information. The website acts as the interface between the user and that function or information. This means it not only has to look nice, it actually has to do its job well, too. Indeed, in most cases, function should come before form.

I believe I can say that websites today are much better than they were 10 years ago. What do I mean by “better”? I mean to say that Web designers have learned from their mistakes over the years and have picked all the low-hanging fruit of usability. Websites today are more usable and more user-friendly because we have greater experience in and increased knowledge of how to build websites that work and interfaces that are easy to figure out.

Yet, I cannot say that art today is “better” than it was ten or a hundred or a thousand years ago. Impressionism isn’t “better” than Realism. Expressionism isn’t “better” than Minimalism. They’re just different.

Web design as architecture

While Web design incorporates an aspect of art, it also incorporates function. In this way, I think it actually has a lot of similarities to architecture, for which you need a healthy dose of both style and function.

The world’s earliest treatise on architecture, “De architectura,” written by Vitruvius in around 25 BC, outlined three principles that all good construction should fulfill: firmitatis, utilittis and venustatis: durability, utility and beauty. I believe that today these three principles apply to Web design as well.

Your work should be durable in that it should scale well — or handle a lot of traffic — which is ensured by having code that is clean and optimized, as well as a means of making future modifications and updates with ease. It should fulfill the goals and function of the website, whether they be to advertise a product, sell goods, show off a portfolio or perhaps display articles from a blog. Finally, it should look good; it should have its own look and feel. We need to make the Web browsing experience enjoyable for our visitors by crafting a pleasing aesthetic.

Over centuries, architects and engineers have figured out better ways to construct buildings, to make them stronger and larger. These advances in function are similar to advances we’ve seen in Web design. We’ve figured out better ways to make registration forms, navigation menus that are easier to use, layouts that are simpler to figure out; generally speaking, we have greatly improved the usability of our websites. This is because we’ve had years to look at how people use the Web and to fix the usability problems that pop up most of the time. We see what works best and implement those things in new websites that we build.

Venustatis

But let’s not forget Vitruvius’ third principle of beauty. In architecture we see different waves of style. Different centuries bring different looks and feels to buildings. Houses are designed to be lived in, but life would be really dull if they all looked the same and focused only on function.

The design of the Opera House in Sydney is so distinct that it’s more than just a building — it’s an iconic city landmark.

In Web design we have very similar waves. Most notable is the Web 2.0 style, in which we had things like glossy buttons, mirrored floors, starbursts and so on; it even inspired various Web 2.0-style logo and website generators, because the style was so formulaic in nature.

New trends like this appear, and some get picked up and quickly adapted across the Web. Does your current website design follow a trend? Perhaps it is setting one? If you copy other trends, then your website will be just that, a copy, but if you can go the extra mile and create a unique look that differentiates your website, then your website will be memorable. Of course, being different isn’t the only thing you’ll need. The unique style and layout must also be attractive and must accomplish its goals.

Fresh inspiration

So how do you go about creating something different? Where do you find inspiration to create something unique? When Cordell Ratzlaff and his team were designing the new interface for the Mac OS X operating system, they found their ideas in the most unusual places.

Cordell saw a great opportunity to change to an appearance that was fresh and fun, in contrast to the existing state of the art. He decided to change from gloomy, square, and bevelled, to light, fun, and colorful, with a very fluid expression. He asked, What’s the opposite of a computer interface? He came up with things like candy, liquor, and liquids, to inspire a new visual design of the interface. The designers collected magazine ads for liquor, with delicious looking liquids in glasses with ice cubes, sparkling with reflections and highlights.

Bill Moggridge, Designing Interactions

When working on your new website or Web application interface, don’t simply look at what everybody else is doing. If you look inward to your own industry and similar websites, you will no doubt find a lot of likeness. This is because many of these websites borrow from each other, and when new websites launch, they borrow from them in turn. What we have is a monotonous experience in which you are only looking inward, blind to the world of possibilities outside.

Take a lesson from Cordell Ratzlaff and seek inspiration from new sources. Look at nature, look at real world objects, look at the things that symbolize and evoke the kinds of emotions and feelings you really want to elicit with your design and aesthetic. Cordell looked at things like ice cubes in liquor, which inspired him to create the liquid Aqua interface for Mac OS X. The glossy gel buttons and other user interface elements in Aqua have since inspired many Web designers in the rise of Web 2.0 and all of the glossy and shiny visuals it brought.

Let’s take a look at a few trendsetters, websites that break the mold and feature successful designs that get picked up and adapted by others.

Leaders and Followers

Twitter, the popular micro-blogging platform, has created a unique flat and colorful look that features illustrations of clouds and birds (and whales). The bright, cartoony feel is accompanied by an elegant and simple layout.

Yammer, a recently launched “Twitter for businesses” application, takes on a similar appearance and an almost identical layout. The cartoony feel is gone, but the shape and feel remain very similar, due to the iconic Twitter layout.

Facebook, the social networking heavyweight, has won its audience partly because of the uncluttered, minimalist design that puts the content right in the front seat. The clean layout is accompanied by a simple blue and gray color palette.

Social Median, a social news website, features the familiar minimalist look and feel of Facebook, together with a similar color palette and layout.

Highrise, a CRM application, features a very powerful landing page. On one page, visitors can see a description of the app, an overview of several features, a video tour as well as a bunch of links inviting them to explore. The typography and colors work to focus the visitor’s attention on the most important things.

Presently, another internal communication tool for businesses, features a landing page that is very close in its composition to that of Highrise, or indeed that of any other 37signals app. This powerful layout is now used by a lot of Web start-ups.

Apple’s website incorporates the same aesthetic as that of its product interfaces, and indeed its entire product line. Over the last few years, it has transitioned from the watery Aqua style to smooth aluminum gradients, light-gray shades and rounded corners.

Newspond, a news aggregator, features a different layout than that of Apple’s own website, but the aesthetic is strikingly similar. There are many other websites today that use very similar styles that are inspired by Apple’s industrial designs and interfaces.

Basecamp, one of the most popular Web project management applications, from 37signals, has pioneered this simple and effective layout that you can find in a lot of other Web apps today. Everything is clear and structured, with a minimal use of images to speed up downloading time.

Blinksale, an invoicing Web application, is one among many to borrow the popular design and structure of the 37signals website.

SimpleBits, Dan Cederholm’s design company, uses his signature minimalist layout and typography. Dan takes out everything that doesn’t absolutely need to be there, tweaks white space to pixel perfection and focuses on really polishing the little details. The result is beautiful minimalism.

The Twiek blog design looks like it’s heavily inspired by SimpleBits.

Conclusion

If you want to craft an iconic website that stands out from the competition, you need to come up with a unique and novel aesthetic. You need to design a look and feel that’s different — something that doesn’t look like all of the other websites in your industry. Getting inspired by great work and beautiful things is a good thing, but you have to make sure you don’t fall into the trap of mimicking other designs too closely, or else your website could end up looking like a cheap copy.

Seek inspiration from outside your industry. Focus on the emotions you want to evoke and the character you want to give your website, rather than on what everybody else is doing. Design a layout unique to your website or application by focusing on its goals and objectives rather than on what other people have done.

While Web design isn’t art, and while there are limits to how much you can express yourself and how many visuals you can use, there is still plenty of room for a unique style. Just as Vincent van Gogh’s post-Impressionism style and Pablo Picasso’s unique art set them apart from the rest, breaking the mold will give your website a powerful and memorable identity that others will want to mimic.

Don’t follow trends: set them.

About the author

Dmitry Fadeyev is the founder of the Usability Post blog, where you can read his thoughts on good design and usability. (al)

ReadWriteWeb’s Alex Iskold recently described modern Biz Dev 2.0 techniques that do not involve knocking on doors and talking to people. The Internet is great at automating routine transactions and more software is being sold as a service on a simple “click here” to subscribe basis. But occasionally some contact sport is still required, and you have to resort to what we can now call Biz Dev 1.0 — what we used to call selling. You will need these skills to raise money and to sell your business, even if you never have to sell to anybody else. Fred Wilson reminded us of the most basic requirement, to ask for the order. Here are 10 other tips:

1. Close on every call. Whether your call is by email, phone or face-to-face, have one single objective that you can close. It might be “please sign here,” it might be “will you have lunch with me next Tuesday?”
2. Expect mutual effort. A sure sign of spinning your wheels is when you make all the effort and the buyer/investor does nothing. Ask them to do something to indicate some level of interest. If you don’t see this, move onto the next prospect.
3. Wait until you hear the screams. If you have a fire engine, you are not needed until the house is on fire. The best sales people wait until they see a real need before applying a lot of effort. One way to judge this, of course, is via #2.
4. Two ears, one mouth. If you only learn one lesson, this is it. This is particularly hard for technically oriented entrepreneurs with a deep passion for their product. People don’t buy products, they buy solutions to problems. Find the problem and show a solution based on your product. Ask lots of open-ended questions. People are much, much better at talking themselves into buying than you will ever be at talking them into buying.
5. Talk about the weather. This a lesson that I learned the hard way. Just as the buyer was about to sign, I said something that prompted a question that was critical and for which I did not have a good answer. The next day something happened, totally outside my control, that put the deal on indefinite hold. When somebody is about to sign, be quiet and if silence is uncomfortable find something banal to talk about.
6. Imagine the press conference. This is a good way to focus on the one thing that really matters to your buyer. What would the buyer tell the world about your deal? Assuming the usual attention deficit, this will be one simple point. Focus relentlessly on that one thing.
7. Recognize the emotional tipping point. Selling is a contact sport. You cannot do it by email or phone alone. Even in a long, complex sales cycle with multiple people in a decision team, there is one person who really matters and one moment when that person says to themselves, “I am going to do this.” Everything before that moment is preparation and everything after is clearing due diligence.
8. Stomach knots, table banging, and other good signs. These agita moments show both parties that the negotiating is nearing the end. It reassures them that they are not leaving money on the table. Of course, good negotiators can fake it, and watching that can be pretty amusing. (Is that what we are witnessing in the on-again off-again Microsoft/Yahoo! negotiations?)
9. Don’t take it personally. Look at every rejection as a learning experience. Really. Even if you think the guy was a jerk/idiot. If he is a jerk/idiot, how do you recognize jerks/idiots earlier so that you waste less time? More likely you did not do #2, #3, or #4 properly. In other words, it was not a good fit and he was not a jerk/idiot.
10. Measure face-to-face time. Biz Dev 1.0 is a contact sport. Email and phone is great for details and follow-up, but selling happens face-to-face. Always has, always will. So measure face time. But also remember #1, close on every call. Just socializing can be good to build some warmth in the relationship but my rule is that respect is essential, liking is optional.
11. Ask for the order. Fred Wilson articulated this well (and the comments are worth reading).

Even if you hire sales people to sell your product/services and M&A advisers to sell your company, some of these Biz Dev tips are likely to come in handy at some stage. Do you have any other tips? Post them in the comments.

One of the most difficult parts of starting a startup for any entrepreneur is finding that small bit of seed capital to get things going. As evidenced by small seed funds like Y Combinator, a little can go a long way for startup entrepreneurs, but raising that chunk of change to get started can be tricky. Luckily, there are a number of different roads you can take to get from concept to Series A. Below is a list of 13 seed funding options for startup entrepreneurs.

This list is a mix of old, borrowed, new, and blue:

1. Bootstrap from revenues. You will exit for an EBITDA multiple. Forget about crazy high multiples unless you have that magic formula that really can create high growth + low costs on almost zero capital — but if you really have that you won’t need/want to exit. Don’t worry about what anybody thinks other than users and customers. No, this does not have to mean enterprise products; consumer ad-supported works fine as well — just ask the founder of Plenty Of Fish.
2. Self-fund on credit cards and a second mortgage. You are brave, maybe brilliant, and maybe stupid. Just don’t expect any VC to give you more than words to recognize your courage. And also remember: it will take more capital than you think. Self-funding is not bootstrapping, it is just using your money and not somebody else’s money.
3. Do consulting on the side to self-fund. This is less risky than using credit cards. One partner works for a Big Old Dinosaur on contract for $20k per month and splits it 50/50 with the other partner, who builds the company which is shared 50/50 between the two. It gets a little more complex with more than two people.
4. Rase funds from friends and family. This can augment any of the above options. Richard Branson (a man who knows a thing or two about starting companies) can help with formalizing the relationship to avoid emotional damage.
5. Already a successful entrepreneur? Self-fund from cash via your last exit. VCs will be beating down your door to co-invest. Your choice…
6. Go from concept directly to $3m Series A. Wait, you did say your name was Marc Andreessen, right? No? Oh, sorry.
7. Use angels as a bridge to Series A. This is the perceived traditional route. If the angels know the VCs that is fine, but if not, then the VCs may cram down the angels, and that’s tough on you and those early investors that you’ve built a great relationship with. This works best if VCs tell you early, “We like the space/concept/you, develop it a bit and we’ll be interested. MyFavoriteAngel can help you get there.”
8. Use angels to augment bootstrapping. You have a to show a really clear path to profitability that is not dependent on VC funding.
9. Use angels as a bridge to a flip. Angels who know the target acquirers can make this a sweet deal for all.
10. Spray and pray models. A fund or incubator that puts tiny sums into lots and lots of ventures in hope of finding one star in the bag (see this post). Sounds a tad random to me.
11. Seek out founder-only evergreen seed funds. These are slightly more formalized versions of angel networks that aren’t managing other people’s money (i.e. LP=GP). Exits get re-invested into the fund, so there is no fixed time horizon for exit. There should be more of these.
12. Get a convertible loan from a VC to develop your concept to a level where Series A is appropriate. Charles River Ventures led the way with their CRV Quick Start program. More of these would be great.
13. Check out one of the paid links when you search for “seed funding” on Google. Not.

The good news: I planned my usual 11-point list and had to go to 13 (well 12, if you leave out that last one — which you shouldn’t). The bad news: none of these options are easy. But then, you already knew that, right?

Rock band Radiohead has already pushed the envelope in the past year by first releasing their new album under a pay-what-you-want price scheme in October, and then calling on fans to create a music video for any of the album’s songs in March. Now the band is at it again, teaming with Apple, makers of iTunes and GarageBand, to launch a public remix contest.

The contest offers up the single “Nude” from the album for remix. The band has for sale on iTunes “stems” for the bass, voice, guitar, strings/fx and drums for the song and anyone who purchases all five gets access to a GarageBand file that can be opened in GarageBand or Logic.

Until May 1st, the public can vote for their favorite remix, and remix authors can use a MySpace or Facebook widget to allow fans on social networks to vote for them. The prize, though, is just that Radiohead promises to “listen to the best.”

So interesting idea, but like the rest of Radiohead’s innovative marketing techniques, this one also feels a bit gimmicky. Requiring entrants to purchase the source files, and then offering as a prize only that the band will listen to the winning entries is somewhat lame in our book. Still, the site has already collected 142 remixes, so some great new music could come out of this for Radiohead fans.

Further, Radiohead has perhaps inspired many other mainstream musical acts to take the plunge and embrace alternative methods of distribution. Nine Inch Nails released an album via BitTorrent, REM open sourced their music videos and streamed their new album on iLike, and Pennywise put their album on MySpace. We may be able to credit Radiohead with making distribution experimentation cool, which can only mean a win for consumers in the long run.

Image credit: Steve Rhodes

When researching FuseCal this morning, one of the things that made it so appealing to try was the fact that you could just enter in a URL and see the service in action right away. No sign-up forms, no logins. This got us thinking about UI design as it applies to today’s web services. Lately, it seems that less and less services are using sign-up forms…at least, they aren’t requiring you to sign up right away in order to try them out. Instead, the trend seems to be to let you jump right in and get to work. This is definitely a good move, in terms of usability of the site, and it’s not the only UI trend we’ve noticed lately.

Trend #1: Try It Now!

An excerpt from an upcoming book by Luke Wroblewski, "Web Form Design: Filling in the Blanks," posted on A List Apart helps to point out the issue with sign-up forms on the web. When you're recommended a new web service to check out, Luke writes "you arrive eager to dive in and start engaging and what’s the first thing that greets you? A form. We can do better."

Instead of forcing users through a dreadful sign-up process when really they just wanted to take a look, he promotes the idea of "gradual engagement." After you play around with a web service and get an idea about what it does, you can then choose to take the path to complete your profile in order to create an account, save your work, share the results of your creation, etc.

Luke uses a few examples to make his point: one, Geni, an online family tree creation tool lets users make a family tree as soon as they visit the web site. Of course, as you fill out your name, you also enter in your email, so while you're busy building your tree, you're also being sent an email from the service, reminding you of your account details if you ever want to return to work on your tree. However, this vague "did I just create an account?" design may have worked for Geni, who generated 5 million profiles in 5 months, we would argue that it should be more obvious whether you are creating an account or not.

Geni’s “Sign Up” Process

Another example of gradual engagement came from TripIt, a service which lets you plan your trips. The interesting thing about TripIt is that the service also ditches the sign-up form for a more interesting option: you just email plans@tripit.com when your travel plans, be them airline confirmation email, hotel confirmation emails, whatever. TripIt extracts your name and email from the form instead of forcing you to enter these details yourself.

Personally, I recall Twiddla (our coverage) an online whiteboarding service, as implementing the "try-before-you-buy" option really well. Upon visiting the Twiddla homepage, a big button "Try it now in the sandbox," lets you test out the service along with other users in a public sandbox. This way, you can not only try it out for yourself, but you also might see someone else testing a feature you would have otherwise missed. You could also just click "Start a New Meeting" from the homepage and instantly use the Twiddla app with the others who you invite via email, no signing up required.

Twiddla’s Buttons

Trend #2: We Really Care

Another trend spotted in the wild is UI design that shows customers that the company cares about them. Take Samatha Warren’s experience with Wufoo, an app that helps you design and build online forms. After finding herself in need of tech support, she noticed an odd form field on the Support Request page: "Emotional State."

The drop-down included choices like excited, confused, worried, upset, panicked, and angry. Samantha chose the feeling that best described her mood ("worried", by the way), and then made a startling discovery:

"As I made my selection and moved the curser to hit the submit button a feeling washed over me that was unlike anything I had ever felt with a webservice online. I felt like they cared. I felt confident that my problem would be solved. I felt like I was contacting PEOPLE who have beating hearts, and families, who had felt worried about their missing contact e-mails too. How very humane of them!"

WuFoo’s Support Form

Some say this is cheesy, others find it annoying, but WuFoo isn’t the only service to utilize this idea.

Xobni (our coverage), the "social network in your inbox," also asks for user feedback by asking you how you feel. They built the "Are You Happy?" box. From a Xobni employee’s blog, Gabor Cselle describes why:

Instead of a popup, we add a little box on the bottom of the sidebar every couple of weeks and ask: "Are you happy?" There are two buttons, Yes and No, and an optional comment field. This is the most lightweight method of collecting user feedback. Note that:

1. We’re not popping up an annoying window.
2. We ask a simple question.
3. There are only two options – "yes" and "no" – and no Send button.

Xobni’s Emotional Feedback Pop-Up

While an argument can be made that opting out of the happiness check should be more readily available, apparently most of their users don't seem to mind. The feedback is 90% "Yes."

A more obvious place to find "emotional feedback" form fields is on people-powered customer service site, GetSatisfaction.com, (which, by the way, also forgoes a long sign up process by allowing you to fill in a basic form – name, email, CAPTCHA, with further profile information optional.)

Company feedback, ideas, and questions can tagged with a smiley/frowny face depicting how you feel. After you select the face, a box pops up to allow you to pick out a related word like "happy," "anxious," "indifferent," or "unsure."

GetSatisfaction’s Emotional Feedback

While emotional feedback doesn’t work for everyone – some find it patronizing, especially when they’re reporting a critical issue – an opt-in emotional feedback box could at least gather information about requests/complaints and help a company analyze and prioritize their incoming feedback.

Conclusion

Gradual engagement and emotional feedback are only two of many UI trends seen lately, but two that stand out as they seem to be ramping up in terms of usage by web companies. Hopefully, more companies will take note that there are a number ways to generate accounts for their service besides the traditional, boring sign-up form, or at least start supporting OpenID as an alternative.

As for emotional feedback? It’s a more risky choice since some users detest it, but done right, it could bring a new level of information about to product feedback while making users feel valued by the company.

Do you have any examples of either of these trends that you want to share? And…how does that make you feel? 

Leave it to Radiohead, the pioneering alt-rock band that released its latest album last fall under a pay-what-you-want price scheme to a lot of fan fare (and some criticism of gimmickry), to push the envelope further. The band is now asking fans to create their first music video for the album in a contest utilizing online YouTube of animation (and Crunchies finalist) Aniboom.

Radiohead is hardly the first act to call on fans to create a music video. In the past couple of years the Decemberists, Modest Mouse, Junior Boys, Willie Nelson, Bjork, Jonathon Coulton, and The Hold Steady, among others, have all held video contests. The Beastie Boys went a step further and relied solely on fan footage for an entire concert DVD. Even Madonna, known for lavishly expensive music videos, held a “Make My Video” contest with MTV for “True Blue” in 1986.

The Radiohead In Rainbows contest is being run a bit differently in that they’ve partnered with an independent video site, are focusing on animation, and are using a tiered voting approach that allows fans to be involved with picking the winner. Further, any song on the album is eligible for being turned into a video, which means fans will in many ways get to define the band’s first single.

Until April 27th, anyone can submit a storyboard or clip to Aniboom detailing their idea for a Radiohead video. Users will vote on the 10 best, who will then each be given $1,000 to create a one minute version of their concept. The band will choose the winner, who will receive a $10,000 budget to make the full video for the band in June.

Check out the storyboard example below:

Today I gave a presentation at the Media08 event in Sydney, entitled: What’s Next on the Web? Web Technology Trends for 2008 and Beyond. It’s an overview of some of the top trends we cover on ReadWriteWeb; such as Websites becoming web services, Semantic Apps, Open Data, Mobile Web, Recommendation Engines. The presentation is available as a slideshow (embedded below). Each slide has links to ReadWriteWeb content, should you wish to drill down on a topic more.

Let us know your feedback / suggestions in the comments – I will continue to add to and tweak this presentation as these Web trends evolve. The Media08 event was run by X|Media|Lab.

Note: click here and then click ‘full’ (bottom right) to view full screen and enable the links inside the presentation.

Charlene Li gave the opening keynote at today’s Graphing Social Patterns conference. The keynote was titled “The Future of Social Networks” and Charlene clarified that specifically she was focused on five to ten years out in her presentation. Her basic thesis is that in the future, ’social networks will be like air.’ In other words, it will be ubiquitous as you navigate across the web and sites will feel inadequate (like you can’t breathe) if a user’s social network isn’t part of the experience.

The majority of Charlene’s talk then focused on how each component of a social network will evolve given this vision:

• Profiles
• Relationships
• Activities
• Business Models

Profiles: A Universal Identity

Like most of us, Charlene has literally dozens of identities online (see slide below).

Moving forward she’d like to see a universal identity. Her specific proposal centers on either email and/or mobile phones, since this would be an identity she controls. Thankfully, Charlene also anticipates a federated approach (such as OpenID.) Also, she anticipates a few major players will probably serve as major federation focus points. We have already seen this happen begin to happen with both AOL and Yahoo! supporting OpenID.

Charlene also talked about the “Bill of Rights for Users of the Social Web," a document created by a number of thought leaders in the social web: Joseph Smarr, Marc Canter, Robert Scoble & Michael Arrington. The document states:

We publicly assert that all users of the social web are entitled to certain fundamental rights, specifically:

• Ownership of their own personal information, including:

• their own profile data
• the list of people they are connected to
• the activity stream of content they create;

Control of whether and how such personal information is shared with others; and

Freedom to grant persistent access to their personal information to trusted external sites.

I imagine there will be more conversation on this in the afternoon panel Dan Farber is moderating on Data Portability.

Relationships: A Single Social Graph

Over the next few years, Charlene pointed out that a unified social graph will develop. She showed her current social graph as it exists inside Facebook, and then pointed out what it was missing: colleagues, parents, extended family, school parents, neighbors (see slide below). I think this is something we all realize intuitively – so the overriding point is that our real social graph is far more complex.

New ‘Entrants’ Will Be Portals

I actually found this one of the more interesting points from Charlene’s presentation. She proposed that the a number of ‘new entrants’ will emerge, except that they won’t be startups at all. Instead, she predicts that a number of the major portals (Google, Microsoft Live, Yahoo!, and AOL) will actually fill the the relationship mapping gap. She pointed to 4 reasons why they are natural entrants:

1. Millions of Regular Users
2. Search & Deep Content
3. Ad & Content Networks
4. Relationship Maps

Activities: Social Context for Activities

Going back to ’social networks being like air’, not surprisingly Charlene projects that social context will be important for most online activities. As an example of how this might happen, she used shopping. She talked about Amazon integrating with Facebook (or any other repository of social graph info) such that they could highlight book reviews from her friends. Charlene also pointed out that any portal could easily incorporate social data into their site. She used Yahoo! as an example saying they could:

1. Search based on what my friends find relevant
2. Elevate stories tagged by my friends — anywhere (maybe multiple social graphs web 2.0 & shopping)
3. Compare daily portfolio performance to friends
4. In terms of advertising, which of my friends owns a Focus & what do they think of it?

Business Models: Social Influence Defines Marketing Value

When talking about business models, her basic point was that we have yet to properly value networks based on their social value. She pointed to Marian Salzman’s (of JWT) concept of personal CPMs. The basic idea being that an individual’s authority on specific topics plus their network’s interest and authority on the topic, results in a value of reaching that user. If this is true then “social networks will have to compete to have the best experience for high influence people.”

Conclusion

Based on the vision she laid out, Charlene ended with a map of how open she anticipated these open platforms evolving.

To realize this vision of ubiquitous social networks, Charlene pointed out 2 things that must happen:

1. We need the technology to evolve, which she wasn’t that worried about
2. We need to increase trust, which she challenged the industry to think about

You can view all of Charlene’s Slides here.

| View | Upload your own

They say imitation the most sincere form of flattery. If that’s true, then Paul Graham must be about to drown from all the praise. His Y Combinator project, which has funded nearly 60 startups since 2005 and has arguably inspired a new emphasis on smaller scale investments at traditional venture capital firms, has collected a cadre of imitators. Lots of them, from all over the world. While Graham may not like it, there are a large number of start up incubators following the model he created with Y Combinator and handing out microinvestments in web startups in return for a small stake.

If you’re a startup founder looking for a bit of seed funding to let you quit your day job and finish your web app or service, our guide to seed fund incubators will help you figure out where to apply. (Be sure to also read this great account of what it’s actually like at one of these programs.)

Name: Y Combinator

Location: Cambridge, MA and Bay Area, CA

Investment: $5,000 + $5,000 per founder (i.e., $15,000 for two founders, $20,000 for three)

Stake Taken: 2-10% (usually about 6%)

Companies funded: Too many to list (about 58), but many you’ve heard of, like Reddit, Scribd, and Xobni (Wikipedia has a full list)

Next application deadline: April 2

Name: TechStars

Location: Boulder, CO

Investment: $5,000 per founder, up to $15,000 (3 founders)

Stake Taken: 5%

Companies funded: 9 so far, including Villij, and Intense Debate

Next application deadline: March 31

Name: SeedCamp

Location: London, UK

Investment: 50,000€ (about US$74,000)

Stake Taken: 10%

Companies funded: 6 so far, including Tablefinder

Next application deadline: August 12

Name: YEurope

Location: Vienna, Austria

Investment: 5,000€ per founder, up to 15,000€ (3 founders)

Stake Taken: 2-10%

Companies funded: Soup.io

Next application deadline: None

Name: Summer@Highland

Location: Lexington, MA

Investment: $7,500 for individuals or $15,000 for teams (split evenly)

Stake Taken: ?

Companies funded: 8

Next application deadline: Not yet announced

Name: LaunchBox

Location: Washington, DC

Investment: Between $15,000 and $30,000

Stake Taken: 4-8%

Companies funded: None yet

Next application deadline: March 14

Name: DreamIt Ventures

Location: Philadelphia, PA

Investment: Between $10,000 and $30,000

Stake Taken: 4-8%

Companies funded: None yet

Next application deadline: March 12

Name: Bootup Labs

Location: Vancouver, BC, Canada

Investment: ?

Stake Taken: ?

Companies funded: None yet

Next application deadline: None / not yet launched

Name: Bootphase

Location: Atlanta, GA

Investment: ?

Stake Taken: ?

Companies funded: None

Next application deadline: None / Not yet launched

See also: Charles River Ventures’ QuickStart loan program, in which seed round startups receive a loan of up to $250,000 against a future Series A venture round (which CRV has the option to participate in). And see the annual Google Summer of Code program, in which stipends are awarded to students working on open source projects.