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

Several sites are reporting that a major attack on Wordpress blogs started yesterday. The latest version of Wordpress, 2.8.4, is not vulnerable to this particular worm, so upgrading now could save you a lot of headaches. The worm creates a new, hidden administrator account on your blog, allowing whoever’s behind this thing to access the guts of your blog, databases and all.

How do you know if your site has been affected? Lorelle on Wordpress offers two possible ways to find out:

There are strange additions to the pretty permalinks, such as
example.com/category/post-title/%&(%7B$%7Beval(base64_decode($_SERVER%5BHTTP_REFERER%5D))%7D%7D|.+)&%/.
The keywords are “eval” and “base64_decode.”

The second clue is that a “back door” was created by a “hidden” Administrator. Check your site users for “Administrator (2)” or a name you do not recognize.

Wordpress has acknowledged the attacks and encouraged users to upgrade their sites. Wordpress.com users aren’t affected, as the whole system has already been updated to 2.8.4. If you’ve already been afflicted by the attack, start on the steps in Wordpress’ FAQ.

I’ve already done the upgrade and it is the same, painless upgrade as usual.  Just be sure (especially if you’re using FireFTP) that you set the transfer options to Automatic Mode (Tools > Options > Downloads/Uploads : top fieldset).

If you’ve ever read David Weinberger’s ”Everything is Miscellaneous” (ISBN10: 0805080430) as well as a host of other books and articles on Wikipedia, it’s almost as if Wikimedia is doing a 180 on its own founding principles.  Since the beginning, the founders strongly defended and imposed the concept that the community itself was the police and at no time should an editor be the final say…this to extent that a founder removed himself as an editor for changing an article without the consent of the community (consent being reached by culminating responses and critique any time an article change was made or requested).

“We are no longer at the point that it is acceptable to throw things at the wall and see what sticks,” said Michael Snow, a lawyer in Seattle who is the chairman of the Wikimedia board. “There was a time probably when the community was more forgiving of things that were inaccurate or fudged in some fashion — whether simply misunderstood or an author had some ax to grind. There is less tolerance for that sort of problem now.”

Not that I am necessarily opposed to having these types of sanctions, but at the same time, it gets to the core of defeating the point of the community based system.  The community, as I’ve often maintained, can rarely govern itself over a long period of time.  If it could, governments wouldn’t exist.  But by the same token, where does the power and authority end?  Should the Wikimedia board not consider that instead of a single editor, at the very least, possibly three or more editors should have to consent to the alteration first?

Advocates of the system point out that [it] provides an extra layer of insurance to prevent false posts and improve the overall accuracy.  But once again, at whose expense?  Is historical information not fact riddled by the opinion of the observer?  Who is to determine what is accurate?  While editors are, for sure, carefully chosen, aren’t VH1 game show contestants screened as well (ok, bad analogy but you get the idea – substitute radical terrorists in place of game show contestants and it’s a bit more frightening).  There is much at stake in this issue – freedom of speech, importance of historical record, observation and opinion – more than just the fact that Wikipedia could potentially end up more like Encyclopedia Brittanica (a system it sought to avoid) than the incarnation we’ve all grown to love over the last eight years.

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.

WordPress is often thought of as just a blogging platform. But it’s capable of so much more. Even WordPress’ documentation includes an entire section on using WordPress as a content management system. Because WordPress is such an easy-to-use platform, it makes sense to consider using it as a platform to build just about any kind of website, a portfolio website included.

Whether you’re a photographer, graphic designer, Web designer or any other kind of visual artist, WordPress makes an excellent starting point for developing your online portfolio. And with the wealth of plug-ins and ready-made themes available, you can usually get a perfectly presentable website up and running in a matter of hours.

So get on the bandwagon, listen, learn, try, play and get some stuff done!

Excellent article on a consistently overlooked problem for most web designers – help elements.  A help element is anything that provides the user with assistance in completing a task.  They come in many shapes, sizes and formats but the primary goal is to be unobtrusive but noticeable and, well, helpful.  Most designers/developers look at help elements with trudgery but in many cases it can actually enhance the user experience.

The place we frequently see help elements is in form completion and validation.  Why we somehow can’t provide scripts that reduce error rates in the first place is beyond me, but I suppose in a lot of cases you still have to provide visual cues and alerts to help some users out. 

In HCI we consider that a standard free-form entry is the most volatile of inputs and sure enough, that’s where you’ll encounter the most errors, but don’t neglect the other visual aspects, including external labels, internal (low contrast, like the one shown below) labels, direct manipulation (such as calendar popups). 

The extremes of direct input error handling might be dates and telephone numbers, but here you may need to also consider flow; if within the form you require country, simply provide formats that the user will be more familiar with (such as auto-complete country codes).

From Matt Cronin’s post:

Usability is the Key

With any website design, one strives for usability. Usability is the key factor in the success that a website achieves. Usability is simply about making things easier for your users — and help elements certainly do that. But are your individual help elements themselves usable?

Don’t Confuse the User
Confusing the user contradicts the purpose of the help element, so avoid it. Only put in content that is appropriate to the element. The way you organize content within the help element affects usability. If the element contains a lot of content, use lists and highlight keywords so that the content is easy to scan.

Placement Has a Major Impact
In Web design layout, placement of objects is a top usability consideration. Likewise for help elements, placement affects usability.

Many designers make the mistake of making help elements (i.e. buttons, links, etc.) very small so that they don’t get in the way of the website’s main content. The problem is that they become hard for the user to find. Sure, their small size leaves room for more content, but that won’t help a confused user. Find a balance between subtlety and accessibility.

Also remember that help elements should be optional for the user, not required. Allow the user to choose to get help, instead of immediately showing the element.

Next time you’re designing your site, put some extra consideration into the help elements and see what ideas you can come up with.  Send me some examples of your clever solutions via comment.

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.

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]

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.

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)

Automattic, the company behind the popular WordPress blog publishing software has acquired blog commenting service Intense Debate. [We've]
covered Intense Debate in the past. The service provides web publishers a replacement for the default comments systems supplied by WordPress, Blogger, and Moveable Type and other blog platforms. By installing the plugin, you get threaded comments, reputations, and other advanced features. And readers can track their own comments and those left by others across any blogs or web sites that use Intense Debate. Intense Debate will continue to be available for use on blog platforms besides WordPress, but Automattic plans to add some features, like threaded comments to WordPress 2.7, which will be the company’s next major release.

This can’t come as good news for Disqus, another company that provides enhanced commenting features for bloggers. While Disqus has gotten a lot of good press over the last year, and has rolled out an impressive suite of blog comment management features, an awful lot of blogs are powered by WordPress. And pretty soon most of those blogs will have quick and easy access to Intense Debate’s features, giving bloggers and blog commentors one less reason to sign up for another blog commenting service.

[more...truncated cuz it wasn't that noteworthy]

For the most part, portals have kind of gone the way of the wind.  The only big competitors in the space (even MSN seems to be being overtaken by Live) are barely hanging on with the proliferation of all sorts of social networks from wikis to microblogs to blogs and mapping systems and mashups and blah blah blah.  But lets face it – the fact is that portals do something that few other sites can do, and as a testament to Yahoo’s continued efforts to delivering it – it continues to thrive. 

And one nice thing for Yahoo is that its customers are loyal.  I am not one to use portal sites.  I like most quasi-techs use Google to search, Live services for some communications, and a host of RSS aggregations for news, microblogs for fun, wikis for info and so on.  But I still use Yahoo for all my domain registration because their control panel is just about the easiest to use, and frankly because I have a weird sense of trust in Yahoo, probably not the least of reasons being that it’s survived for so damn long and strived to improve its services offerings over and over.

You’ve got to admit – look at the task at hand – what an enormous pain in the ass.  Back in 1998 I did some freelance consulting for Yupi, a Spanish-language portal eventually acquired by MSN.  Even in its infancy, the architecture was enormous and trying to wrap ones head around the breadth of information was unbelievably tough.  Of course back then we hadn’t begun to scratch the surface into the power of tagging (meta tags were still king), but even then, I doubt it would have made the job easier.

I have to admit that I’ve always felt that Yahoo does a pretty darn good job of piecing together their homepage.  I can’t quite always say the same for some of the divisions, but definitely the homepage does great for driving the ship.  Check it out,

1. Proper use of <h#> tags
Many themes I’ve looked at do not use <h1>, <h2> and so forth properly.  Remember that the search engines (and POSH) dictate that the header tags place emphasis on specific information (which should include things like the title, the date of publication or the author).  Comb through the single post and main index templates to make sure there is consistent use of both <h1> and <h2> tags (at the very least, and preferably <h3> as well) and adjust the CSS to get the look and feel you want instead of relying on class-based <div> markup.

2. Too many links on the index page
Two problems here – first, the increase in links (past 40) decreases or dilutes the value of importance placed on the page.  At the very least, push the most important posts on the front page and consider whether or not you need the others.  Second, why are you sending people elsewhere in the first place?  Sure your friends might run a great blog but do you really need 100 listings in your blogroll?  Consider that external links in your posts should not go past 2 each and that you should keep the total number of links as close to 40 as possible.

3. Bad keyword choices
Especially on the main index page, it is critical that you consider your choice of keywords and mold your page to the proper density.  Use a free tool like Google’s Keyword Tool to find ones if you’re unfamiliar with structuring keywords.

4. Alt and title text
Always, always, always include alt attribute text on images and preferably include a title attribute on links and lists so that search engines know what tags to associate with the image.

5. Unique keywords
Every page in the site should have a) unique titles and b) different keywords.  You may even opt to remove the name of your blog from the page title because in the end it’s just a vanity thing isn’t it?  There are several plugins that can help you do this by converting the text and tags on the posts into the keywords and description <meta> elements.

6. Fix your markup
Bad markup is, well, just bad.  This goes for both the HTML as well as the RSS feeds.  By default (the newer versions of) WordPress provides at least 4 places to get the feeds from: www.domain.com/feed/, www.domain.com/comments/feed/, www.domain.com/wp-rss.php, and www.domain.com/wp-rss2.php and you should provide appropriate links to them as needed.

Now many of you (all 5 reading this post) are probably asking why I don’t even follow these rules necessarily and the fact of the matter is that for this blog, I don’t personally care.  I publish this for information purposes and largely for my students, not really for the public at large.  Should I teach by example, sure I should; but there are many other ways to get this information across, so I do as I wish.

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?

Forum Post: design or develop first?

Q: "just wondering if I should go about designing my site first before implementing any back end capabilities. i like to keep things organized and plan ahead. It would seem to make sense to create the static site first but i am somewhat unsure if I were to design first and end up redesigning to fit everything I plan on adding later, in terms of dynamic content."

R: "The approach you take probably depends on whether you are more of a designer or more a developer. A developer would tend to do the back end first without worrying too much about exactly how the page will look until after they know that it all functions properly. A designer would probably get the page looking exactly how they want and then worry about how to get it to function correctly. If you have separate people performing each of these tasks then all that needs to be done first is to define the interface between the two so that the two almost separate parts can be done separately in the knowledge that they will fit together once both are done."

Article: HTML or XHTML: Does It Really Matter? (excerpted, July 9, 2008 by James Edwards)

HTML was originally conceived as a semantic language, in which elements should describe only the meaning of their content, not the presentation. However, this good intention didn’t hold up very long.

In 1997, the HTML 4.0 specification was published, and although it continued to include presentational markup that had been instigated directly by vendors, it also began a push to clean up HTML, calling some markup “deprecated” and suggesting that it not be used.

XHTML 1.0 came along in 2000 as formalization of HTML 4 into XML. XML itself had been standardized in 1998 as a general specification for defining markup languages, and was a stricter and simpler offshoot of SGML, the Standard Generalized Markup Language from which HTML itself was originally derived.

XHTML is still worth using, because it’s a transitional standard that moves us towards a pure-XML Web. XML is inherently better than SGML, because it’s simpler and stricter, and much easier to parse (once you’ve understood its rules). I don’t know from where we’ve adopted the idea that we should be forgiving of markup errors, but I don’t share that view.

And some other choice reads:

• Custom Web Fonts: Pick Your Poison by Kevin Yank
• Fancy Form Design Using CSS by Cameron Adams
• 10 Tips for Being a Greener Web Designer by Matthew Magain

This morning I spent 90 minutes in line with Jennifer waiting to buy her 3G.  I’m not quite sure what the fascination is with actually waiting in line that long (more than 7 hours all in all) to get one, but I’ll give her credit for persevering that long.  Now on the other hand, the Touch Pro will reportedly be out in September, so maybe I’ll eat my own words.  Unless I break down and import one instead.

I sat through an enlightening department meeting today in which the issue of, amongst other things, design came up.  Without going overboard I would like to elicit a challenge to all WDIM students this quarter not only to complete the work they are assigned but to challenge themselves one step further and "polish" your design. 

Mr. Anderson had an interesting point – a lot of you don’t seem to know where to begin and he gave out a lot of recommendations that I strongly agree with: stepping away from the computer and drawing by hand, layering screencaps of choice sites on top of each other in Photoshop and deconstructing or morphing them together, cutting clips from magazines and arranging them together like a scrapbook.  The point being that despite everyone’s creative talents, sometimes finding direction is the hardest part.  Take a step to be different.

From my end I would like to see more polish.  Hopefully we’ll be able to incorporate a few good example of what we mean by this in IMD345 (UCD3) this quarter.  Or if you need some examples, pick up Web Designer Magazine (a glossy, expensive British mag – find it at Barnes & Noble) and check out some of the great design coming out of the UK.  Aspire to get that kind of cleanliness or artistry in your design.  By the same token, don’t lose sight of the content and functionality.

See you next week!

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]

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

The reason we do a “Luhn-10 check” on an entered credit card is to verify that the user did not enter invalid information before it gets sent to the credit card processor. Why? Because a transaction request, whether it’s valid or not, costs the site owner money! Every request is charged a base transaction fee (and this varies depending on the size of the company, the volume of transactions and many other factors; my company for example, has a transaction fee of 12 cents*). So in other words, we want to make sure that if we’re about to get charged that fee, we’d better make sure ourselves that we have as accurate a number as possible.

Luhn-10 (which used to be known as Mod10) was developed by an engineer at IBM in the 1960’s. The basic premise is that a homogenous formula, when applied to a string of numbers, will always yield the same result. In the case of Luhn-10, the result is 0. For this example, use the Visa card:

4563 9601 2200 1999

Step 1: Reverse the number. Beginning with the (new) first number of the whole sequence, multiple every odd digit by 1 and every even digit by 2:

Step 2: For all of the results that are greater than 9, add the two digits in the result:

Step 3: Sum those numbers:

9+9+9+2+0+0+2+4+1+0+6+9+3+3+5+8 = 70

Step 4: Modulus the sum (this is why it used to be called Mod10). In arithmetic, the modulus is the remainder after a number is divided by a specified number:

70 = 0 mod 10

All major credit card providers use the Luhn-10 system (Visa, Mastercard, American Express, Discover, Diner’s Club, Carte Blanche and JCB). There is currently an alternate system that uses a 1 instead of a 0 as the modulus but they are not widely accepted cards. Note that there are several card numbers that are widely accepted as test card numbers and are always overlooked. The most common one is 4111111111111111 (and is therefore never considered to be a real credit car number). Also note that credit card numbers can have 13, 15, or 16 digits

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.

Manya found a really nice survey tool that was put together by Art Institute of Atlanta students in IMD420 (Advanced Interface Design, which unfortunately we do not offer).  It’s a Flash based survey but it’s demonstrative of how easy it is to put together a quick feedback tool about web interfaces.  In light of the fact that you should all be completing your group projects, including your testing plans, in the next couple of weeks I think this was an appropriate find.  Thanks!

Early origins of the hyperlinking concept, one of the foundations of the HTML language, can be attributed to an article by Vannevar Bush in the July 1945 issue of Atlantic Monthly entitled “As We May Think,” in which he describes a method or concept of interlinking human knowledge to create a continuous stream of information.

The human mind does not work that way. It operates by association. With one item in its grasp, it snaps instantly to the next that is suggested by the association of thoughts, in accordance with some intricate web of trails carried by the cells of the brain. It has other characteristics, of course; trails that are not frequently followed are prone to fade, items are not fully permanent, memory is transitory. Yet the speed of action, the intricacy of trails, the detail of mental pictures, is awe-inspiring beyond all else in nature.
- Vannevar Bush

Whether out of interest, knowledge or maybe you’re just a history buff, but I highly encourage all web design students to know the fundamental origins of the world they work in – from concepts like Bush’s to the relevance of ARPA to the IP addressing system.  Understanding the broad perspective of how science arrived to such a technological wonder is important.

[click image or here]

The term first appeared in a 2006 blog article by Jeffrey Zeldman, criticizing Web 2.0 and it’s associated technologies.  Remember that Web 2.0 is largely a marketing term used to describe movement towards data and application consumption.

For more information, see the References in the Wikipedia wiki on the topic.

[Notes: Generally I disdain using Wikipedia for information, but here I think the links are good.  I also think that coming up with a (IMHO) silly term is just that, silly.  EVERYTHING evolves, and the Web is no different.  More than a term, all technologies are moving towards both convergence (of data) and disparity (platform-agnostics) and trying to classify or categorize it into a neat little package only exacerbates issues.  Anyway, I've only posted this to make my student aware of the terminology - to me data is data and presentation is presentation and function is function - how you go about doing it should never be neatly classifiable.]

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

FreelanceSwitch.com

Re-designs should be approached like any other project – a plan should be developed, communication with the client maintained, and code developed on a timely basis.  What makes the re-design project that much more difficult is that the client frequently will not have solid understanding of what he or she wants, nor has a good understanding of what is involved with a re-design.  Many clients think that re-designs are simple facelifts (which some of them are), but it’s not like painting a wall.  Re-design involves potentially even more work to institute because you will primarily end up retrofitting design on existing functions.

During the project planning phase, it is critical to gain a definitive understanding of the client’s expectations of the re-design.  Does the client expect the site to function exactly the same as it had before but with a new paint job?  Or is the client expecting new functionality to be added?  Does the re-design involve adding new content?  Has the existing site met traffic expectations or is the re-design largely intended to improve traffic?

Once you’ve ascertained the reason(s) for the re-design, begin developing your plan.  This plan should be similar, if not identical, to a plan that you’d produce if the site were starting from scratch.  The only significant difference is that you should point out the changes being made and defend those changes.  For example, say the original strategy included the following description of the target audience:

Your revised plan might instead say:

Why, you ask, would we bother to re-target?  For the same reason that the groups were targeted originally – because it affects the design of the site.  And more than that, it reflects on the type and propensity of content (and advertisers) that populates the site.

This analysis particularly holds true when you’ve discovered that the operating systems and browsers being used by the target group differs from the expected or norm.  Where originally your site might have included video content delivered via Windows Media, if your re-target is largely Mac users on Safari, you might look to use Quicktime for delivery instead.

This analysis should, most importantly, analyze which pages are not being viewed on a regular basis.  If the content on those pages is important, you might consider modifying the structure or the navigation.  Likewise, the unique and re-visit density can affectuate the need for change – if you discover that users are only visiting once per week as opposed to daily as expected, that “Tip of the Day” is a waste of time – instead swap it out for a “Tip of the Week”.

For surfaces, a recommendation of both Nielsen and Krug is to display both the original design with the re-design, highlighting where changes are made:

Creating the re-design can also incorporate features that had been slated for future releases, in the same manner in which the original plan incorporated them.  Or perhaps the client has determined that there was no need for it in the first place.  Either way, the one way that the re-design plan differs is that you now have a foundation for defending changes – the traffic reports.

Analyzing Traffic

Obviously, here we’ve made a very big assumption – that going into the re-design plan that you have information assisting you.  In this day and age, there is no reason that traffic analysis should not be incorporated into the plan.  While there are many tools that you can use, one of the simplest and one that should be incorporated before the site (originally) launches is Google Analytics.  Google Analytics is a free tool that provides detailed analysis into your users.  Adding Analytics to your site involves only 4 steps: 1. Creating the account, 2. Generating the script code, 3. Adding the script code to your site, and 4. Taking periodic and regular reports.

Creating a Google Analytics account is simple enough but bear in mind that because of its power, the account should be the same “master account” that you use with the other Google tools (assuming you use them).  Part of the reason for this is that Google provides you with the ability to cross-reference tools.  For example, if you also use Adsense to create third-party ads, you can use Analytics data to create advertising panels that coincide with your traffic.

Once you’ve created the account, add Analytics to your tools panel and log in. Once you’ve logged into Analytics, take the time to read through the help articles Google provides. Then generate your code. You’ve probably actually seen Google Analytics code in many places before, just not known what it is. Analytics code is typically a couple of lines of Javascript that is added to the footer of your document body. I repeat, to the FOOTER of the document. Why the footer? Because the Analytics needs data and the data only comes once the page has loaded.

Once the code has been loaded, you don’t need to do anything else other than sit back and let Google do the work other than check your reports.  Analytics reports run several layers deep and they can be customized to your needs.  For example, if you want to create a special report that details visitors who came through Google searches and analyze which geographic regions are the densest, you can.  This is particularly good for creating truly targeted advertising and analyzing keyword consumption (remember that different regions refer to things differently, see sidebar).  Furthermore, you can create sub-accounts and reports that are accessible by outside parties.  This is useful for sites that have non-Google based advertising areas that you want to sell to prospective buyers.

In lab today we will be walking through several tiers of Google Analytics pages and seeing how detailed the information it provides truly is and how we can use that information to our advantage.  We will also look at how Google Webmaster Tools can help us with our SEO.

The point is that re-design is good business.  And it’s pretty much more available than projects that start from scratch.  There are thousands upon thousands of web site owners who realize that their businesses can improve but don’t know where to turn.  Making a name for yourself as a re-designer who takes the time to plan it out can lead to good business contacts.  And if you don’t believe me, take a look at what Jakob Nielsen’s company, Nielsen Norman Group, really does – all the research that they do leads to one thing – better foundations for re-design.

• Group Projects: we will be holding “team meetings” to get an idea of your directions – one member from each team should lead their group in selling the concept to the rest of the class and auditors.  Be able to take critique of your ideas, field suggestions that might help you in your quest and think through the process.
  Reminder that next week your project plans are due by 10:00am!  Project plans not handed in by that time will be considered late and points deducted!
• Quiz today on SEO 
• Lab: How to Analyze in Google Analytics
• Reading: go to http://www.amazon.com/Redesigning-Web-Sites-Retooling-Changing/dp/1564969533 and click on the book cover or “search inside” link.  Once you are inside, click on the ‘excerpt’ link and read the 4 pages (pp 11-14) from the chapter on the redesign of the FAO Schwartz web site.  Make particular note of the storyboarding as we will return to this later in the quarter.
• Assignment 2: Re-Design
  For this assignment you will re-design a single page and defend your reasons for the changes.  The finished assignment should include one color-printed page showing the existing design and your re-design with all modifications highlighted (see example on mobimeet) and (separately) one page (and read carefully – this means from the top to the bottom of the page) defense, typed, double-spaced.  The page does not have to be the home page, but it should be within the first level of navigation and should not be a supporting page (such as an FAQ or terms of service).
  » www.kudzu.com
  » www.rentals.com
  » www.buy.com
  » www.godaddy.com
  Assignment is due Week 4 (October 27, 2007) at 9:00am.
  IMD345 Assignment 2 Instructions & Return Sheet

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.

[by Stephan Spencer for CNet]

Links are the fundamental vehicle that gets us from here to there on the web. Without them, we’d have no where to go, or at least a much harder time getting there. Links are, of course, deeply important to search engines as well. In fact, links and PageRank are at the very core of Google.

Spend a little time on just about any website and it won’t be long before you come across a “click here,” “click this,” or “more” link. You probably wouldn’t trade a $20 bill for $5, yet that is exactly what is happening when you use completely generic, non-descriptive anchor text with your links.

Search engines place even greater weight on links as another signal of what the destination page and site is about. While this is one of the basics of SEO, there seems to be no shortage of suboptimal links in the world. Links, whether internal or external, are too valuable to waste.

[read more]

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

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