Photo courtesy of Andrew Chen via 52 Weeks of UX

Do you ever feel that your design has become stale and that despite your making lots of little changes to it over time without any big overhaul there is just no way to drastically improve it?

If so you’ve probably hit what Andrew Chen calls the “Local Maximum”. The local maximum is a point in which you’ve hit the limit of the current design…it is as effective as its ever going to be in its current incarnation. Even if you make 100 tweaks you can only get so much improvement; it is as effective as its ever going to be on its current structural foundation.

The local maximum occurs frequently when UX practitioners rely too much on a/b testing or other testing approaches to make improvements. This type of design is typified by Google and Amazon…they do lots and lots of testing, but rarely make large changes. (Except, of course, Google’s homepage background change this week, which was quickly reverted)

While a cycle of smaller improvements is better than the dysfunctional design processes most of us are stuck with, one of the criticisms of this type of extreme optimization is that it’s always and only incremental: you can only make a few small changes at a time and therefore your design evolves slowly. And if you’re doing rigorous testing, by only changing one variable at a time, then you’re only changing one small part of your application in each iteration. This work cycle becomes dependent on how fast you can run tests. For Google and Amazon, who are blessed with millions of visitors per day, this is no problem because they can run tests extremely quickly. For most people building web sites, low traffic volume can be a huge hurdle because it means that tests have to run longer and thus slows down rate of iteration.

To illustrate the notion of local maxima Chen uses the example of a photo upload application, pointing out there are many ways to improve an offering by optimizing what currently exists. You can A/B test the current photo upload page, send out more emails reminding people to upload, add more calls-to-action to upload, etc. It’s easy to both design and test these options.

But after a while these low-hanging fruit get few and far between and as UX designer you have two choices: continue to try ever-increasing alternatives (optimize) that are small enough to test or to try and make a bigger, structural change that really shakes things up (innovate).

Chen points out that other approaches to improving a photo app besides optimization would probably have a higher return. These include:

* Repositioning the product for a stronger value proposition
* Going after a different kind of audience to target their needs
* Recalibrating the “core mechanic” of the product to make uploading photos a natural part of using the product

Because these changes are much larger than a single design element you can effectively test, making a change to them requires making a daring design decision. Someone has to step up and take a chance based on their intuition: what they think will work instead of what testing has proven works.

In order to design through the local maximum we need a balance between the science-minded testing methodology and the intuitive sense designers use when making big changes. We need to intelligently alternate between innovation and optimization, as both are required to design great user experiences.

One strategy we might employ is to optimize until we reach a point of diminishing returns: design until changes just aren’t having a big effect. Then, stop optimizing and return to other kinds of analysis to figure out the next steps. Conduct interviews. Do user testing. Give surveys, ask questions. Find out the biggest existing pain points instead of focusing on tiny design elements at this stage. Focus at the activity-level. What are people trying to accomplish? What are their higher-level goals? What aren’t people doing that we want them to? What big hurdles keep them from taking the next action? This level of insight will allow you to make those bigger changes.

And when the time comes to make the bigger changes, when you decide to jump from your local maximum to some other design possibility, make the decision with conviction. But don’t forget that the optimization has only just begun.

Rather than take a traditional page-design approach, we architected the database and interaction to be slim and exchangeable. First, the database was managed by use of two .NET-based Web Services written in C# that ingested via POST marking transaction success with 32-character IDs, output via XML and with multi-purpose edit functions using switches and variable inputs. Next, the authentication was built on a combination Basic and session-based approach using ASP – quick and efficient and easy to modularize should the system need to be moved to another platform. Finally, the front-end was built on a single HTML page with jQuery and jQuery UI to support the large number of Ajax exchanges and interactive features.

The result is a clean, easy to use, transportable DAM-CMS capable of complex transactions (multi-tiered, synchronous updates), hooks to a Silverlight-based rough cut editor from Southworks, and most of all, easy and quick to modify without affecting the production environment. By deploying a single jQuery-based controller separate from the parser and presentation components, new objects could be introduced to the interface based on a modifiable, dynamic XML document at login (or pushed in real-time, even after the user had logged in).

Some of the things we learned seem pretty silly but in fact were critical to the project completing in such a short amount of time.

First, segregate all the processes – by constructing the database, the web services, and the interface separate from each other, different developers could rapidly deploy all of it and mesh together quickly at stop-points each day. Chandler and I (with a big assist from Srini and Mio) were able to work independently and merge as he completed parts of the web service, or make changes as parts of the interface came together. Likewise, during testing, changes to the interface and sequence could be done in real-time and re-tested within minutes instead of having to go back to the drawing board. This was eased by the fact that issues could be easily attributable and divisible to interface or back-end, and handled separately.

Second, it’s the little things that make a difference. Providing small visual cues – update notifications at the top of the page that disappear, Ajax loader starburts, highlighted labels and input boxes – all give the user information, information that helps them get through difficult or tedious and complex processes (for example, in creating a VOD asset, a user had options that might require upwards of 50 different pieces of information – eliminating unnecessary components on the screen made it easier to get through).

Finally, architect it but be flexible. Changes happen, and while developers and project managers all try to keep scope creep from happening, we all know that in the real world, so does feature change. It is unrealistic to assume that projects will get started 6 months before the deadline. It is also unrealistic to assume that, in such a project with a short deadline, that you’ll remember to include everything. Likewise, it’s also unrealistic to assume that during the process you’ll realize that the planned interface will work – prototyping is great but it takes time and testing that you may not always have. Being able to be flexible by following a basic interface design, using modular builders (in jQuery UI or other framework) and XML-based instruction sets, and providing error catching systems in both the front-end as well as the web services makes the project continue to move, even when not all the parts are correct.

In the end, we had a lot of hiccups and it didn’t go as smoothly as we’d hoped but it did get done and delivered on-time. The client goes to training in 9 hours and there will likely be another round of changes, but that we were able to post a full-featured DAM CMS in such a short amount of time gives us new methods and targets for the future.

For years, the only other options were to use images (which then lose the semantics and made it difficult to update over time) or sIFR (which still rocks and can provide much more extended support for very unusual fonts).  Now you can add Font API support with:

<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>

body { font-family: 'Tangerine', serif; }

Produces (though this is an image):

According to Google, the back end system converts the font into a format acceptable to the browser (including MSIE6), serving up only the weights and styles you specify, and can be cache headered in order to optimize/improve performance over the span of the site.  They also work with HTML5 and CSS3, so transformations like rotation and drop shadows still works.  Currently support exists only for Western European languages (Latin-1) but I’m pretty sure that will expand quickly once it takes hold.

Nice job!

Read the Google announcement here.
See the fonts available in the Google Font Directory.

You’ve hired the wrong guy. After reading David Airey’s forget about design and Andrew Maier’s User Experience Designer vs. Creative Director I’ve come to the conclusion that the role “web designer” is a cheap ass effort to fudge a graphic designer into a role requiring two entirely separate fields of knowledge.

Web teams still need graphic designers to communicate visually appealing messages. And graphic designers moving from a print team to a web team should stay graphic designers. What’s needed to compliment a web team’s graphic designer is someone to account for the complexities of human-computer interaction (HCI). Surely a manager in any field can’t expect staff to adopt a completely opposite, complex knowledge base overnight.

Welcome the missing link: User experience designer.

User experience design is a blend of usability, information architecture (IA), and user interface (UI) design.

A web-based user experience designer is charged with learning about users and creating interfaces that match website goals and user needs. They deliver interaction specs and simple mockups to the graphic designer as a framework for user-centered visual communication. Then, of course, the web developer makes the interaction work.

Don’t mix up the two roles, user experience designer and graphic designer. Neither should do the others’ job. They should never be blurred into “web designer.”

If you’re going to make the leap into a more complex communication channel, account for its complexities or it’ll bite you in the ass when your competitors “get it.”

For those who don’t know, a micropayment solution describes a system whereby the product being bought is a significantly small amount (something like $2 or less, so basically iTunes music would be one), and is usually coupled by either a pre-pay or a carting/aggregation system. Some day-to-day examples that have succeeded outside of iTunes would be something like pre-paid transit passes in NYC which remove one fee for each use. In the UK, there’s sQuid which is a similar service but can be used for many types of transactions. In Japan, the phones are tied directly to bank accounts for vending machine purchases.

Having worked on a number of e-Commerce back-ends for varying clients, this has always been an issue that perplexed me. On the one hand, consumers all know that at some point, to access content or acquire goods, that a payment needs to be made. On the flip side, content is so easily accessed for free on the Web (whether legally or quasi-legally) that consumers have started to become used to getting it for free. So how do we impose payment systems that allow for micro-purchasing? The example scenario is for, say, news. Several news providers have already started charging for access to news (which in reality is no different than buying a newspaper) and several others are moving in that direction, but is the subscription model working? Or perhaps will we see a pay-per-content-item system emerge?

Either way, the system itself is the culprit. In my somewhat out-of-the-box opinion, there needs to be a new model altogether. Imposing traditional payment schemes simply hasn’t worked for the micro-payment world (though I could argue that RedBox might actually be a close-to-perfect model but its also partly the targeting). Pre-pay, post-pay-aggregation, bank cards, none seem to work really well, and most of the systems that have emerged with promising outlooks later died untimely deaths (as pointed out by one of the Answer respondents).

Anyway here was my response…

I think that we still haven’t tapped the right balance in micropayment solutions that is able to satisfy the needs of the providers and the consumers. There is too little transparency and too little fluidity in the process, and we have (as a development and developer-provider community) dwelled to much on protecting the value of our content and not offering alternatives to letting customers acquire it (mind you, I am a rabid advocate of DRM solutions, so don’t think that I am not in support of content protection, it’s just that we tend to either do it with an iron fist or not at all).

I think customers are more than willing, in the end, to pay for services but the system itself needs an overhaul, likely one we haven’t come up with yet. In the same way that Amazon capitalizes on long-tail marketing, we need to look way outside of how we do things now in order to create environments where the provider and consumer of media services can co-exist. To that end, while there are several successful vendors of such products I don’t think anyone is a leader right now because I think the market will shortly turn itself over.

I do know, from my own experiences, that changes in digital asset management is the starting point for the vendors, but from a standpoint of providing explicitly heuristic access to content, not just providing massive libraries and letting the users hunt for it. A Pandora type experience with a flowing payment process (mixed pay for right to use and pay for use on a very micro level) is something I envision as an evolution. Providers are going to have to work together instead of living in silos of licensed content and use intelligent agents to disperse desired media.

Clarification posted 9 hours later
[reference to responses made later] those are some really great points. I agree that the current state of micro-payments is in waning death mode but argue that a re-thinking of the approach and process (and yes, the interminable fee structures that traditional money systems place on the products) can revolutionize the system. iTunes is a successful venture for every reason stated in several responses, but after raising the price point past the $1 mark, it’s beginning to lose its lustre and it’s debatable if it’s a true micro-payment system anyway (it’s really just a shopping cart for smaller products like the 99¢ store). When I think of micro-payment, I there’s two traditional approaches but they are still both pre-pay or cart-and-pay systems; the evolution I see would be be much more superfluous than that.

Several years ago, a good friend and myself came up with the idea of sending barcode images to cellphones via MMS as a means of ticketing for events, most notably nightclubs with VIP access (and two years later we see Fandango using scanned bar-code “ticket at home” systems that are pretty much the same but not digitized), but the system itself was paid for using micro-transaction on account (in other words, the transaction itself was attributable to the benefiting business, which could then be passed on in hard form to the customer if the business desired).

Like this, what outlandish ideas can you come up with that can revolutionize how payment models work?

While is why I am extremely proud of the evolution of the CMS that I designed and built for the Wimbledon Live player (see this post).

To understand the complexity behind designing the UX it’s important to understand the nature of the data and the critical effect of the workflow. First, video was being supplied from six sources, some to us using Saviant direct to our servers, some we pulled via FTP, and then of course the live streams (some HD and some SD). Then there were multiple parties…NBC (as the news reporter) needed editorial control over metadata, while iStream’s Managed Webcasting team needed to control the timeline over when items went to publication. My team, RnCS (Research & Creative Services) needed to insure that everything was tested before going live so we needed to throw the whole thing through a staging server before hitting a production server that then fed a cluster of edge servers on Akamai’s network.

So we structured it in several parts. First we put automated bots to determine when new assets had been dropped, specifically seeking out XML files that held the initial metadata, and dropped that into the CMS DB. Once there, the appropriate parties were notified by email (or in my case as PM, by SMS) – to update metadata, insert images, begin video transcoding, etc. Through the entire process, we designed screens to make it as easy as possible to follow the flow of assets, provide enough ability to each staff person so that overlaps in duties existed but that checkpoints assured data integrity throughout.

The grid above, for example shows the visual layout of the thumbnails that would appear in the cover-flow style playlist inside the player. Deep linking was provided so editorial users could create pointers on the MSNBC/NBCSports sites. Drag and drop allowed us to reorder objects to maximize the visibility of prominent players.

Each level of user had various modal windows to insert data. Even imagery was uploaded first to the staging, processed for size and then sent to production.

Because of the nature of edge servers, we also had to purge the cache after any update, so we provided a three-section grouping that allowed us to send the feed XMLs to production and clear the cache in one shot. And to make THAT process even easier, we built it so that it was accessibly by mobile phone so even if I was in transit, I could still update the CMS in a timely fashion.

Finally, the live streams had the ability to be toggled on and off so that the matrix of available feeds, particularly the Smooth HD stream, was optimized and prioritized. To be sure, there was still much room for improvement but given that the whole CMS was built in 6 days and now, five days into Wimbledon, has eased us into a steady, smooth workflow, speaks volumes for making it easy to use, intuitive (for example, the color designations on the player match the ones in the CMS, big text and extensive micro-transaction Ajax created an interactive environment), and overall a good experience.

Probably one of the best stated defenses I’ve read for UX comes courtesy of this post in Smashing Magazine.  In talking about the brand loyalty of Apple users…

How do you make your customers trust you this much? The answer is to give the user an “Experience.” It is not enough simply to make a website usable. The experience you create for the customer has to make them not realize that they are “using” it. It’s a tough concept to grasp, and the recipe changes from website to website, but the right combination of usability, creative design, writing, psychology and metrics and a strong brand will create an experience through which your customers learn to trust you.

How true. This week I’ve been tossed back and forth between clients and bosses struggling with all the wants and demands and needs and the bottom line came down to making sure everyone realized that it has nothing to do with personal preference and like and dislikes, it’s about experience, and more than that it has to be tangible, palpable and reach the emotion of a human in a way that makes it memorable, or at the very least engaging.

In the resulting manifesto, entitled “Information Management: A Proposal“, Berners-Lee suggests the we “should work toward a universal linked information system.”  Every student of web design should read it and understand the origins of the industry.  It is an amazing path that the Web has taken in its course to ubiquity and utility but it all started, like most great inventions, as just an idea in someone’s head.

Communication is one of the foundational elements of a good website. It is essential for a positive user experience and for a successful website that truly benefits its owners. All types of websites are affected by the need for good communication in one way or another. Regardless of whether the website in question is an e-commerce website, a blog, a portfolio website, an information website for a service company, a government website or any other type of website, there is a significant need to communicate effectively with visitors.

Because of the significance of communication with visitors, it is an essential consideration for every designer and website owner and the responsibility of both. Unfortunately, communication is sometimes overlooked and takes a backseat to the visual attractiveness of a website. Ideally, the design and other elements that do the communicating work together to create a clear, unified message to visitors.

In this article, we’ll take a broad look at the subject of clear communication in Web design. We’ll start with a discussion of the primary methods of communication for websites and typical challenges that designers face. From there, we’ll move on to look at what specifically should be communicated to visitors and tips for implementing this in your own work. At the end, we’ll look at some of the goals that should be established in terms of communication when developing websites, as well as some of the results of having a website that communicates effectively.

[read the entire article at Smashing Magazine]

You may have a personal portfolio website for a number of reasons. If you’re a freelancer, then you’d need one to showcase your work and allow people to contact you. If you’re a student (or unemployed), then you’d need one to show prospective employers how good you are and what you can do, so that they might hire you. If you’re part of a studio, then you might use one to blog about your design life, show people what you’re doing and build your online presence.

A personal portfolio website is all about promoting you. You are a brand, and your name is a brand name. No one is going to know about your brand unless you get it out there; and if you’re a Web designer, developer, writer, gamer or any other type of creative, then it’s essential that you have a good portfolio website.

1. Logo
Your logo is usually the first thing a user sees. In the Western world, we read from left to right, top to bottom, so it makes sense to put your logo in the top left of your website so that users can immediately identify who owns the website.

It doesn’t necessarily have to be your name, but if you’re trying to promote yourself online, then it’s a good idea to go by your name. And always link your logo to your home page. It’s a common convention that users expect online.

[read the entire article here at SmashingMagazine]

Recently WebTrends blogged that Twitter search will now be listed in the standard search engine and keywords report in WebTrends. Omniture has also blogged about integrating Twitter search data into Site Catalyst.

As Twitter increasingly becomes a tool that people use to find information it is really critical for companies to know how people are finding their sites on Twitter. Doing so will allow them to incorporate that learning into future marketing efforts on Twitter as well as other sources (e.g. Google etc).

Since Google Analytics does not yet recognize Twitter search as a search engine like WebTrends or Ominiture does, I will show you how you can do it easily with one line of code.

However, keep in mind this solution only works when the search originates on Twitter (i.e. http://search.twitter.com). 3rd party tools like TweetDeck, those will not be captured in this solution (nor will it, I believe, be captured in WebTrends’ solution). Use this information to understand general search keywords being searched on Twitter but do not get caught up in actual number of visits that your Twitter efforts are driving.

So how do you capture searches conducted in Twitter?

GA provides a few functions to allow you to add your own search engines to the list of search engines that are already tracked by GA.

_addOrganic(newOrganicEngine, newOrganicKeyword)

You simply call this function right after var pageTracker = _gat._getTracker(“UA-XXXXXX-X”); This functions to track any custom search engine.

Twitter uses “q” as the querystring that contains the keyword. So in this case our search engine is search.twitter.com and newOrganicKeyword is the value in query string q

So you code will look like

var pageTracker = _gat._getTracker(“UA-XXXXXX-X”);
pageTracker._addOrganic(“search.twitter.com”, “q”)
pageTracker._trackPageview();

(Note: pageTracker._addOrganic(“twitter”, “q”) will also work)

What will the reports look like in Google Analytics?

Note: For some reason I cannot get Twitter search to show up as Twitter in Google Analytics Search Engines report, it shows up as “search”(Maybe it’s a bug in GA? If anybody can provide pointer that will be a great help). However, for now this works fine as long as you know what “search” means in your search engine report. I am playing with filters and if I get that resolved I will post the fix or if you know the fix please email me.

Search Engines Report will show the following:

Drilling down to keywords will show the keywords on Twitter Search.

Looks like Twitter Search brings me repeat visits and more engaged traffic.

[original article here]

More and more applications these days are migrating to the Web. Without platform constraints or installation requirements, the software-as-a-service model looks very attractive. Web application interface design is, at its core, Web design; however, its focus is mainly on function. To compete with desktop applications, Web apps must offer simple, intuitive and responsive user interfaces that let their users get things done with less effort and time.

In the past we didn’t cover web applications the way we should and now it’s time to take a closer look at some useful techniques and design solutions that make web-applications more user-friendly and more beautiful. This article presents the first part of our extensive research on design patterns and useful design solutions in modern web applications. Below you’ll find a collection of 10 useful interface design techniques and best practices used in many successful web-applications.

1. Interface elements on demand

Simplicity is important in user interface design. The more controls you display on the screen at any time, the more time your users will have to spend figuring out how to use your interface. When there is less choice, the available functions become more apparent and are easier to scan. Simplifying an interface isn’t easy though, especially if you don’t want to limit the app’s functionality.

When you click on the search link in Kontain’s search box, a similar drop-down menu appears. So, if you need to narrow your search, you can use the menu to select the sort of content you’re looking for. Tucking these options away simplifies the search box.

One way of making things simpler is to hide or conceal advanced functionality. Find out the most commonly used functions of your interface and tuck away the rest. You can do this with pop-up menus and controls, which are very common on desktop software. For example, if your search bar has advanced filters, put them away in a special drop-down menu at the end. If users need those filters, they can enable them with just a couple of clicks. Deciding what to keep and what to conceal isn’t a simple task, though, and will depend on how important and how frequently used each of the controls is.

When you click on the search link in CollabFinder, you aren’t taken to a different page. Instead, the search box controls drop down, allowing you to begin your search straight away.

2. Specialized controls

It’s important to select the right interface controls for the situation. Different situations can be handled in different ways, and certain controls are better at their intended task than others.

Backpack has a compact calendar date and time picker for selecting a reminder date.

For example, you can select a date by using drop-down lists for day, month and year. Drop-downs aren’t very efficient, however, when compared to a calendar picker, where you can click directly on a day you want. Calendar pickers also help you see the days, weeks and months (and especially workdays and weekends) more easily and so allow you to make a more informed decision more quickly than you would with a simple drop-down list.

MyBankTracker’s APY calculator features easy-to-use slider controls for quickly trying out different projections.

Another good example of this are sliders. Yes, you can always input a number manually, but for certain situations, slider controls do a much better job. Not only are they easy to use — just click and drag — but you can also see how your selection fits between the minimum and maximum of an available range.

3. Disable pressed buttons

One of the problems Web applications encounters with forms is the submission process. With very simple forms, if you click the “Submit” button twice or more very quickly, the form will be submitted two or more times. This is obviously problematic because it will create duplicates of the same item. Preventing duplicate submissions isn’t very hard, and it is essential to do this for most Web apps.

There are two tiers to this safeguard: client-side and server-side. We won’t go through the server-side safeguard here because this will vary depending on the programming language you use and your back-end architecture. What you should essentially do is put in a check to ensure during the processing stage that whatever is being submitted is not a duplicate, and if it is to block it.

Yammer disables the “Update” button while your new message is being submitted.

The client-side stage is much simpler. All you have to do is disable the “Submit” button the very moment it is clicked. The easiest way to do this is to add a piece of JavaScript to the “Submit” button like this:

<input type=”submit” value=”Submit” onclick=”this.disabled=true” />

Of course, we would advise you to also implement server-side checks to be sure that duplicates don’t get through.

4. Shadows around modal windows

Drop shadows around pop-up menus and windows aren’t just eye candy. They help the menu or window stand out from the background by reinforcing its dimensions. They also block out the noise of the content beneath the window by darkening the area around it with a shadow.

This technique hat its roots in traditional desktop applications and helps the user to focus his/her attention on the appearing window. Since most modal windows aren’t as easy to distinguish from the main content as in desktop applications, shadows help them to appear closer to readers, because the window appears to be three-dimensional and lay above the rest of the page.

Digg’s log-in window has a thick shadow around it to block out the noise of the page beneath.

To achieve this effect, designers often create a container with a transparent PNG-image as background and place the content inside the container – with equidistant padding on all sides of the box. Another option is to use a background image with transparent borders and position the content box within this box using absolute positioning. This is exactly what Digg does — this is the image they are using (dialog.png). And this is the markup and CSS-style they are using:

(X)HTML:

<div id=”container”> <div style=”display: block; top: 236px; opacity: 1;” class=”dialog”> <div class=”body”> <div class=”content”> … </div> </div> </div> </div>

CSS:

.dialog { position: absolute; left: 50%; margin-left: -315px; width: 630px; z-index: 100001; } .dialog .body { background: url(/img/dialog.png) 0 0; /* semi-transparent .png image */ padding: 40px 13px 10px 40px; }

Alternatively, you can also use JavaScript-based lightboxes or drop shadows using CSS3-attributes we’ve described earlier, but you need to be aware that Internet Explorer won’t support them.

Basecamp’s project switcher window has a large soft drop shadow that helps the menu area stand out.

5. Empty states that tell you what to do

When you’re designing a Web application, it’s important not only to test it with sample data, but to ensure that it looks good and is helpful when there is nothing there yet. You should design the empty states.

When there is no information for a page or query yet, a helpful message telling the user how to start could go in that empty space. For example, a project management application’s home page may list the user’s projects, but if there are no projects yet, you could provide a link to the project creation page. Even if there is already a button to do that on the page, an extra bit of help doesn’t hurt.

Campaign Monitor points you in the right direction when you start building an email campaign.

This technique encourages users to actually try out the service and proceed directly with using the service after registration. Guiding the user through single steps of the application may help him or her to understand what advantages the application offers and if it’s useful or not. It is also important to present most important options to the users and only them — it doesn’t make sense to overflood them with numerous options. Keep in mind that users usually want to get a more or less concrete idea of what is offered to them, but they don’t want to jump into details — they have neither time nor interest in it.

Using empty states to motivate users and animate actions, you can significantly reduce the amount of “drop-outs” and help your potential clients to gain a better understanding of how the system works.

Wufoo’s forms page has a large, friendly message inviting you to create a new form if none yet exist.

6. Pressed button states

Many Web applications have custom-styled buttons. These are anchors or input buttons that have custom images assigned as their backgrounds. The default input buttons may not be suitable in some cases, and the text links are sometimes too subtle. The challenge is, when you make your links look like buttons, they should act like buttons — and this includes having a “pressed” look when the user clicks on them.

This isn’t a purely visual tweak. Giving instant feedback to the user will make the application feel more responsive and bring the experience closer to what the user experiences on desktop applications.

You can add a pressed button state with CSS by styling the active pseudo-class of the link in question. So for example, if your anchor has the class add_task_button, you can style its active class by targeting add_task_button:active.

Buttons in Highrise actually show a pressed state when you click on them, providing the user with a satisfying responsive feel.

7. Link to the sign-up page from the log-in page

Some people who haven’t yet signed up to your application will inevitably end up on the log-in page. They likely want to try out your application but can’t find the registration page in a hurry. Perhaps they’ve tried accessing a feature that’s only available to registered users.

Don’t have a Delicious account? No problem; a sign-up link is provided on the Delicious log-in page.

Goplan has a nice colored button on the log-in page pointing to the sign-up page.

Make things easy for these folks by placing a registration link on your log-in pages. If they haven’t got an account yet, they shouldn’t have to look for a registration page. Our studies confirm: 18% have a sign-in form or a link to the sign-in form placed next to it (e.g. YouTube, Reddit, Digg, Lulu, Metacafe).

8. Context-sensitive navigation

It’s important to think about what the user expects to see and what they need in every given context. You don’t need to display the same navigation controls everywhere because users simply may not need them in every situation.

One of the best examples of context-sensitive controls is the recent change in the Microsoft Office 2007 interface, in which the default set of toolbars was replaced by ribbon controls. Each tab on the ribbon holds different controls relating to a particular activity, be it editing graphs, proofreading or simply writing. Web applications can also benefit from such context-sensitive controls because these controls help unclutter interfaces by showing only what the user needs, not everything that’s available.

Lighthouse features a familiar tabbed navigation menu; however, it also has a second level of menus right under the set of tabs. This level displays only the items associated with the active section of the website.

9. More emphasis on key functions

Not all controls hold the same importance. For example, on a screen for creating a new item, you may have two buttons: “Create” and “Cancel.” The “Create” link is more important because that’s what the user will be doing most of the time. Only rarely will they need to cancel the screen. So if these controls are located side by side, you may not want to give both the same emphasis.

The “Create ticket” button in Lighthouse. You can see the “cancel” link next to it, in plain text. The button not only commands more importance but also has a larger clickable area and is easier to spot because of its frame.

To shift emphasis to the “Create” link, we can simply use different styles or types of controls. Some applications use the form input button for the create action, and have the cancel action as a text anchor. This not only gives the create button more clickable area, it also helps to grab the users gaze better when they’re looking for it.

10. Embedded video

While pictures and text are a great way to communicate and teach your users about your app’s features, video can be an even better alternative if you have the resources to produce it. Video has been gaining popularity on the Web in recent years. For Web apps, videos are generally used on the marketing website as a kind of screencast to show off a product’s features; however, this isn’t the only way to use video.

GoodBarry features a video screencast on its front page showing off the product. It also uses screencasts inside the app to teach people on how to get started.

MailChimp includes tutorial videos right on the admin panel to help out new users.

Some Web apps use video inside the application itself to teach users how to use certain features. Video is a fantastic way to quickly demonstrate how your product can be used, because it is easier to consume than a page of text, and it is also much clearer because the viewer can see exactly what to do.

Read the complete article here.

Web design isn’t art. It involves a whole collection of different skills — from copywriting and typography to layout and art — all fused together to create an interface that not only features a pleasant aesthetic but that communicates function and facilitates easy access to its content.

But in order to combine all these elements of Web design together and achieve successful results you must have a clear direction, a direction that will guide each and every aspect of your design towards common goals. You must think strategically.

What is strategic design?

Strategic design is the fusion of your organizational goals with every aspect of your design process. You aren’t simply designing a user interface that looks good and is usable and accessible. You’re designing an interface that will help you accomplish your organization’s objectives.

There are many websites out there that look fantastic and sport the latest trends in design yet often fail miserably in their intended function. Design trends are, of course, important because they give you fresh inspiration and new techniques, but the implementation of those techniques and styles needs to be intelligent and focused. For example, a blog isn’t a marketing brochure; you should focus on usability and readability rather than style. Similarly, a promotional website for a computer game should feature graphics and styles that portray a specific feel and style; the aesthetic is very important here.

When the designer simply implements a look and feel that is fashionable at the moment (think Web 2.0 trends) without any thought of how they fit the function of the website or the business behind it, the end result is unlikely to be very effective.

Web design is all about crafting an interface that communicates function, is usable and accessible and exudes the right emotion and feeling. Effective Web design needs all of these elements to be in tune with the goals of your website and in sync with the organizational objectives behind the website. Strategic design is all about identifying those goals and using them to guide your design.

Implementing Strategic Design

Let’s take a look at how we can use six steps to think strategically about a Web design project:

1. Establish your goals

One of the first things you need to do before starting work on a Web design project is to be clear about your client or organization’s goals. What are you trying to achieve with the new website or redesign? What is the website’s main purpose? Ask your client, your manager or yourself what those are. If they or you don’t know yet, then they should be discussed and agreed upon. A clear direction is essential if you want your design to have a purpose.

Remember that a website isn’t a piece of art; it’s an interface that serves a function. That function may be to sell products, to deliver informational content, to entertain, to inform or to provide access to a service. Whatever that function is, your design must focus on fulfilling it. Goals are also important, especially if you’re doing a redesign. Ask why you are doing the redesign: are you looking to grow the number of sign-ups, decrease the bounce rate or maybe increase user participation?

Take a look at the design of the New York Times website above. Its function is to deliver informational content. The minimalist interface serves this function beautifully by fading into the background.

In contrast to the New York Times, AdaptD is a Web design studio, so the goal is not to deliver a lot of content but to impress visitors with its design, showcase a gallery and advertise the company’s services. The visuals are very important here, and AdaptD delivers a browsing experience with beautiful imagery and strong colors.

2. Identify your audience

Who your audience is will play a big role in how your website should look and function. There are many demographics here that can influence your design, ones like age, gender, profession and technical competency. A computer game website for a younger audience needs a different style than that of a serious business journal. Usability should play a bigger role for older and less technically savvy audiences.

Who your audience is will not only influence the general aesthetic of the website but will also determine a lot of smaller details, like font sizes, so make sure you’re clear about who will be using your website.

This is the unsuccessful jQuery rock-star redesign. The designer went too far in trying to create excitement and so failed to cater to the more serious, techy audience. Since then, the rock-star graphic has been replaced with a more conservative look.

Disney’s target audience is kids. The intent is to entertain and involve this young audience, and the design does it by wrapping the content in a fun, colorful interface with a lot of visual and interactive elements.

3. Determine your brand image

A lot of designers tend to get a little too inspired by the latest trends and then implement them without thinking first about what sort of image they really should be conveying. Glossy buttons, gradients and reflective floors may work for some websites, but they may not be right for your brand.

Think about color. Think about the feel you want to achieve and emotions you wish to elicit. Your design should embody the personality and character of your brand. Everything has a brand; even if you don’t sell a product or service — for example, if you run a blog — your website still has a certain feel that makes an impression on your visitors. Decide what that impression should be.

Carbonica is a website aimed at helping people reduce their carbon emissions. The environmentally friendly image of the website is crafted using a lot of recycled paper images and textures, as well as earthy green and brown tones.

Restaurantica is a restaurant reviews website. Its design illustrates this by taking on the look and feel of an actual menu you would see in a restaurant.

4. Goal-driven design direction

You’ve established the purpose of your website, set some goals you want to achieve, identified your audience and determined your brand image. You can now proceed to implement it. So how do you make design decisions sync with your strategy? Let me illustrate this with a likely example.

Suppose your main objective is to increase the number of subscribers to your Web service. How can your design help accomplish this goal? I can see at least three things here that will make a difference:

• Make the “About” snippet on your landing page as clear and concise as possible. Your visitors must not have any confusion about the function of your website.
• Use color and contrast to make the registration button or link stand out. If people can’t find it, then you won’t get many sign-ups.
• Streamline the registration process by removing unnecessary and optional elements; people can fill those out later. If the form looks long, people may be put off of filling it in.

These are just three ways you can lead your design towards accomplishing the goal of increasing the number of sign-ups to your service. Your goals may vary, but the strategy is the same: shape and focus all the design elements towards meeting those goals.

The same strategy applies to your brand and audience: design the aesthetic that best suits it. If your website’s focus is entertainment, then create an “experience.” You are free to use a lot of color and imagery to shape that experience. On the other hand, if you’re designing a website that is focused on information consumption, for example, a blog or a magazine, then focus on usability and readability. Create an interface that fades away and doesn’t distract the user from accessing the content.

Stubmatic is an online box-office application. Their external website has two purposes: explain what the service does and get people to sign up. New visitors may only remain on your website for a few seconds, so if you don’t want to lose them you must be concise. You can do this by:

• Using large imagery and diagrams to illustrate the function of your product or service.
• Showing screenshots of your application. People will want to see what it looks like before they commit to a download or sign up.
• Providing a tour, using descriptive examples of how your service can help them solve a problem. Show a video if you can; the less effort people need to make to understand how your app works the better.
• Having the sign-up link accessible from all pages.

To succeed, the website must make the best use of the very limited amount of attention visitors will be giving it by not only informing but educating them about what your product does, and selling the benefits it provides. Stubmatic uses design elements effectively to pursue those goals.

TechCrunch is one of the more popular tech blogs. Its new design removes every single unnecessary graphical element from the page. What’s left is just the content, advertising and navigation. Subtle lines and grey shades give the page structure, yet the interface is almost invisible and places content straight into the front row. For a blog that posts several new articles a day, this format is ideal because it facilitates fast and easy access to the content.

5. Measure results

Once you’ve designed and deployed your website, it’s time to measure your success. This is just as important as the first two steps because until you test how well your design performs, you won’t know whether or not it is effective in fulfilling your goals.

If your goal is to increase the number of sign-ups to your service, measure it and see if your changes are making a positive impact. If you want to increase the number of subscribers to your blog, check your RSS stats. If you want to increase user involvement, see if you get more comments or more forum posts or whatever else is relevant in your context.

You can, of course, also ask people for their feedback, and this is a very good way to check if you’re on the right track. Be careful though not to implement every suggestion people make. Everyone has different tastes and wants, so everyone is going to have a different opinion about what your website should look like. If you do collect feedback, look for patterns; see if there are common issues that crop up and deal with those.

Measuring various website metrics is a whole science unto itself and is beyond the scope of this article. But however in-depth your analytics are at this stage doesn’t really matter; the important thing is that at the very least you have some way of measuring your key objectives. You can use this information to see if you’re moving in the right direction with your design and with any future changes you or your client make.

Even if you’re on a tight budget, you can use free tools like Google Analytics to get a lot of data on how your website is being used, including overlays of your pages to see what links people click on most as well as the ability to track conversion funnels.

6. Kaizen

There is a Japanese philosophy called “Kaizen,” which focuses on continuous improvement using small steps. When you work on your website, you should be thinking of Kaizen because the version you’ve just published is not the final version. There doesn’t even have to be a final version.

You can always make improvements, and the very nature of a website will allow you to introduce these at any time. This is because a website isn’t a magazine that you print and sell: once a magazine copy is out of your hands, you cannot make any changes or fix any spelling mistakes or errors. A website, however, sits on your server: if you find a mistake, you can fix it right away. In the same vein, you can introduce gradual improvements and updates to make your website more effective in serving its function.

Using the results of your measurements, you can identify problem areas. Perhaps your visitors cannot find the RSS feed link, or your bounce rate is too high or an important page on your website isn’t getting enough visits. Whatever the problem is, there will always be a way to improve things.

Conclusion

The main gist of strategic design is simply common sense: you’re making something for a specific purpose, so of course it should fulfill that purpose through its design. But it is actually very easy to lose track of your goals and end up with something that is beautiful but ultimately doesn’t work in its context. It’s very easy to fall into the trap of implementing the latest design trends just because they look attractive or shaping a section of your website to resemble another website that you really like without first thinking about why you are doing it or how it fits in with the purpose of your project.

Avoid falling into these traps by thinking through every design decision you make. Why is this button this color? Why are we using tabs? Why should we use icons here? Once you get into the habit of questioning your every design decision, the whole process will become much more focused. Think about the product or organization you’re representing. Think about the target audience and your brand. What will work in this context? What is expected? How can you use design to best fulfill the website’s purpose? Don’t just build a beautiful website: make a website that really works.

About the author

Dmitry Fadeyev is the founder of the Usability Post blog, where you can read his thoughts on good design and usability. (al)

These are the elements of functional design, the process of responding to the needs or desires of the people who will use an item in a way that allows their needs or desires to be met. Functional design is both an outcome and a process. As an outcome, it describes products that work well to perform their assigned tasks; as a process, functional design is a set of practices guided by the principles that produce that positive outcome.

I’m not going to bother repeating the article here – please take the time to jump over to SM and read it.  However, here’s a quick synopsis:

1. Consider the product’s goal
Determine that one primary goal of the site and make sure that everything you do revolves around that fundamental concept.  Every addition you make, every tool you provide, every piece of text you write should be dedicated to that goal.

2. Consider who will be using it
As JJG proposes, identifying the target audience can be a critical factor simply because most designers either fail to take it into consideration or misjudge it.  Audiences vary and so do their wants, needs, and abilities.  Cater to that need: a product has to work equally for all its potential users if it’s to accomplish its goal.

3. Consider what your audience intends to do with it
What your audience does may not be what you do.  YOU are not the audience, your users are.  Every user comes with intention, learn what those intentions might be.

4. Is it clear how to use it?
We designer/developers have a tendency to go beserk with our functionality.  Don’t.  "Clarity is the key to functional design".

5. How does your user know it’s working?
Provide feedback…it’s the only way your user knows that he or she is using it right.  Provide visual cues, highlight the necessary parts.

6. Is it engaging to your users?
One of JJGs two tenets and the one that I believe is fundamental to all things Web – is it engaging.  I harp on it nearly every quarter but I don’t think many people really see it.  Example: four times this week alone I’ve seen references to Blackberry’s as engaging – owners cannot seem to put them down or stop fiddling with them.  Whether its the feel, the interface, the haptics or the information it provides, there is definitively something engaging about them.

7. How does it handle mistakes?
JJG makes a big point of discussing error handling.  We as dev-igners pretty much think we never make mistakes.  Just because you can run through your web site and never encounter an error doesn’t mean your user won’t.  Users make mistakes.  Or more succinctly, your user will not do the same things you do.  How does the site correct, adjust or respond to errors?

This article from VandelayDesign makes a pretty good point about that first impression. Of course you’ll want to make the best one possible but don’t forget that because of the plethora of choices, a lot of visitors will forget anything other than the visual in a web design – throw some makeup and a new dress on it and frequently a visitor will not even know it was the same skeleton underneath. Nonetheless, it’s those fundamentals a web site still needs that counts and this post makes a clear and concise listing of them.

And for those of you too impatient to read the whole thing:

1. Load Times
2. Error Messages
3. Colors
4. Logo/Branding
5. Header Images
6. Typography
7. Layout
8. Advertisments
9. (Your) Reputation
10. Ease of Navigation
11. Clarity of Purpose
12. Unprofessional Items
13. Quality of Images and Photos
14. Accessibility
15. Popups and Popunders
16. Video and Audio
17. Associations
18. Quality of Content
19. Tone
20. Number of Comments and Trackbacks
21. Flash Intros

[via VandelayDesign]

Read the post “The Paper Version of the Web” and see the pics at deeplinking.net.

Dan Catt’s concept sketch for Flickr Places

[via Neatorama]

The New Iteration: How XAML Transforms the Collaboration Between Developers and Designers in Windows Presentation Foundation (WPF) by Karsten Januszewski and Jaime Rodriguez

Blog post by Client Platform Technical Evangelist Tim Sneath

Download the Whitepaper

Today we’re comfortable with the rapid dissemination of information and ideas from one side of the globe to the other. What’s in Tokyo today can be in Tehran tomorrow and vice versa.

When physical things reach a certain size – being pocketable seems about right, their ability to be picked up and moved around increases considerably. All things being equal small objects much like ideas, travel further, travel faster. They are put into bags, pockets and inevitably are introduced to people in far off lands. And if those people in far off lands like and value them enough, the container ships follow.

Thoughts for today: Which of today’s large objects are likely to minaturise to the point of of being pocketable? What features and functionality are you likely to find added to today’s already-pocketable objects? What activities and consequent behaviours do these new features and products enable? Think adoption and adaptation of trends.

And the photos? Livestrong bracelets from Delhi (above) and Accra (below). Not given as an example of the adoption of Livestrong and everything it stands for, but rather an example of an object as a vehicle for personal decoration + fashion + status. Both, incidentally likely to be locally manufactured.

Objects below a certain size tend to be clustered (keys) and/or contained (credit cards). As pocketable objects continue to minaturise – what is the affect on their speed of distribution? The speed of adoption? The speed of trends?

1. Don’t make users think
2. Don’t squander users’ patience
3. Manage to focus users’ attention
4. Strive for feature exposure
5. Make use of effective writing
6. Strive for simplicity
7. Don’t be afraid of the white space
8. Communicate effectively with a “visible language”
9. Conventions are our friends
10. Test early, test often

And be sure to check out the links at the bottom of the article.

Design Schools: Please Start Teaching Design Again
by Dan Saffer
…I was taught that design has three components: thinking, making, and doing. (Doing is the synthesis, presentation, and evaluation of a design; the bridge between thinking and making.) If all design schools are teaching is the thinking, well, they are missing the other two thirds of the equation. They have abandoned craft for craze. Thinking without the making and doing is almost useless in the job market, unless you want to work at Accenture or some other big consulting firm. It probably won’t help you get a job as a designer in a studio environment. You’d be better off getting a degree in Humanities; at least you would be well-rounded… [read...]

Why usability is a path to failure
by Todd Wilkens
…So, why oh why do people in this day age still hold up “usability” as something laudable in product and service design? Praising usability is like giving me a gold star for remembering that I have to put each leg in a *different* place in my pants to put them on. (Admittedly, I *do* give my 2 year old daughter a gold star for this but then she’s 2.) Usability is not a strategy for design success. The efficiency you create in your interface will be copied almost instantaneously by your competitors. Recently, I’m even coming to believe that focusing on usability is actually a path to failure. Usability is too low level, too focused on minutia. It can’t compel people to be interested in interacting with your product or service. It can’t make you compelling or really differentiate you from other organizations. Or put another way, there’s only so far you can get by streamlining the shopping cart on your website…  [read...]

Experience design is not about brands
by Peter Merholz
…The unfortunate company-centeredness of the Design Council’s discussion of brand is in evidence in their 13 examples — most of these are explicit branding ploys, attempts by various companies to impress their brand upon customers through environmental design that suffocates any attempt by customers to express themselves, their desires, what they as people want to accomplish. This isn’t to say that these various examples are “bad” — they might be tons of fun, totally worth the time and money. But if “customer-centric relationship models” are a key element of experience design, what does that have to do with the Guinness Storehouse, “the ultimate experience of the character of Guinness.”… [read...]

And if you’re looking for some good books on the topic of UCD…

Usability and Interface Design Books
posted on Smashing Magazine

I’ve posted this article off Smashing Magazine because it illustrates some of the basic tenets of good web design and basic web usability that we’ll be discussing in IMD325 (User Centered Design). 

The Web has changed. This isn’t your neighbor’s nerdy kid’s internet anymore. Now the Web is home to your mom, your grandma and your technophobe sister. With computers as common a household appliance as televisions now, who might be using your web-application has expanded beyond the realm of just the power user.

Complicated menu systems, alert dialog messages that lock you out of the browser and flashy but confusing layouts aren’t necessarily going to help you make conversions. The Web user demographic has changed and to make your web application appeal to the masses your user interface needs to teach and to guide.

User Interfaces Should Teach
User interfaces need to teach your user how to use your application without resorting to a help screen. Many developers think that a help section will suffice for teaching users how to operate most any application, but this is not the case.

The help section of most applications, Web-based or otherwise, end up being used by the power users who are already trying to figure out every nook and cranny of the application. The proper way to help users understand how your application works is to bring the help section to them and in a format that can easily be understood.

In-line tips and interface descriptions work as an excellent introduction to the interface and how it operates. By providing your user with assistive instruction aside the interaction, it is easier for the user to relate the instruction with how it applies to your web application’s functionalities than a disconnected FAQ or help section.

[read the complete article here]

First, lots going on with iStreamPlanet, our Silverlight development and other technology advancements.  For those of you who are able to, head on out to CES – it looks like this will be a pretty good show this year.  And if you have a chance to head to Mix08 – there will be some really cool things to see there too.  In any case, the contractors didn’t finish our new office build-out so me and the team are stuck in temporary office space – no thanks to Wynn practically pushing us out the door from the office I’ve been residing in the last 5 years.

Second, I know a lot of you use and have gotten comfortable with Firebug.  Here’s a similar plugin I found that you should also get.  It allows you to do a lot of those user variations that you might not otherwise account for – exact screen resolutions, Javascript on/off, etc.

Finally, I admit, I use cheat sheets.  It’s bad enough trying to remember markups, commands, syntax, functions, and methods for 1 or 2 languages, what about 5 or more languages that a web developer typically has to know (and if you have no idea what I’m talking about, see below)?  UK-based Internet dude Dave Child, who writes good, poignant articles and blogs about a ton of topics, has a great set of free (yes, FREE – and if you use them you should send him a note and thank him for saving you a few bucks after all the tuition you’ve paid) cheat sheets in PDF format for download.  I recommend grabbing them (at least the list below) as soon as you can – with the Web, you never know when something’s going to disappear.  Check out the list and links here.

And as far as the list of languages you should know as a web developer (and this rant is aimed directly at my students) …

1. HTML/XHTML (and you should know the difference)
2. CSS (and be current and know the hacks)
3. Javascript & Javascript prototyping
4. ASP Classic (sorry guys, I still think it’s a good fundamental language)
5. SQL (for MySQL)
6. PHP (both functional and object based)
7. XML (and variants of it, plus XSL)
8. ActionScripting
9. And if you really want to get ahead, you need to learn at least one of the following to stay ahead of the curve in the next few years: ASP.NET, JSP, Ruby on Rails, or C#

And no, AJAX is not a language as many of you still think – if you thought it was…GO LOOK IT UP!

See you in class … don’t be late!

Screen Resolution ≠ Browser Window Resolution

As the screen resolution increases with high resolution monitors, users generally tend to avoid browsing in the full screen mode. Besides, in many cases sidebar is floating left or right on the desk while browser extensions are placed within the browser window.Therefore it’s important to understand that in most cases the browser window resolution is much smaller than screen resolution. Although some dependencies might exist, it’s hard to estimate what screen resolution is actually used.

Target Your Audience: Find An Average Profile

In order to gain a better understanding of your average user profile it’s a common practice to use the data provided by modern analytics tools such as Google Analytics. Most of them not only track an average screen resolution of your visitors, but also users’ behaviour and their preferences.Thus you can determine which users stay longer on your web-site and improve the user experience by fine-tuning of your design. Once you know the average profile of your visitors, you might motivate your design decisions by expected values. You can find some of the heuristics derived from recent studies in one of our recent articles Who Is Your Visitor: An Average Profile.

Common Screen Resolutions

Eoghan Mccabe, the project manager of FoldSpy, has provided Smashing Magazine with exclusive data about the screen resolution which users tend to browse with on large web-sites. Foldspy measures browser screens for advertising purposes.Over 18,000,000 browser screenshots above the fold have been analyzed which makes a quite impressive data set one can rely on. Here are the results of the survey. According to the data, you can be sure that your visitors will be able to see the content placed within the 500px-800px screen height. Over 80% will be served well with 1000px screen width, 28% of the users tend to browser with 1250px screen width. You can click on the image to get a a live chart.You can find a further survey related to the widely used screen resolution in the article by Thomas Baekdal which was published last year.

So what do we do?

Don’t optimize your web designs for your personal convenience. Don’t guess blindly; instead try to estimate the profile of your visitors and leverage your design accordingly. In most cases you can improve the user experience by keeping the width of your layout at 1000px. Design for your visitors, even if it means that your design looks terrible on your high-resolution wide-screen laptop.

Original article by Vitaly Friedman and Sven Lennartz posted on Smashing Magazine.

…I’ve found the infamous three circle diagram to be a great tool for explaining how and why we must strike a unique balance on each project between business goals and context, user needs and behavior, and the available mix of content.

Figure 1. The Three Circles of Information Architecture (courtesy of Peter Morville)

While this diagram was conceived with IA in mind, it’s equally useful for explaining UX. In conjunction with Jesse’s masterpiece, I use the three circles to illustrate the distinction between user experience and user-centered design. I’m still not convinced UCD exists outside the realm of theory, but I practice user experience design every day.

Facets of the User Experience

When I broadened my interest from IA to UX, I found the need for a new diagram to illustrate the facets of user experience – especially to help clients understand why they must move beyond usability – and so with a little help from my friends developed the user experience honeycomb.

Figure 2. The User Experience Honeycomb

Naturally, the jump from three circles to seven hexagons gave me an instant buzz, but after several months of road testing, I can safely say this diagram has survived the honeymoon.

Here’s how I explain each facet or quality of the user experience:

• Useful. As practitioners, we can’t be content to paint within the lines drawn by managers. We must have the courage and creativity to ask whether our products and systems are useful, and to apply our deep knowledge of craft and medium to define innovative solutions that are more useful.
• Usable. Ease of use remains vital, and yet the interface-centered methods and perspectives of human-computer interaction do not address all dimensions of web design. In short, usability is necessary but not sufficient.
• Desirable. Our quest for efficiency must be tempered by an appreciation for the power and value of image, identity, brand, and other elements of emotional design.
• Findable. We must strive to design navigable web sites and locatable objects, so users can find what they need.
• Accessible. Just as our buildings have elevators and ramps, our web sites should be accessible to people with disabilities (more than 10% of the population). Today, it’s good business and the ethical thing to do. Eventually, it will become the law.
• Credible. Thanks to the Web Credibility Project, we’re beginning to understand the design elements that influence whether users trust and believe what we tell them.
• Valuable. Our sites must deliver value to our sponsors. For non-profits, the user experience must advance the mission. With for-profits, it must contribute to the bottom line and improve customer satisfaction.

The honeycomb hits the “sweet spot” by serving several purposes at once. First, it’s a great tool for advancing the conversation beyond usability and for helping people understand the need to define priorities. Is it more important for your web site to be desirable or accessible? How about usable or credible? The truth is, it depends on your unique balance of context, content and users, and the required tradeoffs are better made explicitly than unconsciously.

Second, this model supports a modular approach to web design. Let’s say you want to improve your site but lack the budget, time, or stomach for a complete overhaul. Why not try a targeted redesign, perhaps starting with Stanford’s ten guidelines as a resource for evaluating and enhancing the credibility of your web site?

Third, each facet of the user experience honeycomb can serve as a singular looking glass, transforming how we see what we do, and enabling us to explore beyond conventional boundaries.

[this article was truncated - to read the entire article, go here]

And from a later post User Experience Strategy, also by Peter Morville [excerpted]

From Design to Strategy

Jesse James Garrett famously defined user experience design in a great diagram and an even better book:

Businesses have now come to recognize that providing a quality user experience is an essential, sustainable competitive advantage. It is user experience that forms the customer’s impression of the company’s offerings, it is user experience that differentiates the company from its competitors, and it is user experience that determines whether your customer will ever come back.

Similarly, Jakob Nielsen and Don Norman explain that user experience design “encompasses all aspects of the end-user’s interaction with the company, its services, and its products.” And, Nathan Shedroff positions user experience design as “an approach to creating successful experiences for people in any medium.”

A great deal has been written about user experience design but only recently has much ink been spilled on the subject of user experience strategy. I suspect there are a couple of reasons for the new focus. First, the elevated stature of user experience and design thinking in the business world have opened doors in the executive suite. Designers have a real opportunity to influence strategy. Second, we’re nearing an inflection point in an expanding set of markets, beyond which traditional product design is rendered obsolete.

Experience Ecologies

As we’re increasingly able to embed information and intelligence in physical objects connected via ubiquitous wireless networks, such concepts as open source, open APIs, mashups, co-creation, and findability are rapidly and irrevocably escaping the confines of the Web.

Adam Greenfield encapsulates the ensuing erosion of distinctions between “product” and “service” and the importance of “beautiful seams” in On the Ground Running, a brilliant piece that explores and eviscerates the iPod, Nike+, and Amtrak Acela ecologies.

Peter Merholz offers a valuable and complementary perspective in Experience IS the Product, and his partner Jesse James Garret, in a mesmerizing podcast on Experience Strategies, drives home the absolute imperative of designing from the outside-in.

Jared Spool positions what’s going on as a simple progression toward market maturity from technology to features to experience to integration. I’m sure Jared’s right, but this framing misses the real story. The way we conceptualize products, services, and brands is changing. We can glimpse the destination in Bruce Sterling’s spime and Julian Bleecker’s blogjects, but the journey has already begun, which is why we’re talking so much about user experience strategy.

It’s About Futurity

As Michael Raynor explains in The Strategy Paradox, strategy and futurity are inextricably bound together:

Most strategies are built on specific beliefs about the future. Unfortunately, the future is deeply unpredictable. Worse, the requirements of breakthrough success demand implementing strategy in ways that make it impossible to adapt should the future not turn out as expected. The result is the Strategy Paradox: strategies with the greatest possibility of success also have the greatest possibility of failure. Resolving this paradox requires a new way of thinking about strategy and uncertainty.

Raynor argues that to manage uncertainty, companies must build scenarios of the future, and identify strategies and strategic options for each possible future. I’d argue that those who develop user experience strategy would do well to embrace this framing in futurity.

For while our work certainly supports incremental progress towards better usability, findability, and credibility, user experience methods are equally well-suited to disruptive innovation. In the deep dives of design research, we gain insight into the latent needs of users, and with our sketches, mental models, and prototypes we bring greater richness and depth to the exploration of possible, probable, and preferable futures.

In short, we are futurists.

Peter Morville is co-author of “Information Architecture for the World Wide Web: Designing Large Scale Web Sites,” published in 2006 by O’Reilly Media.

Microformats have actually been around for over 2 years but are starting to become more and more prominent.  They are defined as “a set of simple, open data formats built upon existing and widely adopted standards.”  In layman terms, they are extensions to tag markups that provide bits of information (based on the microformat used) in a comprehensive format that can be used to network with other bits of information.  Some of the better known ones are hCard, hCalendar and rel-tag.  You can read more about microformats here.  And if you happen to be in a bookstore that has a fairly good computer section, check out “Microformats” by John Allsopp.  I actually found a copy at B&N the other day and read half over a cup of (puke) Starbucks. For an example of microformat code I use, look at the source of the page.  Notice two meta tags:

<meta name="ICBM" content="36.02674, -115.08997">
<meta name="DC.title" content="Mobimeet:Art Institute of Las Vegas"> 

The first one defines my lat/long coordinates (more specifically, those of the Art Institute of Las Vegas), which associates me with other users near and around me – basically maps out social-to-web providers.  The second one is an unratified format that provides for better compatibility across meta tagging systems.

Gravatars are also not new but grew up pretty quickly, and word on the street today is that Gravatar just got bought (oh, sorry, acquired) by Automattic, the company headed by Matt Mullenweg that owns WordPress.  Gravatar stands for globally recognized avatar and conceptually its pretty simply but the implementation is much more defined.  You can create your own gravatar(s) and upload them on the main gravatar web site.  So long as you continue to use a primary email address in your blog (or other social network) registrations, the back-end system will automatically insert your gravatar in place of your avatar – basically it keeps you from having to upload a new one each time you register in a new site and keeps your identity consistent.  I’ve posted a comment under this article so you could see an example.

Goes to show you, some of the simplest ideas – as both microformats and gravatars are – can sometimes be the most powerful despite the impetus or platform.

For all my students, read this – this is a great article full of information to keep in mind as we move through the quarter.

Pay particular attention to:

• 2-Second Rule
• 3-Click Rule
• Inverted Pyramid
• Satisficing (Krug is big on this one)
• User-Centered Design (please read this definition – excellent point about one of the major differences between regular web design and Web 2.0 in that with Web 2.0 content – it is user-need driven)

And be sure to follow the links and resources - good stuff.  If you haven’t noticed the recent flurry of UX related postings in both blogs and magazine articles, you must not be reading enough.  In 2007 and going into 2008, UX is quickly becoming one of the most important aspects of web design since it was so long disregarded.  It’s not enough to make a cool design – your users have to be able to use AND learn from AND remember it to make it a good design.

[Can you tell that today was my reading day?]

From an article in smashingmagazine.com, this post was so appropriate and pertinent that I am posting the entire article verbatim here. Here’s the original article just in case…10 Usability Nightmares You Should Be Aware Of.

• a clear, self-explanatory navigation,
• precise text-presentation,
• search functionality and
• visible and thought-out site structure.

And that means that you simply have to folow the basic rules of usability and common sense. You want to communicate with your visitors, don’t drive them away, right?

In this article we take a look at some of the usability nightmares you should avoid designing functional and usable web-sites. At the end of the article you’ll also find 8 usability check-points you should probably be aware of.

1. Hidden log-in link.
Backpack, 37signal’s one of the most usable organizational and project management tools out there, explains exactly what the tool can be used for, how one can use it and which features it has to offer. However, once you’ve signed up, you might need few minutes to find out what you should do to actually start using the tool.

The “Log in”-link (hint: in the yellow box) should have a greater font-size — also icons would do the job.

2. Pop-ups for content presentation.
Almost every modern web browser uses a popup-blocker to prevent pop-ups, ad blocks and further site content recognized as advertisement. Firefox, Safari, Opera and Internet Explorer make use of it — therefore the idea to use pop-ups to present the main content isn’t probably the most reasonable idea web-designer might come up with.

However, Adidas developers team seem to consider pop-ups as a creative approach for their target audience. It’s not clear what ImpossibleStory.com is actually about — most users will never find out; even we were too lazy to deactivate our popup-blocker.

3. Dragging instead of vertical navigation.
Actually, this technique — not a real nightmare, but very unusual — might become a new trend in the future. Dragging, as used from .pdf-documents, can also be adapted to web-sites. Fichey offers a Flash-based solution. Interesting approach, however you can’t bookmark specific parts of the site – a typical problem for Flash-based designs.

An introductory info box on the start page of the site informs its visitors about the new way of navigation. The tool shows sites which are currently popular in social media. By the way, the displayed links don’t work – apparently, the tool shows the screenshots which are saved and embedded as images.

4. Invisible links.
Visitors have to know where they are, where they’ve been and where they can go next. If designers don’t present this information in an appropriate way, visitors can have serious problems with site navigation. Real Player had been using a bunch of invisible links for a while. Take a look at the picture and the labels below (originally created by Trenton Moss) — can you spot the links?

1, 3, 4, 6, 7 and 11 are links, and 2, 5, 8, 9 and 10 aren’t.

5. Visual noise.
Often less is more. Visual noise is probably one of the most typical problems large web-sites’ designers have to cope with. And it’s extremely easy to get it wrong. As Overstock does.

Bonus: It’s also not quite clear what is a link and what’s not. Overstock also uses a number of different link presentations and hover effects. Link or not a link? You might have a lot of fun finding out.

6. Dead end.
You can use different approaches to introduce your new web-service to your visitors. Scriblink welcomes its visitors with a pop-up and a Java-applet. Visitors have to provide some input to start browsing through the site.

Nothing helps:

• clicking on “cancel” doesn’t help,
• OK doesn’t help,
• full-screen mode doesn’t help,
• clicking somewhere else doesn’t help,
• closing the browser window doesn’t work,
• clicking on the question mark for help doesn’t work.

Unfair, really. We just wanted to see what the tool does…

7. Content blocks layering upon each other.
A typical problem which always appears if large Flash-movies are used on large web-sites. The site navigation is hidden; whatever users might be willing to browse to — they have no chance.

The same problem on Yahoo.com:

8. Dynamic navigation.
What looks like a usable site navigation, shows itself soon enough from its worst side. Nevermind where you point your mouse pointer to — supporting images slide down and up and change the focus of the link you’ve clicked on. On the image below the link “history” was clicked – it moves away; and no, the sliding images aren’t linked to the page you’d like to browse to.

The effect appears in both left- and right-side navigation menus. Visitors might need some time to find out what is happening. However, once the idea is understood, the navigation isn’t that hard to deal with.

The same idea on Kabe243. Bonus: visual noise at its best.

9. Drop-Down Menus.
Drop-Down menus are useful for web-developers and almost always get on users’ nerves. If you — as a designer — hide navigation items in a drop-down menu you can save yourself a large amount of vertical space; however users have to focus the mouse precisely to get to the section they’d like to visit. It’s not usable.

However, it can be even worse. If the distance between different levels of navigation is too large (for instance because some navigation items have more text) users have to move the mouse horizontally. If the mouse focus changes its vertical position, users have to start from the beginning.

2Advanced and Brita.net are excellent examples for these usability nightmares.

Notice: it took us a dozen of attempts to actually make these screenshots.

10. Blinking images.
Sometimes you just want to read the content of a web-site you are visiting. And you can’t. To fight against the banner blindness advertisers make use of animated ads — usually animated .gif-images or Flash-movies. In both cases it might become extremely hard to focus on reading if such images are blinking all around the content.

Digital Web Magazine, an excellent online magazine we read on a regular basis, has a disturbing animated ad on the left side of every article.

Future Nightmare? Pointing the mouse instead of clicking.
Dontclick.it explores a clickfree environment. It wants to explore how and what changes for the user and the interface once you can’t rely on the habit of clicking.

Within this interface you won’t find any buttons. Instead you navigate the contents in a different way — by pointing the mouse to the areas of the site you are interested in.

8 Usability Check-Points You Should Be Aware Of

1. You don’t use pop-ups.
   Pop-ups interrupt the browsing session of the visitors and require an instant feedback. Respect your visitors.
2. You don’t change users’ window size.
   The same argument as the one against pop-ups holds. Some browsers, e.g. Internet Explorer, saves the browser dimensions and uses them for further browser sessions.
3. You don’t use too small font sizes.
   Long passages are harder to read, and to read brief sentences readers need more time. It holds also for links, buttons, forms, search boxes and other elements. Good news — in Web 2.0 the opposite is the case.
4. You don’t have unclear link text.
   Links have to be precise and lead to the destination they describe. Ambiguous link descriptions should be avoided.
5. You don’t have dead links.
   There are too many of them anyway; why would you want to point your visitors to a dead end?
6. You have at most one animation per page.
   If blinking images are wide-spread through the site, it’s extremely hard to focus on one single site element. Give your visitors an opportunity to perceive your content. Using animated ads, don’t place them right along your articles.
7. You make it easy to contact you.
   Maybe because you just don’t want to be contacted, but If visitors do want to get in touch with you, but can’t find any contact information, you lose their interest and trust. Disastrous for online-shopping, a missed opportunity for the rest.
8. Your links open in the same window.
   Visitors want to have control over everything what happens in their browser. If they’d like to open a link in a new window they will. If they don’t want to, they won’t. If your links open in a new window you make the decision which is not your decision to make.

Download the podcast here or subscribe via iTunes.

And like any good user acceptance … why not throw your two cents in?

“Gord Hotchkiss blogged about an amazing interview with usability expert Jakob Nielsen on the future of the search results. A discussion ensued on Cre8asite Forums about the interview, since Nielsen brings up a lot of really interesting points:

• He says that results may not be computed by the number of links in the future so sites like Wikipedia may no longer be in the forefront.
• He proposes changing the search results to more two-dimensional layouts.
• He believes that personalization is impossible since people may want different results depending on the time of day.
• Display ads may cause “banner blindness” which means that users may disregard other multimedia presented on the page.

Bill Slawski disagrees with much of what Nielsen says. For one, he believes that the search results have changed drastically within 3 years, whereas Nielsen believes that they haven’t. He also believes that Wikipedia is useful as a starting point in conducting research — and I’d agree with that. Wikipedia links are often relevant to the typical user.

The interview is very comprehensive but should definitely be read, and forum discussion continues at Cre8asite Forums.”

Most webmasters go totally “gaga” for top 10 rankings in Google. And for good reason, Google is the most dominant search engine on the net and will deliver the largest amount of traffíc.

More importantly, those same webmasters will also inform you, getting top 10 rankings in Google often means your site will prove profitable. Mainly because obtaining targeted traffíc is usually your first obstacle in creating a viable online business. In other words, if you get top ten listings in Google for good searchable keywords, it is almost impossible not to earn money.

How To Proceed?

First, you must know the rudimentary basics of how keywords work. Keywords and keyword phrases are the exact words someone types into a search engine to find what they’re looking for online. If you have a site on “dog training” then your goal is to get a top 10 ranking for the keywords “dog training”.

Now if no one searches for “dog training” it would be a useless keyword, you would get no traffíc no matter how perfectly your site is optimized for that keyword.

How Do You Know If A Keyword Is Good?

To find out, you have to do some keyword research on your particular keywords. Many professional online marketers use keyword research software like Brad Callen’s Keyword Elite. However, you can also use the keyword suggestion tools supplied by Google Adwords or Overture. Try here: http://www.digitalpoint.com/tools/suggestion/

Now if you chëck “dog training”, you will find it receives around 4,469 searches each day. That’s a lot of traffíc but you must realize that it may be too good, or rather too competitive for your purposes, especially if you have a new site.

Biggest Mistake When Choosing Keywords

The most common mistake most novice webmasters make is targeting keywords which are too competitive. You simply will not be able to compete or place for extremely competitive keywords. Well established sites and businesses with very deep pockets have the resources to completely dominate those keywords.

While it is not entirely futile nor a waste of time to concentrate your efforts on highly competitive keywords, you will have better success if you target low to medium competitive keywords.

Long Tail Keyword Marketing

Besides online marketers have discovered that longer keyword phrases are usually the most lucrative. These phrases deliver traffíc which is better targeted and more likely to convert into a sale. “Dog hunting training” which gets around 100 searches a day will be more targeted than the general term “dog training” and if you have a site devoted to training hunting dogs then this keyword phrase may convert better for you.

Always keep this “Long Tail” keyword strategy in the back of your mind as you implement the following steps to achieve your own Top 10 Rankings in Google.

1. Make A Master Keyword Líst
Your first step is to make a master líst of the keywords you wish to target. Obviously these should be closely related to the theme of your site. Chëck the keyword competition by seeing how many sites are listed in Google for that keyword. Webmasters should also chëck the Google PageRank of the sites that hold the top 10 positions. If all those sites are PR6 and above it may be hard to get ranked high for your keywords.

2. Choose Related Keywords
Once you have your master líst of keywords, find long tail related keywords to target. Again, chëck out the competition and daily searches made for each chosen keyword.

3. Use Quality Content For Your Keywords
Creating quality content should always be your main goal. Write for actual visitors who will see and read your content. First and foremost you must have good useful content that your visitors will use themselves and recommend to their friends or colleagues. Tie this quality content in with your chosen keywords. Use one keyword phrase per page.

4. Keyword In Domain Name, Title and URLs
Having your keyword in your domain name will score big points from search engines. Plus, each page of content should contain your keywords in the title & meta tags for that page. Most experts also suggest you have your keyword in the URL and use hyphens to separate your keywords. Although the author has gotten good results by using an underscore and htm in URLs.
Example: www.yoursite.com/your_keyword.htm

5. Do On Page Optimization
Keyword ratio is a much discussed topic by SEO experts and many suggest you should have your keyword in the H1 or headline title of your page. Sprinkle your keyword and variations of it throughout your page. Don’t over do it but make sure the robot/spiders will clearly discover what your page is about. Many webmasters make sure they include their main keyword in the first and last 25 words on their pages.

6. Use Traffíc Modules
One technique that works extremely well in Google is clustering a closely related topic or subject into a distinct separate section on your site. For example, if you have a marketing site, you could create a whole section on article marketing where you would have 50 to 100 keyworded pages all relating to your subject. Writing articles, formatting articles, submitting articles, article software… place a keyword linked menu on each page to connect all your pages together.

Keep in mind, your main objective is to supply quality information to your visitors. One reason Google may favor this type of structure is because they want quality content returned in their SERPs.

7. Try Article Marketing
Side Note: iStreamPlanet uses this tactic widely – the last article I posted (my shameless promotion) was a reprint of a press release that was released July 10th (2007). As of July 13th, the search term “istreamplanet silverlight” in Google yields 173 returns which pushed several pages past the PR6 mark into the elusive PR7 realm.Article marketing is writing short informative articles on keyword topics related to your sites. You then submit these helpful keyworded articles to ezine directories on the web. When your articles are picked up by related sites, you receive quality One-Way links. The higher the quality of your article, the more links you will receive.

Another ranking tactic to use: If you’re just starting out your site will probably have a low PR rank and you will find it hard to rank for even modest keywords. That’s why it’s useful to take advantage of the higher PageRank of the major ezine directories. Your keyworded articles on these high PR sites will get picked up by Google and displayed in the top 10 rankings. Now the displayed URL will be the article directory site but the links in the resource box will be pointing back to your site. Over time this article marketing technique will raise your own site’s rankings for those keywords. Simple but effective.

8. Anchor Text And One Way Links
Off page optimization is important in obtaining high rankings in Google. Getting quality One-Way links is very important. Anchor Text simply refers to “the underlined clicked on words” in your links. Most webmasters include their keywords in their anchor text as this tells the search engines exactly what the links are about.

9. Tags, Blogging And Web 2.0
Take advantage of Web 2.0 by using blogs, RSS feeds and the social bookmarking sites like Reddit and Digg. Try AddThis.com for a simple social bookmarking system. At the very least your site should have a blog and RSS feed attached to it as this is an effective way of boosting your keyword rankings.

Tags have become very important for getting higher rankings. Keep in mind, in free blogging software such as WordPress, categories will automatically be seen as tags. Blogger, which is owned by Google, now has a form where you put your keywords (tags) for each post you make.

10. PPC vs Organic Search
Of course, one of the fastest ways to get your links displayed on Google is to pay for them by using Google Adwords. Your ad and links will sit side by side with the organic link results. In Pay Per Clíck advertising you bid or pay so much per clíck for your keywords and you only pay when someone clicks your links. But smart marketers also know since you’re getting millíons of impressions advertising your products, acquiring name recognition and branding through PPC advertising can be a major side-benefit.

However, most webmasters would say that organic links (SERPS) will return better traffíc than paid links or advertising. In most cases, this may be true because Google’s organic rankings are becoming more respected and more trusted by users. They simply carry more weíght with surfers.

This makes it even more beneficial to obtain top 10 rankings for your keywords in Google. Depending on the competitiveness of your chosen keywords reaching the first page listing or even the favored number one spot is well within any webmaster’s reach. Just go for it. The rewards are well worth your efforts.

About The Author
The author is a full-time online marketer who contributes his high rankings in Google as the major source of his online income. For the latest web marketing tools try: MarketingToolGuide.com. For the latest Internet Marketing Strategies go to: BizwareMagic.com . Titus Hoskins. [This article may be freely distributed if this resource box stays attached.]

“In 2007, Firefox certainly hasn’t destroyed IE’s market share, but it sure has made a dent. While that’s a positive thing in the name of choice and the triumph of good software, Firefox has quite possibly made a negative impact on the development of web sites and software when viewed in the context of accessibility. Think about it: before Firefox, most websites were not only ‘optimized’ for IE, you pretty much had to view them in IE if you wanted to see anything more than the equivalent of an unfinished jigsaw puzzle blown apart with a shotgun. Even though it could be argued that web design standards have come quite a ways since then (and they certainly have), the damage done from Firefox’s wild popularity among the tech savvy (and even not-so-savvy) primarily lies in this new frontier of web apps and services.” (excerpt from article on DownloadSquad.com – read the complete article here).

For those of you who bother to test on multiple browsers but only have Windows at home, don’t forget to download and install the Windows version of Safari.  I admit, it does make you look at things differently, especially where Ajax and cross-browser CSS issues are concerned.  Apple also has some pretty good docs for those of you tackling development particularly where Safari is concerned.

A lot of website owners are upset or puzzled when their website’s Google PageRank goes down or does not rise. Is it worth losing any sleep over changes in that green line and number that appear in a Google tool bar at the top of your browser? I think that excessive worry or thought about PageRank is not constructive, and it is better to put it all in perspective by taking a rational look at what PageRank is and what it is not.

First of all the concept behind PageRank is indeed at the heart of Google’s ranking process. The Google founders came from academia and they noticed that in many academic documents some sources were continually cited. They reasoned that if a particular document such as a book or research paper was mentioned in many places then it must be important. They applied this to the web and assumed that if one website links to another it is in fact, giving a “vote” for that site. A website that has many incoming links must have a certain degree of importance. In the current Google algorithm the quantity and quality of incoming links is certainly a factor in deciding the ranking of a particular website for any given search-query.

Think about it. In the early days of the web people would build websites and then they would tell their visitors to check out other “cool” sites and they would link to these sites. This is the process of natural linking and it still goes on. If you really have good content, people will link to you without letting you know. Similarly, if your name is Bob Dylan and your website is www.bobdylan.com, thousands of people will link to you without you having to send a cheesy email begging for a link.

Various government agencies, educational institutions, established companies and anyone else who is “big” in the “real world” is likely to also be big on the Internet simply by virtue of their previous fame and accomplishment. Google’s ranking system took this into consideration and this is one of the reasons why Google is currently the number one search engine. It gives better results and that is why people use it.

But, does that mean that only the big players can be seen on the net? Far from it. While there is a difference between one guy working in his house with one computer and a corporate giant with a whole staff, and this is indeed reflected in rankings, the Internet provides a much leveler playing field than in yesteryear. Prior to 1995, it would have been very hard for someone to spread their news and views far and wide as bloggers do today. It costs millions of dollars to publish a daily newspaper or to print and circulate a magazine, but it costs far less to publish a website or a blog, and lots of “little guys” have taken advantage of the power of the Internet.

But what about PageRank, how much of it do I really need to get my site noticed? For those who are not familiar with the PageRank system. Google supplies a tool bar which you can download and install on your browser. If you make a complete installation with all the advanced features, then every time you open a new website you will see a green and white bar with the label PageRank. Put your mouse on the bar and you will see a number from 0 to 10. If a website is not indexed by Google or banned by Google, the bar may be grey or all white.

But what do the numbers mean? I had a client who was worried about his number 3 PageRank figure and based on my observation I answered him with my unofficial view on the rankings. Here is how I currently see it:

PageRank 0-2 shows that a site does not have many links and needs work, However, and this a big “however,” it may not really affect your search engine rankings. I have a client with a page rank of 2 and his site ranks well, even number one, for several search terms in a fairly competitive industrial category. So PageRank is not everything; it may have an impact on your rankings and traffic, but in some cases it may not matter. In any case if you have a PageRank of 0-2, you can work on it through proper link building activity which I will explain at the end of the article.

PageRank 3 can be OK in some cases but in highly competitive industries you should work to improve it.

PageRank 4 is quite a normal number and indicates that you have enough links in either quantity or quality to make your site competitive.

PageRank 5 indicates that a site has many links or links from authoritative sites, and that Google has good “trust” in the site. It is a respectable and attainable PageRank.

PageRank 6 is very difficult to attain. This rank indicates that the site has many links and links from respected places. Remember the example of www.bobdylan.com, which I mentioned above; it has a PageRank 6, so you can get an idea of the difficulty involved.

PageRank 7-10 is usually earned by large and established institutions or websites which have tremendous authority, due to the quantity and quality of the incoming links. It is extremely difficult to attain this ranking. You really have to be special to get it.

So, don’t worry excessively about PageRank. First look at your traffic, then look at your sales and finally at your bottom line. They are the important numbers to watch. If you want to increase your traffic and also PageRank, then here are a few steps that you can take:

1. Add content to your website. Make your website so good and so useful that people will link to you without you asking for a link.
2. Write articles and get them published on other websites and blogs with a link back to your site.
3. Distribute online press releases
4. Judiciously exchange links, or even better, exchange content (containing links back to your site) with other websites.
5. Get your site listed in online directories.

These efforts will certainly help you to build targeted traffic, and they most probably will also help you to increase your PageRank as well.

Web 2.0 ‘neglecting good design’ 
Hype about Web 2.0 is making web firms neglect the basics of good design, web usability guru Jakob Nielsen has said.  Read…

Web 2.0 Tutorials Roundup
…over 65 tutorials, references and related resources, which are supposed to help you to create graphics in Web 2.0-Look.  Read…

Royalty-Free Stock Images
Need I say more?  Add this to your favorites…

Some theory behind Mac OS X’s menubar
Interesting theory on Mac’s UI that has implications on web design even though we don’t really think about it much.  Follow the links to the stuff about Fitts’ Law as well.  Read…

HTML 5 Issues on the Table
Arguments about HTML 5 specifications about … yes, I said HTML 5.  Why they’re bothering is beyond me but I guess there is a place for everything.  As indicated by Chris Wilson of Microsoft (in more than a few words), look for what amounts to more bloat in MSIE (and probably every browser) as a result.  Read…

Recommended Book
If you plan to buy any book on Web Design, keep an eye out for this one … Principles of Beautiful Web Design by Jason Beaird … fantastic book that covers Garrett’s Skeleton and Surface planes in much more detail.

For  those of you with WordPress site(s) …
WordPress 2.2 has been released and I am in the process of upgrading Mobimeet to it.  WordPress and Automaticc indicate that there are some significant changes (for the better presumably) so you may want to look into it.  Of course, don’t fix what ain’t broke but there may be some nice tools in the new code…
WordPress 2.2 Upgrade
WordPress 2.2: Three Things Developers Will Like
10 Things You Should Know About WordPress 2.2

Is Google Killing SEO?
The empasis of paid search listings is killing the organic search algorithm because of the “link reward” system used by Google’s relevancy system.

As Social Networking Rises, TV Watching Decreases
Uh…duh. Why watch unidirectional broadcasting when it can be interactive?  It didn’t take a genius to figure out that this was bound to happen.

How Google, Yahoo & Ask.com Treat the No Follow Link Attribute
“There seems to be a common misconception in the webmaster and search engine marketing field that inbound links which use the ‘no follow’ attribute have no value to the site which they point towards.”

Use Robots.txt, Save the World
I’ve been asked time and time again about the use of the robots.txt file – what does it mean, what does it do, how do I use it.  Read this article for good, layman term information.

1. No Author Biographies 
2. No Author Photo 
3. Nondescript Posting Titles 
4. Links Don’t Say Where They Go 
5. Classic Hits are Buried 
6. The Calendar is the Only Navigation 
7. Irregular Publishing Frequency 
8. Mixing Topics 
9. Forgetting That You Write for Your Future Boss 
10. Having a Domain Name Owned by a Weblog Service

Read the complete article here.

Social Network
A social structure made of nodes tied by some form of relationship.  In the context of the Internet, it describes a group of individuals or organizations who have similar “interests” which can be loosely thought of as terms, keywords, concepts, interests, hobbies or any other common ground.  Social networks have been brought to the forefront of the scope of many technologies and is one primary aspect of Web 2.0 concepts.  Many of the definitions below are social networking examples.

Blog (or Weblog)
A user-generated web site where entries are made in journal or diary style in reverse chronological order.  Generally entries are commentary or news on a particular subject though subjects can range from very personal (such as an online diary) to political to human interest.  Primarily textual though increasingly focusing on alternate media (photos, video, audio, animation).  “Blog” is a portmanteau for “web log” and can be used as both a noun or a verb.  Blogging is generally viewed as part of a much larger scheme of social networking.  Examples: downloadsquad.com, blogger.com, mobimeet.com.

Tags
A relative term, keyword or keyphrase associated or assigned to a piece of “information”, which can loosely refer to web sites, audio, video, photos, profiles and so forth.  What differentiates tagging, a form of meta-data classification, from its predecessors is that the tags are defined largely by the consumers rather than the owners.  Tagging is often associated with the concept of the “tag cloud” (see image on right), where prominent tags (those with more associated pieces of information) are larger.  Examples of sites that promote tagging and general folksonomies: del.icio.us, technorati.com.

Social Bookmarking
An advent of tagging where users share related interests by storing and classifying favorites through a system of profiles and generally associated with tagging.  Generally subscribers are notified via RSS automatically of changes.

Twitter
A micro-blog service where users submit updates via SMS (text messaging) or instant message.  Posts are 140 characters or less and are displayed on a profile page which can be restricted or open to public viewing, generally via web site or RSS; twitters are primarily meant to let the user’s “circle of friends” know what he or she is doing at any particular moment.  Also part of a much larger scheme of social networking.  Examples: twitter.com, twitterverse.com.

Wiki
A web site that allows users to add, remove, and edit content, typically without being registered.  Content is generally not reviewed before posting and is policed by the readership.  Falls under the concept of collaborative authoring; generally used as “online encyclopedias” and typically identified by the dominance of hyperlinks between content (called wiki pages).  Examples: wikipedia.com.

Web 2.0
A phrase coined by Tim O’Reilly of O’Reilly Media in 2004 describing a perceived second-generation of web technologies (many of which are in this post).  We say “perceived” because nearly all of the technologies existed prior to 2004 but changes in consumer usage and the increase in Web Services modified the visual perception, usability and richness of the media.  There are several defining characteristics of technologies that fall under the Web 2.0 label but there has been considerable criticism against the term since it is more marketing based and not backed by a standard.  Defining characteristics of Web 2.0 include the use of the Web as a platform, users owning data and exercising control over it, participative architecture allowing UGC, rich environments with interactivity (such as AJAX), and some social networking aspect. Innovations that are associated with Web 2.0 include web-based application environments, rich internet applications using dynamic server-side components with interactive client-side software, syndication via RSS, the use of REST and SOAP protocols for data transfer.  Examples of Web 2.0: flickr.com, gmail.com, Google Maps.

Web 3.0
A term used to describe an expected shift in the use of the Web as a result of Web 2.0 where the Web is used primarily as a data repository or database accessible by non-browser applications which leverages three dimensional collaboration and interaction.  The basic concept is that the influx of UGC and the shift towards reasoning is creating artificial intelligence in the Web paradigm itself.  Article on Web 3.0.

AJAX (Asynchronous Javascript and XML)
A “technology” that combines the use of Javascript on a client-side interface with data transferred via Web Service using XML so that the web page increases interactivity while reducing overall page load and maintaining a desktop application look-and-feel.  Like Web 2.0, the term itself is largely marketing based since the pieces all existed long before its popularity came into being.

For 2007, the compilation includes:

1. Bad Search 
2. PDF Files for Online Reading 
3. Not Changing the Color of Visited Links 
4. Non-Scannable Text 
5. Fixed Font Size 
6. Page Titles With Low Search Engine Visibility 
7. Anything That Looks Like an Advertisement 
8. Violating Design Conventions 
9. Opening New Browser Windows 
10. Not Answering Users’ Questions

Supermarket 2.0 at Glumbert

First and foremost, the fact is that they are a hack – they are ostensibly Javascript code that provides a certain amount of information about a site to the public at large as well as search engines.  From the perspective of the way things are going on the web – decentralization of content provisioning (with blogs and YouTube and MySpace, the world is full of information being generated by the public), and the Web 2.0 move towards open API’s, badges are much like the problem of hot-linking we used to contend with in the old days.  Plus, since the search engines use this information, isn’t it moving us away from actual “linking” and just letting someone else control the traffic flow?  Second – add too many and you build serious congestion in your space as well as leave enormous footprints all over the place.  Both of these don’t even address some of the issues in this very well written article (Javascript Badges and Widgets Considered Harmful by Jeremy Zawodny) such as skinning, security and incompatibility.

I use badges mostly because at the moment I am using it as a testbed.  Otherwise I would probably avoid them and go back to the days of manual linking.  However, including a couple somewhere in your blog is probably a good idea if you’re trying to build visibility.  Now for the links:

• Javascript Badges and Widgets Considered Harmful
• Badged.net
• Digg.com
• Sphere.com (see my last post about Matt Mullenweg)
• Technorati
• del.icio.us

Have fun figuring it all out!

The bittersweet comes in the fact that now I won’t have to spend $15 a month for a paper-wasting glossy publication.  But even the indulgent side of me admits that there was something really nice about picking up the rag every month, complete with it’s 700MB CD of free utlities.

In any case, it will be interesting to see if the new envisionment of the magazine stays true to form – the mag has an huge following in the UK.  On a side note, what’s really interesting is that they kept the staff and the fact that they are pushing towards .NET while the staff is largely pro-Mac and anti-MSIE should produce some paradoxical articles.

And another side note – if you do happen to glance through this last issue – there’s a fantastic article on one of my heroes of recent, Matt Mullenweg.  Matt is currently the founder of Automaticc, which is the company that designs the architecture and consults for sphere.com.  He started as a writer for CNET and is the creator of (amongst other things) WordPress, bbpress, and Askimet (anti-spam tools for blogs).  Oh yea, and he’s only 23.  And he doesn’t write code.  Pretty phenomenal that a non-technical individual can produce some of the worlds most downloaded and used “software” (I’m talking about WordPress).  Do I hear “usability engineering” somewhere in there?

First – at what point is search necessary?  Well, really there is no hard and fast rule but in general, if your site meets any of these conditions:

• There are more than 50 pages in your site,
• Your site has long textual pages,
• Your site is a blog or a wiki,
• Your site has some social-networking impact,
• Your navigation structure goes 3 levels deep or more

then you might want to consider adding search.

Now, there are really two or three ways you can add search to your site.  First, if your pages are databased, you can do a simple query across pages.  The benefit of this method is that you are (probably) searching direct context and can add some form of relevancy to the results.  The drawback is that oftentimes the databased portion is limited.  In addition, you will have to consider the capabilities of your database engine – can it only do searches using equality or LIKE matches or does it have the capability of doing CONTAIN (full-text index) searches?  Is your data arranged in such a way that it can collate specific pages of output into the results or will it inadvertently repeat pages? And can you structurally write a query that will take into account complex search strings?

Second, if your pages are not databased, you can do a similar query across the HTML pages (of course using some sort of server-side script such as PHP).  Obviously this requires a bit more knowledge of PHP and it’s probably pretty inefficient, particularly if you have a large number of pages.

Finally, you can use Google Search – a stripped down version of Google’s own search capability – and restrict it directly to your site.  If you’ve done your SEO properly (see my article on Planning for SEO with Google), this should be cake.  If not, read through the article to get a better idea of how to insure that Google is “aware” of all your pages and how frequently to acknowledge updates.

Search can add utility and function to your site, but only use it when it becomes apparently necessary.  In a future article, we’ll take a quick look at how to create effective search forms for your users.