iOS: Show Users the Reason You Require Their Location

Update: iOS 6 deprecated the purpose property and it now has to be set in your Info.plist with the key NSLocationUsageDescription which is displayed in Xcode as Privacy – Location Usage Description. If you’re still supporting iOS 5 and earlier make sure you include both.

A great, but underused location feature on iOS is the purpose property of the CLLocationManager.

So many apps ask for your location – give your users confidence in sharing their location by telling them why you need it!

Example:

locationManager.purpose = @"We'll only use your location to show you local events nearby.";

You need to do this before you start the location monitoring, so:

CLLocationManager *locationManager = [[CLLocationManager alloc] init];
locationManager.purpose = @"We'll only use your location to show you local events nearby.";
locationManager.delegate = self;
[locationManager startUpdatingLocation];

Your users will now get a pleasant reason when you request their permission:
iOS iPhone Screen Location Prompt

I’ve no idea why this is so rarely used, it’s been available since iOS 3.2.

Tip from the Apple docs:

You must set the value of this property prior to starting any location services. Because the string is ultimately displayed to the user, you should always load it from a localized strings file.

Things That Give Me Usability Cramps – Web Forms

Usability Cramps

[yoo-zuh-bill-ity kramps]

  1. n. are unpleasant, often painful sensations caused by unbearable unusable user experience mistakes
  2. v. usability cramping, usability cramped, why the hell did they do this?

Form Labels That Don’t Select the Fields

This one mega-stresses me out; when the text label next to checkbox or a label doesn’t select it when you click it:

Bad Form Field:

To fix this, just give the input field an ID, and the label a for=’inputID’:


This is particularly annoying when there’s lots of checkboxes or really small radio buttons.

tip: add the following CSS to force the browser to show a pointer on clickable labels and buttons:

label, input[type="button"], input[type="submit"] {  cursor: pointer; }

Mobile Sites That Don’t Use the Right HTML(5) Input Types

If you use the correct types for your inputs then touchscreen devices adapt the keyboard to fit the need, and browsers can adjust the UI accordingly.




iOS Screenshot of email keyboard

Using input type='email' brings up an email specific keyboard on iOS

Browsers that don’t understand these new input types default to text, so you’ve got nothing to lose.

Forms That Need to Reload to Validate

It’s so easy to check your forms with a bit of JavaScript, instead of having to refresh the whole page; and generally require any password or captcha fields to be re-enter.

Oh, and if you have a username field, check it’s available before I click submit:

Twitter showing a username's available

Twitter Signup

I’m purposely not linking to any validation scripts; there’s not a universal drop in one I’d want to recommend, however, keep an eye on the native browser support for validation.

Designing For TV – Google TV

Google:

There are several noteworthy changes:

  • The sizes of all the fonts and buttons were increased
  • The “selected” item or item with the mouse over it is clearly highlighted
  • The user can navigate intuitively around the page using D-pad up/down/left/right motions
  • Additional padding has been added between all elements on the page
  • Darker or slightly muted colors have been chosen to suit TVs that are generally tuned to be brighter

More on Google’s Designing / tweaking your website for TV guide.

Youtube on Macbook on the Big Screen

Youtube on Macbook on the Big Screen

Unicorn – W3C Universal Validator

Unicorn – Universal Website Validator is a nice new validator tool from the W3C that runs their suite of tests on your site, checking for accessibility and standards compliance.

Try it out for this site! – lots of CSS errors due to my use of vendor specific prefixes, which I personally think, used with caution, should be let through.

Also try out the Mobile Conformance option for an overview of how well your site conforms to mobile device best practices.