Purchase funnel - Dave Ramsey

This purchase funnel, for Financial Peace University on DaveRamsey.com, was well designed. 

After searching for a class location this page appears. 

Clicking the Register & Purchase button at the middle right takes you to this screen.

A green check mark appears when the field has valid input. 

A red X appears when the field input is invalid. 

Upon clicking a Place Order button, most sites take you to a white screen, sometimes without a message and it causes the user to gasp. 

Here, when the Place Order button was clicked the page remains and a message appears in place of the button, "Processing, please wait..." along with a spin-wheel. 

This was a great transition.

The final screen has messaging that cuts into the banner. This visual design decision is excellent. It disrupts the users banner blindness and cues them to read the information.  

Elevator Button Panels

There are 6 elevators at my office building. They have different button layouts.

Elevator #1-4

Elevator #5
Additional: C and 1 

Elevator #6
Additional: DH

 

Get Audi here!

Announcing the 2015 Audi Air Jordan

iTunes: Pump the jam

When quitting the iTunes desktop application it remembers the location of the volume slider. If the volume is currently turned all the way down when a user quits, then when the application launches this window appears:

The message: 'The iTunes volume is currently is turned all the way down. To change the volume, drag the slider at the top of the iTunes window.' 

Where do I drag it?

Angry Birds, Go Karts and Car Insurance

Angry Birds has deployed another addicting game, Angry Birds Go! They are very strategic about getting me to come back for my daily hit - I mean reward. 

Soon, the app included sponsored boosts from State Farm. During a race, as my kart was damaged, the State Farm performs a medic type action and revitalizes the kart. 

 

It is a pretty handy feature and it aligns with the brand message of fixing my car when broken.

The typical flow of choosing a race is a loading screen with a promo banner. Usually it is a Rovio ad of some kind. This time it was an interactive promo banner appears.

I could change the paint job of the illustration (note: it doesn't change your actual kart) and the caption reads:  "Round the curves in a custom ride! At State Farm®, 

we provide drivers with coverage as unique as they are."

I knew from previous experience with the app that the orange button in the lower right corner would take me to the race. So, I tapped the 'Learn More' in the lower right of the banner. This is what appeared:

Usability, all good. 

As a marketer, I was let down. The landing page was not a themed. At the very least the message should have been consistent with the call to action from the promo banner. 

Contact Sheet Fail

I was using Adobe Bridge to generate a 4x5 Contact Sheet of 160 images. This message appeared. 

Apparently it processed the contact sheet successfully with image that ARE supported. Yet I am left to wonder which images WERE NOT supported. Some. Since it did not indicate which files were not supported, nor which file types are supported, I had to manually reconcile the output.

Please indicate, of the selected files, which were not supported image files.

GasBuddy iOS app - User Interface Tour

The instructional overlay appears every time I open the app. Fortunately it closes by tapping anywhere on the screen. I wonder why they used a bracket to call out the function of two buttons. 

The 'By Price' feature is slightly confusing. At first I thought perhaps a drop-up window would appear. Rather it caused the list to change order so my first assumption was that it sorted the list from least to most expensive. That theory was upended when I noticed the label changed to 'By Distance.'

At this point I was annoyed. I couldn't determine if the label represented the list or that it indicated the list I would see if tapped. Since then I noticed the list is now titled to clear up the confusion of the toggle. 

No critical usability errors here, and in the end you can scope out how much you're about to pay and how cheap gas is on the other side of town. Get your GasBuddy app here: http://www.gasbuddy.com/GasBuddyMobileApps.aspx

Camtasia > Connect Mobile Device

This window appeared after launching Camtasia. The window did not contain any options for immediate action. The content instructed me to navigate to 'File > Connect Mobile Device' 

I expected animation or a web browser to launch if I clicked the Google Drive logo. My only option was to read the content and then click the [x] in the upper right corner. 

This window appeared as a result of clicking File > Connect Mobile Device

I appreciate that they included links to the app stores and a video tutorial. The QR code was a nice nod to tech savvy users. However, why wasn't all this wonderful access offered during the initial pop-up window?

Tangent: until the smartphone's native camera app contains a QR reader option I figure the typing a google search is comparable to fiddling with a QR reader app. 

Bible Gateway - User Interface Tour

https://www.biblegateway.com/

LinkedIn - Who's viewed your profile - User interface tour

www.linkedin.com

Map My Ride app - User interface tour

http://www.mapmyride.com/app/

Pinterest - iOS app - User interface tour

https://www.pinterest.com/

Click here for tour of Desktop version

Sign at cross walk

Signs were installed at Chestnut Avenue and High Street for the cross walk. 

The funny: The sign includes a hand pushing a button. Either the hand is of normal sized person and the button is miniature or the button is of normal size and the hand is of a gargantuan being.

Chestnut: I am impressed that with the advent of digital printing the project team decided to take on the variable of including the name of the street on each sign. This is a great way to dispel confusion about which button should be pushed. 

Problem: The PUSH BUTTON hand, regardless of proportion, is similar to the gesture someone would give when indicating a direction (i.e., push the button to cross this street.) 

The problem occurs when you look closely at the button, which has an arrow. So when you are at one side of the street it will agree with the hand. However on the other side of the street, it is conflicting.

UPDATE 6/29:

The signs were removed and all that stands is the pole and button with arrow. I'm excited to see what's to come. 

UPDATE 9/9/2014:

New signs were installed. 

I still like the digital printing to indicate which street this button will afford me to cross. However the audible signal would mostly benefit those with low or no vision, right? The folks who would be unable to see (or read) the sign in the first place. Keep in mind there is no brail on this sign. 

NNG Writes about usability tours

http://www.nngroup.com/articles/mobile-instructional-overlay/

Instructional Overlays and Coach Marks for Mobile Apps

by AURORA BEDFORD on February 16, 2014

Topics: 

• Applications
 
• Mobile & Tablet
 
• Visual Design

Summary: Instructions in mobile applications must be designed for optimal scannability, as users tend to dismiss them quickly and do not read thoroughly.

Almost every app on the market today has some sort of coach mark (a transparent overlay of UI hints) or tutorial shown on the first launch. While the presence of such instructional screens is often unnecessary, there are times when it is helpful to the user to get a nudge in the right direction. If you have decided to include a coach mark or some other form of hints and tips to explain a unique feature of your app, follow these guidelines to increase your odds of the tip being seen as helpful, and not as a hurdle to jump past.

http://www.nngroup.com/articles/mobile-instructional-overlay/

Welcome: Evernote iOS app

The following images are screen shots of the Evernote iOS app.



Tap on Get Started leads to this page:

The prompt allows for a single page for all users to sign in / create account. This is helpful for those users who cannot recall if they have an account and enter their email address. However if you have an account via a Username i

Red hexagon = Stop?

Bellow Folds Below the Fold

When replying to an email the original email is collapsed into bellow folds to indicate content is being hidden. Tapping the feature expands the page to reveal the content. This was very intuitive feature. 

I did not observe a method to collapse the quoted content, perhaps a few pinch motions akin to playing an accordion?

Dropbox iOS app: Welcome

When the Dropbox i0S app is first opened this screen appears.


The start button is located in the upper right corner, yet their is a message at the bottom of the page. 

Recommendation: Place a Start button near the bottom of the screen, below the message so the user does not have to read the message then look to the top of the screen for the next action option. The Start button leads to this page.

I wonder why they decided to use Title Case for the labels. It is not wrong, just makes for a strange amount of importance for the word Already.

Pop-over: Cannot Open Page

During a phone call, you cannot surf the web, and this is the message that appears when you try.

Cannot Open PageSafari cannot open the page.
The error was: "A data connection cannot be established since a call is currently active.".

Note: The punctuation is correct, there is a period inside and outside of the final quotation mark.  

Recommendation: Include another button that allows the user to end call or allows the user to switch to the phone app.