Articles in the ‘Web Design’ Category

Emily vs the iPad

Emily and the iPad

Emily and the iPad

Aaargh! I hate this stupid thing! Why won’t it do what I ask it to do!

I heard this cry coming from the living room one evening. My fiancée, Emily, was trying to use my beloved iPad to write an e-mail. “What’s it done this time?”, I politely inquire in response.
“Everything!” came the reply, “All I want to do is send an e-mail, how hard can it be!”

Always wanting to help (like the loving husband-to-be I am) I show her how to copy and paste, move the cursor and find the comma key on e-mail layout keyboards, but then it struck me, why is this so hard? So, I asked her to sit down with me and tell me all of the problems that a real person(tm) has with Apple’s latest gadget.


“Firstly, before I met you, I hadn’t ever used a Mac. I had heard they were just for designers and arty-farty people, but they’re just normal computers for every-day use. This is not about not understanding Macs, this is about the iPad. Also, I love the long battery life, and I really like the screen, it’s brilliant.”

“I’m a Hotmail user, and I can’t get more than 50 messages when I’m using the Mail app. Your GMail account works fine, searches on the server and everything, but Hotmail is a second-class citizen and doesn’t get all the features it should. It also doesn’t sync read/unread items back to the web interface (which I use most of the time) so I don’t know what I’ve read and what I haven’t.”

“There’s no iPad app for Facebook. The iPhone version on the iPad looks rubbish, as do all iPhone-specific apps. The visual quality is really poor and not what I’ve come to expect from the iPad.”

“I’m left-handed, and sometimes the iPad doesn’t pick up the gestures that I make. Tapping on an icon sometimes sends me to the search screen! The whole interface seems to have been made for right-handed people.”

“Moving the cursor around when entering text is painfully slow and really inaccurate. When I’m moving it the magnifying glass is right under my finger so that doesn’t help at all! When my wrist touches the screen the whole screen moves and suddenly jumps to the bottom which is infuriating.”

“It’s heavy. For a girl, it’d be nice to have it in a handbag, but the iPad is too large and heavy for that. It wouldn’t fit in 80% of my handbags and any it would fit in would also take a 13″ laptop, which would be far more useful.”

“I’ve not played many games on any platform so I can’t compare the iPad to anything else like that. Still, the games I play on it are fun, if a little pointless.”

“Getting stuff on to it is hard. iTunes is an issue and if you don’t use Google/MobileMe, something like Dropbox or have your work e-mail on it, it’s even harder to put stuff on it. It needs a USB port to load documents on. The camera connection kit is good, but it’s pretty slow.”

“There’s no Flash support for it, and to me that’s critical. For example, checking the weather on the BBC, I can get the basic information but the radar weather map doesn’t work. Sites that have their own video player, like Wedding TV1 don’t work, and for me, that seriously hampers its usefulness”

“I want web sites to work the same on the iPad as they do on the PC. These ‘Mobile-optimised’ sites are suitable for the iPhone, but not for the iPad and they shouldn’t come up (N.B. this is referring to the Hotmail mobile web interface). I don’t want to have to learn another interface. If I wanted just e-mail, I’ll use the Mail app, but since I want the web site in the browser, show me the actual web site!”

“It’s just not an improvement on a laptop for the situations where I’d use it. If I wanted something that size I’d take a laptop instead as it’s has a DVD drive, all my music and all my web sites.”

“All that said, it’s a brilliant device that has its purposes and has generally replaced the laptop for general Internet browsing, but for what I want something that kind of size to do, it just doesn’t do it.”

1 Yes boys, it exists, it’s on Sky.


These aren’t the typical usability problems that his lordship Neilsen came up with, they represent problems of someone who uses Macs, works with a computer every day, and still has issues getting things done on the iPad. To be honest, some days I do too (discovering that yet another web site uses Flash is a classic).

What gets me is that many of these can be resolved by Apple and their close partners: making Hotmail work better with Mail, doing more testing with left-handed users, Facebook releasing an iPad app, Hotmail turning off the mobile site for the iPad, making the iPad render pixel-doubled iPhone apps properly (I refuse to believe that text can’t be made smooth), and finally making iTunes work better for file management (or enabling people to use explorer/finder).

The moral of the story is whilst you can’t please everyone with your designs, don’t think solely about your target audience. Try to think about the people around them who will use the device and make sure it works for them too. If you’re after a more practical use for this story, learn that the iPad isn’t perfect, in fact, it’s far from it. I still believe it’s the best that’s out there, and I’d love Emily to get her hands on a Galaxy Tablet to compare the two. We’ll have to wait to see what 2011 and Android 3.0 and the BlackBerry Playbook can bring to the table to gauge if the iPad has a real competitor which can make my fiancée happy!

Droid Doesn’t do tablets

No Android on tablets As a developer and iPhone fan, nothing pleases me more to say that Android has caught up with the iPhone. Android hardware has been great for a while, the Motorola Droid and Nexus One being the first in a wave of great devices, but the software hadn’t been right. Android took its sweet time to develop but finally has all the great features iPhone users have enjoyed since the iPhone 3G and more (wi-fi hotspots for example).

Thing is, the iPhone, and iOS, has moved on.

Since the launch of the iPad, every Android-lover has been waiting for a tablet with Android on it. They want the brilliance and openness of Android on a more useful (day-to-day) form factor. To those people, I say wait, it’s not ready yet. In order to put iOS on a tablet, Apple had to fork the code base into two versions, iPhone 3.1 (later 4.0) and iPad 3.2. To date (though that may change at the September 1st event), these two branches have not converged, nearly 9 months later. Apple did this for a very good reason: the native controllers and views are not suitable for tablet devices and new paradigms needed to be created.

The SplitView Navigation controller

The SplitView Navigation controller, necessary for much of the good UI interaction on the iPad. Courtesy of Apple

Android tablets, on the other hand, are content with throwing the same old mobile-centric code at tablets. For example, today Archos unveiled five new Android 2.2 devices from 2.8″ to 10.1″ and Samsung is about to unveil their Galaxy tablet which is a 7″ Froyo device.

So, why isn’t this a good idea. For one, the Android developer API says it doesn’t support screens larger than 4.3″. That should be a pretty good first clue. Take the iPad HCI guidelines for a second clue. It states that full screen transitions are bad, interfaces have to be tailored to the device, and you have to do more than just blow up the interface to twice the size. Take a look at how iPhone apps look on the iPad for that one.

iPhone app on an iPad

iPhone app on an iPad, now think of an Android app, just blown up.

Truthfully, the current Android SDK just can’t cope with the demands of a tablet UI. Little things like smooth transitions when rotating to big things like having universal apps which cover multiple screen sizes well. Android has support for multiple screen sizes, but it relies on relative positioning for this and is an inelegant solution compared with Apple’s interface builder.

A bigger screen will accentuate the differences in the quality of iOS and Android apps. If you have a mediocre Android app and put it on a tablet, it’s going to look poor, but put a mediocre iPhone app on the iPad, and it’s at least usable. Take a look at this video of a $50 Android tablet from India Do you want a UI like that on your tablet? Didn’t think so.

So, my advice, is wait. Wait until Android 3.0 (Gingerbread) comes out in Q4 this year, then wait until 2011 for some good hardware. 3.0 has set precedent by disallowing vendor customisation, forcing a much-more Apple-esque standard set of controllers which will suit more purposes. Acer and Motorola have already announced that they’re delaying the launch of their Android tablets until 3.0 is available.

Still, when that time comes around, the second generation iPad will be out, and then Android will be playing catch up again.

Update: Just seen the ViewSonic ViewPad 7, a 7″ Froyo tablet. Take a look at the video in the link: it’s full-screen all the way, sluggish and, I quote “a plastic rebadge me-too Android tablet”. When you’re watching the video, think about how that’s going to work on a tablet the size of an iPad (or the Archos 101 for that matter). It’s not going to be pretty.

Designing for Touch

Over half of the UK population has a mobile phone, and there are 40 million active mobile devices. Of that number, there are about 8 million touch screen devices, with around half of that number being accounted for by the Apple iPhone. More than half of the new handsets being manufactured today have touch screen functionality, though no other single device has had the success of the iPhone.

The reason is partly to do with the Apple brand, but this is second to the iPhone’s well-designed software, specifically the user interface (UI). Interacting with an iPhone is simply a joy and no other device has combined its simplicity and accessibility. How can its design principles be learned upon to produce great touch screen interfaces?

The secret lies in keeping to the four principles of touch screen applications: direct interaction, concise wording, natural input and integrated applications.

The iPhone is a direct interaction device, meaning that all of the input takes place on the screen, not relying on any other hardware keys to support the UI. It uses this direct input mechanism to allow the UI designer to place important navigation and action buttons within the UI in more intuitive places than hardware keys allow. This principle can be leveraged in one simple piece of advice: touch screen input is direct, place buttons in intuitive, easy to reach places for best usability. Because these devices are small, the edges of the screen are always in reach and easy to access, so it makes the ideal place for navigation and essential functions.

It is important to note the difference in the web and web interfaces with touch screen applications. A lot of web sites rely on a pointer hover in order to reveal different or additional navigation options. This is simply not possible with direct input devices as a finger never hovers on the screen, it simply taps. A small paradigm shift is expected from these designers to harness direct input correctly. This does not mean that a web interface cannot function as well on a touch screen device, far from it. The web has to be tailored for direct input. In principle, the web will work just fine on any display, but the screen is a lot smaller on handheld devices and information is either lost of compressed, making the user perform a large number of ‘zoom’ actions to locate the information that is contained within the web page. Making direct input usable can simply be a matter of reducing the zoom operations. Make action buttons big; big enough for a finder to press without having to zoom in. Apple recommends a 40 pixel or larger button to allow for all finger sizes.

All of these lessons on the mobile web show why Apple’s applications have taken off so well; they are simple and concise. None of the apps are overcrowded or even feature word-heavy instructions. This part is key: if a user does not know what to do with a button within the first few seconds then the wrong label has been chosen. It is not that the screen is complicated and needs explanation, if it does then you should think of alternative ways to express that function.

Take, for example, the iPod application. It plays music, but often there is a very long list of music to be displayed; it has to be categorised by artist, album or genre. If the app decided that it wanted to give categorisation choice to the user, it may start with a few buttons asking for a category selection (see diagram).

iPod menu

Instead, it offers the most recognisable selection and then keeps all of the other options available at all times by using a tab bar. This level of functional accessibility paves the way for a golden rule in touch screen menu navigation: all functions must be accessible within three actions. There are no functions in the iPod app that cannot be accessed in more than three screens of data. This is a very important rule for touch screen devices, as many follow the single hardware button principle of the iPhone, giving no permanent button for going back a level of detail (which, as before, is a good thing) then burying functions deep within the menu system, making it very difficult to go from one set of functions to another. Three is the ideal number here as it allows for a good level of data granularity and yet has all top-level functions on two taps away.

There are some exceptional applications, but no exceptions to the rule. If there are circumstances where actions require more then three touches, then those apps need to make use of natural input, an innovative facet of touch screen design. Natural input is performing an action with a motion or gesture which is indistinguishable in the given context. Put into plain English, there can be no other plausible action that can be represented by a given gesture. A perfect example of this is the Photos app on the iPhone. Select an album, where to start, then view the pictures (note: three steps). To view the next picture, push the current one off the screen. Zoom is performed with a pinch and you can rotate pictures by picking up its edges and turning it round. Photos also rotate pictures automatically based on the orientation of the device. There are few better examples of natural input that this.

Applications can be further improved by using natural input. The iPhone’s Maps application, especially when compared to its web-based counterpart, is not the most intuitive application. Sure, it has a good amount of options, uses one finger to pan around the map and two to zoom, but when I want to do anything advanced it falls short. Say I want to know how far Leicester Square is from my office in Victoria. Both locations easily fit on one map, but I have to search for the locations before it drops a pin into the map. A more usable way would be to allow me to drop the pin from the UI, a double-tap would be natural, or dragging a pin from a menu bar and placing it on the map.

Google maps

Maps can create a route between those two places for me. The route it’s given me takes me along The Mall, but I want to go through Green Park. Attempting to move the route with a drag action (like the web interface) I only succeed in moving the map. There are ways around this, but it is not as easy as it could be and certainly isn’t as natural. The same goes for wanting to move a pin; the functionality is either absent or difficult to use. Improvements here would be very simple and highly effective.

Natural input is very under-used by non-Apple applications, but good use of it can lead to very successful apps, like the excellent Flight Control, where plane flight paths are dragged with a single finger, or the intuitive first-person shooter controls on Wolfenstein 3D.

Flight Control

The final piece of Apple’s puzzle is integration. This has been a large component of all ‘Web 2.0’ applications, the ability to communicate between sites easily, as if you were using the site itself. It is not simply about providing links but providing functionality between applications. This integration is important on touch screen and handheld devices as removing all unnecessary actions and tasks is essential. If an application is able to perform useful tasks with a piece of information, it should not rely on the user to perform that task. For example, the iPhone app Zensify can post pictures to Twitter and Facebook, and does so at the same time without the user having to perform the action for each service.

Creating great touch screen applications can be hard, but sticking to the four design principles, direct interaction, concise wording, natural input and integrated applications, and you’ll be well on your way to making an award-winning app.

A Week in Web – May 17-21st

A week in the web - May 17-21

This was very good week to be a web developer, some big announcements: Google announces WebM – a collaborative project with Mozilla, Microsoft and Opera all announcing that a new royalty-free HTML 5 <video> format has been created using the VP8 codec. Apple haven’t said anything thus far but you can guarantee they’ll say something soon.

TypeKit and Google have got together to make the Web Fonts API including a modified version of TypeKit’s WebFont loader. The fontsquirrel has this comparison of the fonts used by all three loaders.

Future of Web Design and UX London happened. There are video passes available and lots of people will be sharing their slides. Check out the presenters’ twitter feeds for more information. Box-shadow may make its way back into CSS3 – as reported by CSS3.info

Oh, and my server got hacked, leading to a wasted evening of clearing out and removing attack points.