Digital Web Magazine The web professional’s online magazine of choice. Information Architecture as an Extension of Web Design
Both information architects and Web designers can be too presumptuous about what the other does. They’re continually putting each other into little boxes, trying to define each other’s role.
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.
Last year, a presentation by Christina Wodtke and Nate Koechely (“First Things First: IA and CSS”) identified how using standards-based Web development can help drive the information architecture and design workflow. This is done in three key ways:
Making your site map references CSS compatible
CSS-compatible site map references are meaningful names that don’t begin with a number. An example of such a reference is globalLoginForm.
Identifying hierarchies
Next, you need to identify hierarchies in your markup by defining the order of content in a meaningful way. To do this, first look at your HTML and make sure content makes sense when the HTML is read from top to bottom. Second, define the order of headings (h1, h2, h3... h6). The authors of the presentation say that they don’t need to be in order, but the Web Content Accessibility Guidelines clearly state that they should be ordered properly without skipping levels (e.g., h3 following h1).
Cataloging
Finally, you’ll need to make an itemized list of all elements on the page in order to define the relationships and similarities between elements. For example, it is likely that several page elements will serve a similar function, such as headers for content areas, but will be located in different parts of the page. After you know the commonalities between elements, you can design your CSS and HTML for reusability across the site.
Here’s how to make the extension. Before you write your first tag, complete the three tasks identified above. Afterwards, you will have communicated the information architecture throughout the design process, facilitating improved communication between design teams and a better workflow.
Make the extension, fill the role
As I’ve demonstrated, the line between Web design and information architecture doesn’t have to be as clear as we may have imagined. There are many opportunities for Web designers to fill the role of information architect in every project. This is not to say that information architects are no longer needed. On the contrary, with Web sites becoming more dynamic and complex every day, information architects are needed more than ever. But as an information architect who transitioned from a Web design role, I can assure you that information architects aren’t the only ones who can organize things.
by: Joshua Kaufman
from: http://www.digital-web.com/articles/ia_as_an_extension_of_web_design/
Introduction to CSS3
A great series of articles by David Appleyard which covers most new features of CSS3 including borders, text effects, user interface features, multiple columns and backgrounds. The series also contains many examples and code snippets. Very useful.
link to:http://designshack.co.uk/tutorials/introduction-to-css3-part-1-what-is-it
Mobile Searches Estimated To Grow To 20 Percent Of Total By 2012
Mobile search could grow from 9 percent of all queries this year to 20 percent by 2012, estimates RBC analyst Ross Sandler in a new report issued today. There is still a huge gap between mobile’s share of overall search queries and its share of search advertising. Sandler estimates that mobile will still represent less than 2 percent of search ad budgets this year, compared to the 9 percent overall share. But he thinks that gap can narrow and that mobile search advertising can be a $2 billion to $3 billion market in 2012.
His assumptions seem a bit aggressive on the ad revenue side. There might always be a gap between mobile search share and mobile search ad spending because of the relative effectiveness of search ads on PCs versus on mobile phones. But Sandler does a deep dive into mobile search advertising and comes up with some compelling reasons why that gap should at the very least begin to narrow just as mobile search starts to take off thanks to the growth of large touchscreen devices such as the iPhone, iPad, Android, and Blackberry.
One big advantage the new generation of smartphones have over PCs in terms of search advertising is that the screen real estate devoted to search ads is much bigger. A single search ad on a PC takes up about 4 percent of the screen real estate, whereas a single search ad on a smartphone takes up about 20 percent of the screen. The relatively larger size of the ads results in higher click-through rates on mobile (as much as 3 to 5 times as much). On the iPhone, one search ad takes up 22 percent of the screen, and if two search ads are served up it takes up nearly half (48 percent). For Android, those numbers are 18 percent and 38 percent for one and two search ads, respectively.
Sandler tested the same keywords across different devices (an iPhone, Android Nexus One, Blackberry, and aPC), and found that the average, for both the iPhone and the Nexus One, was 1.1 paid search results per query, compared to 9.2 search ads per query on a PC. Searches on Blackberries showed hardly any paid results.
Another key driver for mobile search revenues should be the growth of local ads. Sandler found that the ratio of localized or geo-targeted ads to non-local ads is still low and expects that to grow as advertisers learn how to geo-target their search ads. Geo-targeted ads should also perform better, leading to higher mobile search ad revenues.
So how many people actually conduct searches on their smartphones? According to comScore, half of all smartphone owners conduct at least one search per month, 20 percent search once a week, and 11 percent search almost daily (which is about the same as the percentage of people who search on feature phones every month).
This year, Sandler estimates there will be 374 million people with smartphones, increasing to 766 million in 2012. Consequently, the number of smartphone searches will grow from 157 billion to 586 billion (up from 35 billion two years ago). The comparable number of searches on PCs this year will be 1.3 trillion, growing to 1.6 trillion in 2012. Any way you look at it, mobile searches will become a significant portion of total searches within two years. But how much will those searches be worth? That is still a guessing game at this point.
from:http://techcrunch.com/2010/06/16/mobile-search-20-percent/
Layar’s Augmented Reality Browser
Layar is a so-called ‘augmented reality browser’, an application that turns you mobile phone’s camera viewer – only on Android-powered phones for the time being – into a full-fledged information portal and local business search engine. It essentially puts an information overlay on top of your camera view, bringing digital data of various sorts into play whenever you’re looking at or for something in the real world.
Imagine being on the look-out for a great new place in a street nearby your current apartment or house and seeing all the real estate listings, with some details and pricing included right from your mobile device as you’re walking down the street. Imagine watching status updates your friends pushed to social networks roll in with location information attached to them (e.g. ‘Tweets Nearby’). Imagine finding information on ATMs, public transport etc. in a city you’re visiting just by starting up the camera on your mobile phone. And thanks to an integration with Google Local Search, how about being able to look up contact information and reviews for businesses (e.g. restaurants, bars, etc.) in your direct neighborhood with one-click dialing capability?
These are all things that are or will be possible with Layar, and there are so many use cases I could think of in under a minute that you’d really have to make an effort to miss the enormous potential of this application.
Layar is typically one of those cutting-edge things that aggressively shoves you nose-first into the enormous potential of the next-generation smartphones and platforms, giving you an idea of what you can expect from inventive developers and service providers thankfully making use of their ever-increasing capabilities in the near future. I can only hope for Layar that they’re not entering the game too early.
from: http://techcrunch.com/2009/06/21/layars-augmented-reality-browser-literally-more-than-meets-the-eye/