Petting iOS The Wrong Way

App Store Hooligans

Like any other self-respecting mobile platform, iOS has it’s share of voluminous user experience best practices and guidance. Unfortunately, in our increasingly cross-platform world, many of the top applications have chosen to outright ignore and even *gasp* violate these rules.

The reasons for doing this are many. Some people just think they know better and feel the rules don’t apply to them. Some  are in outright competition with Apple and desire to promote their own design languages. Others wish to provide uniform web and Android user experiences and thus are led to mix and match styles between those platforms to arrive at some happy medium. Other just don’t know and don’t care!

The following are a list of common iOS UX crimes, their consequences and the underlying reasons for committing them. To be completely honest, there are sometimes good reasons for “breaking the rules” or “making up new rules” and I think that the market has shown end-users welcome apps which do things in a nice way. Other times, breaking the rules results in unforgivable UX infractions!

User Experience Crime #1: UIPopoverController Shenanigans

Description: Apple is quite clear: Don’t use UIPopoverControllers on the iPhone. But for some nefarious reason, everyone and their uncle has an overwhelming desire to do this…

Apple Says: “Popover controllers are for use exclusively on iPad devices”

Work Arounds: Using an open-source Popover hack-around control such as WEPopover or SGPopoverController

Offender Line-Up: Ness, Facebook

Why do they do it?

The traditional iOS workflow in these situations would be to open a “modal dialog” where the user might perform some action and then return to the originating context. The problem with the provided iOS modal dialogs (apparently) is that the user is completely removed from the context where they were in the middle of “doing something” and taken to some other screen. In short, it is a bit “much.”

It simply feels better to allow the user to remain where they were in place, make a tweak and then jump back to the screen they were just looking at. The transparent overlay helps preserve the illusion of not having gone anywhere. The only other options are hideous blue bezeled alert boxes and action-sheets, neither of which are terribly flexible for putting in things like table-views.

The other reason you might want to do this is that if you introduce UIPopoverController in a universal version of your iPhone application, you are now going to have to modify the code for the view controllers to make use of UIPopoverController. It may be easier to simply avoid this problem entirely by using a custom popover class between both iPhone and iPad form factors.

User Experience Crime #2: Hamburgers and Basements

Description: Many developers wind up with way more options for the end user than Apple may have ever imagined. When they start running out of space, they need a place to stash all these options just to get them out of the way. The solution? A slide out menu that has a whole bunch of assorted stuff in it with a little icon that looks like a hamburger!

Apple Says: “Push a TableView on the navigation stack or, if you need more room for options, put them into a ‘more…’ button in a tab bar”

Work Around: Open Source work arounds like PKRevealController

Offender Line-Up: Facebook, YouTube, Pirq, Ness, LinkedIn, everyone. No seriously, everyone does this.

Why do they do it?

Well, first of all, it kind of looks cool to have this need slide over animation. It also feels good to be able to slide the menu back and forth with your finger on demand rather than hit some button and wait for the animation to occur. Additionally, like the UIPopoverController, this type of slide out menu preserves the context for the user so they know exactly where they are when they opened the menu. It is a sort of visual breadcrumb back to the originating view so they always have a sense that they can pop back to where they came from.

The other reason why this pattern seems to be used frequently is that, quite simply, many applications simply run out of places to put things and iOS has not provided a great answer to the question of “where do I hide 20 different app options?” Apple never meant apps to be as comprehensive as Facebook’s iPhone app…which might have dozens of items available given the number of apps or pages a user might be using. Is this a great solution? It’s debatable, but it has become so prevalent that it now amounts to a standard practice.

The one possibly relevant control Apple has is a UITabBar with a “more…” button. However, sticking 30 options into a “more…” button on the tab bar is truthfully not much better than the Hamburger Basement pattern.

Side note: In the current version of iTunes, Apple uses something awfully similar to a  hamburger button and used it to mean “open a popover controller with some options relating to the thing you are viewing.”

User Experience Crime #3: Tiny Buttons!

Description: Some designers think that having tiny, impossible to use, buttons at the expense of the end user (and to the benefit of their fancy design) is a great idea!

Apple Says: “Buttons should be at least 44×44 pixels wide and tall.”

Work Around: There is no work around, its a bad idea generally.

Offender Line-Up: Google Maps’s tiny little slender “options pull out” slider tab

Why do they do it?

Well…as nearly as I can think, someone at Google wanted to have this cool slide-out menu thing and didn’t want to compromise their wonderful design with an unsightly button which a normal human is capable of touching. So instead, they introduced the concept of a little “3-dot sliver” thing. While I do not personally have long finger nails, I wonder seriously if most women can realistically interact with that button stub.

User Experience Crime #5: In-Place Horizontal Flippy Animations

Description: Sometimes you want to completely change the view you are looking at without altering any of the menu options and navigation buttons around it. This is where the “in-place flippy thing” animation comes into play…just flip that view over and reveal another view on the other side!

Apple Says: “….” Ok fine, it’s not really a crime (more of a trick really) and it’s kind of cool and useful. Perhaps Apple could learn from these guys.

Offender Line-Up: Foodspotting, Yelp

Why do they do it?

This user design trick allows the user to swap back and forth between two child view controllers while maintaining the surrounding workflow. This actually fails to break any of Apple’s guidelines (that I am aware of), in truth, it is really just a specialized form of view containment which is custom built to work in contexts where the user needs multiple views of the same data and all of the other slots on the tab and navigation bar don’t really make sense. I like it and think its a good thing for some apps.

User Experience Crime #6: Using Web Paradigms In iOS

Description: This is the biggest design crime next to making buttons too small to touch. Fortunately, most apps manage to maintain a nice native look and feel…but there are a few (exceptionally naughty) apps out there which make this cringe-inducing indiscretion.

Apple Says: “Reconsider Web Based Designs…You need to make sure that you give people an iOS app experience, not a web experience“

Offender Line-Up: TripAdvisor (there are probably others)

Why do they do it?

 Well, if you are using PhoneGap or some other cross-platform HTML5, web-view based mobile experience…it is easy to fall into this trap because it is likely that you are simply more comfortable with the web, know the web and that is probably why you chose it as the platform for your mobile application. Perhaps your web designers think this whole mobile fad will blow over, and if they just keep designing for the web, eventually everyone will forget about it and go back to their desktop computers.

As you can see, TripAdvisor sports web-like tab navigation, web-like  underlined text links (definitely not 44×44 pixel sized), web disclaimers at the bottom of it’s scroll lists and worst of all…it *feels* like a web app. Pages blink into appearance when you touch them…they don’t slide over gracefully like a normal iOS navigation bar push. Everything just takes a little too long when you touch a given button. Thats not to say TripAdvisor doesn’t have a great product…its just that I wish they had a *native* app given the size and sophistication of their business. It would feel better all around for their end users.

The post Petting iOS The Wrong Way appeared first on Rex St John.