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

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.

With the huge move towards user experience in the last 12 months or so, I’ve decided to change the class up a bit this time around. First, a new textbook – Measuring the User Experience by noted guru and researcher Tom Tullis. I think it might just be what we need to introduce more experience and less testing. Second, we’ll focus more on task accomplishment and user satisfaction in the past by using some pre-defined testing, sprinkled with a lot of web-based issues as opposed to general interface issues, and wrap that up nicely in a site building exercise designed to take what we’ve learned and applying it to a development.

I’m also continuing my support of WordPress by introducing it as the tool of choice for both blogging as well as general site development.

For those of you in the class, get ready for a hopefully fun, definitely challenging, and mostly a good learning experience with lots of information that I hope you take and reflect on every now and then. I have the benefit of 15 years of experience in the business – some good, some bad, a lot of great designs and experiences and a lot of bad ones too. It would be unfair to say that I hope you can live these experiences within the 3 short months of the course (or 6 if you count IMD345) but I certainly hope you can take from what I have learned and use it to your advantages.

That being said, I hope you all take a bit of time to check out some of the upcoming work that my team at iStream has been working on. Right now the prominent projects we have in the still include:

• A redesign of the iStreamPlanet corporate web site
• A launch of the iStreamPlanet Sales Portal
• The official release of iStream Director, a digital asset management system
• AT&T Blueroom Masters Golf Silverlight application with Move Networks technology
• Three interactive Silverlight applications to replace some existing Flash interfaces for a major broadcast network
• New Silverlight interfaces featuring Smooth Streaming
• A Flash video player featuring slow motion techniques for Ballpark Preps
• PlayReady digital rights management

And plenty more to come…

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.

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)

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

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

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

[via VandelayDesign]

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

Dan Catt’s concept sketch for Flickr Places

Image: Adaptive PathI was also recently at Mix08 where it was apparent that there was an huge interest in more collaborative approaches to problem solving and with the advent of socializing technologies, you should broaden your means of getting ideas generated.

I was prompted to think about this after reading a blog post on Adaptive Path about this very topic here and after watching one of my own UCD groups use overhead projections and whiteboarding.  But this is only a slice of the puzzle.  Be proactive, and be open-minded when searching for solutions.  Use colors, use technologies, use visuals and be big.  The answer is always out there, but it may be buried in a mound of ideas, so give it a reason to pop out.

[read "Tapping Into Conference Participants’ Brilliance"]

Individually you also have some reading and an assignment. Please download the excerpt and instructions from the class page.

The second track continues the things we learned last quarter and takes it one step further.  The class will be divided into teams and each team randomly assigned to one of three CARE projects.  CARE projects are mini web sites built by AILV students for local non-profit organizations.  Today we will be forming our groups and meeting the clients.  This is for real and you are producing a project that must launch by the end of the quarter.

Finally, as with all my classes, we are trying to move away from paper as much as possible.  I am going to provide you class notes in PDF and audio-based slides whenever I can rather than posting them here and having you print them.  To make it easier, I’ve created a single page that you can access for all downloads at http://www.mobimeet.com/class-imd335

My first choice of good design is the “MacTab.”  This one actually kind of exists, just maybe not quite as slick.  I love the idea of a tablet-based Mac interface.

Then there’s the slightly far-fetched “Viao Zoom,” a holographic, thin-form factor design.

The Compenion has an OLED touch screen that can slide open to reveal an OLED-based keyboard (or second screen).

Check out the post for some more unique and innovative ideas.  How might these form factors apply to or suit your needs?  What other ideas can you come up with that might revolutionize laptop design?

[via Smashing Magazine]

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

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.

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

Pay particular attention to:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Nothing helps:

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

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

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

The same problem on Yahoo.com:

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

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

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

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

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

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

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

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

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

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

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

8 Usability Check-Points You Should Be Aware Of

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

Download the podcast here or subscribe via iTunes.

Bug in Excel 2007 thread on Google Groups

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

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

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

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

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

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

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

How To Proceed?

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

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

How Do You Know If A Keyword Is Good?

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

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

Biggest Mistake When Choosing Keywords

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

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

Long Tail Keyword Marketing

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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