A Study in Good UX and Developer UX with FourSquare
I love being the mayor, of everywhere I go. I crave check-in points for places I have never been and it puts a smile on my face when I get those extra points for checking in the third time in a week. I do FourSquare, everyday. Even when I don't leave the house except for a walk, I check-in outside. I use FourSquare more than any other application on my phone(s), so I think I can claim area expertise when it comes to which mobile client is the best. Of course that is the official Windows Phone FourSquare application.
First its beautiful, something none of the other apps I have tried can claim. The background is pleasing and provides a great extension of the brand. The typography is rich and bold as all Metro UI applications should. But beyond being pretty it is functionally superior. It gives me access to what I need as soon as I launch, something none of the other applications can claim.
I consider the official Windows Phone FourSquare application a prime example of how to do Metro UI right. It utilizes a beautiful, relevant background while putting the most important information right in front of you as quickly as possible. Not only is it a piece of art it exemplifies excellent information architecture. The user is greeted with a list of 8 tiles with what should be the most relevant location based on the user's location and check-in history. Rarely do I find myself touching the more link in the bottom right corner of the home page tiles.
FourSquare Home Windows Phone
The tiles themselves are a rich input metaphor. One of the most important aspects of the Metro UI is putting data first, making it actionable. Each FourSquare tile reflects the location name as well as the type of location it is, for example a school or dining icon. Additionally it also displays the number of fellow FourSquarians currently checked in that location.
Finally, and this is the one I like the best, if the location is running a special there is a nice bright orange indicator letting me know. I have gotten many freebies and discounts because of the FourSquare specials, several times simply because I saw the special in the app.
Understanding the End User
My absolute favorite feature in the official Windows Phone FourSquare application is the ability to check-in with 2 screen touches! Once the list of locations displays on the screen I simply tap and hold the location I want to check-in and an overlay displays with the option to 'fast check-in'. This feature rocks and would make this app my FourSquare client of choice even if it were not so beautiful.
FourSquare Fast Check-In
As a web developer I have learned many times over it is important to make the user successful as quickly as possible. More than likely when a user launches a FourSquare client they want to check-in, period. Get in, get out as quickly as possible. Making this as friction free as possible cannot be underestimated. Amazon has pioneered the 1-Click shopping experience because they know it radically increases sales. If I could only do this at the grocery store, how much time do we waste standing in line!
All other FourSquare app experiences make you go through several steps to check-in. I found it funny at the past MVP Summit how much faster I could check-in than my friends. Several tried to beat me to it, but I was already there before they even had a chance to find the location. Of course I think I am missing out on some points by being the first, at least that is what I am told. Since I can check-in so easily I may never know.
FourSquare Windows Phone Check-In View
Before I go on I want to make sure this point is understood. When you architect any application you must understand how the end-user is going to use it. Context and intent are extremely important, make the user happy as quickly as possible. I often cite the ESPN mobile site during my presentations because they understand this. They do a good job of placing the most important scores or story in the user's initial view. This morning they are talking about the New York Rangers return to the Stanley Cup finals. This afternoon they will most likely cover the Sixers-Celtics game 7 and major league baseball scores. Which is what most mobile users want, the latest scores.
This Morning’s ESPN Mobile Home Screen
Understanding what a user is looking for is one of the most important challenges when building any application. This is amplified in when it comes to creating a smart phone client because users are typically on the go and have an in and out mentality with most applications. So follow the FourSquare example and make your user's successful in the least amount of steps.
This is going to get me into trouble I know, but hey honesty is the best policy. I have 4 phones on 3 platforms (Windows Phone, iPhone and Android) and have FourSquare clients on all the devices. On Windows Phone I also have 4th and Mayor, which is constantly recommended by my fellow MVPs. It is an application created and maintained by Jeff Wilcox. 4th and Mayor boasts 60,000 daily users and is updated regularly. Every now and then I go back and try it out, but because it puts the wrong information font and center and has 4 step process to check-in I just can't make it my go to client.
4th & Mayor Windows Phone App
I think Jeff may have modeled 4th and Mayor too much after the FourSquare application as it list where my friends are rather than the places near me to check-in on the home screen. Its nice to know where everyone is, when I am at a conference for example. But those occasions are few and far between. I plan on attending TechEd in a few weeks, and that will be the first time since the MVP Summit where enough of my friends are dispersed near me to make that feature a priority.
FourSquare iPhone App
In fact unless you select the check-in icon in the 4th and Mayor app bar you will not even have a chance to check-in. The same holds true for the iPhone client. The iPhone client does make the check-in toolbar button more prominent than its siblings, which helps.
FourSquare Android App
The Android client does not utilize a toolbar, instead the check-in button is located in the screen's top-right corner. This is a smart phone usability faux-pas because you are making the user work a little harder to touch it. Usability studies show it is better to place actionable items within a user's thumb arc. The typical user holds the phone in the palm of their hand and uses the dexterity of their thumb to touch items on the screen. For me, at least, I hold the phone in my left hand more often than my right, which makes that check-in button a big stretch to hit. It is better in my right-hand, but the toolbar menu is much better as it accommodates both hands.
The official FourSquare client is one of the best examples of not only doing Metro UI design right on the smart phone, but also in effective user experience architecture. Maybe it should be, Microsoft did pay at least $60,000 to have the app built. Other clients are decent, but miss on several usability features. When creating any modern application you should strive to make the application visually appealing as well as making the user successful quickly. Combining these principles with a passion for performance should give you a wining combination.