Product Elements as Moving Targets [Bad UX]

Product Background

  • You have likely first encountered “moving target product elements” at online retailers as the practice of exit intent pop-ups has become more common.

  • This practice started several years ago as savvy e-commerce software providers realized that they could measure mouse movement to predict when a customer is about to leave a given e-commerce site, and serve that consumer with a pop-up with a discount code as a last ditch method of getting the consumer to click the buy button.

  • Two examples from Uniqlo and Forever 21. Both Uniqlo and Forever 21 are on the more aggressive end of the spectrum as they take over the entire browser window.

    • The side issue here is that, just as with coupon codes, retailers are now training consumers that they just need to attempt to navigate away from the page to get a retention offer. The slippery slope of e-commerce retargeting is another post entirely.

  • Unfortunately, an analogous problem has started to crop up in the design of products that incorporate browser/UI elements where the content is dynamic / can be dynamically altered with the combination of algorithmic / machine learning suggestions.

    • This issue can be particular obvious to the user if their connection/device is slow in receiving/processing additional updates.

UX Issue

Let’s walk through two particularly egregious examples:

  • LinkedIn - People You May Know

    • LinkedIn has a feature called People You May Know, which you can find at or by clicking on the My Network tab at the top of the screen.

    • The issue here is that if the user clicks connect on Person C, every person element after that will switch positions. For example, if I click Connect on Person C, Person D will move to Person C’s location, while Person E will move to Person D’s prior location.

    • This is problematic for two reasons:

      • First - As a user, I’d prefer a longer indication that my click on Connect actually did something aside from a popup notification in the lower left corner that disappears after several seconds.

      • Second - If I so desired to connect right after that with Person E, it requires me to remember their photo or their name, instead of just the position of the tile on the page.

        • This is particularly acute in this situation because Person E may be someone I just met or might easily forget the name of, and given that the goal of this tool is to connect me to people that I might know, the design is totally opposed to the actual goal of the product.

        • In addition, this example is constrained to 5 people for simplicity. On the actual website, a user might be presented with several dozen individuals at a time due to the dynamic addition of tiles as the user scrolls down, adding to the already cognitive burden of the feature.

People You May Know (PYMK) Upon Page Load

PYMK Tiles Movement Upon Clicking Person C

PYMK Tiles After Clicking Person C

  • Android - Content Sharing Chooser

    • This example is based on Android Pie Version 9 October 5th, 2018 Update on a Pixel 2.

    • As Google incorporates additional AI/ML into their various pieces of technology, one of the primary objectives is to surface the most relevant content to the user at the most relevant moment.

    • While this is an admirable goal, it can also create interface situations where the user needs to possess an exceptional memory to achieve their objective.

    • The image on the left is the Android Chooser, Android’s standard interface for sharing a piece of content throughout the operating system. It is also what appears the 1st time that I click to share the current site I am currently visiting in Chrome.

      • Side Note - Having a system wide chooser is actually a fantastic UX choice as it minimizes the chance that each individual application will hijack the sharing experience for very little UX gain.

    • The image on the right is the same Android Chooser, except it is the Chooser that appears 5 seconds later when I tapped “Share” one more time. I promise this isn’t a spot the differences game, so let’s run through what has changed:

      • You’ll notice that there are over 11 element shifts, where the position of elements has changed.

      • You’ll also notice that there is one element addition (Save to Drive) and one element subtraction (Yelp Friends).

      • In both scenarios, the top row of icons only appears after several seconds of the bottom 3 rows being visible, which is another moving element to add to the list.

    • The significant movement of elements in this example eliminates any chance the user might have of memorizing the physical positioning of the option they want to select.

    • It requires the user to review each option, in full, each time this screen is generated.

      • To put this in perspective, imagine if the same scenario occurred for your smartphone homescreen and ~75% of the app icon locations were randomized each time.

      • If that sounds like a nightmare from a UX standpoint, why is it acceptable here?

Android Chooser - Time (T) = 0, 1st Open

Chooser - T+5 Seconds, 2nd Open, 11 Elements Shifted out of 16

Potential Remedy

  • The potential remedy here is simple - don’t have dynamically refreshed and moving elements that require significant cognitive effort on the part of the user.

  • This can get more complicated and interesting when AI/ML are involved and can conceivably make recommendations that they believe to be more relevant than the current set.

    • The balance of recommending the best option to the user versus the most consistent option to the user should at least be considered, as it might provide a better UX overall.

  • In general, dynamically moving elements without a page refresh, or without some notification to the user that the content should change, are very difficult to pull off because they require the user to remember too much about the application state.

Google Chrome Folder Choice Relevancy When Adding Bookmarks [Good UX]

Product Background

  • Google Chrome is the leading internet browser by market share and just like every internet browser, allows a user to save their favorite sites as bookmarks, but it does so in a unique way.

UX Experience

  • A common, albeit not default use case, is when a user has just created a folder with the intent to add one or a number of bookmarks to it immediately after creating a that folder.

    • This use case makes intuitive sense - users are typically either creating folders in a browser bookmark manager to either organize previously created bookmarks/folders or add open bookmarks to this newly created folder.

  • This use flow is made easier to accomplish by sorting folders by most recent when a user bookmarks a link from the url bar.

  • As can be seen in my test case below, I’ve created 3 folders, with #3 being the most recently created folder, and those folders show up in chronological order, in addition to Movies and Investing which were the other most recently accessed folders.

    • The chooser also allows the user to add to the Bookmarks Bar (The default behavior in fact and likely the correct default for most users) or Other Bookmarks (I.E. -> Not on the Bookmarks Bar, also likely the correct default for most users).

  • Compare Google Chrome’s behavior to Apple’s Safari Browser below, where I have created the same 3 dummy folders, but when I go to bookmark HackerNews, the default is the Favorites folder overall (again likely the correct choice for most users), but in the dropdown folder chooser, the folders show up in reverse chronological order (likely the incorrect choice for most users).

  • Safari’s behavior becomes even sillier if you have a high number of folders, as can be seen in image #3. Google Chrome’s “Choose Another Folder” option is a much better experience.

Dueling Emotional Nudges Inside Firefox [Good UX]

Product Background

  • Firefox is typically either the second or third place browser in a given market, but their latest version is beginning to make a comeback due to privacy concerns in Chrome and speed improvements in Firefox itself.

UX Experience

  • I was playing around with Firefox after the recent Chrome / Google auto-sign in debacle to see how the product had improved. It has improved, but not yet to the extent that I would switch from Chrome.

  • The two small design touches I found nice were the emoticons that were contextually appropriate depending on Firefox’s status in the browser hierarchy on my computer.

  • Firefox was happy as long as it was up to date, I’d assume that this would change to a frowny face if it became out of date.

  • Firefox was unhappy that it wasn’t my default browser, again, I’d assume this changes to a happy face if you make it the default.

  • This is an interesting technique - similar in a sense to using red badges to influence users to “take care of the task” to make the badge go away. Here Firefox is using emoticons to add that little additional nudge to influence user behavior.

Screen Shot 2018-09-29 at 11.39.25 PM.png
Screen Shot 2018-09-29 at 11.39.31 PM.png

Instacart Substitutes Apples for Oranges [Bad UX]

Product Background

Instacart is an online grocery delivery service - users can select the products they want at multiple stores or a single store and have them delivered at their home on a per order fee or annual membership fee.

UX Issue

  • Instacart operates in an environment where they don’t control or know definitively the amount of inventory a store has on hand at any given time.

  • As a result of their operational environment, in addition to the drive to maximize basket size and customer satisfaction, they will attempt to substitute an equivalent good if the item a user requests is out of stock.

  • Instacart’s ability to suggest alternatives has gotten progressively better as the number of orders on the platform has increased and as what is presumably their machine learning technology has gotten better at identifying substitute goods.

  • However, there are still some edge cases where the machine learning algorithms can produce a poor result.

  • In the below screenshot, I was recently attempting to order Yellow Onions, 5 of them at $0.79 per pound for an approximate amount of $.19 per onion, for a total of $.95.

  • Instacart suggested a substitute of a 3lb back of onions for $3.99 - seems reasonable right?

  • The problem is that the algorithm didn’t adjust the quantity, leaving my substitute as 5 * 3lb Onions, which would be 15 pounds of onions, totaling ~$20.

  • The substitute here is significantly different than what I originally ordered, and had I not been paying attention, I would have ended up with far too many onions!

Potential Remedy

  • The quick remedy here is to check whether the quantity in pounds matches the quantity of the substitution.

  • Another heuristic for this would be to check the overall price of the order by multiplying quantity order * price. If the difference is significant, that is probably a poor substitution regardless if the weights/item specifics match.