Skip to content

Posts tagged ‘Design’

Tell your users where to click

Every visitor to your website is looking for an excuse to leave.

Don’t like the layout? Click the back button. Is the content not relevant? Click the back button. That button doesn’t serve merely as a way to leave the site. Rather, it acts as a lifeline to get users back to familiar ground.

Why would any website give users a reason to leave? Because it wasn’t built from the perspective of the user.

Here’s a website submitted to Mini Sprout. Users can choose from 40 different links in this screenshot alone. But since the layout of the website does not seem to guide users anywhere, I felt compelled to click my back button.

Compare that example to a few others. Dropbox asks visitors to watch a video, or download their app. Details like their privacy policy and support section are hidden below the fold, but someone looking for them can easily find them.

Square follows a similar set of guidelines; ask users to watch a video or sign-up directly.

Transmit from Panic asks users to download the app, buy it directly or find answers to their questions.

Even eBay, a website that struggled with clutter for years, helps guide a user. Users can search, browse a category or visit their deals.

Determining whether or not visitors like your website doesn’t need to be as subjective as critiquing your layout. Instead, use a web analytics tool and watch the bounce rate of your homepage.

Bounce rate can serve as a proxy for how satisfied your users are with their experience. If nearly 100% of your visitors are bouncing, it’s time to make a change.


The photo of this post is copyright (c) 2005 by StevenErat and made available under an Attribution-NonCommercial-ShareAlike 2.0 Generic (CC BY-NC-SA 2.0) license. 

How a simple design decision made Pinterest a household name

In the two years since launching, Pinterest has grown incredibly quickly to become the third most visited social network in the US, only behind Facebook and Twitter.

One of Pinterest’s most recognizable features is its layout. Photos seem to spread out like they were individually placed on a light board. But the layout is not the secret to their success.

So, what did Pinterest do differently? They featured social interactions.

On every Pinterest page, social interactions — repins and comments — take up just as much space as the content itself. Profile photos cover the website, showing conversations are alive and ready for you to join. It’s easy for users to contribute to the discussion as well, because users can log in using their Facebook or Twitter accounts. The design decision to feature the social interactions makes Pinterest feel like a vibrant community in a single glace.

Other networks choose to hide these interactions from the end user. Tumblr has plenty of social interaction across their network, but it’s not showcased. Take a look at the screenshot below:

This particular post has 154 likes, comments or reblogs. That’s a lot of activity for one photo, but the social activity is concealed. Users need to click-through to the post itself to see how readers are responding.

A recent report from comScore shows user engagement rate exactly equal between Tumblr and Pinterest, which means Tumblr isn’t necessarily doing anything wrong. The two networks serve different purposes anyway. Instead, Pinterest’s example shows how social media can be used to their advantage.

Where does social media belong? Front and center, not buried and hidden.

It’s rare to come across a business website that forgets to remind us to “Like” or “Follow” them. On many websites, the opportunity for social media has been compressed into a button. Social widgets are tacked onto web pages almost as an after thought.

It takes a truly integrated approach, like Pinterest, to do social media well. And when websites facilitate conversations, users respond.

Solo: Visually Simple Project Management

We’ve seen an awful lot of really good, comprehensive project management web apps launch over the past year. But, we can’t help from writing about them. Any time someone takes a new POV, we feel compelled to share it.

Solo is a new project management app built with freelancers in mind. The service handles both project management and invoicing, which makes it capable of tackling the more sophisticated offerings on the market.

Logging into the service brings you to your dashboard. At first glance, users realize they’re staring at a service unlike anything they’ve seen before. The creators at Solo approached their web app beginning with a blank page, and you’ll notice a few surprising design decisions. The visual hierarchy for graphical elements is a bit different from other project management apps available today. For example, the main page highlights the earnings to date with text, and charts and pushed down lower on the page. Sidebars don’t exist at all. Even the website’s terms and conditions are only viewable as a PDF, and they’re probably the most pleasing terms we’ve seen in a while.

The service is still young with a few necessary features on the way, such as QuickBooks integration, client login areas and an internal messaging system. Before jumping over entirely, try out the service and see if it’s something you’d want to integrate into your workflow. Fortunately, signing up comes with a 14-day free trial, and a paid account is available for a limited time at $10 per month.

Silk: Surreal Abstraction in a Browser

New web technologies give us the ability to create outstanding, beautiful artwork in our browser window without Flash. Silk is an app unlike anything we’ve seen before. We had trouble nailing down how to describe it since we couldn’t compare it. It’s not a tool or a game.

Visit Silk, and click-and-drag a line across your browser. Once you let go, an organic shape will begin to form and glide across your screen. The design looks like waving fabric, or arcs of lightning, or smoke from a cigarette, all depending on what your draw. The shape cycles through colors as it grows, giving you a piece that you’ll want to save and share with friends. Hold down your Shift-key and move your mouse to control the wind.

What surprised us about Silk is that there is a business model behind the tool. The website previews upcoming iPhone and iPad apps. After all, with an app like this one, why would you want to be limited to your browser? We don’t have any other details at this point. But, once they are released in the App Store, we’re willing to bet they will become instant classics.

Favwork: Designer Showcase Community

Forget about invite-only showcase sites or pay-to-play design directories. Favwork is a free, welcoming community for all designers to upload and showcase their best work.

Creating an account is as simple as signing in via Twitter. Once you upload your work, share it across Twitter. Other users can stop by and like your work, and the most liked uploads are featured weekly on the homepage.

The site’s layout is very similar to Dribbble, but Dribbble controls quality by requiring a referral in order to register. As a result, similar sites often lock out solo freelancers and unintentionally places greater emphasis on exclusivity. Favwork successfully shifted the focus from building enthusiasm for an exclusive community to building enthusiasm for great work. And since the community is powered by a social site like Twitter, the barrier is low enough for anyone to join. Kudos, Favwork.

Feedback Roulette: Personal Site Reviews

Web developers solicit feedback for their sites through plenty of sources. Forums for webmasters are one, friends are another. Feedback Roulette shares your website with other web owners, developers and designers. Think of it as a peer critique, which could come with brutal honesty but also offer the most significant guidance for improvement. Feedback Roulette is an absolute must for web entrepreneurs, and it’s completely free to use.

Getting started is simple. Create an account, and you’re given a random website to review. Once you complete and submit your critique, your own website is entered into the candidate pool for selection. As you review more websites, you accrue points, which gives more people the opportunity to review your website.

Feedback Roulette’s service relies on its community. Reviews are anonymous, so it’s difficult to determine the quality of the userbase. But the service is valuable. A lot of web owners may develop and launch a website in their own silo, and Feedback Roulette gives them the outlet to exchange critiques from people qualified to give them.

Mini App Round-Up: Dec 17, 2010

Our Mini App Round-Ups cover smaller apps that rock. If you have a suggestion for an app, send it our way.

Teach Parents Tech

noresizeA few few folks from Google put together Teach Parents Tech as a free video tutorial service for inexperienced web browsers (like some of our parents). Users put together a package by filling out a simple form, and they specify which videos to include. The tutorials range from the basics, like copy and paste, to the result-oriented, like checking the weather or building a blog. The videos feature high production values and begin every video by stating exactly what the viewer can expect.

Buzzword Bingo HD

noresizeWho could survive a conference call without a game of Buzzword Bingo? The new iPad app Buzzword Bingo HD brings a time honored tradition to the tablet. Start the app for a random game card. You’ll see words like, authentic, strategy, framework or three-letter acronym. Tap a square when a word is mentioned to throw down a dot. You can also connect your iPad with other players through Bluetooth. Give it a try, and you and your team may actually end up with better communication skills.


noresizeMinus is a back-to-basics photo sharing web app. Visit their main page, and drag a photo into your browser window to upload. Then share the link with friends. Links work well anywhere, like IM conversations or through Twitter. No registration is required, which means no hassles. It’s one of the easiest ways we’ve seen to get your photos online.

Let’s Swap

noresizeLet’s Swap is about artists inspiring artists. The site posts one limited edition piece from a designer, and other designers can respond with their own work they would be willing to swap. Communication is held offsite by email, allowing designers to not only talk but also connect.

The Feed: Stylized Google Reader for iPad

If the iPad is the best way to view the web, then The Feed may just be the best way to browse your RSS feeds.

Using a highly stylistic interface, The Feed pulls RSS feeds from your Google Reader account. Unread posts stand out with what we’ll call an “RSS burnt orange” edge, while read posts turn gray and show a bite mark.

View your feeds rendered with full text and images, or toggle the view to only show a snippet from each post. Either way, The Feed manages to display both perspectives well, allowing you to choose the setting that fits your mood.

Your feeds are organized into stacks of paper, which is unlike anything we’ve seen. Interface designers typically use badges to indicate the number of items remaining. But The Feed uses a different approach. It tosses out badges and simply uses proportionately deep stacks of paper to indicate how many unread posts are remaining. After all, when it comes to things like feeds (versus unread email messages, for example), concrete numbers aren’t really necessary. For The Feed, an indication like “only a few unread posts remaining” or “a lot of unread posts remaining” is really the most vital metric. It’s this kind of fundamental interface decision making that surprised us in The Feed, and it feels right at home on your iPad.

The Feed is completely free from the App Store. We’re willing to call it a must-have for any iPad owner.

Scout Books: Custom Pocket Notebooks

Pocket notebooks are the perfect travel companions. Think of them as field notes guides for anyone. And their cover designs are just retro enough to be cool.

Scout Books lets anyone design their own pocket notebook. Download their Adobe Illustrator or Acrobat page templates and size your work to fit. The template also includes Scout Books’ color inks and additional formatting instructions. The inside pages can be blank, lined, grid or—brace yourselves—a custom design. All products are printed on 100% Recycled Papers. Pricing for prints is tiered in groupings. Depending on the quantity ordered, the cost per book can range from a little less than $5 to under a buck. Free shipping in the U.S. too.

It’s pretty surprising to see what customers have been able to accomplish on the book covers. Scout Books also post some of their own designs available for purchase. Browsing their site catalogue may just be tempting enough for you to purchase one of their existing designs. But take their examples as inspiration and show us what you can create.