On one hand, many Web designers don’t understand information architecture’s role within Web design. Designers think that information architects are the people who keep trying to organize everything. On the other hand, many information architects underestimate the Web designer’s role within a project. Information architects think they should write the site specification and that designers should code it.

One consequence of this misunderstanding is that information architecture and Web design are often considered mutually exclusive. Information architecture involves organizing, structuring and labeling; Web design involves technical development and visual design. In turn, Web designers have been led to believe that they’re restricted to doing what they’ve always done and should leave the information architecture to the information architects. This does not have to happen.

While it’s true that everything in Information Architecture for the World Wide Web cannot be learned in a day, there are several information architecture techniques that Web designers can easily learn and apply to all of their projects. This involves looking at information architecture as an extension of Web design. This perspective has several advantages:

* It virtually eliminates the “us vs. them” ideology, which usually ends up hurting both disciplines.
* It doesn’t place boundaries around the roles. Instead, it treats the roles as a continuum.
* It allows Web designers to realize that they know more about information architecture than they think.
* It helps Web designers transition from that role to an information architecture role more easily.

To put this idea into practice, we’ll look at three common Web design tasks (navigation, layout and code) and extend them into the realm of information architecture.

Navigation

Let’s start with navigation, one of the most loved and hated aspects of Web design. As individual pages are added to the site, it’s very difficult for a Web designer to resist immediately grouping those pages into categories that make sense–to the designer. The problem with this, as many of you know, is that the visitor often doesn’t share the same mental model of the site content and may not realize that what they’re looking for is not in the current area that they’re browsing.

As a preliminary exercise, it’s perfectly fine to group the pages into categories in order to develop a navigation scheme. But after this exercise, you should ask some potential users of the site to do a card sort. A card sort is an exercise used to find out how people group things, and what names they give those groups. It’s as easy as 1-2-3:

1. Write down the names of all your pages on pieces of paper.
2. Ask the participant to group them, creating subgroups if necessary.
3. Ask the participant to name the groups.

After moderating several card sorts, patterns will begin to emerge that will help you to find a dominant organization scheme.

Here’s how to make the extension. After you know what content your site will contain, do a card sort with at least several potential users of the site. Afterwards, you’ll have what information architects call a taxonomy, a hierarchical classification scheme. This taxonomy will prove extremely valuable when deciding on your navigation labels and the site maps for your site.

Layout

Next, let’s look at layouts, which have long been an important aspect of Web design. The prominence of the layout has led many Web designers to become very proficient at moving page sections around in Photoshop. Circa 1996, this was sufficient for most projects, and still is to some degree. But for multi-national sites with large and diverse user bases, Web designers need to develop more than just a page layout. They need to develop a page schematic or wireframe.

Wireframes describe the contents of the page through the use of a grayscale block-level diagram. They can range in level of detail, but typically show the location of content, images, navigation and other functionality on the page. It sounds a lot like laying out a page in Photoshop at first, but because it’s inherently focused on information rather than visual design, it’s a valuable tool for examining the relationships between information, content and groups of content.

Here’s how to make the extension. Before you start designing a layout in Photoshop, create a wireframe using software such as Visio or OmniGraffle. You’ll find that it will help you to think more analytically about the content before deciding what color it should be.

So now you have your navigation and site map, enhanced after performing several card sorts with users. You also have your layout and visual design, greatly assisted through the use of wireframes. All done, right? Well, it wouldn’t be a Web site unless we built it, now, would it?

Code

Yes, we’ve reached that point where we need to start coding. What could information architecture possibly add at this point? Well, if you’re a standards-savvy Web designer, it can add a whole lot.

As a Web designer with a keen understanding of Web standards, you know how to create a Web site using W3C compliant HTML and CSS. You also understand the importance of HTML that is semantically structured; that is, using h1 elements for headers, p elements for paragraphs, etc. Finally, you know that semantics can survive across multiple layers of development–from HTML to CSS to the visual design. What you may not know is that just by applying this knowledge, you’re already thinking much like an information architect.

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.

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.