All Posts in Interaction Design

May 5, 2017 - No Comments!

Keep your options open

In a search environment, showing users not only the categories they can filter on but the sub options within provides better guidance than closed drop downs or panels that have to be manually opened.  Compare these two new search experiences.

In the second screen, users can click and see the effect.  As they make different selections, the larger information structure they are maintains visual consistency - no jarring transitions.

So when it comes to search, keep your options open - by default.

Published by: Win Goodbody in Interaction Design, Usability
Tags: ,

May 4, 2017 - No Comments!

Applying search best practices from eCommerce to content

Following up on a sketch a few posts back, here's a higher fidelity mockup of what eCommerce style search could look like when applied to content.

To recap key principles behind a good search experience.

1 - Show all available filter categories with sub options already open.

2 - Refresh item set as customer makes filter selections.

3 - Make it easy to remove any applied filters - either one at a time or all at once.

When it comes to content, this standard eCommerce search experience is rare.  For example, WordPress does not have something like this.  WordPress uses categories and tags to allow users to organize their content.  But there is no way to do a compound search for content in 1-x categories or with 1-x tags.

All you can do on WordPress is the equivalent of a Google search.

That's great if you're searching for a specific name or phrase.  But it doesn't work well at scale.  Imagine trying to do the search for skis on REI above with nothing but a search box.

So what could it look like to duplicate the excellent REI search experience in WordPress?  Pretty simple.  All you need to do is expose the available categories and tags (and maybe add a date range), and the user is off and running.

Here's a Spark with a quick survey of current search experiences on eCommerce and content sites.

Published by: Win Goodbody in Interaction Design, Usability
Tags: , ,

January 16, 2017 - Comments Off on Get the answer now – Show the user key info sooner

Get the answer now – Show the user key info sooner

If a Moore's Law existed for search and analysis tasks, it would be that everything will take half the time it used to the last time you tried it.  Great user experiences surface key info sooner and show users the impact of possible choices faster.

Here are two examples of this trend.

Read more

Published by: Win Goodbody in Interaction Design, Usability

April 6, 2016 - No Comments!

Better experience for The New Yorker’s Cartoon Caption Contest

In this case study I take a look at how playing the New Yorker cartoon caption contest could be improved to support wider participation and better overall experience.


To begin with the end - here's my design:

Screen Shot 2016-04-06 at 12.09.27 PM

Read more

March 12, 2016 - No Comments!

We’ve gotta have it | Autocomplete is now expected

In our everyday digital travels, we grow accustomed to certain patterns and interactions.  Best practices evolve quickly.  As soon as there's a better way to do something, it becomes the norm.  The UX bar is only raised over time - never lowered.

With millions and BILLIONS of consumers now expecting great design and user experience, getting even a small detail wrong can be a problem.

Here's an example of how a seemingly tiny design issue actually makes a noticeable difference in everyday usability.

Read more

Published by: Win Goodbody in Interaction Design, Mobile Design
Tags: ,

January 26, 2016 - No Comments!

When giants awaken | Adobe enters interactive prototyping market with Project Comet

If you're a designer or product manager you've no doubt been enjoying the explosion of new interactive prototyping tools like Atomic, Principle, InVision, and Axure in recent years.  All of these products make it easy to rapidly prototype and share interactive designs for any screen size.

In the old days, we used static wireframing in tools like Photoshop or Visio.  To convey the concepts of motion and interaction, which were crucial to how the final product would work for users, we had to notate a lot and show a storyboard of states: "Click this here, and this happens next over here."  While this approach worked, it could be unwieldy for lots of different screens.  And it never gave you the actual experience being designed.  We were still working in flatland, and you had to imagine how the final app or site would actually feel.

Adobe Project Comet

Read more

Published by: Win Goodbody in Interaction Design
Tags: , ,