* It’s not open. “While Adobe’s Flash products are widely available, this does not mean they are open, since they are controlled entirely by Adobe and available only from Adobe. By almost any definition, Flash is a closed system.” Man, that’s some strong irony you’re brewing, Steve. Still, we get the point — HTML5, CSS, and JavaScript are open web standards.

* The “full web.” Steve hits back at Adobe’s claim of Apple devices missing out on “the full web,” with an age-old argument, YouTube, aided by the numerous new sources that have started providing video to the iPhone and iPad in HTML5 or app form like CBS, Netflix, and Facebook. Oh, and as for flash games? “50,000 games and entertainment titles on the App Store, and many of them are free.” If we were keeping score we’d still call this a point for Adobe.

* Reliability, security and performance. Steve hits on the usual “Flash is the number one reason Macs crash,” but adds another great point on top of this: “We have routinely asked Adobe to show us Flash performing well on a mobile device, any mobile device, for a few years now. We have never seen it.” You’ve got us there, Steve, but surely your magical A4 chip could solve all this?

* Battery life. “The video on almost all Flash websites currently requires an older generation decoder that is not implemented in mobile chips and must be run in software.” Steve Jobs is of course H.264′s #1 fan, and it’s hard to blame him, since he cites 10 hours of H.264 playback but only 5 hours with software decode on the iPhone. Still, those “older generation” sites that haven’t moved to H.264 yet are pretty much the exact same sites that aren’t viewable with HTML5, which means we’re being restricted in the content we can access just because some of it doesn’t perform as well.

* Touch. Steve hits hard against one of the web’s greatest hidden evils: rollovers. Basically, Flash UIs are built around the idea of mouse input, and would need to be “rewritten” to work well on touch devices. “If developers need to rewrite their Flash websites, why not use modern technologies like HTML5, CSS and JavaScript?” That doesn’t really address the Flash-as-app scenario (that’s point #6), but it’s also a pretty silly sounding solution to a developer: your website doesn’t support this one UI paradigm exactly right, so why not rewrite it entirely?

* The most important reason. Steve finally addresses the third party development tools situation, but it’s really along the lines of what we were hearing already: “If developers grow dependent on third party development libraries and tools, they can only take advantage of platform enhancements if and when the third party chooses to adopt the new features.” We doubt this will end all debate, but it’s clear Apple has a line in the sand.

He concludes in saying that “Flash was created during the PC era – for PCs and mice.” Basically, it’s for the olds. And you don’t want to be old, do you? Follow after the break for the whole thing in brilliant prose form.

Which is why we’re seeing all those Storms, Pres and Droids on the market lately. They come close, but always seem to fall short. It’s not the features — these phones usually have more features and better specs than Apple’s offering — it’s something else. To me, it all boils down to just 3 things. If any phone manufacturer gets these 3 things right, they’ll beat the iPhone at its own game:

1. Flow
2. Responsiveness
3. Polish

1. Flow

Usable devices are all about flow. What’s flow? For every task that people perform on their device there is a sequence of actions they go through. Sometimes it’s just one action — you click a button and whatever you wanted to happen, happens: e.g. pushing the Home button to get back to the main screen. For other tasks you may go through dozens of actions before you reach your desired end.

Good flow means the designers have anticipated common tasks, reduced the number of actions required to accomplish them, and ensured the next actions are always there in front of the user so they don’t even have to think about what to push next. Here’s a great presentation by Ryan Singer from 37signals talking about usability — Ryan talks about flow at about 38 minutes in with some great examples.

2. Responsiveness

Responsiveness here is all about speed. Stuff should happen when you press buttons or slide your finger across the screen. That’s obvious, right? Yet most phones on the market aren’t very responsive. You slide your finger, and half a second later the screen begins to move in a choppy manner. The device is laggy and slow — it’s not responsive.

All of the lag, the waiting between screens, the waiting for applications to launch and for the screen to scroll creates serious friction with the user. When you want to do something you have to wait for the device to catch up. That’s frustrating.

3. Polish

Polish is craftsmanship. When you’re finalising the user interface, make it look good. This doesn’t mean adding gradients, shiny gloss, reflections, shadows or a plethora of other visual effects — most of that stuff is superfluous — it means tasteful typesetting, choice of palette and contrast calibration. The important things should pop out at you, while the secondary and tertiary elements should fade into the background. There should be enough whitespace to make things easy to read and scan. That’s all you really need, yet we’re still seeing a lot of blunders in this department.

Just look at the settings panels of a Blackberry — there isn’t even any left padding on the text there, which means its touching the left edge of the screen. A little bit of polish will go a long way.

Get those 3 things right and you’ll beat the iPhone, or will at least match it. Why? Because the phone is a different device to say, a PC. The phone is always there with you, and its used primary for quick, almost mechanical, tasks. Calling people, checking SMS, checking the time, checking the map, snapping a quick picture. There are many different things you can do with a phone, but all of them are quick actions. This means the phone should aim to be closer to how a mechanical device works.

Think about a toaster. You put in the bread, you push the lever, and that’s it. Your action is done, and now you just wait for the bread to toast. The interface is dead simple and its instantly responsive. That’s because it’s mechanical. There’s not a lot to get between you and what you want to achieve. In electronic devices though, there is a lot of “interface” in your way, which tends to also be very laggy and confusing. What you want to do though is get closer to the mechanical toaster and do the users’ actions easily and quickly.

That’s why the iPhone is so effective. It’s fast and responsive. It’s also very polished, which raises it even higher. Apple doesn’t care about features because it knows that that stuff just doesn’t matter. What people want is a device that doesn’t get in your way.

Other phone manufacturers are too focused on the hardware. Most of them produce really great hardware. But the problem is that hardware is only half the problem — the OS is just as, if not more, important than the hardware it runs on. The OS is the interface — it’s what lets people do the stuff they want to do with their phones. The OS is also the thing that my 3 points above are governed by.

Forget features, forget specs, forget comparison charts. A comparison chart will never tell you about user experience and usability, and in the end, that’s what matters most in a pocket device.

Bumptop, after being presented in TED 2007, dived into serious technological improvements until recently they came up with their 13th beta version which is stable and working perfectly with some of the coolest features available. Bumptop is a 3D desktop application which is meant to make your desktop operations (dragging, resizing, dropping, e-mailing, printing etc) fun and intuitive. It is unlike anything you have seen before. Gone are the days of style XP, talismans, Vista inspirat themes. it not just brings in entertainment but its quite useful too. Here are some cool and not-so-cool features of Bumptop as we found out.

We thought, a picture says a thousand words so we will let our keyboards rest and the images tell you the full story. I hope you will love watching the pictures we are sharing.

BumpTop Unveiled

Right Click on any file on bumptop and you get three options – Shrink, Grow and More (that has other Windows options)

Drag an arc over the files you want to select and drag the mouse pointer to the center, you will find the above options.

Draw an arc over set of icons you want to pile up, You will see a highlighted centre point, drag them there and it gets piled. Wow!

Just double- click on the stack pile of files and you will see a very convenient grid view as above

Right click on the pile and select ‘Fan Out’ and drag the files wherever you want, in whichever trajectory. They will still be in queue. Look at the photo.

You can just scroll through the pile and they will show you file after file as if you are flipping through the pages of a book

You can just drag data or image files on a printer icon and it will start printing. Amazing no?

Just drag the files you want to attach to your mail client and drop them on the icon (say MS Outlook) and it will get attached! whoa!

See as I had told. Here is the proof. look at the attachment tag

Right click on the desktop and see there is a search option. It searches for the keyword you put in. I put in PDF and got the result. You can also drag any one of them and others will come in group. Very useful.

This is where the irony lies. If you don’t use Bumptop you won’t know how well they manage the aero keys, slideshows and photo frame features in bumptop. I have tried to give you a picture

Select any number of files by drawing an arc over them, and then go to the centre to get the option as before. Click ‘create pile by types’ and here is the result. Fantastic.

Go to taskbar -> bumptop -> settings. And then change themes and options as you like. Yes its fully customizable. Enjoy. Below you have my experiment result.

After a theme change!

You can also create your own bumptop photo frames with photos of your choice. You can see the photos changing constantly at the ‘wall’

Not only desktop. You can also bump a folder of your choice. you will see a button at the top-right as ‘bump this folder’

Here is what you get after bumping the folder.

The Final Destination

I just went to settings at the end and chose ‘always bump’ option. And after some child’s play, here was my ‘organized’ desktop.

Many of the usability issues I discover nowadays can be very subtle indeed, difficult to describe even, let alone write guidelines for, but I’ve collected together a list of 10 of the most common usability issues I find so that you can see how your site measures up.

1. No Search Results Found

It can be difficult to “test” the search engine on your site, you enter “apples” and find apples… there.. done. But frequently when I actually try to work out what customers are searching for I end up with the dreaded “No Results Found” page. I would argue that there is no excuse for ever showing no results no matter how odd the search. Go to your web site and really use the search engine for once and see if it ever returns no
results.

Some suggestions

• Given that people are using the search engine, you can assume that people are looking for something
  so why not at least show the last 5 things searched for, or the 5 most popular products or pages?
• Does your internal search engine know what to do with synonyms? Will it find the same items for “ipod”
  and “i-pod”? If not you need to do some work.
• At a presentation a long time ago by the tech guys from BBC search, they showed how they’d implement
  what they call “Best Bets”. It was a great if simple idea in which they’d identified items they’d expect
  people to want if they typed a certain word into a certain section of the web site at a certain time.
  These “best bets” were returned along with the usual search results.
• Make sure you have at your disposal the list of search terms used on your site that returned no search
  results and do something about that.

2. Somewhere To Go Next

When designing web sites, it’s tempting to think of them as a tree structure, with categories being branches or departments and the individual pages being the leaves, but it’s not. The visitors to your web site rarely use it as you designed it, often landing on a page deep in the site missing the home page altogether. Often the page a visitor will not contain the information they need but because this page has been designed as a destination (or leaf) rather than as a step in a journey and have nowhere to go next. It’s then tempting to assume that your site navigation will encourage visitors to explore further, but some recent recent research found that many web users are “navigation blind”, passing as little heed to site navigation as they do banner ads. Having somewhere to go next also usefully avoids the reduction in sales in what Jared Spool amusingly calls “The Back Button of Death”.

Some suggestions

• Create landing pages that meet your customers needs rather than arguing with colleagues about who
  has most prominence on your home page.
• Don’t assume that your site navigation will be used. Think about the linkages between your content
  rather than the categories.
• Design and author the relationships or the “journey” rather than the structure of your site.
• As an exercise, look at your site without the main navigation. Is it still navigable?
• Add extra inline links where appropriate. No content is an island.

3. Facetted Search Results

Search results and product listing pages are often arbitrarily chunked into say 10 or 20 items? It may return 3 or 4 hundred matches or more, too many results to read really. One of the easiest ways you can improve your site is to add search filters or “facets” to your search engine so that when people search, the attributes of the items found can be used to easily further drill down on what they are looking for. The example below from the Delia Smith web site shows how a search for “chicken” can
be easily further filtered using the “Also found in” links at the right hand side.

4. Default Actions

On many sites you have a main task you are trying to achieve, whether it’s finding a present for someone or buying a train ticket. All these sites break down these tasks into separate screens but often fail to make it clear what THE ONE THING you should do on a particular page. Amazon do a great job of designing buttons that are the “Default Action”. There are other buttons on the page, but it is always obvious which is the button you should click next to achieve your task. The Amazon screen below has lots of things I could do (Change quantities, add gift wrapping etc.) but the “Place your order” button really stands out well. Now go to your web site
and see if it is visually clear what you want your visitors to do.

5. The 1, 2, 3 of Design Purpose

So many sites fail on this one. You’d be amazed but often, the owners of a web site haven’t actually even decided what the purpose of their web site is, they have a web site because everyone else has one or because it seemed like a good idea at the time. Given the way we all use the web, I reckon you probably have roughly 3 milliseconds to convince someone that your web site is where they should be. This is how I break down
that precious moment for a first time visitor…

1. Am I in the right place? Does your company name or strap line peripherally assure people that they
   are in the right place? Are the images used helpful?
2. Am I convinced by this site? Does what’s on screen or deeper in the site, reinforce the customers
   credibility of your company as they explore what you have to offer? Visitors are looking to be convinced so are you
   doing all you have to convince them?
3. What should I do now? What is the ONE THING you people to do? Is it to call you, or to buy something
   or to sign up or to remember you or what? Tell them to do that thing. Make it clear how to do that thing. Make
   the design focus on doing that one thing.

Go to your site and see if you can visually and conceptually recognize the 1, 2, 3 in your design.

6. Chocolate Box Syndrome

Human beings put things in categories, we can’t help it, but categories are also where lots of problems arise. For example, imagine that a web site, like life, was a box of chocolates and categorized thus…

• Soft centres
• Hard centres
• Ones that nobody likes

I wouldn’t want to choose which category to click, but in general I have a very clear idea of which type of chocolate I’d like. Whether or not you should categorize chocolates like this or not is something you’d need to test using card-sorting techniques with your customers but the usability of these categories can be significantly improved by showing some of the items in it.

So, the above example might be changed to look like this…

• Soft centres (23)
• Hard centres (4)
• Ones that nobody likes(4)

..which at least gives us some clue as to what the arbitrary categories contain in terms of
numbers. But it may be better served by showing it’s contents with a fuller description, like
this…

• Soft centres (dark chocolate orange creme, strawberry creme, coffee truffle more
• Hard centres (butterscotch toffee, hazelnut crunch, caramel more
• Ones that nobody likes ( turkish delight, crystallized ginger, praline more

Given that I prefer dark chocolate over milk, I am able to be encouraged into clicking, maybe going straight to the item I’d like (the “dark chocolate orange”) and not wonder if the caramel is one of those nice gooey ones. When a category, such as “Soft Centre” reveals some of its contents, it helps us to better understand the parameters of the category. And given, in most cases, we’d like to know what we are going to get before we get it, because a category (or link) reveals some of it’s contents we are more likely to be tempted into clicking it. Now visit your site and assess whether the categories you use “reveal their contents” or not.

7. The Anxiety Test (why, why, why?)

This is a really easy test to run. It helps if you drink way too much strong coffee first. All you have to do is use your site and imagine worrying nervously and endlessly about every element on every page. For example, in the registration process, you could imagine worrying…

• Why do they want my address? Will they send me junk mail though the post?
• Will you sell my address?
• I wonder if you’ll call round when I haven’t tidied up a bit?
• What if I’m moving house next week? Can I change it later?
• Is this my credit card address or where I’m living now? Will this checkout process break?
• I don’t know my post code yet, does this matter?
• Is “rd” OK or should I type “road”
• Do I really have to fill all these address fields?

Particularly for form items, where possible, it is reasonable to tell people what the implications of giving up some information are, why you need it and in what format you’d ideally like it. This puts people at ease with your site because it…

• calms anxieties and makes people more likely to buy
• reduces the errors people tend to make, creating a better experience
• sets expectations and helps to build trust

8. 404 Page Not Found

This is a simple test too. Add some random characters at the end of your URL and hit return and see what you get. What can you say? Sometimes people will link to you and get the URL completely wrong. It happens. Why not accept that it’s going to happen and design for it. Don’t think of your 404 page as simply an error page, think of it as a page from which people should be able to get to the page they really wanted.

9. Newsletter Honesty

This test is related to both The Anxiety Test and The Chocolate Box Syndrome. Many sites offer the option to sign up for an email newsletter without telling the visitor…

• What the newsletter contains
• How frequent the newsletters are
• What you are going to do with their email address
  Given that most people are precious about their email In Tray. Does your site?
• Show examples of previous newsletters so that people can assess whether or not it is the type of thing
  they’d like to receive. If not why not?
• Is it honest about how often you send out the newsletter? Is it once a day, week, season?
• Do you state clearly what you will do with their email address?

10. Page Titles

I still occasionally find sites where every page share the same title. Not the title as it appear inside the window, but in the window bar. It’s not as common a mistake as it used to be but it’s still happening. Page titles are hugely important to the usability of your customers browser bookmarks but also hugely important with regards to how Google works and how people find you. So, perform the test of …What does your site look like in Google search results? For many people this is the one chance you
have to convince them that your site is worth visiting. They don’t get to see your lovely new design, they don’t get to experience how usable your site is; all they see of your site is the blue, black and green of Google and the titles you have created.

With web usability practices becoming more commonplace, and knowledge of the many web usability benefits² becoming more widespread, the big players on the web must surely have usable websites, right? Let’s find out…

1. No search function

Guilty party: NBA

A usability study by Jakob Nielson found that more than half of all users are search dominant and will usually head straight for the search function. This is especially true on large websites with regularly updated content.

NBA‘s website is truly enormous. Indeed, Google has listed almost 100,000 pages⁵ from this website alone. With a website this large and with such regularly updated content, it’s truly remarkable that a search function isn’t provided to enhance its usability.

2. Massive download time

Guilty party: ESPN

The ESPN website takes a mammoth 72 seconds to fully download and render on a regular 56k dial up modem, currently used by three in four UK Internet users (source: National Statistics Online ). The total file size of the homepage is a whopping 304kb and is made up of:

• HTML document – 84kb
• Images – 119kb
• External JavaScript documents – 126kb
• External CSS document – 13kb

Additionally, the ESPN homepage makes 54 HTTP requests, pushing up the download time by almost 11 seconds (each HTTP request increases the download time by 0.2 seconds). You can check the download time for any web page with the Web Page Analyzer.

3. Non-scanable text

Guilty party: Boeing

We read web pages in a different manner to the way we read printed matter. We generally don’t read pages word-for-word – instead we scan web pages. When we scan web pages certain items stand out:

• Headings
• Link text
• Bold text
• Bulleted lists

Unfortunately, Boeing didn’t seem to think about the usability of their online news items and press releases when they wrote them. They do use short paragraphs, which is good for web usability, but they haven’t used any of the items from the above list.

4. Unclear link text

Guilty party: Real Player

One of the most frequently asked questions we ask ourselves on any website is, “Where can I go?” As such, for optimal website usability it has to be instantly obvious what’s a link and what isn’t. I’ve labeled eleven different areas on a screenshot from the RealPlayer website below. Which ones do you think are links (answers below)?

You can follow three basic rules:

• Don’t make non-link text a different colour – instead bolden or enlarge it to make it stand out
• Graphic-based links should be adjacent to text-based-links or have text embedded in them
• A graphic referring to and adjacent to a text-based link should be a link too

5. Poor 404 error page

Guilty party: Monster

404 error pages can occur when users:

• Follow a link to a page that no longer exists or has been moved
• Enter the URL of a page that no longer exists or has been moved
• Type in an incorrect URL

When users receive a 404 error message they may be unclear as to what’s happened and what they should do next. Some good 404 error page usability guidelines include:

• Don’t call it a 404 error – Web users are unlikely to know what this means
• Communicate what has gone wrong – Make sure users understand what’s going on and that no one’s to blame for them being there
• Provide a call-to-action – Include a search function and links to the homepage, site map, and most popular pages

Type in a URL for a page on Monster that you’re sure doesn’t exist, for example, http://www.monster.com/whereisthe404.html. At least they’re considerate enough to provide a back link on the 404 page, in case you forget where the back button is!

6. Visited links not shown

Guilty party: About

In addition to web users wanting to know where they can go (see ‘4. Unclear link text’ above), they also need to know where they’ve already been. Websites usually show them this by changing the colour of links that have been visited, most commonly from blue to purple.

The About website is basically a huge directory of information about pretty much everything. It’s very likely you’re going to be looking at a lot of different pages on this site, so how do they expect us to remember which pages we’ve already been to? To further confuse users and reduce usability, sponsored listing links are purple, the colour normally associated with visited links!

7. Frames used

Guilty party: Ocado

Ocado is the online branch of Waitrose, a nationwide UK supermarket. It’s a relatively new website which makes it surprising that it uses such an old-school technique as frames. Frames have the following usability problems associated with them:

• Pages can be unprintable
• Pages can’t be bookmarked nor their URL e-mailed
• The back, refresh and history buttons can become disabled
• Visited links across frames don’t change colour

8. Links point to the current page

Guilty party: Ford

The main- and sub-navigation links in the Ford website are never disabled, even when they’re pointing to the current page. Clicking on a link that takes them back to the same page can cause the following usability problems for site visitors:

• It wastes their time
• They may doubt whether they were really at the location they thought they were at
• They may become confused, particularly if the page is scrolled back to the top

9. Important information contained in images

Guilty party: AOL

AOL still haven’t realised that not everyone is hooked up to broadband. Take a look at their homepage:

As you may have realised by now, text downloads and renders on the screen first, followed by images. There can sometimes be a sizable time gap between the text and the last graphic appearing on-screen, especially for those graphics towards the right and bottom of the screen. Have a look at this screenshot of the AOL website, capturing how it looks when it first appears on the screen.

The small amount of important information marked up through regular HTML, mostly located near the bottom of the screen, is illegible as you have to wait for its navy blue background to display. If AOL really felt this background with its nice gradient was absolutely necessary, they could have assigned the area a background colour of navy blue (in addition to the image). That way the text would be in front of this background and therefore legible when the page initially appears. A few seconds later the navy blue background image would be downloaded and rendered over the flat background.

10. Unique scrolling system

Guilty party: BMW

Never go against design conventions! As the Internet has evolved we’re become used to certain conventions. The organization logo is in the top-left corner and links back to the homepage. When we wish to purchase items we place them in our shopping cart. And when we scroll, we place our mouse on the scroll bar on the right-hand side of the screen.

Going against design conventions can have dire usability effects for any website. Web users generally won’t be motivated to learn how to use the unique functions on a website as they tend to spend a very small proportion of their time on the Internet on any one website. This is why BMW’s site visitors are likely to have difficulty using their crazy navigation menu. Go to the BMW website and mouse over the ‘Go local’ section. Do you see those tiny arrows in the top- and bottom-right of the box? You’re supposed to use those to scroll through the list.

Conclusion

So all-in-all, it looks like even the big players’ websites are suffering from major web usability problems. Surprising really considering they undoubtedly have very large budgets assigned to developing their websites. If only they’d allocate some of that budget towards usability testing…

Chances are you’ve seen the video showing how the iPhone can flip and expand Web pages. It can show you the entire Web page at a glance or zoom in to make the text you’re interested in readable. In one sense, since the iPhone uses Safari, Web designers shouldn’t have to do anything special to create a Web page that will work on the iPhone.

But do you really want your page to just work? Most designers want their pages to shine!

[polldaddy poll=1303861]

When you build a Web page you need to think about who’s going to view it and how they are going to view it. Some of the best sites take into account what type of device the page is being viewed on, including the resolution, color options, and available functions. They don’t just rely on the device to figure it out.

General Guidelines for Building a Site for iPhones

• Test on as many phones as you can
  The first thing you should do is view your site on a cell phone or 10 different cell phones. While there are some emulators out there, they really don’t give you the same feel as trying to navigate through a Web site on the tiny little screen.
• Make your pages degrade gracefully.
  You can write your pages for Flash-enabled, wide screen browsers, but make sure that the critical information is visible even in a tiny monitor that can’t handle any special features (like cookies, Ajax, Flash, JavaScript, etc.). Anything beyond XHTML Basic will be beyond some cell phones.
• Build a wireless specific page – and make it easy to find
  If you’re going to build a specific page for your cell phone and wireless customers – make it available. A great way is to put the link to the wireless page at the very top of your document, and then hide that link from non-handheld devices using the handheld media type. After all, most people come to your home page, even on cell phones – and if the link to your wireless page isn’t there, they’ll leave if the page is too hard to use.

Web Page Layout for iPhones

• Remember that the screen is tiny. Web pages that are multiple thin columns (like the New York Times site that the iPhones ads feature) are going to work better on cell phones than Web pages with one large column. The narrower the content is on your normal page, the less it will have to shrink to fit a cell phone window.
• Divide pages into smaller chunks. It can be difficult to read long segments of text on a cell phone, so putting them on multiple pages makes them easier to read.

Links and Navigation on iPhones

• The shorter the links are, the better. If you’ve ever tried to type in a URL on a cell phone, you’ll know that it’s a pain (except perhaps for teens who are used to SMSing 24/7). Even on the iPhone it’s tedious to type in long URLs. Keep them short.
• Don’t put your navigation at the very top of the screen. There is nothing more annoying than having to page through screens and screens of links to find the information you want. If you’ve looked at Web pages that were designed for cell phones, you’ll see that the first things that show up are the content and headline. Then, below that is navigation.
• Access keys are a gift from heaven on cell phones, especially when the links or form fields make it clear what keys can be hit to get that link. If you get into the habit of using access keys on your Web pages, your cell phone users will be ecstatic.

Tips for Images on iPhones

• The images must be small. Yes, the iPhone can zoom and unzoom in on images, but the smaller they are, in both dimensions and download time, the happier your wireless customers will be. Optimizing images is always a good idea, but for cell phone pages, it’s critical.
• Images must download quickly. Images take up a lot of space on Web pages when you’re viewing them from an iPhone. And while they are often very nice and make the pages look better when viewed on a full-screen Web browser, they often get in the way on a mobile device.
• Don’t put large images at the top of the page. Just as with navigation, it can be very tedious to wait for an image that takes up 3-4 screenfuls to load at the very top of the page. And this is extremely common on Web pages.

What to Avoid When Designing for iPhones

There are several things you should avoid when building a wireless friendly page. As I mentioned above, if you really want to have these on your page, you can, but make sure that the site works without them.

• Flash – most cell phones do not support Flash, so it’s not a good idea to include it on your wireless pages.
• Cookies – most cell phones have no cookie support.
• Frames – even if the browser supports them, think about the dimensions of the screen. Frames just don’t work on wireless devices – they’re very difficult or impossible to read.
• Tables – don’t use tables for layout on a wireless page. And try to avoid tables in general. They aren’t always supported and you can end up with strange results.
• Nested tables – if you must use a table, make sure not to nest it in another table. These are difficult for desktop browsers to support, and at best make the page load more slowly.
• Absolute measures – in other words, don’t define the dimensions of objects in absolute sizes (like pixels, millimeters, or inches). If you define something as 100px wide, on one mobile device that might be half the screen and on another it might be two times the width. Relative sizes (like ems and percentages) work best.
• Fonts – don’t assume that any of the fonts you’re used to having access to will be available on the cell phones.

The more visible your website is in the search engine results, the more likely your website is to be visited. Therefore, its vital that your website demonstrates good web usability, by being user-friendly, easy to navigate and efficiently organised. A major benefit of good web usability is that the more usable your website is, the longer users are likely to stay it, thus they are more likely to buy your products or services.

A further advantage of implementing good web usability is that it leads naturally to SEO, for reasons such as:

* Effective use of keywords helps your users find the information they want and – for SEO – keywords play a major part in search engine algorithms and search engine results
* Use of concise and accurate titles and headings helps users find information on your website and – for SEO – helps the search spider analyse your website
* Good use of CSS (Cascading Style Sheets) improves the layout and consistency of navigation of your website and – for SEO – enables the search spider to actually index your content, rather than coding

In short, the combination of good web usability and an effective SEO campaign will have long lasting positive effects for your website – and business.

In the meantime, we brought our iPhone into the streets, where I explored its possibilities (during the moments I was able to wrest it from my daughter). For me, one of the most interesting things about the iPhone (outside of beating my high score at Tap Tap) was exploring the web — and I’m not alone. 2008 studies show that between 85 and 95% of iPhone owners regularly use the web (as opposed to 13% of mobile phone owners and 58% of total smart-phone owners) (1, 2). So iPhone’s browser is definitely worth keeping in mind when building websites.

Some Characteristics of iPhone browsing

• uses a special version of the WebKit-driven Apple Safari browser
• sites render relatively slowly on the phone network, but quickly over a wireless network
• Supports CSS media types. ignores handheld media type.
• 2″x3″ screen can be turned to portrait (vertical) or landscape (horizontal)
• no support for Flash, Java, or Quicktime
• Javascript works, with some limitations
• typing long URIs can be cumbersome, and there is no copy/paste
• text fields in forms bring up letter key display, limiting screen real estate
• no view source function on browser here’s one solution by Abe Fettig)
• when you first land on a site, the viewport assumes a 980px wide resolution, unless told otherwise via the viewport meta tag
• you can create an icon called a web clip, which a user could keep on his or her home screen for quick access to your site or application
• fingertip navigation
  • to zoom in on a site, use your thumb and forefinger to stretch it, to zoom out, use thumb and forefinger to pinch it (aka multitouch navigation) — awesome!
  • scroll, slide, tap interface items with your finger tip
  • a light resting of your fingertip on a link works like a hover, while a finger-tap works like a mouse click
  • typing is a bit awkward… especially long URIs
  • most navigation signals are given with finger taps
  • drag and drop elements replaced with click to click
• native application integration
  • tap on an embedded Youtube video, and iPhone opens the Youtube application in landscape mode, and plays the video
  • iPhone Safari auto-detects phone numbers on a web page, turns them into links — tap the link and it will offer to dial the number. tap again to dial. (this can be disabled)
  • addresses can be used to link to the map application

Design with iPhone in Mind

From what I have gathered by reading the Apple iPhone Safari web developer docs, visiting different sites, and coding my own simple site with an iPhone in hand, there are three basic approaches to optimizing your site for the iPhone:

1. Keep it simple – KISS – to the limit!!!
2. detect iPhone with CSS, and deliver it optimized styles
3. detect iPhone with a script, and send it to an optimized HTML page/site

So, working backwards, starting from most resource-intensive solution and moving toward the simplest:

3. Detect iPhone, and send it to an optimized HTML site

The third method, detecting iPhone (specifically) with Javascript and sending it to a different HTML file, flies in the face of browser-independent coding and probably does not need to be employed by any site with a truly well-constructed front-end. However, for certain high-traffic sites accessed regularly by folks on the go, especially those wit confusing administrative interfaces loaded with widgets, feeds, and negligibly useful applications, it makes sense to put some resources toward developing a clean, simple intuitive front-end for iPhone users. Hello Facebook!

Facebook’s iPhone interface is accessible from any browser at iphone.facebook.com. The special iPhone login page, maximizes iPhone screen real estate by setting the viewport meta tag to 320 pixels wide (the actual design is liquid). From there, it is clear what your next step is, as a Facebook user (Log in — or secondarily register, or view the regular Facebook site)

Once you are logged into Facebook on iPhone, you come to another iPhone-optimized page, with friend updates front and center, and four basic navigation tabs. HTML, CSS, and Javascript are all optimized for the iPhone. For me personally, Facebook is better on the iPhone, because that interface does the best job keeping the most dynamic (and presumably, most used) features front-and-center.

Twitter has employed a similar strategy, which you can read about on, and visit from http://twitterforiphone.com/ and on Laughing Squid. Twitter also offers a SSL login for mobile users. Other than that, I’m not certain whether a site as simple as Twitter truly needs a special iPhone interface.

2. Detect iPhone with CSS, and deliver it an optimized style

iPhone ignores handheld CSS media-type, but if you need to serve iPhone a special stylesheet, Apple explains how to do so, using conditional CSS: <link media="only screen and (max-device-width: 480px)" href="small-device.css" type="text/css" rel="stylesheet"> (3).

This seems to be a relatively elegant solution that I imagine would come in for example, if your CSS design is image-heavy and you want to serve iPhone users a more streamlined CSS, or if you want to make iPhone-friendly adjustments to your layout.

1. KISS it – to the limit!

Keep it simple, stupid is the alpha, and the omega of website design. Simple sites tend to be faster, more usable, and more degradable (backwards, forwards, and sideways). KISS is the technique I employed in my efforts to design an iPhone friendly site.

The site, 10volt.org, is a simple WordPress blog set up for evolt’s 10 year anniversary. I started building the site using iPhone viewer, and by the time I finished, I was viewing it on the iPhone. I wanted to build a content-focused site, and I wanted to be done in a weekend, so it needed to be simple and easy for me, my users, and user-agents.

The first thing I did in hopes of accommodating an iPhone was to change my blog theme (darknight2.0, a standard WordPress theme) to a fully liquid layout. I later realized that iPhone does fine even with fixed-width sites (again, defaulting to 980px view, unless instructed otherwise), especially CSS layouts that constrain and divide content areas reasonably. But since I’ve always loved liquid layouts, I kept it fluid. I was able to use most of the viewport by keeping body margins small, while horizontally restraining the wrapper div on large monitors with the max-width property.

Columns and Blocks

After some exploration I found that my favorite sites on iPhone are those that offer narrow columns for large quantities of text, and small boxes for small chunks of content. I totally loved perusing the front page of sites like alistapart.com and mandatemedia.com, where the iPhone could explore every box on the page, almost like using a magnifying glass to zoom into rooms in a dollhouse.

I later learned that not only are column and block layouts much easier to read on iPhone, they support iPhone navigation, too! When a user double taps on a CSS block-level element, Safari will zoom to fit the element in the screen, and center it.

For more in-depth reading (text-heavy content), it’s important to me not to have to shift text back and forth from the beginning to end of text lines. Columns need to be sufficiently narrow for text to be magnified to a readable level, while still fitting fully in the iPhone screen.

viva suck!

At some point it occurred to me that the the circa 1995 design of suck.com would be perfect for the iPhone. I was not disappointed. suck.com, currently being archived at its original location, is totally readable on iPhone! You don’t even have to turn it sideways! In fact, like Facebook, I found suck.com to be MORE readable on the iPhone than on a desktop — yet without creating an iPhone-only layout. And, bonus! suck.com is also the easiest URI to type into an iPhone. Thanks to iPhone, I’ve finally made it through an entire suck essay!

iPhoney: iPhone viewer for Mac developers

If you have OS 10.5 (I don’t) you can download iPhone SDK for free: http://developer.apple.com/iphone/. For Mac developers without iPhones or 10.5, there is the iPhone viewer: iPhoney. It is a slick open-source app and worth trying out, but the iPhone touch-screen is revolutionary in ways that a desktop app would be hard-pressed to really emulate.

In summary

Ultimately, this is how I’d focus my website development, with iPhone on the market, and others following behind:

1. KISS and use good practices for design and coding
2. Use viewport meta-tag to focus in on fixed-width layouts narrower than 980px
3. use column-and-block layout techniques
4. use conditional CSS if necessary to optimize a stylesheet for iPhone
5. test Javascript interface elements for touch-screen usability

User Type Shaping employs a combination of techniques to identify who a product’s users are. The first part of the process involves narrowing and focussing the possible field of users by drawing on techniques from cultural studies and anthropology. These techniques illuminate both the context in which the organisation’s products exist, and who the products users may be. The study focuses on material culture such as objects, environments, visual and verbal language, media representations, as well as any existing research, and ad hoc interviews. Part of the intention is to understand where and how possible users may come into contact with the product. The research data is then represented visually and analysed until key themes and initial user types emerge.

The initial user types identified during the contextual research are then explored further through field research, using ethnographic-based observations and interviews. Once tested in the field, initial assumptions may be validated or refined, and new user types may be uncovered.

During the field study it is also possible to explore any needs the users might have, and potential opportunity areas for the product. The data from the field research is then analysed and shaped into draft user types and represented by personas. The user types may then be further shaped and refined with key stakeholders in a workshop setting.

Whilst User Type Shaping can be used to create personas, it should not be confused with standard persona development. For not much more effort than standard persona development, User Type Shaping offers an organisation that has previously had little idea of who their users are the opportunity to identify them, based on rich qualitative data which goes beyond that produced by quantitative methods. In addition, it provides the organisation with a rich picture of the cultural landscape in which their product and their users are situated, which is valuable for understanding future opportunities and how the product might be developed and presented. With a picture of who a products users are, User Type Shaping enables the recruitment of participants for future user centred design activities based on evidence that does not rely on a segmentation designed for marketing. During the User Type Shaping process, the organisation’s knowledge of who their users are, their attitudes, behaviours, and needs is increased, and since these types will be researched in future studies this knowledge will increase with each study.