Feelin' Fine

Why User Experience is Important

Recently, Mark Wadham dumped his iPhone 4 in favour of an Android-based phone, the HTC Desire S and wrote a blog post about his switching experience.

Overall, he really seems to like his new phone, but he also lists a number of shortcomings compared to the iPhone. I noticed that one particular complaint stood out amongst the others, and Mark tried to play it down a little:

While certainly not bad, the UI clearly wasnt designed by the UX experts at Apple and I spotted a number of irritating inconsistencies and unintuitive aspects of the ui.

Its hard to gauge just how much of this is simply me being used to iOS, but there is definitely some room for improvement of the user experience. I think if the UX guys at work tried this phone they would find it quite irritating to use.

To disable [haptic keyboard feedback] I had to turn off two settings in completely different parts of the menu. yeah, people into UX shouldnt get this phone

Its not as fun to use as an iPhone, and if youre a real UX freak you should probably stick with the iPhone at least for now

Despite the lesser UI experience, I actually like Android, mostly because of the freedom.

[The Android phone is] missing the cleanness of the user experience, consistency in the user interface []

Overlooking the irony that Mark switched to Android because it's more "open" than iOS, he apparently thinks only "UX freaks" would care about the user experience, which couldn't be more wrong. We are all users, which is why we all care about user experience (except maybe for @evilmattgemmell).

Perhaps only a user experience expert can pinpoint what exactly is distracting or imperfect about a device's user experience, but those shortcomings are certainly going to annoy all users. If your device or software (or any other kind of product really) annoys your users, you have utterly failed in designing something worthwhile. A simple "usable" doesn't cut it.

On Going Indie

Today is my last day as an employee at Enough Software and as of tomorrow, I will be independent. Hopefully this means I'll get to spend more time working on iOS and Mac projects of my own, but especially in the early stages of my new-found freedom, I will do a lot of contracting to cover the bills and make enough money to pay for our upcoming wedding (in September) and our honeymoon (January 2012).

Over the years, I got to work on a number of exciting projects (such as S-Banking, which was #1 in the German App Store for quite some time and was even featured in one of Apple's TV commercials in Germany) at Enough Software, and I'll really miss the place and my co-workers. There are a lot of talented and bright people working here (including the best boss in the world), and transitioning from working at an office to working from home won't be easy. I'll also miss downtown Bremen, which is an awesome place to work - everything is so close!

On the other hand, I already have the best co-workers in the world, on Twitter. Fraser Speirs once said that Twitter is like an office for the self-employed, and I couldn't agree more. Before Twitter, it would have been harder for me to take this step. I am pretty certain that I would feel that my fiancé, Maxie, and I were going through this alone and that no-one could possibly relate to what we're doing. With Twitter, I know there are dozens of others who have made the same experience or are doing it right now. When I tweeted about my last day as an employee, I got over 50 people congratulating me and wishing me good luck in my future endeavours in a matter of hours. People were even complaining (jokingly, I hope) that their timeline consisted of nothing but people congratulating me. If this isn't the right place and the right time, what is?

I am really excited about the upcoming changes, but of course, as with any life-altering decisions, I am also a little scared. It might all backfire and I might be looking for a new permanent position in a few months. I am hoping that my skills as an Objective-C developer are sufficient, so this hopefully won't happen. But there are just too many variables in a situation like this and it might not depend solely on my abilities.

I'm already working on a new iPhone app which I'll hopefully be able to tell you more about in a few weeks. I also have just started a contracting gig for a well-known Cocoa developer here in Germany, so my bases for the beginning should be covered. I also have a half-finished update for Folio Case, which needs just a little fine-tuning, localization and beta testing before it's ready to go out. Looks like there won't be a shortage of projects for a while. :-)

In the end, working on my own means that I will enjoy a lot more freedom than I used to have. I will have a say in which projects I will do, and which projects I won't do. If the market stays the way it is, this might mean that I will get to try new things and even have my input on UI and UX valued - which isn't always the case when you're contracting. It means letting go of a steady income, which is something I will have to adjust to, but I am pretty certain that eventually, it will be worth it from a financial perspective - not to mention my personal happiness.

Today is my last day as an employee. Tomorrow, I will be an indie.

Useful iOS Libraries and Classes

Unless you suffer from Not Invented Here Syndrome, you most likely enjoy using open source iOS code that other developers share via github (or other places) as much as I do. Whenever I see a useful new piece of code, be it a whole library or just a simple class, I immediately want to check out how it works and begin to think about how and where I can use it in an actual project. In other cases, I have a particular problem that I need a solution for and I may check to see whether I can find something suitable which already solved that particular problem. Then there's also the case where I develop a solution and open-source it for everyone to use.

Over the past few weeks, I compiled a list of what I think are useful and/or interesting open source iOS libraries/classes, focussing solely on components that provide some sort of drop-in UI and leaving out anything that doesn't require linking against UIKit. If there is enough interest, I may write another blog post on non-UI components in the future.

So, without further ado, here are some components that can be useful in one of your next iOS projects, or which you simply might find interesting to play around with. Some of these are well known, but hopefully you'll find something you didn't know existed.

Three20

Three20 is an open-source Objective-C library, originally developed by Joe Hewitt as part of Facebook Connect for iPhone. Three20 is probably the most well-known 3rd party library for iOS development and is in use in numerous popular iOS apps, such as Facebook, Posterous and Pulse.

The library uses modular design, so developers can choose which parts of the library to use in their own projects, or develop extensions on their own.

Among the things the library offers is a launcher which resembles the standard SpringBoard on Apple's iOS devices. Three20's URL-based navigation all across the app brings with it persistence, to ensure a smooth user experience even if the app was terminated while in the background.

One of the most popular components is the photo viewer, which uses the standard datasource pattern to mimick the user interface of Apple's own Photos app. The message composer emulates Apple's Mail app to send any kind of message and is completely customizable, including autocompletion of recipient names, based on a data source you provide.

There are also a number of clever components to facilitate the use of remote content in your app, such as an image view which takes a URL as a parameter and loads and displays the content by itself and a similar class for a table view. This is useful in a lot of cases and can vastly reduce the amount of glue code a developer has to produce.

Another notable component is the built-in HTTP disk cache, since the default iOS component only uses a RAM cache - and as we all know, RAM is a scarce resource of many iOS devices and its contents will be lost when an app is shut down.

Tapku

Perhaps the second biggest library after Three20, Tapku also emulates a lot of what Apple has built into their apps that come with iOS, but has left out of the Cocoa Touch APIs. A prominent example of this is Coverflow, which Apple uses in the iPod app when in landscape orientation. I've used Tapku in the past for its calendar component, which closely resembles what Apple uses in their Calendar app.

The library comes with an example project, so you can check out each component before you add the code to your app.

InAppSettingsKit

One of the not so strong points of iOS is user-adjustable preferences. The Apple-approved way of dealing with such preferences is to use a settings bundle, which will automatically appear in the Settings app. There are a number of advantages to this approach, such as consistency across application, but it also means that the user has to specifically look out for an entry for your app in Settings in order to make changes - or they have to be told that there is such a possibility, which is plain annoying.

Enter InAppSettingsKit, which allows you to mimic the behaviour and style found in Settings.app inside your own app, based on your settings bundle (although there are customization options). The library provides a uniform experience for your users along with great ease-of-use.

ShareKit

Many people nowadays use social networks as a large part of how they communicate with their friends and relatives, and to find information and entertainment. Users commonly share items they find interesting with their friends on social networking sites, and it can make sense for your app to allow users to easily share things.

This is where ShareKit comes in. It provides an easy method to provide sharing functionality for a number of social networks (such as Facebook, Twitter and Delicious) plus e-mail. The library's design is rather smart, to it will only offer those services which support the type of content the user wants to share, such as URLs, images, text or files. It even works offline out of the box and will persistently store items which can then be send when a connection is available.

Route-Me

Route-Me is an open-source replacement for large parts of MapKit, including support for various map sources. As of now, it supports OpenStreetMap, Microsoft VisualEarth (now Bing Maps) and CloudMade out of the box. There are classes for various other map sources, such as Yahoo!, but those are included only for demonstration purposes and are not intended to be used in an actual application for licensing reasons.

Hockey

Ever since iOS 4.0 introduced over-the-air installing, developers have been finding interesting ways to use it, especially to facilitate distribution of ad-hoc builds, which are commonly used for beta testing purposes.

Hockey uses this approach to really make it easy on users to install new versions of apps they offering code for both PHP5-enabled servers and an iOS component which allows for in-app updates, including support for update notifications.

The client library is optional though, so Hockey can also be used for installing and updating apps from Safari.

MTStatusBarOverlay

In the past few years, we've seen a lot of UI innovation come from 3rd party developers, such as Tweetie's (now Twitter for iPhone) pull to refresh (see EGOTableViewPullRefresh below) and Reeder's status bar overlays that indicate current progress without wasting valuable screen estate.

MTStatusBarOverlay replicates this status bar overlay and makes it easy for developers to implement this kind of behaviour in their own apps, along with extensions such as a detail view that pops out of the status bar.

ARAnnotatedSlider

Written by yours truly for Folio Case, this is more an example of showing how to use Key-Value-Observing (KVO) in order to react to UI changes than a complete 3rd party library, but it should be able to adopt it for usage in your own apps without too much hassle.

This example allows developers to add a callout view to UISliders, thus giving users direct feedback on their actions in the same place where they are currently focusing on anyway.

EGOTableViewPullRefresh

Ever since Loren Brichter came up with the pull-to-refresh mechanism in Tweetie (now Twitter for iPhone), other developers have tried to emulate the behaviour. One such implementation is enormego's EGOTableViewPullRefresh, which comes pretty close to Brichter's original (sans sound effects).

Cross-posted to the Enough Software Company Blog.

Using KVO to annotate UISliders

Annotated UISlider in Folio Case

In Folio Case, I'm using a custom UISlider with annotations to allow users to easily skim through the document and find the page they want. When the user taps the knob, a small bubble shows up that shows the page number that corresponds to the position where the knob currently is. The page number within the bubble is constantly updated as the user drags the knob around. When the user lets go, the app turns to the selected page, the knob snaps in place and the bubble slowly fades out. This approach makes sure that the user gets the information when he/she needs it and it doesn't stand in the way of getting things done.

Ever since Folio Case was released, I've been asked how I achieved this effect, as there is no built-in functionality for this behaviour in UIKit. The short answer is: using KVO (key value observing), I track whether the knob is being touched and moved and react appropriately.

The long answer is, well, longer. If you're not familiar with the concept of KVO, you might want to read Apple's Key Value Observing Programming Guide. In short, Apple describes KVO as "a mechanism that allows objects to be notified of changes to specific properties of other objects". In practical use, this means that I can register as an observer to any property other classes expose, such as a UIView's frame. If I choose to do so, I will be notified whenever the object is being moved within its superview, which causes its frame to change.

Now, in order to track a UISlider's knob movement, we will have to get a little tricky. A UISlider instance, once it is being displayed on the screen, has three subviews, all of which are instances of UIImageView. The third and foremost UIImageView instance contains the UISlider's knob. This might change at any time, so if you're going to use an approach like this in production code, be aware that it might change with the next release of iOS. However, the worst thing that can happen in this case is that the bubble won't be shown anymore.

In ARAnnotatedSliderView, which is my class to manage the UISlider and the bubble that is being conditionally displayed, I have the following method:

kARPageScrubberViewKeypathFrame and kARPageScrubberViewKeypathTracking are simple constant NSStrings, @"frame" and @"tracking", respectively. The first property I want to observe is the knob's frame, to be notified of changes in the knob's positioning. The second property I want to observe is the UISlider's tracking property, to be notified when the user starts tracking the knob with his/her finger and when they stop, so I can dismiss the bubble. When one of those notifications kicks in, I react to it using this method:

When the knob's frame was changed, this code makes sure that the bubble view stays right on top of it to ensure a smooth experience for the user. When tracking starts, I can use this notification to display the bubble, and when tracking stops, I can set up a timer to dismiss the bubble after a short while.

As you can see from the complete code, this class is taken from Folio Case without (many) changes, and so is not well configurable. The bubble will always display "Page %d" where a class that was intended as being reusable would probably allow you to customize this setting. I've set up a small example project for this on Github, if you'd like to check it out and play with it. If someone ends up making a fully reusable class out of this, please let me know.

If you'd like to get back to me, feel free to leave a comment here or follow me on Twitter.