Steve Workman

Droid Doesn’t do tablets

Steve Workman — Wed, 01 Sep 2010 13:03:15 +0000

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, 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, 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.

If you liked this, you may also like:

Geeks need their space

Steve Workman — Tue, 24 Aug 2010 21:48:39 +0000

Today’s post inspiration comes courtesy of Matthew Solle (@solle) who tweeted this video of Campaign Monitor’s new offices

This video reminded me of my afternoon at my client. After a week of wireframing, data architecting and meetings, I finally got to sit down and code what I’d had in my head for nearly a month. Fellow geeks, you know how good a feeling it is to be in the zone and just do simply excellent work at what feels like breakneck speed, it’s great.

Except, I work in an open-plan office. There’s meeting rooms all around me and I’m right by the door, so people come and go all the time. I’ve also got two laptops and an iPad on my desk, along with a main monitor. Add to that an iPhone and my actual phone and things are pretty busy and I can easily get distracted without all the people around me.

This video showed me the absolute joys of having space to sit and think. People can still ask you stuff, messenger is always on, and they can pop round whenever it takes their fancy, but you have a room all to yourself with white boards and space to put all your thoughts on the walls. These developers, these lucky, lucky developers, will have the space to concentrate on what they do best, in an environment that they can tailor to their liking. It’s the joy of freelancing and having a home office, mixed with working with the best people around. Throw in guitar hero and I can’t imagine a better office.

So, why aren’t there more of these?

Simply, it’s money. In London, it wouldn’t make financial sense to have a kick-ass view of the river and all that space for only 20 people. It simply doesn’t happen. Open plan offices allow for people to be much closer together and still have some sense of space for themselves (just say no to cubicles).

I’d argue that the best people need this space, and if they can’t always have an office, then a project room for a small team. Failing that, just some space on the walls. As a developer, I value my space to think. As a designer, I value my space to create, and as a leader, I value my team.

Employers, give your people more space. A smaller office does not mean you save money if your workforce is unhappy. A smaller office does not equal more team spirit because you’re packed in together. A smaller office does not guarantee people talking to each other more just because they’re so tight up next to each other. Think about your office, think about your people, and create a space to work.

I’ve found a great post on cool workplaces. Get inspiration from these and make your office a better place to work: 10 Seriously cool workplaces on Chief Happiness Officer

No related posts.

What do you want from a re-design?

Steve Workman — Fri, 20 Aug 2010 09:25:58 +0000

I’ve been asking questions about my blog on Twitter, and a few notable things have come back:

Text shadow on hover makes you feel seasick
Text shadow is fine on headers
Colours on the footer are hard to read
It all feels a bit busy

So, many of these things can be remedied simply, but I can’t get it out of my head that you just skim the content because it’s all bunched up. The white space for the text is compressed against two differently coloured, high-contrast sections which mark the edge of the world. Instead of helping you focus, I feel trapped when reading it.

So, I reach out again, what would help alleviate this? What would make you read more on this blog. It’s not a for-profit enterprise, it’s simply putting my opinion and some of my work onto the Internet.

Please, your thoughts in the comments or contact me steve at steveworkman dot com (or use the contact form on this site).

No related posts.

The Progressive Web with Andy Hume (LWS Future)

Steve Workman — Wed, 18 Aug 2010 12:14:29 +0000

Monday night (16th August 2010) was London Web Standards‘ ‘Web Futures’ event with presentations from Clear Left‘s Andy Hume (@andyhume) and Richard Rutter (@clagnut).

This is part covering Andy’s talk which was on “The Progressive Web”. First up, my sketchnotes.

Sketch Notes of The Progressive Web, apologies to Andy Hume

The basic message of Andy’s talk is that the landscape of the web these days (note my awesome rolling hills) has changed and people should be more open to these new techniques. By designing and coding sites for today and tomorrow, you are not only reducing the amount of work you have to do now, but you’re decreasing the number of bugs, not having to re-do gradients for high-resolution displays, and you’re also making your web site faster, which is directly linked to revenue. There’s no reason not to add these things in now unless you’re designing entirely for IE6.

Andy talked extensively about @media queries, how these should be used instead of browser sniffing (read: should do feature detection) and how they can make simple websites work better across more web-enabled devices. He demonstrated the dConstruct website as a good example of this.

Andy put up two great slides, one on when you can use HTML5/CSS3 standards today, and where you should use intermediaries like jQuery. The other slide is poorly reproduced in my sketchnotes (middle-right), showing the cycle between standards, new hacks, old hacks and back to standards. This indicates a whole new era of innovation in the web now that we have these new standards.

So, a great talk by Andy. Read part two, on the future of web typography by Richard Rutter.

If you liked this, you may also like:

The Future of Web Typography with Richard Rutter (LWS Future)

Steve Workman — Wed, 18 Aug 2010 12:14:19 +0000

Monday night (16th August 2010) was London Web Standards‘ ‘Web Futures’ event with presentations from Clear Left‘s Andy Hume (@andyhume) and Richard Rutter (@clagnut).

This second part was on the Future of Web Typography, presented by Richard Rutter (also of FontDeck)

The Future of Web Typography, apologies to Richard Rutter

Richard is heavily into his typography. He recently launched FontDeck, a web fonts web service similar to TypeKit et al. Richard talked a lot about how bad things were before, how system fonts had reduced our creativity and what sort of deep opportunities for font producers lay in the CSS3 Fonts module.

Many of the features discussed (and sketched) aren’t available in any build of a web browser, for instance kerning, numeric variants, ligatures, different types of ligatures, font stretch, named font weights, hyphenation and many other things. Firefox 4.0 is starting to implement many of these features but it’s very slow going. A lot of time was spent pointing out what these things could do, and how they improved readability. He did also say that this “is not a Firefox fanboy love-in”.

Near the end of the talk, Richard discussed a new anti-aliasing method from Microsoft called DirectWrite, a feature that uses a computer’s GPU to render fonts on a sub-pixel level. He even went so far as to say that

“With DirectWrite, fonts will look better on IE9/Windows 7 than on a Mac”

He also made mention of the iPhone 4′s retina display. The future is high-resolution displays, and with rendering technology that can actually support all of these rules which are built into fonts, the web will be a much nicer place to read content.

Richard made a lot of the new way fonts were being served (as a service) being beneficial to both the client and to the foundry. It’s cheaper for the client (not having to buy fonts at £500 a go) and the foundry also stops their fonts being pirated and distributed around the web.

Overall, Richard was quite downbeat about the state of things right now, but is confident they’ll get better.

The full slides from this presentation will be available shortly (check back later).

Read the first part of this event, Andy Hume on The Progressive Web.

If you liked this, you may also like:

Is WordPress putting whitespace in your XML? Here’s how to fix it

Steve Workman — Thu, 05 Aug 2010 12:48:17 +0000

XML Whitespace error, courtesy of @JonRowe

Since I started using Feedburner to add adverts into my RSS feed (there are now ads, let me know if they’re intrusive), I’ve been getting errors like the one above in my XML feed. Basically, there’s a few new line characters being output by several classes. This means the XML is invalid and services like Feedburner complain, as do some browsers (FF, Opera, Chrome).

In PHP, there’s a simple way to fix this, using a buffer and stripping newline characters off the beginning and end. WordPress have considered this before, and have rejected this method of fixing it because it’s generally caused by plug-ins which should fix themselves. Hence, their solution for 3.0: indicating when additional characters are output when the plugin is activiated.

So, I did that for all my plugins. I found that the following were giving me extra characters:

AVH First Defense Against Spam (2)
FeedBurner FeedSmith
JR Post Image
Last.fm for wordpress
Tweetbacks
Twittar
Twitter for WordPress
WP-Spamfree

So, I then removed the blank line at the top of each of these files. This got the number of blank lines from 12 to 2, which still isn’t enough.

I then re-installed wordpress, thinking one of the core files had become corrupted. Still no valid XML.

More research led me back to the output buffering solution. wejn.org has a pre-prepared file to resolve this issue. It’s a simple install and is well documented. Since putting this fix in, I’ve had no issues and my RSS feed is back up and running.

I’d still love to know what caused the single line, but I’m glad there’s a fix to sort it out.

No related posts.

The Low-Hanging Fruit

Steve Workman — Tue, 03 Aug 2010 12:10:37 +0000

Hearing childhood teenage professional hero Andy Budd speak at #lwsux last month confirmed many things that I already knew, and introduced me to even more things that I needed to be more aware of (read my full write-up).

The one thing that really got me was talking about the “low-hanging fruit”. It’s a pretty simple concept, as a consultant, much of the benefit you will bring to an organisation, in improving a system’s design, will be painfully obvious.

Take, for example, a client of mine. An old system based on 2003 technology, with even more prehistoric standards support. It used javascript everywhere, all links opened in new windows (complete with navigation) and whilst there were templates, from a programmers perspective, there may as well not have been.

So, how to make it better instantly? Update the system to use templates, stop links appearing in new windows, make it work cross-browser and replace as much of the javascript with “server-side” code as possible. That’s before you get to the simple layout changes that you can make. Spending a bit of time on the information architecture improves the flow of information and user journeys. The system hasn’t changed much, but it’s infinitely more usable and user-friendly. The client almost had a “crisis” when I showed it working on my iPad.

What’s the lesson here? Take the easy usability problems and solve them with best practices. Test as you go, there’s no need for large-scale user testing unless there’s a specific problem that you’ve been asked to solve. The simple solutions to simple problems solve most of the issues of user-friendliness within a system, and a good bit of IA generally does the rest.

So, take the easy option!

No related posts.

UX Questions with Andy Budd

Steve Workman — Tue, 13 Jul 2010 10:27:22 +0000

Last night was London Web Standards‘ UX Questions with Andy Budd (of CSS Mastery and Clearleft fame)

My sketchnotes for this are at the bottom of the page. This is only a brief write-up, hopefully the LWS guys will put the video up soon. Much of this is para-phrased. Andy, if you do read this, let me know if you want any of these answers changed.

Q: Good UX vs Good design? (the actual question was a lot more wordy than that)

UX is a quality attribute, it can be good and bad. An aspect of good design takes UX into account, though there are exceptions i.e. the Phillips Juicer. Good design does not imply ease of use, UX is a design philosophy or style. A good UI designer understands HCI, social, environmental and cognitive psychology .

Q: User-Centric Design or Persuasive Design?

Both together please.

Q: How do you manage difficult clients?

Clearleft tend not to get them thanks to their reputation. Basically, just manage expectations all the way through.

Q: What should you do if you’re told to design “for IE 6″ or “inaccessibly”

Ignore the request. You’re a professional (dammit) and you need to use the right tools for the job. Don’t just keep patching a crumbling building, i.e. if you have an intranet made for IE6, don’t just patch it up, start again.

Q: What tools couldn’t you live without?

Pen and paper. Oh, and sticky notes.

Q: What makes a good UX designer?

Empathy
Inquisitive
Unsatisfied with life (want to make things better)
Desire to fix the world

Q: How do you get clients to invest in UX even if they have a small budget?

Design on paper to reduce costs. Too many designers just go straight into photoshop. This will allow for more iterations and less money in the long term. Remember that you’re also in a facilitation role so its up to you to guide the process.

Q: Is any testing better than no testing?

Yes.

Generally there’s lots of low-hanging fruit (if doing a re-design) so take that! You only need to do the deep level of thought if you’re solving a very specific problem.

Q: Are there any design patterns you use regularly? Should you make new ones?

Real-world patterns work very well, i.e. tabs. Most people don’t know that a site logo takes you to the home page, so always have a home link. If you’re making a new pattern, test test test, then think, would something else be better.

Q: Where do you get your inspiration from?

The real world. Architecture, a book called “Why people buy” (but not the section on the internet), the Disney Imagineers. Overall, it’s about how it functions, not how it looks.

Q: Is the user wrong? When does the designer know better?

Generally, the user isn’t wrong. It’s very rare that their opinion doesn’t count, so swallow your pride.

Q: How do you establish credibility in an organisation?

It’s difficult, very hard to do internally. You need to play the office politics game. Build a level of knowledge and use references as much as you can, so it’s not only you saying these things. Have confidence in you and what you are doing. Visualise it in your client’s language if possible.

Q: What should you do if a business objective creates a disjointed experience?

Andy can’t help on this one, this is an answer from the LWS crowd.

Switch it around, get buy-in from people and sell ti to them. Do it in the pub, many people are much more open there. With regard to “Dark Patterns” i.e. hiding a company’s phone number or directing through certain channels, read Dan Lockton’s post.

Finally, if you’re not happy in your job, there are loads of UX jobs out there at the moment. Clearleft is hiring a world-class interaction designer.

That’s it. Sketchnotes below. Hope you enjoyed it

UX Questions Sketchnote - apologies to Andy Budd

If you liked this, you may also like:

4 years on

Steve Workman — Tue, 29 Jun 2010 20:13:13 +0000

*Breathe deeply. Think.*

Has it really been that long?

Four years have passed since I started writing this blog. Since then I have written 88 posts (including this one) with 89 tags in 23 categories. There have been 94 comments, 31 of which were on the CSS3 Bookshelf. The site has been through four designs under three different names on two different hosts.

For many years, the site went unnoticed, getting less than 10 page views a day. With the latest iteration, a conscious effort to drive more traffic by writing good articles every week, and a bit of help from Twitter, this improved to 30 visits a day. A few good tweets from Bruce Lawson increased this to 50, with the odd spike around the 250 mark. Then I write about a technique to make a bookshelf with new CSS technology. A lot of pushing gets a spike of 300 visits. Then, whilst on a day off, Smashing Magazine posts it twice as part of a “what you can do with CSS3” compilation, which sends me 1000 visitors a day for the weekend. That’s more visitors than I’ve had in the last 3 years put together.

So, what’s next? Well, I’m going to keep writing. There’s so much more that interface design can help us accomplish and good design becomes more and more important every day. I’m going to blog more about design itself, and things that inspire me. At the moment, a lot of those thoughts are limited to my twitter stream, so I want to expand that. I’ll talk more about my after-hours tech activities, the interesting stuff that I don’t always get to do during the nine to five.

I’m also going to get more involved in the community, discussing more issues and attending more group events. London Web Standards is fantastic and I’m going to try and make it to every one from now on.

So, there’ll be more of the good stuff, some more tutorials and more discussion. If there’s anything else you’d like to see, please leave a comment.

Thanks for reading,

Steve

No related posts.

Designing for Touch

Steve Workman — Wed, 16 Jun 2010 16:30:55 +0000

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).

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.

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.

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.

If you liked this, you may also like: