2012_11_Dan_featured Design

Best Practices For Creative And Thoughtful User Interfaces

When you’re designing an application – whether it’s for the web or for a mobile device – the user interface is enormously important. If the UI is clunky, awkward or confusing, users are likely to abandon the app. However, interfaces that are simple to use because they’ve been carefully crafted, will be liked. Thoughtfully designed UIs are often more likely to be highly recommended – even if they solve the same problem as their competitors.

Of course, this is significantly easier said than done, and like all good design work, a great interface is only obvious in hindsight. To help give you some UI inspiration, I’ve brought together a collection of brilliant, beautiful and thoughtfully designed web & mobile app interfaces.

Hipmunk Hotel Search


Hipmunk’s new hotel search interface is lightning fast, uncluttered and easy-to-use.

Hipmunk, famous for their flight search engine, recently revamped their hotel search with a much nicer, easier to use and carefully crafted user interface. Instead of just providing you with a list of “hotels in New York”, as most hotel search engines do, they show you a huge screen-filling map of New York with the locations of the hotels. Filters, such as property types and amenities, are out of the way but immediately accessible and it’s very easy to see reviews for anywhere you’re thinking about staying. They’ve also made sure to focus on providing a fast experience – there’s no lagging or slowdown while the page loads, and the zippy and responsive feel is noticeable.

IFTTT


*IFTTT’s interface makes setting up complicated actions easy.”

IFTTT is a service that allows you to set up clever systems using other sites API’s, all based on the simple programming rule of “if this then that”. For example, if you wanted to save all of your photos on Instagram automatically into your Dropbox account, IFTTT would allow you to create a rule that said something like “If Instagram then Dropbox”. IFTTT takes a very complex problem and makes it manageable and easy, and a big part of the way they do that is through their UI. The interface has a very easy learning curve, and allows you to build recipes (as they call them) by simply clicking on the Instagram or Dropbox icon. The IFTTT team have done a great job in building a remarkably simple and easy-to-use front-end to a very complicated system.

Basecamp


Basecamp’s new UI uses sheets that stack on top of each other.

The latest version of project management tool Basecamp has an entirely new user interface that’s much faster, cleaner and easier to use. One of the smartest, user-friendly improvements they’ve made is to use “sheets”. When you select something – a discussion, a to-do list, a file, anything – it opens as a new sheet on top of what you’ve just been looking at. This makes it really easy to jump back to where you were before – or even jump right back to the start of the project. It’s not a design choice that’s used in other applications, it appears to be unique to Basecamp, and it’s an incredibly useful and usable alternative to a breadcrumb trail. You can see it in action here.

Optimizely


Optimizely’s interface gets out of the way and allows you to edit HTML right in the browser.

Optimizely is an A/B testing tool that helps people who run websites test different designs to see which perform best. Ordinarily, A/B testing is something that involves a ton of code changes and can be difficult to implement, but Optimizely takes the pain out of this in a truly impressive way. Instead of you having to code a new page to test against, it helps you adapt the current page
you want to test by allowing you to edit the text, images, HTML and even the JavaScript and then add one line of code to your site to test it. The interface uses a drag-and-drop system for a lot of elements to have an incredibly easy learning curve, and also incorporates keyboard shortcuts for more advanced users.

Freckle


Freckle’s calendar shows a pie chart of the projects you worked on for each day.

Freckle is a time tracking tool designed for freelancers and small agencies, and helps you to see how much time you and your team are spending on particularly projects. The UI takes all of this data and presents it in a clear and easily comprehensible form — one of the most thoughtful design decisions made is the Pulse screen, which shows a pie chart for each day on a calendar, showing you an easily digestible snapshot of which projects were worked on for the day.

Wanderfly


Wanderfly’s search bar guides the user into finding their perfect holiday.

Wanderfly helps provide travel recommendations based on your interests. It all begins with the “I’m interested in” search box. As soon as you start typing, a block of options appears allowing you to add common tags like “beach” or “culture”, and let’s you easily customise your holiday details by selecting your price and holiday length using sliders. This helps to guide the user into refining their search in an intuitive, fun and simple way – which allows Wanderfly to return highly relevant results.

It’s not just web apps that benefit from focusing on great user interface. Mobile devices like the iPhone and touch screen tablets bring with them new ways to interact with the app. The smaller form factor can provide a challenge for some who are used to dealing with large-sized monitors, and mobile apps often require even more attention to detail in order to provide a great user experience.

Clear for iPhone


Clear’s colourful and fun UI is also incredibly simple, minimalist and easy to use.

Clear is an iPhone based to-do list that’s incredibly popular because it keeps things simple and fun. It’s bright, colourful and has cheerful, fun sounds whenever a to-do item is created or checked off – but the real power behind the interface is in it’s lack of menu and navigation bar. Instead of having all the default chrome at the top of the viewport, it uses gestures to navigate around. Pinching on a to-do list will move you back to the main screen, and swiping to the right on a to-do item will mark it off as checked. It’s an intuive way of using a to-do list that’s instantly fun and satisfying.

Tweetbot


Tweetbot’s UI is easy to use, but has additional features for power users, too.

Tweetbot is a Twitter client for iPhone. Designed more for power users, it provides a fast, slick and intuitive interface for Twitter, and like Clear it takes full advantage of touch-screen gestures. Swiping to the right reveals the whole conversation leading up to a particular tweet, while swiping to the left shows all of the responses. Triple-tapping on a tweet can also be customised, and can either compose a reply or favourite it. Tweetbot was also one of the first apps to pioneer the “drag down to reload” method – which was so user-friendly and well liked that it was later integrated into Twitter’s official client, as well as into Facebook’s iPhone and iPad apps and Apple’s own mail client.

Path


Path’s pop-out menu in the bottom-left stays hidden until it’s needed.

Path is a social network designed for your closest friends, and helps you create a record of your day to day life. It’s mobile app recreates the Facebook style newsfeed, but brings some interesting UI decisions – most notably the pop-out menu. When the plus icon is pressed, the icons for the various options – “Add a photo”, “Write a status”, etc – all pop-out, leaning that more of the screen real estate is devoted to the feed, and the menu is always easily accessible but only there when it’s needed.

Djay for iPad


The Djay app stays within conventions by replicating the interface that DJ’s are used to.

Djay for iPad is – as the name suggests – a DJ system that makes it easy to mix tracks together using your iPad. Djay is a great example of an app that uses existing conventions to it’s advantage – instead of recreating how an iPad turntable should look and work, it simply recreates the existing design of a DJ setup. Because it’s mainly going to be used by DJ’s – who already understand and are used to using turntables- they can make it easy to pick up and use without reinventing the wheel.

I hope you found this collection of thoughtfully crafted app interfaces useful. If you’ve found any examples that you’d like to share, please do let us know in the comments.

One comment

  1. Brandon Hirst

    Hey Dan – Great list!

    I noticed that you included both mobile and desktop applications here.
    While all are good examples, I think there is a huge difference between mobile, tablet and desktop UI.

    Both apple and android publish UI guidelines, so that’s a great place to start. I don’t know of any published guidelines for web those – so a gallery like this is great.

    For more mobile specific UI patterns you can check out sites like
    pttrns.com or tabpatterns.com

Leave a Reply

Your email address will not be published. Required fields are marked *