A gallery of user interfaces that I've collected over the years.
This is the authorization gateway screen shown by Evernote to give Slack access to Evernote services. A dropdown list allows the user to set options for the life of the session and provides brief instruction for how to revoke access at any time in the user’s Settings.
Pinterest's mobile app displays a radial menu if you tap on an image. The menu items are for functions that are also available using the icons and buttons in the top of the UI for allowing you to pin, like, or send the image.
Pinterest's search feature shows tag and board suggestions in the auto-completion list. Select terms/tags to display, and a horizontal list (accordion) of correlating tags to refine or narrow your your search are displayed below the search box.
This is a small animation of the heart/broken heart that is shown when favoriting or unfaving a Tumblr post in the mobile app.
Mention.com's Success Stories section uses this great phrase to introduce the Proof in the drip pan at the bottom of the page.
"They also started with a free trial." Short and persuasive copy that makes an otherwise common CTA more compelling.
Cotton Bureau uses the off-canvas pattern to slide steps of the checkout flow into the screen from the right, as the product page and previous steps slide off screen to the left.
I like how this implies the forward movement through the checkout process a bit better than the cart workflows that use vertically arranged collapsing panels.
Beatport's Pro app for the Mac offers a shopping experience that's tailored for the way DJs shop for music. The app lets users analyze their music (tracks, sounds, and playlists) to prepare sets and add music to their playlists. Here are some of the elements of the version 2 interface related to shopping in the app.
Beatport comes close to the experience of shopping in a record store, breaking down music into genres and sub-genres. Beyond that, they provide filters to offer some of the experience you would expect in a boutique shop of having someone select tracks by mood and type of venue/set. Hand picked charts round out the experience of having the in-the-know shop owner as curator to recommend tracks.
The interface for needle-dropping on the track waveforms gives you a decent way to judge a track over the selected preview. They provide a nice small representation of this in the track details inspector and the player at the bottom of the app. The track details show all the metadata I could imagine wanting—BPM, key, duration as well as those genre/mood/venue categorizations—along with purchase buttons. It would be useful if they made the metadata in the details inspector linkable as well.
This is a cute interaction for the input focus and data validation on Basecamp's registration form. The smiling character illustration on the left points out which steps are in focus. When an invalid value is entered, the character makes a concerned face and the pointing hand stays fixed on the highlighted input.
The illustrations on the site do a great job of making you feel like this isn't "business as usual," which is the reason for switching to Basecamp. Simple things that make the customer smile probably go a long way in this case.
Geeklist's sign up form tells you how secure your password is by indicating how long it would take to crack. Sounds much more understandable and convincing than the typical weak/strong message.
YouTube puts up 2 speed bumps when you try to delete a video from the video manager. This technique slows down the user about to peform a destructive action, and protects them from inadvertently deleting content.
I like the design of the La Wine Agency site. The beautiful large type on the off-white paper reminds me of letterpress cards.
One thing I loved immediately was the age gate, which asks you when you were born so you can get through to shop for wine.
Not only is the big text for the month/day/year picker friendly, but that goofy headlines and "When were you last born?" copy is hilarious, if you catch the joke.
Sure you can use a checkbox to enter binary values in a form, but Pinterest goes the hi-fi route and instead uses sexy switches, a la iOS controls, in their email settings form.
Simple things appeal to me. I like the simplicity of being able to usubscribe immediately. Zerply goes the extra mile and not only gives me options to never get email notifications via links in the notification itself, but also to change the frequency of updates. Nice.
Yes, I know you hate captchas and they're riddled with problems. Why do it if you don't have to? But if you do it, at least make it a brainless action like this.
The Slavery Footprint website allows consumers to visualize how their consumption habits are connected to modern-day slavery.
They use a set of forms in a wizard-like survey to come up with an estimate of the number of slaves that are impacted by your behavior.
This section of the survey asks the user to drag the icons for items that describe the kind of house and car they own or rent into a drop area in the home above.
The Slavery Footprint website allows consumers to visualize how their consumption habits are connected to modern-day slavery.
They use a set of forms in a wizard-like survey to come up with an estimate of the number of slaves that are impacted by your behavior.
The forms use large controls and clear visual feedback using illustrations. Each step of the form is a full screen shown in linear progression.
The price estimator for web application hosting provider Heroku uses sliders and switches to generate a price for your plan. Select the number of process and database options and the cost estimate updates dynamically.
I love this idea. Cultured Code shows the development status on their projects as a flight arrivals display.
The Kelley Blue Book features Mad Libs-style inline form elements for its contact form. The contact form, which was previously displayed with right-aligned labels adjacent to to left aligned fields, is now displayed as an inline form with "fill in the blanks" style prompts for input.
Interesting bubble/cloud of links make up the front page of this retail site.
The Webmynd site features some clever scrolling behaviors, slowly spinning the "easier, beautiful..." text and fading out the header and footer as you reach the edges of the page.
I'm sure some might dislike the use of the bottom-border inputs here, but I'm a big fan of fill-in-the-blank forms and the conversational copy used in this login and registration form on this social music site.
Panic, the Mac software company that makes Coda and Transmit, has an apparel store with fun shopping cart behaviors that mimic the Mac's dock. The apparel store shows t-shirt listings, and a little cart dock at the bottom of the page that invites visitors to drag t-shirts down into it to add to cart. Clicking and dragging shows the ghosted t-shirt moving with the cursor until it snaps into the dock. Adding a bunch of t-shirts enables the carousel. When you drag t-shirts out of the dock, they disappear with a puff of smoke, just as items in the Mac dock do. Those who don't like to drag can use the plus sign icon.
The cart page shows a clean and simple form with all of your items to purchase, your information (shipping/billing info), and payment info. Short and without any fuss. I wish open source carts were easy enough to configure to be this simple.
First time users of iTunes are presented with instruction screens for adding media to their library. The simple instruction panels provide links to buy media or to watch video tutorials showing how to purchase, import, and use the software.
JS-Kit's ECHO is a service that can be embedded in CMS as a replacement for commenting, and provides a real-time stream of diggs, tweets, comments. The interface, at first blush, looks a bit like an email composition form, with From, To, and Body Fields. Selecting the From drop down menu shows options for logging in your identity via JS-Kit or a third party social networking API. The To: field adds "This Page" by default, meaning you're adding a comment to this page. It also allows you to enter other destinations, e.g. Twitter, FaceBook, FriendFeed, to alert your contacts in those social networks of your comment.
iStockphoto takes a rather approach to search that offers plenty of options. When the user is logged out, they're presented with a search form on the front page with options that appear when the input is in focus. The user may then select typical options, e.g. size under photos, number of credits under illustration, format for video.
On the results page, a simpler search form is displayed at the top of the page. If the user is logged in, they don't see the search options drop down on the home page, but see a personalized home page with this simpler search form with checkboxes. The advanced search, however, provides all of the options seen on the anonymous user home page, plus additional options, e.g. search by color, shape, category, location of art on grid.
Kontain is a social media site for sharing photos, video, and music. The site provides a large, simple search form at the top of most aggregate pages, and a pared down version of the search form in the upper right corner of single asset pages. A pull down menu to the right of the search input displays options for searching everything, or restricting to media types, users, or just updates.
The options are displayed as circles, and should function as radios. Unfortunately for me, on Firefox and Safari, the circles were sticking like check boxes, so I was a bit confused by this detail initially. The last selected option was always replaced in the form, but the other options could be toggled to have multiples selected. This may just be a bug, because the results are always scoped to the last selected option.
New York Magazine provides a site search form in the header with options to limit the scope of search, and features advanced filtering options on results page. The results page is simple on the surface, but provides powerful filtering options in the sidebar. The search strategy is shown with actions for removing terms from the search or clear all.
I found some of the behaviors on filtering options to be inconsistent with others. The Type and Publication Date facets provide tree-type fly out menus. But the Section and Author facets, provide bigger multi-column flyouts, triggered by "Show More" links. I haven't figured out my the trigger icon and style needed to be different.
The Fever RSS news reader provides some useful progressive disclosure/enhancement behaviors that hide features until they are needed. Many of the primary features are also provided as keyboard shortcuts. The resulting experience provides a subtle and minimalist aesthetic without compromising features.
The Virgin.com redesign sports a header that provides a boatload of functionality using mega fly out menus: locale selection, micro-site navigation, registration, login, and newsletter signup. I like that they make these options readily available wherever you are on the site. The longer drop downs like the registration form, for example, seem a little long for users on smaller screens, e.g. netbooks.
