Search vs Navigation

Often times, search doesn’t work well.  It is not uncommon to get a Search Results page with a message reading “no results found for [your search term]”. That’s why it’s important to not rely on Search; rather, to have it be supplemental to navigation. Thus, when weighing the relationship between search vs navigation, it is key that navigation educates and leads users to find the essential content in a web site or application; and search is a bonus treat for power users that know what they are looking for.

Let’s take a look at how Amazon.com educates their users using meticulous navigation. The search filters in the Category Landing Page in the example below show us that the products come in a ‘waterproof version’ and an ‘800 yard’ version.

amazon search results
amazon search results

A user who knows exactly what they want to buy will type into search ‘waterproof rangefinder’. However, a person whom is browsing for rangefinders might land on this page, and then realize that they exist in a waterproof model. That kind of discovery is great UX because it leaves the user feeling empowered – they have gained knowledge, and thus feel smarter. And it’s better for business too, because an educated user is one that’s more likely to revisit t the product for future purchases – and/or make the current purchase they are contemplating.

The $300,000,000 UX Fix

There is a legendary tale of the famed UX Designer Jared Spool asking his retailer client to change a part of their checkout flow.

The client (a $25 billion retailer), had a button requiring users to create an account or fill in their account information before entering their credit card.

Through user testing, Jared’s team found that new users did not want to create an account for a 1x purchase; and returning users whom had forgotten their login credentials did not complete the purchase 75% of the time.

The UX Solution was: They removed the Register button and replaced it with a Continue button and simple message stating that the user did not need to register to purchase on the site. Revenue that month increased by $15 million, adding up to $300,000,000 over the course of the year.

Read the full article at UIE.com

Software Smackdown: Balsamiq vs Keynote vs Omnigraffle vs InVision

  • Balsamiq Mockups for Desktop, Version 2.2.19
  • Keynote 6.1
  • Omnigraffle 6 Pro
  • InVision (cloud platform, 03-19-14)

Today I focused on creating the same low-fidelity iPhone 5 prototype in 4 different applications: Balsamiq, Keynote, Omnigraffle and InVision.

My end product was a login for an e-commerce store.  By developing the same clickable prototype in all 4 softwares, I was able to getter a richer understanding about which one(s) I want to fall back on when needing to rapidly prototype a product.

Here’s what i learned …

Balsamiq
pros:
• very quick & easy to learn

cons:
• have to drag/drop an image
• no mask abilities
• no layers (a workaround is to make an object “markup”)

balsamiq
awesomely simple and quick

 

Keynote
pros:
• very quick & easy to learn
• simply hyperlink buttons (versus creating “hotspots”)

cons:
• no iphone 5 artwork
• no layers: using master template is less intuitive then using layers

keynote
also quick and easy to use

Omnigraffle
tough to figure out, but quite robust
pros:
• has layers
• has precise info on grid positioning

cons:
• doesn’t come with iPhone 5 stencil artwork (only iPhone 4)
• in preview mode, I got an awful hover highlight over the entire main content
• hotspot navigation falters when using masked artwork in combination with layers

omingraffle
robust feature set, including layers

InVision
pros:
• very, very quick and easy
• don’t have to mask overflowing content, as the software handles it for you
• preview is phenomenal
• comes with iPhone 5 artwork

cons:
• no layers – so you might have to merge some artwork
• resolution is confusing (uploaded artwork gets stretched)
• can’t edit device once past the selection screen

invision
very simple for quick drafts, but tough to edit

=====================

THE WINNERS:
inVision and Balsamiq: both are easy to learn, with inuitive flows and ready-to-go artwork; thus, allowing us to focus on the task at hand (quick prototyping, low-fidelity) rather than thinking about how to use the software