Kayak: Swap fields

https://www.kayak.com/

A guide to flow charts, in flow chart form

Word 2016 for Mac

When first launching Word 2016 for Mac, this screen appears

None of the icons were clickable.

Everyday I'm Bufferin

Uber app - Allow Access

When setting up the Uber app for the first time they give you a heads up about the benefits of allowing notifications.

https://www.uber.com/ride/

Planner app - Onboarding

These are screen grabs from Planner app. 

Screen 1


Screen 2


Screen 3


When I tapped the "Get started" button on the previous screen, the allow access pop-over appeared. 


When I tapped allow, this is what I saw. 


This flow of Allow Access pop-over can be startling since they have not expressed any benefits of allowing notifications. 

https://itunes.apple.com/app/id1219301037?mt=8

Tim Hortons - Allow Access

When first setting up the Tim Horton's app they trigger a branded pop-over:

When I tapped "Allow" that triggered the system's allow access pop-over to appear. 

This approach is good since it eases the user into allowing access. 

I am curious to know what would have happened if I clicked "Don't Allow" on the branded pop-over, maybe they would ask me later. 

https://timhortonsapp.com/ 

Waze App - Taking HOV lane or toll road?

When I opened the Waze app this pop-over appeared.

When I tapped the "Add pass" button I was directed to this screen.

I know they want to promote a new feature to everyone, but shouldn't they know if I travel along HOV and toll roads from my route history? 

Kudos to them however for showing the Local passes right away and then hiding the other, probably less used, passes under a button. 

https://www.waze.com/ 

Virgin Pulse app - Allow Access

This series of screen grabs are from part of the onboarding flow for Virgin Pulse.






This is my favorite part. They provide a nice message to let the user know the benefits of connecting their phone to the service. By providing the Connect button it lets the user know there is about to be a pop-up.






This pop-up appeared after I tapped the Yes, Please! button

Google maps - Mario Kart

Apparently, it was Mario Day on March 10th.

Here is a screen recording (1:03)

MS Flow: Get Started (and agree to terms) button

When logging in to MS Flow for the first time you must select your country.
Then when you click Get Started button you are also agreeing to the terms.

They let you know that they will send you promotions and that you can unsubscribe at any time.
They conveniently place this message in small type, and far from the button.
It would seem they are balancing business goals and user goals very well.

OneNote: Welcome Pop-over

When I first launched OneNote online, this Welcome pop-over appeared. 

Office 365: Feature Overview

This feature overview pop-over appeared when I first signed into Office 365. 









On the last step the right carousel control used to be an arrow, now it is a checkmark to indicate the tour is complete. 

Tim Hortons: Location request heads up

The Tim Horton's app, when first launching included a branded location request pop-over that eased me into saying yet to the iOS location request pop-over. 

Paypal app - Onboarding

When Paypal app is first launched, these screens are displayed:

Screen 1

Screen 2

Screen 3

(Sorry, I can't find Screen 4)

https://www.paypal.com/us/webapps/mpp/home 

Windows - Format, Are you sure?

Button label should be... 
OK = Format and erase all data

Apple Emoji: Gun becomes Squirt Gun

Google Photos: Blank State

When the Trash is viewed and it is empty, this cute illustration is displayed. 

https://photos.google.com

Batteries Plus: Confirmation Page

I ordered a battery online at Batteries Plus. 
When the order was complete, this was the order confirmation page. 



The message included several great bits of information. 

They covered all their bases by displaying information here and emailing the same exact information to me. 

1. The obligatory "Thank you" 
2. Order confirmation emailed to me, and a promise to email me again when the order is ready!
3. Order number, and a link to view my order!
4. A notice that items in my order may qualify for rebates, and then a link to the rebate center!
5. A reminder to bring in my old battery, and a reason why - to avoid additional charges!

This is one of the best confirmation messages that I have ever seen. 

https://www.batteriesplus.com/ 

Puppet Button

While using Optimal Workshop, this tooltip appeared when the Save button was clicked. 



The message said: "In all honesty, this button is just here to make you feel good. Everything will be autosaved as you go." 

I have to say, I love the tone of voice. 

As for the puppet button: I love that too. people have been trained over the years that software is fallible and if you don't click save on a regular basis you are gambling with your time and effort. 

So although the amazing autosave feature has become so common on web document services it still causes anxiety with users. I am sure their customer support team would get questions, and so they decided to include a button - a puppet button. 

https://www.optimalworkshop.com

Pocket Extension

Since I had the Pocket extension enabled on Chrome, the top stories would appear beneath my search field.


When I clicked to save one of the articles to Pocket this pop-over appeared.
The message explained that Pocket had a new extension.
Since I was a fan of their app, I figured I would explore, so I clicked "Add to Chrome"

The page reloaded and the Google logo was no longer above the Search field. Although the placeholder text still said "Search Google or Type URL" it felt like it was too far different from what I was used to seeing. I had to disable the extension.


When I clicked "Turn on top sites" the row of my most visited sites appeared.

Thank you page

This subtle checkmark animation on the Thank You page was nice. 

Panera Bread: Error Message

This web page is for building your sandwich order. 

The "Your Selections" section is done very well by indicating the items that will be included and those that will not. 

The special instructions field caused an error message that was not in plain language. 

Help users recognize, diagnose, and recover from errorsError messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

https://www.nngroup.com/articles/ten-usability-heuristics/

Error Message: Server Execution Fail

This error message includes a nonsense string of information. 

Help users recognize, diagnose, and recover from errorsError messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

https://www.nngroup.com/articles/ten-usability-heuristics/

Press the ESC key to cancel this operation

This pop-up says, "Press the ESC key to cancel this operation." and then the button says "Cancel" 


Does the button neutralize the command or execute it? 


When I clicked the Cancel button this was the result. 


*Facepalm*

Perspective: Circle or Square

Consider that your perspective might not be everything. 

Ambigram: Good or Evil

Which do you see first?

Probably Evil. 
The reason is that the eye is typically drawn toward the object instead of the field. 
If the image were inverted you are likely to see Good first. 

Creative Constraints

In the usability book, Don't Make Me Think by Steve Krug, he talks about how constraints actually help creativity. (Ch 10, p145)

I wonder if this is what he meant. LOL.

New Experience, or old?

How can we improve?