The post Transparent Panel Scrolling Feature appeared first on Blink - User Experience Research, Design, Development.

The Modern Museum of Art (MoMA) store uses the same idea, but implements it as a horizontal menu that displays product images when the tree control is expanded:

Users can advance the “filmstrip” left and right to explore more products while not losing their current context.

The same basic behavior occurs when clicking on a broader category (in this example “Living”)—the user again sees a filmstrip of products:

However, in this case what users might expect to see is a list of product categories under Living (Seating, Tables, Lighting, Clocks, etc) rather than individual products in that broader category. This would certainly be the case in the more customary (vertical menu) implementation of breadcrumb menus. What might not be immediately obvious is that if you click on the category name in the breadcrumb path (rather than the tree control), it behaves as a traditional breadcrumb, taking you to that category page.

Though a slightly unconventional implementation, the MoMA store seems particularly well-suited to the activity of browsing, so showing individual products—even for broader categories—could help users discover items that might not otherwise. The key to doing this successfully would be displaying products that are relevant or otherwise of potential interest.

The post Breadcrumb-based menu system appeared first on Blink - User Experience Research, Design, Development.

The display doesn’t persist—it only appears for a few seconds as the user scrolls down towards the last half of the article.

It seems useful on one hand, but on the other it seems that the writing should pull the user through the article without them having to think about how much longer it will continue on?

The post How much longer is this article? appeared first on Blink - User Experience Research, Design, Development.

The problem is that in some implementations, the field label disappears once the user clicks (or tabs) into the field. This requires users to remember the field label—a particular problem if someone gets momentarily distracted from filling out the form.

A way to avoid this problem is to persist the field label inside the field (but lighten it) when the user clicks into the field (but before they have started typing)—as described in this article.

Another method is to display the field label dynamically outside of the field, as shown below:

Even with the green check mark indicating a completed field, the above solution could be improved by using text color to differentiate field labels from field entries (light gray text for the field label and black for the field entries).

It should also be noted that external field labels should always be used for forms in Edit mode.

The post Supporting internally-labeled fields appeared first on Blink - User Experience Research, Design, Development.

If the user hovers over (or touches) the Add to Cart button before the required fields have been completed, the system shows a field prompt (in this case “Select a Size”):

This approach is an alternative to another technique, which is to disable the Submit button until all required fields are complete. The problem with this method is that it can be difficult for users to understand what they still need to do to enable Submit (even if the required fields are marked). Dynamically highlighting empty fields when the user hovers over or touches the Submit button could be a helpful approach—particularly where the fields are located near button as they are in this example.

Amazon uses a similar technique, but here the fields are located to the left, so the prompt directs the user’s attention there to make the appropriate selections. Amazon also changes the cursor state to emphasize that the button is not available (on touch only the prompt displays).

The post Dynamically Highlighting Required Fields appeared first on Blink - User Experience Research, Design, Development.

Witness this form that give users proactive assistance for user name…

…but doesn’t tell users what the password requirements are until after they make a mistake.

Pottery Barn, on the other hand provides clear, dynamic password assistance, displaying a call out when the user is typing in the password that indicates which password requirements have been met:

The post Field Help: Dynamic Password Assistance appeared first on Blink - User Experience Research, Design, Development.

The initial rollover state zooms in to show a detail of the item:

Less than a second later textual information about the item appears on the left:

It’s a small bit of animation but it does give added emphasis to the zoomed-in image of the product.

The post Highlighting product details with a two-stage rollover appeared first on Blink - User Experience Research, Design, Development.

Other times the option to skip is nearly impossible to find:

We’ve found a couple of risks with the “hidden skip” approach. One is that users who don’t see the option to skip may abandon the flow if they feel trapped without any alternative. Another risk is that users who do discover a hidden skip this option can feel like the system is trying to trick them into doing something – thus compromising trust. While hiding the option to “skip” may increase the number of people taking the step, it can also result in lower conversion or compromised goodwill.

The post Skip this step appeared first on Blink - User Experience Research, Design, Development.

USA Today, however, has a custom split-screen solution where short, one-word main categories are persistently displayed in the left pane with subcategories in a scrolling right pane:

This has the advantage of letting users browse categories/subcategories on a single screen, with the potential disadvantage of having more limited screen real estate for the subcategory text. However, the bold, colorful category text is consistent with the USA Today brand, which strives to present news in a graphically compelling context.

The post Same-screen category/subcategory navigation (iPhone) appeared first on Blink - User Experience Research, Design, Development.

At checkout time, items from all the properties appear in a single cart:

The post Multiple Sites with a Single Cart appeared first on Blink - User Experience Research, Design, Development.

The links include generic functions (Share, Print, Sign in) as well as personalized content (My Recently Viewed, My Saved Cars, My KBB).  Content for My Recently Viewed and My Saved Cars pops up from the bottom of the footer (My Recently Viewed shown below):

My Recently View is available to all users – you must register to save cars – but the registration form also pop-ups from the footer and has a lightweight feel:

The one problem I had was discovering how to save a car once I was viewing the page for a specific make and model. It took me some time to find the Save button in the footer. I had been looking for the save function in the main content area of the page – closer to the object it acts upon (the car).

The post A Persistent Utility Footer appeared first on Blink - User Experience Research, Design, Development.

While the Mac and Windows have established button-placement standards, the web does not. However, an updated, unscientific survey of popular sites indicates sites lean towards the Windows convention of placing the primary action on the left and the secondary action on the right. Some examples below:

Yahoo Mail – Primary action on the left, with right-justified button placement on the form

Gmail – Primary action on the left, with buttons left justified

Amazon – Primary action on the left – buttons left justified

Flickr – Primary action on the left – buttons left justified

Tumblr – Primary action on the left – secondary action on the right – far right placement of Cancel

Pandora – Primary action on the left – using “Go Back” rather than “Cancel”

The post Button Placement Update appeared first on Blink - User Experience Research, Design, Development.

This example (from Endless.com) provides filtering across a number of different product dimensions—and lets users select more than one value under each dimension.

Sometimes, however, this much complexity isn’t warranted. Decide.com uses a simple top-of-the-page filtering system that allows users to select a single value, which is then displayed in place of the selection control:

One advantage of top-placed filters is that in general we’ve found they are more discoverable – and used more often – than vertically-oriented filters.

The post Simple Top-of-Page Filtering appeared first on Blink - User Experience Research, Design, Development.

Walmart has implemented vertical global navigation in a way that also works for lower-level pages. On the home page, the global navigation bar is persistently expanded:

On all pages other than the home page, the global navigation bar is present, but displays only on rollover:

Amazon.com uses a similar approach – at least for now (pending the launch of their new site design).

The post Vertical Global Navigation That Works appeared first on Blink - User Experience Research, Design, Development.

The post Shifting Alignments appeared first on Blink - User Experience Research, Design, Development.

The conundrum is that the functionality of within-page links is potentially useful, particularly for longer, content-heavy pages.

A feature by the New York Times uses an approach that gives users much stronger feedback that the page is scrolling down—an approach that mitigates the risk of users losing context:

New York Times: How Bin Laden Was Located and Killed

In this example, the within-page links also “travel along” as the user moves down the page—another improvement over the standard implementation.

The post A More Usable Approach for Within-Page Links appeared first on Blink - User Experience Research, Design, Development.

This site for human resource professionals also provides definitions, but it uses text color to differentiate definitions vs. links—orange for definitions and blue for links. This approach can cause problems for color-blind users.

There are also less obtrusive implementations. The New York Times displays a button for definition look-up when a user selects a word. This is appropriate for a more generalized definition function, which in case of the New York Times is linked to the American Heritage Dictionary.

The post Displaying Definitions in Context appeared first on Blink - User Experience Research, Design, Development.

Our recommendation was to make the text more explicit—and to lighten the text so that it doesn’t appear to be populating the field:

The post The Case of the Empty Queries appeared first on Blink - User Experience Research, Design, Development.

However, when a user is viewing their cart, the button (kind of) goes away:

The button is still there, but the label is gone.

This is an interesting solution to a common design problem, which is handling global links that are redundant or potentially confusing in a specific context. The goal here is to direct the user to the cart-related links in the main content area of the page. I’ve not seen this done before, but it seems like a reasonable solution.

The post Avoiding duplicated links appeared first on Blink - User Experience Research, Design, Development.

The Wells Fargo web site supports this phenomenon by allowing users to enter their PIN on a virtual keypad:

There is a difference here of course: rather than using fingers to type, you are using a mouse. So it’s not a direct translation of the physical experience.  Over time, do people  have difficulty remembering the numbers and instead just remember the movements? I would guess this is what lead Wells Fargo to add the keyboard to their web site—and that displaying the layout is enough of a physical reminder to help people enter their PIN correctly.

The post PIN entry supports muscle memory appeared first on Blink - User Experience Research, Design, Development.

Compare the above with the time picker in the Outlook calendar, which presents a long, scrolling list of times in half-hour increments:

The scrolling time selection requires much more interaction on the part of the user if they are entering a time that isn’t immediately displayed (default time is the current time).

The post iPhone-like Time Picker appeared first on Blink - User Experience Research, Design, Development.

There are a maximum number of columns that can be displayed, with an indicator that shows how many more columns you can add.

The post Major League Dynamic Column Display appeared first on Blink - User Experience Research, Design, Development.

Designed to defeat automated software attacks, Captchas can also defeat humans as we struggle to decipher the distorted text (the distortion prevents OCR software from correctly reading the text).

The example above is from the New York Times. Other, simpler Captchas can be found on lower-traffic sites. Simpler approaches, however, are more easily defeated. For example, it wouldn’t take much software logic to defeat the Captcha on UIE’s site (type “uie”):

Slightly more complex is this image-based Captcha:

Again, on this relatively low-traffic site this approach is likely effective at preventing attacks—but it is not impervious to image-recognition software.

A more sophisticated image-based Captcha,  developed at Penn State, obscures the image, retaining key details so humans can recognize it but software can’t:

The researchers developed this system in response to ease with which many distorted-text Captchas can be broken by more sophisticated means. While they admit their image-based system is not foolproof, the image distortions, which are made on-the-fly, have proven difficult to crack in their testing.

It’s notable, however, that ReCaptcha (shown in the first example) has a dual purpose. Its Captcha function is a part of book digitizing efforts. From Wikipedia:

Scanned text is subjected to analysis by two different optical recognition programs; in cases where the programs disagree, the questionable word is converted into a CAPTCHA. The word is displayed along with a control word already known. The system assumes that if the human types the control word correctly, the questionable word is also correct. The identification performed by each OCR program is given a value of 0.5 points, and each interpretation by a human is given a full point. Once a given identification hits 2.5 votes, the word is considered called. Those words that are consistently given a single identity by human judges are recycled as control words.

ReCaptcha is one of the most widely-used Captcha systems, deployed by Facebook, Twitter, Craigslist, and many others.

The post The Captcha Conundrum appeared first on Blink - User Experience Research, Design, Development.

This lightweight approach seems ideal for purchasing single items that don’t need to be shipped.

The post Ultra-light Online Purchase appeared first on Blink - User Experience Research, Design, Development.

RightSignature uses a similar control in its web application:

This is a great example of adapting successful elements of a mobile experience for the web.

The post iPhone-style toggle switch appeared first on Blink - User Experience Research, Design, Development.

Huddle doesn’t build the initial page views around introductory video – instead it shows a closed video area, which the user may open (click to see full-sized version).

Video hidden

Video displayed

This approach seems to have a good balance between discoverability and not getting in the way of those folks ready to dive in.

The post Video Help Content – Discoverable but not Obtrusive appeared first on Blink - User Experience Research, Design, Development.

The two examples below use a number to identify each slide. They have an explicit means a pausing the slide show, giving users the ability to control the display (click to see full-sized image):

From: The Gates Foundation

From: Fine Cooking

Alternatively, these slide shows may use an implicit means of pausing the display. In the example below, there is no pause/play control, but clicking one of the round buttons (one for each slide) stops the auto-play.

From: Epicurious

For users,  no control over the auto-play can be frustrating. In the example below, users may navigate to a specific tab, but the slides continue to auto-play regardless of what actions the user takes. On the plus side, the tab interface lets users see the title of each slide.

From: Cook’s Illustrated

Here’s another example of the tabbed slide show, with the addition of a very clear pause button:

From: Martha Stewart

The tabbed approach works when slides can be easily named with one or two words. In the example below, the user sees slide thumbnails when the page first loads and when they roll over the pause button:

From: Seattle Mariners

The post Auto-play Slide Shows appeared first on Blink - User Experience Research, Design, Development.

To close the drawer, you can either click again on the current option (in this case “programs”) or click any of the other top-level options.

This approach is well-suited presenting a large number of options, where a simple drop-down menu (displayed on rollover) isn’t practical.

The post Subnavigation Drawer appeared first on Blink - User Experience Research, Design, Development.

It’s an all-too-rare example of going the extra mile for users by leveraging system logic (vs. putting extra tasks on the user). In this case, I was indeed a member and was happy to see the discount reflected in my final order.

The post Using System Logic to Help Users appeared first on Blink - User Experience Research, Design, Development.

The post Closed Captioned Product Video appeared first on Blink - User Experience Research, Design, Development.

The result, as one colleague put it, is at once both harsh and hilarious. But it also points to a risk in over-engineering content templates. It would have been enough to suggest how best to craft a helpful error message rather than forcing content under overly prescriptive (and wordy) headings.

The post Smokey the Bear’s Emphatic 403 Error appeared first on Blink - User Experience Research, Design, Development.

I would further suspect that this placement improves the quality of the title. Who hasn’t started writing and discovered that what you planned to say differs from what you wind up saying?

The post Summarize after entering details appeared first on Blink - User Experience Research, Design, Development.

But when there are hundreds or even thousands of pages—typical in search results—paging controls can easily get more complicated:

In general, users rarely venture beyond the first couple of pages of search results. If they don’t see what they are looking for after reviewing a page or two, they are likely to revise their search using terms that either narrow or broaden their original query.

In this situation, the ability to go directly to a specific page can be a secondary function—as shown in this simple, compact approach:

The only downside to this design is that users must both enter a page number and press Return—something that may not be immediately apparent to all users.

The post Paging controls… when there are many pages appeared first on Blink - User Experience Research, Design, Development.

I wanted to answer: “I’m a registered SmartMoney.com user.” I stared at the question for some time before realizing that I was suppose to answer Yes here.

They are asking people to self-identify – there are 3 possibilities – but only 2 are explicitly stated. The third possibility – that I’m a new user – is implicit in the “No” button. Confusingly, the question seems to be asking people to make a choice between two options – but the answer options (Yes/No) don’t correspond to options posed in the question.

How would I have done this differently? Two links:

• I’m a registered SmartMoney.com user OR a returning Lifeplan user
• I’m a new user

The post Language Counts appeared first on Blink - User Experience Research, Design, Development.

The traditional method in desktop software menus is a horizontal fly-out, as shown below:

Many web sites use a similar approach, as in this example from Lands End:

Where there are relatively few top-level options, some sites organize sub-items in vertical columns, as in this example from REI.com:

One approach I’ve seen only on one site (Mygazines)  is a dynamic menu that extends vertically:

A downside with this implementation is that 1) it requires a click to open/close a submenu and 2) It can result in “pushing down” the top-level options so they are more difficult to scan.

The post Sub-items in dynamic menus appeared first on Blink - User Experience Research, Design, Development.

It’s an interesting visual treatment I hadn’t seen before. Though subtle, I think it clearly communicates “I am here.”

The post Location Indicator on Global Navigation appeared first on Blink - User Experience Research, Design, Development.

>

With a task that is performed repeatedly, those extra clicks add up—and can lead to user frustration.

Compare the above approach with adding an item to a wish list on Amazon.com (one click does it):

The post Unnecessary clicks can add up appeared first on Blink - User Experience Research, Design, Development.

The post Tiny URLs for sharing products appeared first on Blink - User Experience Research, Design, Development.

What is likely effective about this approach is that it also encourages users through the process, communicating that it will be both easy and fun.

The post Adding a little personality appeared first on Blink - User Experience Research, Design, Development.

Mint.com also uses this approach with their login form, though the feedback is a more subtle “OK” to the right of the field:

This may seem like overkill, but I can see how users would respond favorably to knowing they’ve completed fields correctly. That way they can submit confidently—without the fear of having the form returned with errors.

The post Positive feedback on data entry appeared first on Blink - User Experience Research, Design, Development.

Blue Nile has a handy way of answering this question for its diamonds with this chart:

Users can initiate a search for similar diamonds directly from the chart.

The post What do most people choose? appeared first on Blink - User Experience Research, Design, Development.

The post Controlling the number of items displayed appeared first on Blink - User Experience Research, Design, Development.

In the page above, they’ve displayed all the values for the first facet (Main Ingredient), which pushes the remaining facets (Meal/Course, Type of Dish, Season/Occasion, Recipe Category, Preparation, Dietary Consideration) down to about 2800 pixels “below the fold.”  That’s a long way to scroll—and of course it significantly reduces the discoverability of these options.

How could Epicurious have avoided this? One option would be to initially present all the facets closed. This has the disadvantage of requiring two clicks to select a “refine by” option (one click for the facet, one click for the value).

Another option would be to initially display a facet that has relatively few values. My choice here would be Meal/Course:

Another approach is to use more/less links, as shown in this example from Buzzillions:

The top brands are shown initially, with the option to see “more”:

The post Managing options in faceted navigation appeared first on Blink - User Experience Research, Design, Development.

One click does it

The fastest and easiest opt out is the “one click” experience. Just click the “unsubscribe” at the bottom of your email and you’re done.

Simple single-click.

Single-click with link to re-subscribe.

Two clicks

Several sites used a two-click  “are you sure you want to do this?” approach.  The example below has clear primary action button that is labeled specifically “Unsubscribe.”

Three clicks

Slightly more arduous is the requirement to express your preference using a check-box or radio button.

I suspect the example below has a high error rate, with people overlooking the check box before submitting:

The example below, while still requiring a total of three clicks to unsubscribe, probably has a low error rate because the radio buttons are left-aligned with the submit button, making them more discoverable.

Consider the options

A few sites took the “please consider the alternatives” approach to opting out. It requires a bit more thinking (or at least reading through the options.)

Find it yourself

The most frustrating experiences were companies that did not provide an “unsubscribe” link in their email. Instead, they instructed me to log into my account and edit my “communications preferences.” In some cases, this was easy to find; in others, not so much.

A certain reunion site makes you hunt down your email preferences, which once found, are presented in a somewhat dizzying array of options.

After de-selecting all the options I was puzzled as to why I was still receiving emails. Alas, the small print:

It can take up to 10 days to process new or canceled subscriptions.
You will occasionally receive emails that tell you about updates
to your account or announce [site] improvements…

The post Opting out: one click to frustrating maze appeared first on Blink - User Experience Research, Design, Development.

Some buttons on this page are obvious, for example “Click to Talk.” What is less obvious is the function of dimensional-looking yellow bar across the middle of the page. The first set of text (“Looking for more than a ballpark summary?”) is not linked but the second set of text (“Contact us now”) is.

While dimensional effects can add visual interest, non-clickable “raised” elements have the potential to be confused with buttons. We’ve seen this in testing where participants try clicking on anything with a beveled or drop-shadow treatment.

The post Button Identity Disorder appeared first on Blink - User Experience Research, Design, Development.

On Foodnetwork.com the selection control is contained within the search field:

I suspect the location in this position is more discoverable because it places the control between the typical starting point for a search task (the search field) and the end point (clicking the search field).

The post Searching a subset of content appeared first on Blink - User Experience Research, Design, Development.

• Dynamic filtering updates results automatically as a user makes each filtering selection.
• User-initiated filtering where the user makes some selections and clicks an update button to see new results.

Which approach to use often comes down to data and performance issues (sometimes dynamic filtering isn’t feasible or advisable from a technical standpoint, particularly where users are likely to select multiple filtering criteria).

Endless Shoes and Handbags is an example of dynamic filtering; Hotels.com employs user-initiated filtering.

Interestingly, Tripbase gives the user a choice. By default, the site uses dynamic filtering. But users can override that default by de-selecting the “auto-submit” option.

The post Dynamic or user-initiated filtering? appeared first on Blink - User Experience Research, Design, Development.

Rather than using the conditional logic to create a separate error message for each case, PayPal  makes the user wade through the IF statements to determine which case applies. This makes it particularly difficult to find the resolution. Errors are never a happy circumstance for users; by making error recovery more difficult than it needs be, the aggravation is compounded.

The post Use conditional logic to help users, not burden them appeared first on Blink - User Experience Research, Design, Development.

I would be interested to see eye-tracking data to understand  how quickly users notice this type of display. The New York  Times uses a drop-shadow treatment at the bottom of the bar, which visually brings the top bar  forward on the page. Twitter uses a slight embossing treatment and has plenty of empty space around the bar. Both treatments probably aid discoverability.

Twitter uses what I think is a subtle but effective display to indicate when the “Election 2008” bar is minimized:

After clicking the “No thanks” link on the New York Times top bar, I couldn’t find a way to re-display it—and wasn’t sure where else I could look to if I was interested learning more at a later time.

The post Top bar for introducing new features appeared first on Blink - User Experience Research, Design, Development.

• a term’s current rank
• whether its popularity is on the rise or on the wane
• its rank last week
• the total number of weeks it has been in the top 50 list

The table format is an effective way to communicate differing aspects of popularity (current, trend up or down, change from previous week, and popularity endurance).

The post Communicating Popularity Trends appeared first on Blink - User Experience Research, Design, Development.

All Selected

One selected

The results automatically update as you select/de-select from the options, which gives the interface a very responsive feel.

The post Quick “select one” appeared first on Blink - User Experience Research, Design, Development.

Example from Photoshop Elements

On the web it’s common to see links organized into named groupings:

Example from B & H Photo

The ribbon in Office 2007 puts functions into named groups, but the labels for those groups actually appears below the items rather than above. (Click to see full-sized image)

I would guess this placement is because the ribbon is located above the working area. So as your eyes move from the working area to the ribbon, you are essentally scanning in reverse (bottom to top), which could warrant the bottom-placement of the categories.

The post Some types of conceptual groups appeared first on Blink - User Experience Research, Design, Development.

Example from Best Buy

In testing, we’ve found that tabs are an effective visual treatment for navigation – they make options quickly discoverable.  One disadvantage of horizontal tabs, however, is limited screen real estate. If you have more than a handful of options, you can run out of space for the tabs.

In many situations, vertical tabs can work as well.

These have the advantage of giving significant visual weight to the navigation options while providing room for many more options.

Example from Jott

The post Side tabs appeared first on Blink - User Experience Research, Design, Development.

The reason this is considered best practice is that graying out inactive options keeps the list of items in the menu constant rather than ever-changing. This is important for frequently-accessed, globally-available options.

Another example comes from Evernote, which lets you capture and tag notes, storing them in different “notebooks.” When I’m viewing a specific notebook, only those tags contained in the notebook are enabled; the remainder are grayed out:

A related design issue occurs on the web when items have differing information available for them. The example below from Epicurious (click to see full-sized) shows there are five types of information available for Caramel Pecan Cookies: recipe, photo, reviews, video, and my notes:

But in a different recipe, there are only three options available (recipe, reviews, and my notes):

When presented with a similar design problem, I’ve had clients ask me if it wouldn’t make more sense to keep the tabs the same but gray out the ones that are not available for the current item. In this situation, I say no. The tabs here are serving more as page-level navigation, which is typically tailored to the specific page content.  There is nothing that the user could do on the page that would “enable” the grayed-out tabs – they are never applicable to the item being viewed. In addition, by only presenting the applicable tabs you do a better job of highlight what information is available.

The post Hide or gray out options? appeared first on Blink - User Experience Research, Design, Development.

The Apple Store takes this idea one step further by automatically displaying images as part of the results display. For example, here are the results suggestion when I’ve typed “ip”:

And here are the suggestions when I’ve typed “iph”:

There is some seemingly promotional content in the results, but the top few choices are relevant. In some ways, this feels more like small dynamic web page built from the letters you’ve typed into search.

The post Visual search suggestions appeared first on Blink - User Experience Research, Design, Development.

Sharebuilder‘s Open an Account function displays substeps by breaking a longer step (Create Account) into segments (click to see image full-sized):

The advantage of this approach is that is communicates the main tasks required while still visually reflecting the length of the entire process.

The post Indicating steps within steps appeared first on Blink - User Experience Research, Design, Development.

While we still advise clients to provide help for their applications (users will refer to it if they get hopelessly stuck), we also look for opportunities to provide small bits of help that won’t completely interrupt a user’s task flow. An example of this comes from Adobe Lightroom, which provides a brief introduction to the basic areas of the interface when the application is first launched (click to see full-size images):

What is likely effective about his approach is that gives just a bit of information that supports users’ “clicking around” mode of learning.

The post Looking for Teachable Moments appeared first on Blink - User Experience Research, Design, Development.

The post What’s my user name? appeared first on Blink - User Experience Research, Design, Development.

I enter ingredients I have on-hand in the upper-left green box, which are displayed below in the tabbed area labeled “Your Kitchen.”   The search results on the right displays recipes with the ingredients I’ve specified (in this case chicken, lettuce, and salsa).

What’s interesting is display below my list of ingredients – it suggests other ingredients I might have on-hand (or could easily buy).  These appear in a tag cloud so I can see which ingredients will yield the highest number of recipe options. For example, if I added the ingredients “cheddar cheese” and “tortillas” to my chicken, lettuce, and salsa, I go from being able to make 1 recipe to 5 recipes.

Though this example is food-specific, it seems this approach could work for other items that have a standard set of attributes.

The post Query Builder appeared first on Blink - User Experience Research, Design, Development.

When I click continue to move to the next step, the current “window shade” closes and the second steps opens:

This particular interface is very responsive, and so the task flow feels much more compact compared to more traditional page-to-page navigation.

Practically, this approach works best where each step isn’t too long – and there are just a few steps – so that the “next steps” listed below the current one are clearly visable.

The post “Window shade” Wizard Navigation appeared first on Blink - User Experience Research, Design, Development.

United could have framed the scrolling display of flights, which would have also provided a persistent Continue button (a technique used in many applications).  I’m not sure of the advantage of the floating button, other than it definitely catches your eye as it jumps into position.

Alaska Airlines also has a floating page element – but it provides a persistent display of the flights you’ve selected as your scroll up and down through the options:

Interestingly, you can pin this element in a static location on the page – presumedly for users who might find the jumping behavior annoying.

The post Floating Page Elements appeared first on Blink - User Experience Research, Design, Development.

The message is persistent in that it continues to be displayed at the top of any Backpack page until the user clicks “Hide this notice.” However, the wording of that link made me assume that there would be a way to show it again once it is “hidden.” What actually happens is that the message is removed – I wasn’t able to find a way to re-display it.

The post Persistent Message appeared first on Blink - User Experience Research, Design, Development.

The size settings are saved when you save a post.

Though there are other customization options available by clicking a “customize this display” link, I like how they’ve pulled out probably the most useful customization right on the page.  This way, people who generally create short posts can easily have a compact editing space that meets their needs, while people who usually create long posts can work with a long text box.

The post Customized Editing Space appeared first on Blink - User Experience Research, Design, Development.

The search function at iStockphoto encourages visitors to refine by displaying the controls dynamically when the cursor is in the keyword search field:

Both the placement (under the search field) and the dynamic behavior (which catches the eye) helps bring these options to the user’s attention.

Compare this treatment with that found on the Corbis site (click image to see full-sized):

Here the refinement options appear after the search field and button. Since the user’s attention will initially be on the search field and button, the refinement options seem less discoverable in this position.

The post Filter controls with keyword search appeared first on Blink - User Experience Research, Design, Development.

OS file browsers have long used tree controls to allow users to open and close branches of a file hierarchy.

Windows XP uses a “plus/minus” control. The plus indicates there is more available under branch; the minus indicates the branch is open:

Mac OS X uses a “triangle” control. When the branch is closed the triangle points to the right; when the branch is closed the triangle points down.

Vista uses a variation of the triangle control. In the closed state, the points to the right, but is rendered in outlined only. When the branch is open, the triangle points at a 45-degree angle and is filled:

The web uses variations of Windows XP “plus/minus” control and the Mac OS X “triangle” control.

Google Reader uses a plus/minus control:

Yahoo Mail uses a triangle control:

The above examples are controlling the display of lists.  In traditional desktop software triangle controls are commonly found open and close palettes, such as those found in Adobe Photoshop:

On the web, this same idea is often seen with web page widgets, as with this example from Netvibes:

Interestingly, iGoogle uses more of a window minimize/maximize metaphor for its widgets. The placement of this control is also on the right side of the widget, similar to the window controls in Windows XP or Vista.

There is one other related convention that is worth mentioning, which is controls to hide/show menus. On the web, this control is commonly represented as a down-pointing triangle, as show in these examples from iGoogle and Netvibes.

Interestingly, pallets in desktop software often use a right-pointing triangle at the end of the widget to display a menu (as shown in this Photoshop example):

The post Controls that expand and collapse appeared first on Blink - User Experience Research, Design, Development.

This dialog has a lot of explanatory text.  And to my eye the actions—what you are supposed to click—are not strongly distinguished from the other text (a problem of visual hierarchy).  I think  the presentation is a case of a bit too much information that serves complicate the choice.

Compare the above to this Mac OS X dialog for the same situation:

Here, at a glance, I can see there are two choices: stop and replace. The button treatment of the actions makes them pop out from the other elements of the dialog.

I suspect if we were to do A/B testing of these solutions, there would be significantly lower task times associated with the Mac OS X presentation when compared to the Vista approach.

The post Presenting choices in a dialog box appeared first on Blink - User Experience Research, Design, Development.

The strong visual weight given to each section effectively breaks the form into separate steps.

A risk with long, scrolling forms is that users can find them overwhelming.  The single-form approach (vs. a wizard approach) is most suitable where:

• There is little or no conditional logic to the flow
• The overall flow is short
• Each step is relatively easy (both in terms of interaction time and cognition required)

The post A single-page multi-step form appeared first on Blink - User Experience Research, Design, Development.

Buttons can also be used for selection feedback, as shown in this example from FriendFeed:

This approach can be particularly helpful when users are selecting from a long scrolling list or over multiple pages.

The post Using a button for selection feedback appeared first on Blink - User Experience Research, Design, Development.

Yahoo uses separate fields for each component of the event:

Google on the other hand uses a single text field:

Both approaches have advantages and disadvantages.

The Yahoo approach—using separate, specified fields—is probably more suitable to novice users because it ensures entries are in exactly the right format. But, it is likely slower than entering information as a single text string.

The Google approach reflects how people might quickly jot down events in an off-line context. But this also requires more system logic to properly interpret user’s entries—and this approach runs the risk that users may not use  syntax that the system can interpret, resulting in errors.

For example, consider this quick entry in Google Calendar:

breakfast w/Tracy at 7

With this entry, Google incorrectly schedules the breakfast with Tracy 7:00 pm rather than 7:00 in the morning (which was the user’s intention).

The post Constraints or flexibility? appeared first on Blink - User Experience Research, Design, Development.

Here is the initial button state on freetranslation.com:

And here is the button state when clicked, while the translation is in progress:

This approach has two great advantages:  it gives the user feedback right where they gaze is currently fixed (on the button they just clicked)—and, by disabling the button, it prevents users from clicking the button twice (which might happen if they think “nothing” is happening).

The post Using a button for in-progress feedback appeared first on Blink - User Experience Research, Design, Development.

This approach, of course,  highlights only a small subset of the review content. But even when users read an entire set of reviews thoroughly, they are getting an unscientific sampling of opinion. Comparing a positive versus a negative review is likely an effective shortcut for those who don’t have the time or inclination to read every review.

The post Summarizing user reviews appeared first on Blink - User Experience Research, Design, Development.

What is particularly interesting about this choice is that it not only forces me to self-identify as one or the other, it also implies some sort of conflict/unrest between the two. The IT user and the business user look like they are having some sort of stare-down. Honestly, I didn’t want to choose either one! But aside from that, I truly didn’t know which I should select.

Sometimes, it makes sense to organize information by user type. College sites do this (parents, students, faculty and staff…) as do health insurers (members, employers, providers…). These are distinct groups with distinct informational needs. For example, the homepage of Georgetown University prominently features self-identify links in the center of the page, but provides other topic categories on the left side of the page:

Forcing users to self-identify should never be the sole gateway to the site’s information. If people can’t identify with any of the options, they will feel stuck.

The post Asking users to self-identify appeared first on Blink - User Experience Research, Design, Development.

Tastebook combines both scrolling and paging navigation on a single page. It seems to have a limit of loading 100 items per page—which they’ve implemented within a scrolling frame. Paging links are at the bottom of the frame (click for full-sized image):

Though the paging links have relatively light visual weight, they are in a highly discoverable location: right at the end of the scroll bar.

The post Paging and scrolling navigation—together appeared first on Blink - User Experience Research, Design, Development.

The post Highlighting the current row appeared first on Blink - User Experience Research, Design, Development.

Step 1:

Step 2:

Step 3: (Note the option here to automatically log the user in.)

Step 4: I’m logged in

This process obviously relies heavily on the security question and may not be as secure as requiring the password recovery via email. But it has the advantage of being quick and easy… in just a few short steps the user has access to the logged-in version of the site.

The post Password recovery without a required trip to email appeared first on Blink - User Experience Research, Design, Development.

Commonly, items that are distributed over a number of pages are subject to a “Select All” command. In this situation, the following question always comes up: Do we just select the items on the current page or do we select all items across all pages?

Gmail has a nice solution to this: give the user a choice.

By default, Gmail just selects the items on the current page. But it gives you a handy link at the top of the list to select across all pages (click to see full-sized image):

Here’s how it looks when items are selected across pages:

This approach doesn’t completely resolve the question, though, because you must select default behavior here (select single page or select across all pages).

In a study I recently completed, I found that  users expected “Select All” to do just that—select all items across all pages. The interface we tested gave users feedback on the number of items selected, but participants still wanted to check at least one other page to confirm that everything was indeed selected. This was a system participants used on a daily basis, and a few stated that they would just do this check the first time, but would subsequently feel comfortable the system had selected absolutely everything.

The post Selecting Items Across Multiple Pages appeared first on Blink - User Experience Research, Design, Development.

Yahoo mail provides check boxes but also lets users use Shift + Click and Ctrl + Click—the way you would multiple-select items in a desktop application. Regardless of how the selection is made, the item is both highlighted and its check box is checked:

Windows Live Mail uses the identical approach, except the check boxes for individual messages aren’t visible until you roll your mouse over an item (or select it):

Gmail relies on check boxes, but it also provides links that allow you to make selections based on the message state (read, unread, starred, etc). Shift + Click and Ctrl + Click don’t work in Gmail, however.

.Mac mail dispenses with the check boxes all together and  relies exclusively on  Shift + Click and Ctrl + Click for selecting multiple messages.

The post Selecting items in web mail appeared first on Blink - User Experience Research, Design, Development.

Visually, I think this works effectively because of visual weight given to the navigation bar (a deep, rich green) and the “white space” surrounding the seasonal link under Articles & Guides. I personally never fail to notice this link when I visit the site.

Using the link, however, is a bit tricky.  It’s easy to accidentally roll your mouse over the hot spot for the fly-out navigation instead, which covers up the link. It takes a relatively precise mouse movement to actually click the seasonal link.

The post Highlighting Timely Information appeared first on Blink - User Experience Research, Design, Development.

Here is the “Saved Stuff” tab in the rollover state:

Once you click on a tab it stays open; closing the previously-active tab:

I think this is an interesting approach to help de-clutter a left navigation bar, which can sometimes  contain an overwhelming number of links. The key, however, would be clear groupings of links—with labels that convey a strong “information scent” of the underlying links.

The post Dynamic Side-Tabs appeared first on Blink - User Experience Research, Design, Development.

The primary action in the example below (from Microsoft Excel 2007) is Paste:

Clicking the upper segment of the button initiates the primary command.

Clicking the lower segment of the button displays related secondary commands, with the primary command repeated at the top of the list. The primary command is visually emphasized with an icon:

Yahoo Mail uses the same approach with a horizontally-oriented New button.  The primary action is creating a  new email message.

Secondary actions are creating a new chat and creating a new text message.  These are displayed by clicking the right end of the button. The primary action (email message) is emphasized at the top of the list with bold text.

The post Buttons that support primary and secondary actions appeared first on Blink - User Experience Research, Design, Development.

The relative size descriptions are not very precise (though in Visio’s defense they do provide a preview of the size once you select an option). It makes me want to see what might lay beyond Jumbo and Colossal… perhaps Ginormous?… or Humongous?

In this situation, it’s probably clearer to show the arrow sizes rather than describe them. PowerPoint does this—though it’s always struck me odd that it uses a variety of arrow types (rather than a single representative type or the arrow type you’ve selected.)

Showing relative sizes is one approach. The other approach is let users specify an exact (absolute) size—as with line width in PowerPoint (specified in points).

This approach has the advantage of giving users precise control over the size, but it may be hard to visualize the size you are selecting. (PowerPoint does dynamically change the line width on the page as you make selections in the dialog, but users may not notice this, particularly where the dialog is over the line you are editing.)

Visio provides some “pre-set” line sizes that are shown visually, with the option to set an absolute size via the More Line Weights… option.

MindManager provides no option to enter an absolute line width, but does provide the point size next to each line width option for reference:

The post Size controls: relative and absolute appeared first on Blink - User Experience Research, Design, Development.

Now, with so many applications migrating to the web, frames are increasingly part of the web experience. The most effective implementations use application-like frames minus a browser scroll bar. Yahoo mail is an example of this approach (click to see full-sized image):

Google docs is another example of application-like frames—the interface has a single scrollbar on the right, which controls the text authoring/editing frame.

In contrast, the text authoring/editing experience for Typepad can result in “dueling scrollbars”—a scrollbar for the text area in addition to the browser scroll bar. This creates unnecessary complexity in the interface…and it’s too easy to grab the wrong scroll bar:

The post The comeback of frames appeared first on Blink - User Experience Research, Design, Development.

Normal state

Rollover state

This would seem to be helpful, but I wonder if practically it really is. We’ve found in testing that while some users understand a site logo typically navigates back to home, many users don’t make this association (and therefore never think of clicking or rolling their mouse over the logo). So, I suspect this design approach is helpful only as additional feedback for users who are inclined to click the logo to begin with.

The post Link back to home appeared first on Blink - User Experience Research, Design, Development.

For example, compare the different home page presentations for new vs. existing users on Tastebook. New users are presented with clean, simple page with just three main options: How it Works, Look Inside (a product tour), and Get Started.

Below is the “logged in” version of the Tastebook home page—the starting point for actually using the service.

LinkedIn uses a similar approach, with a super-simple home page for new users:

The advantage of this approach is that it eliminates options that aren’t functional for users who haven’t yet signed up for the service.  It also makes a crisp distinction between the web site for the product and the product itself (a distinction that exists, of course, for desktop software).

The post The experience for new vs. returning users appeared first on Blink - User Experience Research, Design, Development.

Below are the “go to” options:

This might seem like an interesting idea. But in this particular implementation, I felt they had missed the opportunity to do a single  “dashboard” presentation that summarizes these key areas. The dashboard could, for example, show key information about my account (Account Overview), provide a summary of my portfolio (View Your Portfolio), have an embedded quick-entry form for trades (Real-time Trade), etc. The dashboard presentation could likely give me the information I’m looking for without having to navigate to each specific area.

The post “Go to” option under login appeared first on Blink - User Experience Research, Design, Development.

The standard Windows dialog box places the buttons on the right side of the dialog, with the primary action (OK) on the left.

Windows XP wizards place the primary action (Next) as the middle button, between Previous and Cancel.

Wizard layout in Vista is slightly different, with the Previous button placed at the top of the dialog—essentially in the same position as a browser back button.

In the standard Mac OS X dialog, the primary action (OK) is on the right.

The  Mac OS X wizard also places the primary action (Next) is on the right.

Web forms tend to place the primary action on the right, as shown in the examples below.

But application-like functionality on the Web sometimes follows the Windows convention of putting the primary action on the left.

But, then again, sometimes the primary action is placed on the right.

For web-based system, we generally place the primary action on the right because this seems to be more of a convention on the web than left placement. Of course, for Windows or Mac applications, we follow the appropriate OS standard.

The post Button, Button, Where Goes the Button? appeared first on Blink - User Experience Research, Design, Development.

The example below shows the benefit of a premium download:

From: Mindjet

Yahoo Mail uses a comparison table to promote the benefits of Yahoo Mail Plus:

Information about each feature is available without leaving the comparison chart:

The post Making options and benefits clear appeared first on Blink - User Experience Research, Design, Development.

The post Compensating users for their inconvenience appeared first on Blink - User Experience Research, Design, Development.

Still, users often aren’t aware of useful features that could help them accomplish their goals quickly and more easily. One way of increasing awareness is alerting people when new features are available.

Yahoo Mail recently introduced a new set of features called Yahoo Shortcuts by showing an interstitial page (a page displayed before taking a user to their Mailbox).  The page explained the new features and included a link to turn them off  if the user so desired:

(Click image above to view full-sized)

This page only appeared once: the first time a user attempted to access their Mailbox where the new features were enabled.

Many desktop applications use a similar approach. When a user launches the application, the system displays a dialog box with options to learn about new product features:

In this approach, the dialog continues to display each time the application is launched—until the user changes the preference (in this case de-selects “show this window on startup”).

Both these approaches assume users want to proactively learn about features. In reality, most users prefer to learn by doing, even if they ultimately miss the full benefit of the application. This is known as the paradox of the active user.

The post Introducing What’s New appeared first on Blink - User Experience Research, Design, Development.

Most email applications allow users to define rules to manage incoming email. In the case of Outlook 2007, the rule is described as a sentence and users edit the rule by clicking on the hyperlinks within the sentence (click to see image full-size):

Excel uses rules for conditional formatting. Here the rule is presented using standard GUI controls:

Gmail provides great feedback in its “create a filter” function. In the first step, defining the condition that must be met, users have the option to “test the search”:

In the next step, defining what happens when the condition is met, the system automatically runs the search, so users can see exactly which messages will be subject to the behavior they define:

The post Rules appeared first on Blink - User Experience Research, Design, Development.

This example from the Washington State Department of Transportation (WSDOT) shows an effective implementation. The page provides two levels of increase: medium and large. Note how the whole page scales up (click on images below to see full-size).

Default text size

Medium text

Large text

Compare this to text controls on Epicurious. There is only one level of increase and there is almost no difference  between the medium and large text. Additionally, only the text in the center of the page increases:

Medium text

Large Text

The post Text Size Controls appeared first on Blink - User Experience Research, Design, Development.

For example, Vox, where I keep a personal blog, has a clear “Sign In”  link in the upper-right hand corner (click image for a larger view).

Smartsheet also has a clear login option in the upper right of the home page (click image for larger view):

In contrast, I visited Backpack after not having used the service  in some time and had to scan the entire home page on the hunt for the login link. I expected it in the upper right, especially since there was a Sign Up link there…but there was no corresponding Login link.

I finally found where to login, tucked under the large red “Sign up for free” link.

When I clicked the Log In link here’s the page I saw next:

I didn’t expect “help” content here; I expected the login fields. The instructions told me I must first navigate to the URL that’s assigned to me.  The biggest problem I had with this page is that it is a potential dead-end: If I couldn’t remembered my URL, no alternative course of action was presented.

It took a couple of tries, but I was able to remember my URL—at which point I finally got to the login fields:

The post How do I login? appeared first on Blink - User Experience Research, Design, Development.

From: Pageflakes

As widgets proliferate (both on the web and on the desktop), designers will need to master intra-widget navigation.

The post Embedded Widget Functionality appeared first on Blink - User Experience Research, Design, Development.

One option is a generating a drop-down dynamically based on the first few letters typed. In the example below, I’ve typed the letters “Ar”; in response, the system displays options that contain words starting with “Ar.”

From: Facebook

Another approach is to wait until the user has completed their entry and then display a set of suggested entries. In the example below, the system was smart enough to see that I had misspelled “merino” and makes suggestions for the correct spelling:

From: Ravelry

The post Entry Suggestions appeared first on Blink - User Experience Research, Design, Development.

From: Ravelry.com

The post Simple Filtering Interface appeared first on Blink - User Experience Research, Design, Development.

The option to hide/show a column might be useful for content that you refer to less often than that in the main body of the page.

The post Hide/Show Column of Content appeared first on Blink - User Experience Research, Design, Development.

In Yahoo Mail, when I send an email to someone who isn’t in my contact list, I’m presented with a quick entry form to enter that person as a contact.

When I add a DVD to my Netflix queue, I’m asked if I’d like to move that item to the top of my queue.

These are simple, thoughtful additions that can greatly enhance the user experience.

The post Helpful confirmation messages appeared first on Blink - User Experience Research, Design, Development.

For example, when adding a contact to Outlook, I have three options:

• Save & Close
• Save & New
• New Contact from Same Company

From: Outlook 2007

The example above also shows an effective use of visual hierarchy: the primary action has the most
visual weight, the secondary action has less weight, and the tertiary
option is a menu item under Save & New.

The buttons below are attempting to do the same thing (in this case providing two Save options), but the meaning of the options are less clear. Here, we recommended the buttons be re-labeled  “Save & New” and “Save”.

The post Save and… appeared first on Blink - User Experience Research, Design, Development.

“PLEASE DO NOT USE THE BROWSER BACK BUTTON during your visit”

In our observation, people use the browser Back button almost reflexively…before they even think about looking for a “Back” button on the page.  Not supporting browser Back is a sure-fire way to frustrate your users, particularly if information is lost in the process.

The post Lack of Support for Browser Back Button appeared first on Blink - User Experience Research, Design, Development.

This form uses a hybrid approach, locking the fields where accidental edits could have the most serious consequences:

From: Vox

This form also correctly displays the fields as inactive (vs. non-editable, which would display as plain text minus the field border). When a user clicks the associated “change” button the field becomes active.

The post Editable Fields appeared first on Blink - User Experience Research, Design, Development.

In this case, each option has an associated “details” button, which displays help content below:

It’s a small detail, but I wanted to see the triangle on the far right move to the “point down” position when the help content is open. This would help indicate that this works as a toggle (clicking again closes the help content) and is a common visual cue found not only on the Web but also in Mac OS X.

The post More Radio Buttons Driving Form Behavior appeared first on Blink - User Experience Research, Design, Development.

The options below, specifically, are what trip me up: the “stop” option is associated with green icon and the “continue” option has red icon.

What’s even more confusing is that the red “continue”  icon contains on “X”—reinforcing the incorrect impression that it means “close this page.” It’s irritating because of the amount cognitive dissonance it causes (I need to click “stop” in order to “go”).

The goal of the designer was undoubtedly to re-enforce the recommended action. However, this approach is more likely causing users to choose the wrong option because the eye is drawn to the colorful icons. I wonder how many people choose the “red X” thinking that it will close the page?

The post Inverting Go and Stop appeared first on Blink - User Experience Research, Design, Development.

From: Wetpaint

Overall, getting users to proactively learn a system is a challenge. People tend to just jump right in and start working. This tendency is known as the paradox of the active user because in the long term people would save time by spending time up-front in learning.

The post Encouraging Learning appeared first on Blink - User Experience Research, Design, Development.

From: Farecast

An advantage of the vertical (vs. horizontal) slider is that it’s easier to display more information about each point included in the range.  In this case, each point includes a description of the time frame and the associated lowest available price.

The post Vertical Range Sliders appeared first on Blink - User Experience Research, Design, Development.

From: Barnes & Noble

From: Excel 2007

Not surprisingly, the idea of a ribbon (essentially, a horizontally-oriented menu) is now showing up in web applications. Smartsheet, a web-based  collaborative spreadsheet, uses a ribbon-like approach for its menu of commands.

From: Smartsheet

I think we will see more merging of conventions between desktop and the web as the distinction between these two environments becomes less and less relevant.

The post Ribbons appeared first on Blink - User Experience Research, Design, Development.

In both the desktop and web contexts, you can enter appointments using natural language:

From: Cozi

The entry interface is simply a long field at the bottom of the current calendar view:

Though I keep my calendar electronically (on Outlook, which I can sync with Cozi), my husband is a dedicated paper-planner. He found the natural-language approach a breeze to use for his appointments—much less intimidating than an appointment form (which is also available for use).

However, I did have to tell him to press “Enter” to complete his entry. Particularly for its web interface, Cozi should consider having an explicit “Enter” button adjacent to the appointment field. Doing so  runs against the streamlined approach they are taking to the interface. However, not providing the button runs the risk that users will feel “stuck”—not knowing what to do next.

The post Natural Langauge Data Entry appeared first on Blink - User Experience Research, Design, Development.

Moving Items

Folder systems provide perhaps the most familiar examples of move actions. In a desktop application, most users expect to be able to move items by dragging-and-dropping them to a different location.

However, the drag-and-drop interaction can be awkward depending upon the location of the target. It’s often helpful to also provide a “Move to” command.

The “Move to Folder” command in Microsoft Outlook

Moving vs. Re-ordering

The above example from Microsoft Outlook—moving email messages to a different folder—is an example of a system that lets you move items, but you can’t manually re-order items within a folder. Compare that with Firefox’s “Organize Bookmarks” function, which allows you to both move and re-order items using drag-and-drop. The feedback in each instance is appropriate to the action.

When moving, the target destination is highlighted:

When re-ordering, an insertion point is displayed:

Re-ordering

Some functions only involve re-ordering. As with the move actions described above, drag-and-drop is commonly used to support re-ordering items. However, in the web environment, users may not expect drag-and-drop functionality. Backpack addresses this discoverability problem by explicitly labeling the “drag” handles for each item. (The handles only appear when the user chooses the option to “re-order” items.)

From: Backpack

Another approach to re-ordering is using “move up” and “move down” buttons.

From: SmartSheet

In the Netflix queue function, users re-order items by assigning a numerical priority. After editing numerical priorities, the user must save the changes.

From: Netflix

The Netflix example takes into consideration that users are mostly concerned with the precise ordering of “top priority” items. Numerical entry lets them quickly specify the desired order.

The post Moving and Re-ordering Items appeared first on Blink - User Experience Research, Design, Development.

The problem is that radio buttons at the top of a form are often overlooked by users, who instead jump right into entering data in the fields.

This form uses a background color to highlight the currently-selected option.  The highlighting helps draw the eye to the radio button selection, making it much less likely to be overlooked.

From: Wetpaint

The post Using Radio Buttons to Drive Form Behavior appeared first on Blink - User Experience Research, Design, Development.

From: YarnCountry.com

And, assuming I allow images in my email, the resulting message does a good job of reminding me what’s it my cart (along with providing some “see more of” links).

The post Email My Shopping Cart appeared first on Blink - User Experience Research, Design, Development.

From: Ning

Many users will know that it’s required, but the treatment (relatively light visual weight compared to other form elements) increases the chances of it being overlooked. The problem may have been that the chosen treatment for required fields worked well for text fields, but not other types of data entry controls.

The other problem with this form its  reliance on the color red to flag required fields, which won’t be easily perceived by users who are red-green color blind.

The post Terms of Service Optional? appeared first on Blink - User Experience Research, Design, Development.

From: MyOpenID

The post Password Strength Meter appeared first on Blink - User Experience Research, Design, Development.

This custom control tucks the check-box list into a drop-down menu.

From: ShopWiki

A challenge with this approach is giving the user feedback as to what has been selected. This control shows a partial list, which persists after the control is closed.

Control Open:

Control Closed:

One thing this control could do that it doesn’t is use a rollover behavior to show all items selected, which would make the “closed” view more useful.

The post Custom Multiple-select Control appeared first on Blink - User Experience Research, Design, Development.

The default selection includes both Adobe Reader and the Google Toolbar.  The button label helped alert me to the fact that the option for the Toolbar was selected by default:

When I de-selected the Toolbar option, the button label dynamically changed:

Though I would have preferred not to have the Toolbar selected by default,  this seems to be an effective strategy for preventing unwanted consequences where users must “opt out” of pre-selected items.

The post Conditional Button Label appeared first on Blink - User Experience Research, Design, Development.

From: Vox

This implementation could be improved by moving the field tip closer to the field, creating a tighter visual association.

Overall, this is an approach that works best for fields that users are likely to have “in focus” before making their entry. This is less likely for controls such as radio buttons, check boxes, and drop-down menus.

The post Field Tips appeared first on Blink - User Experience Research, Design, Development.

Consider how Internet Explorer
7 supports the task of closing an open tab.

1. Move to the tab I want
to close:

2. Click on tab I want to close (the Close button
becomes viable/active):

3. Move the mouse over to
the Close button and click:

The post Closing an Open Tab appeared first on Blink - User Experience Research, Design, Development.

From: Mac OS X Mail

The post Fluid Display of Date Information appeared first on Blink - User Experience Research, Design, Development.

I see a number of usability risks with this design. First, it’s a non-standard control for an action that is ubiquitous on the web—scrolling. I didn’t expect something that looked like a tab to control scrolling. Second, given the colorful and visually diverse content of the page, the purple tabs largely blend into the other elements on the page. Finally, the scrolling mechanism lacks a key element of feedback  that is present in standard scrollbars—my relative location within the scrollable list.

From: Go2Web2.0

The post Non-standard Scroll Control appeared first on Blink - User Experience Research, Design, Development.

The post Look Up There appeared first on Blink - User Experience Research, Design, Development.

From: Linked In

The post Encouraging Profile Completeness appeared first on Blink - User Experience Research, Design, Development.

Initial Page State – Women’s Shoes

Any selection made on the left immediately filters the products listed to the right.  But, selections don’t trigger a page refresh. Instead there is a smooth fade out of the current results and fade in of the new results.

The filtering controls are somewhat visually complex, but work well.  Category filtering is more of a link-browsing experience – including a little breadcrumb at the top:

As you apply filters, options that are no long available are shown as inactive.

With Brands, this  makes it difficult to see what all the brand options are. For example, I had to scroll all the way to the bottom of the list to filter by the brand Saucony. I could have searched for it, but I wasn’t quite sure how it was spelled.

The treatment for showing the colors as inactive is also a bit awkward. It wasn’t immediately clear to me that the “color corners” were actually colors that were not available.

The display on the slider control is slightly misleading. On first glance, it appears that the lowest selectable value is $263.00.  Actually, the lowest value is $15.00.

This range slider from Diet Television is a clearer presentation of the selected range:

The post Endless Filtering Possibilities appeared first on Blink - User Experience Research, Design, Development.

First, header bars clearly indicates that two of the legal agreements are required. Second, each agreement has an agreement summary (though honestly, these summaries could be written much more clearly). There is a  clear, obvious print link for each agreement (in testing, we often find that participants want to print these out either for reference or to at least skim before accepting). Overall, the page layout is clean and attractive.

From: Chase.com

The post Multiple Legal Agreements appeared first on Blink - User Experience Research, Design, Development.

Normal State:

On Rollover:

On Click:

From: Yahoo Travel

The post Progressive Information Disclosure appeared first on Blink - User Experience Research, Design, Development.

Quick Read (on click):

From: The Huffington Post

The post Quick Read Function appeared first on Blink - User Experience Research, Design, Development.

From: Picasa

The post No Option to Cancel or Skip appeared first on Blink - User Experience Research, Design, Development.

The wizard uses a “running receipt” in the right column to not only let users know where they are in the process, but also to show the selections made thus far. We’ve done designs similar to this when a wizard involves a large number of selections.

From: Princess Cruises

The post Wizard “Running Receipt” appeared first on Blink - User Experience Research, Design, Development.

From: YouTube

From: Amazon

Here, to help users understand there are more items available to view, there is a partial display of the next items on either end of the strip.

From: Wetpaint

The post ‘Filmstrip’ Navigation appeared first on Blink - User Experience Research, Design, Development.

From: Multiply

The post Dynamic Field Help appeared first on Blink - User Experience Research, Design, Development.

From: Target

The post Clear, Uncluttered Product Page appeared first on Blink - User Experience Research, Design, Development.

From: The Gap

The post QuickLook Feature appeared first on Blink - User Experience Research, Design, Development.

From: Bicyclingworld.com

This in and of itself is a complicated first step: I know from asking users do rank-order exercises in testing, this can trip people up – it is hard for them to evaluate the trade-offs.  It is much easier for people to rate factors ( for example, on a scale of 1 to 7).

But the method required to perform the ranking makes it even more complicated. I must use a system of sliders to indicate my ranking and the items are not re-ordered to reflect my selections.

There is also a conflict between the slider display (low to high) and the rank. Note the slider position of the item I ranked as “6” – it’s in the far left position. Since we read left to right, we would expect the far left position to represent “1”.

Compare how Netflix handles reording items in a queue – the same basic task. I can enter a ranking directly or use a quick “move to top” button. In either case, the items are listed in the order specified.

From: Netflix

The post Wrong Controls for Rank Ordering appeared first on Blink - User Experience Research, Design, Development.

Rather than scrolling the page vertically (in the case of some mice also horizontally), the scroll wheel zooms the map in (when pushing the scroll wheel forward) and out (when pushing the scroll wheel back).

It’s a handy feature, but takes getting used to at first. Meanwhile, Mapquest seems the laggert, with its map retaining the “traditional web” use of the scroll wheel.

The post Scroll Wheel Zoom appeared first on Blink - User Experience Research, Design, Development.

From: Wetpaint

The post Floating Palette appeared first on Blink - User Experience Research, Design, Development.

Drawer Closed:

Drawer Open (on click):

From: Wetpaint

The post Help Drawer appeared first on Blink - User Experience Research, Design, Development.

From: Amazon.com

The post Previously Purchased Items appeared first on Blink - User Experience Research, Design, Development.

From: Princess Cruises

The post Effective Button Treatment appeared first on Blink - User Experience Research, Design, Development.

From: Yahoo

The post Quick Info Module appeared first on Blink - User Experience Research, Design, Development.

From: Diet Television

The post Dynamic Search Interface appeared first on Blink - User Experience Research, Design, Development.

From: Vox

The post Processing Status appeared first on Blink - User Experience Research, Design, Development.

From: Gifts.com

The post ‘Top Items’ Global Navigation appeared first on Blink - User Experience Research, Design, Development.

From: Tabblo

The post Quick Site Registration appeared first on Blink - User Experience Research, Design, Development.

From: Circuit City

The post Usable ‘Fly Out’ Menus appeared first on Blink - User Experience Research, Design, Development.

From: Netflix

The post Quick Item Details appeared first on Blink - User Experience Research, Design, Development.

From: Boden USA

The post Product Availability Matrix appeared first on Blink - User Experience Research, Design, Development.

From: Princess Cruises

The post Cruise Finder appeared first on Blink - User Experience Research, Design, Development.

From: Backpack

The post Actions Display on Rollover appeared first on Blink - User Experience Research, Design, Development.

The post Dangerous ‘Clear Fields’ Button appeared first on Blink - User Experience Research, Design, Development.

From: Target

The post Clean and Simple Registration appeared first on Blink - User Experience Research, Design, Development.

The post Clear Field Error Indicator appeared first on Blink - User Experience Research, Design, Development.

The post Wrong Button Emphasis and Placement appeared first on Blink - User Experience Research, Design, Development.

From: Shop Wiki

The post Range Slider appeared first on Blink - User Experience Research, Design, Development.

From: Yahoo Mail

The post Items Open in a New Tab appeared first on Blink - User Experience Research, Design, Development.

From: Gifts.com

The post Recently Viewed Items appeared first on Blink - User Experience Research, Design, Development.

From: Vox

The post Fade Parent Window appeared first on Blink - User Experience Research, Design, Development.