Background information

First of all, this is an early release of the new API and it’s still in Labs. It doesn’t contain all the features of the old API and will probably never do so since the old API is bloated with lots of helper methods for doing all sorts of things like making AJAX calls and showing log windows. Nowadays we have libraries like jQuery and Prototype and tools such as Firebug to take care of these things. Therefor these features will not be included in the new API, since it’s main focus is to be streamlined in order to be as fast as possible. Other missing features such as polygons and polylines will however probably eventually be included.

Secondly, since it’s an early release it’s still undergoing major changes. Features will be added as we go along and some changes of how to do certain things might be introduced.

That said, I think that the new API is mature enough to use and certainly to experiment with. It also contains the most common features seen in implementations on Google Maps on the Web.

Enough with the background info already! Let’s take a look of what the new API looks like.

Inserting a reference to the API

The first thing you will notice is that the API key is no longer necessary. In the previous versions the API key was inserted as a querystring into the script reference but not so anymore. This means that you don’t have to apply for a new API key for every domain you want to have a map at. It also means that the URI to the API is a lot shorter.

So the only thing you have to tell, while referencing the API, is whether your device has a sensor or not. sensor=false if you don’t have a sensor and sensor=true if you do. With a sensor is meant some way to determine your present location, like if you have a GPS in your device. This information is attached as querystring at the end of the URI.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Creating a map

A new namespace

In previous versions of the API there were lots of global variables, distinguishing them selfs by having a capital G in the beginning, like GMap and GLatLng. In the new API the namespace google.maps is used. So what was formerly called GLatLng is now called google.maps.LatLng. Using namespaces is good coding praxis. One should avoid cluttering the global namespace as much as possible in order to avoid collisions with other code. Read more about why in Global variables in Javascript.

So in practical terms, here’s how to create a new coordinate object the old way and how to do it the new way. The LatLng() method takes two arguments, an x and an y coordinate.

// The old way
var latlng = new GLatLng(57.8, 14.0);
// The new way
var latlng = new google.maps.LatLng(57.8, 14.0);

Object literals

The new API makes heavy use of object literals to pass arguments to it’s methods. The old API used object literals as well, but in this version they’ve taken it a step further which I think is positive. I think this is a really beautiful way of coding. It’s easy to use, easy to maintain and easy to expand. For you who doesn’t know what an object literal is, it looks like this:

var myObj = {
  id: '1',
  name: 'Whatever'
};
alert(myObj.name); // Will alert Whatever

It’s basically a fast and easy way to create a Javscript object. Some of you might also recognize it as JSON, and that’s exactly what it is. JSON stands for Javascript Object Notation and is in fact a Javascript Object.

Initializing the map

To initialize the map we need to call the constructor of the Map class. It takes two arguments the first one being a reference to a HTML elemtn where you want the map to be inserted (often <div id="map">) and the second one being an object literal (options) containing a set of properties.

This is much like how it works in the old API. The big difference is that in the old API you had to call the method setCenter() immediately after calling the constructor in order for the map to display. setCenter() told the map what location would be the center of the map and what the initial zoom level would be. In the new API this is not neccesary since both these properties are passed in the option parameter. So instead of making two calls, you now have to do only one. An approach that I think makes a lot more sense.

Before we get into the details of what properties option contains, lets have a look at what the code to create a map looks like.

// Creating a LatLng object containing the coordinate for the center of the map
var latlng = new google.maps.LatLng(57.8, 14.0);
// Creating an object literal containing the properties we want to pass to the map
var options = {
  zoom: 6,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Calling the constructor, thereby initializing the map
var map = new google.maps.Map(document.getElementById('map'), options);

Options

The option parameter is, as mentioned before, an object literal containing the properties we want to pass to the map object. There are three required properties that must be passed to the map on initialization. These are:

• center
  This property sets the center of the map and takes a coordinate of the type google.maps.LatLng
• zoom
  This is a number that sets the initial zoom-level of the map
• mapTypeId
  This property sets what kind of map type that would initially be used. The most common type is google.maps.MapTypeId.ROADMAP

There are of course lots of other properties that you can use when initializing the map, including which controls to display and which features to enable or disable. For a full list see the documentation.

Live example

A live demonstration of a simple map

I’ve put together a live example of how to add a Google Map v3 on a web page.

Conclusion

In conclusion I would say that the Google Maps API team has done several things right here. First of all by using a proper namespace, thereby not cluttering the global namespace. Secondly by heavy use of object literals to pass arguments. This way the API is more consistent and also easier to expand in future releases.

Please note that the API is still under development and is still undergoing changes. The way it works might change before the final release.

This is the first article in a series about the Google Maps API V3, so keep your eyes open for the next one which will explore the different properties for the map object and how you can use these to make the map behave and look differently.

My Google Maps book

If you found this article useful you might be interested in my book Beginning Google Maps API 3. It covers everything you need to know to create awesome maps on your web sites. Buy it on Amazon.com

In Joseph Selbie article Bringing Holistic Awareness to Your Design at Boxes and Arrows, he discusses the value of a holistic view. In a best-practice study conducted at Selbie’s company Tristream the following was revealed:

Those teams that achieved the highest degree of shared, holistic understanding consistently designed the best web applications. The more each team member understood the business goals, the user needs, and the capabilities and limitations of the IT environment—a holistic view—the more successful the project. In contrast, the more each team member was “siloed” into knowing just their piece of the whole, the less successful the project.

The conclusion from this is that each member of a project team, should at some level, be involved in the user research process. There should also be lots of information sharing between team members, preferably through participation and by oral presentations and discussions of results.

The dangers of siloing in

Joseph Selbie also writes:

The members of the teams that performed less well not only tended not to understand the application as a whole, they saw no need to understand it as a whole: programmers did not care to know about users, user researchers did not care to know about programming limitations, and stakeholders were uninvolved and were considered “clueless” by the rest of the development team.

This was a surprisingly common situation in many project teams, but one that clearly should be avoided.

Read more about this and what to do about it in the original article, Bringing Holistic Awareness to Your Design.

In this article I will explore some of the Zooming User Interfaces out there today and also take a sneak peak of what’s around the corner.

Why Zooming User Interfaces

Consider this. You’re in a maze, unable to find your way out. Relying on maps you quickly lose your way since the human mind is not well suited for remembering long sequences of turns. Now imagine rising up in the air so that you can watch the maze from above. Suddenly it’s really easy to find your way out, or to find you way to any part of the maze.

The maze in this analogy are applications today, confined inside the constraints of the desktop metaphore. The map are menus, bookmarks and other aids we use to find our way.

Through the evolution of man we’ve relied on recognizing landmarks as means to find our way around. This is called spatial memory. We’ve relied on it to remember where we put our tools and hid our food. In ZUI’s we use this ability to find our way through vast amounts of data.

Are ZUI’s difficult to use or hard to understand? Personally I think that the widespread use of interactive maps such as Google Maps and Yahoo Maps have paved the way for Zooming User Interfaces. The zooming paradigm is natural once you’ve tried it and I suspect that it will be more and more common.

Examples of ZUI’s

Ever since I first got interested in ZUI’s I’ve seen an increase of them. Here are a several examples of applications using a Zooming User Interface today.

Prezi

Prezi is a tool for making zooming presentations. With an intuitive user interface it’s easy to create pretty impressive presentations. The cool thing is that the tools your working with in Prezi blends seamlessly with the presentation.

I’ve made a simple presentation called Zooming Interfaces on Prezi. Check it out to see what I’m talking about.

Seadragon

Seadragon is a tool from Microsoft Live Labs that let’s you use really high resolution images which you can zoom in and out of. In the first part of this video from TED Talks Blaise Aguera y Arcas from Microsoft Labs demonstrates it.

The Seadragon AJAX Library

With the Seadragon AJAX Library it’s easy to embed single high-res images into a web page. This image is about 35 megapixel. Click around in it to zoom in and out.

DeepZoom

Seadragon is implemented in Silverlight through DeepZoom. This combination enables you to create amazing applications where you can seamlessely zoom through huge amount of image data. It’s also possible to add other information aswell. Check out the examples below to get a sense of how it works. I think that the Hard Rock Café Memorabilia is really impressive.

Here’s some great examples of implementations of DeepZoom.

• Hardrock Café Memorabilia
  This is a display of memorabilia from Hardrock Café. By zooming and panning you can explore the content. When you zoom in on an object additional information about it is displayed.
• DeepZoom demo at Vertigo
  This demo illustrates how to navigate content with a zooming interface.

Mooncake

Mooncake is another implementation of Seadragon. It allows you to pick pictures from a Flickr or SmugMug account. It then automatically process them into Seadragon images.

Here’s a simple example made from photos from my flickr account.

Zoomorama

Zoomorama is a Flash based tool for making zoomable image albums. You can either add images directly through a web interface or install a desktop application. The desktop application provides you with more powerful tools to design the album as you like. You can for example add captions and arrange the images just as you like in it, something that’s not possible in the web app.

Example

This is an example of a Zoomorama album created with the web application.

OpenZoom

OpenZoom is an open source framework for the use of high-resolution images and Zoomable User Interfaces on the web. It uses an implementation of the Deep Zoom technique in Flash.

In part three of Daniel Gasienica article series Inside Deep Zoom there are several examples of implementations of this technique.

Google Maps

With creative use of the Google Maps API some people have created pretty cool ZUI’s. I’m sure that this was not the intended use for the API, but hey, why not?

Example of Zooming User Interfaces using the Google Maps API

• The Kremer Collection
  The Kremer Collection is a collection of paintings where you can examine the details of a painting by zooming in.
• zkimmer
  Zkimmer uses the Google Maps API to display magazines.

Zooming User Interfaces in Comics

Cartoonist Daniel Merlin Goodbrey are experimenting with new ways to experience comics. In the comic PoCom-UK-001 he uses a Zooming User Interfaces for the viewer to read the cartoon.

Zooming User Interfaces on Mobile devices

On mobile devices where screen estate is very limited a Zooming User Interfaces has proved its value to organize information.

Safari web browser

The Safari browser on the iPhone is one example of this. By being able to zoom in and out of web pages, we overcome the limitations of the small screen. On the iPhone there’s also the wonders of the multitouch screen which makes it natural to zoom in or out by tapping or by using the pinch maneuver.

Watch a video on how this works on apple.com

Firefox Concept Mobile Browser

Aza Raskin, Head of User Experience at Mozilla Labs, has developed a concept for a Firefox Mobile browser that utilizes a zooming interface among other interesting interaction techniques.

Read more about it onMozilla Labs and on www.azarask.in.

Future concepts

Aurora

Aurora is a future concept browser that Adaptive Path has developed for Mozilla Labs. It utilizes a lot of new interaction ideoms, zooming being one of them.

About 2 minutes into this movie, theres a sequence that nicely illustrates a Zooming User Interfaces to browse data. In this interface there’s also the Z-axel which represents time. The older the content, the farther away it is. It also fades with time. Check out my article Visualizing the age of content to read more about this concept.

Aurora (Part 1) from Adaptive Path on Vimeo.

What others have written

Dmitry Fadeyev at Usability Post recently wrote an article called Zoomable User Interfaces, where he discusses the benefit of ZUI’s as well as providing some examples.

There’s also an article on Wikipedia on Zooming User Interfaces.

Conclusion

I can definitely see a trend in ZUI’s. Ever since I first started getting interested about it I’ve seen an increase in examples of it. I feel pretty confident that we’re going to see a lot more of this in a not so distant future. Do you have more examples of the use of ZUI’s?

At a seminar I attended last week on Social Media one of the speakers Johan Ronnestam said that the reason Twitter is exploding right now is Barack Obama successful use of it during his election campaign. Every marketer worth his salt has now studied the phenomena and is busy trying to get everyone at their companies to use Twitter.

Today I also learned that Dalai Lama is now on Twitter. Watch his profile at @OHHDL. Pretty soon everyone will be on board, I’m just waiting to find my mothers Twitter profile!

If you want to join the trend, follow me on Twitter!

Update

Dalai Lama is now following me on Twitter! Even though I realize that it’s probably not Dalai Lama himself following me but rather someone administrating it for him, I can’t help thinking that it’s pretty cool!

Update 2

Dalai Lama was apparently a fake. That’s too bad because he was quickly becoming the most popular person on Twitter. Read all about it at the Next Web.

I’ve been using Spotify for about four months now and that has been four month of more intense music consumption than usual for me. I’ve noticed that Spotify has made me listen to music in new ways.

New behavioral patterns

• I Listen to more old music
  I find myself rediscovering music I listened to 10 or even 20 years ago.
• I Listen to more new music
  I find more new music to listen to, often after being tipped by a friend but also after finding it through the applications related artists section called Artist radio.
• I Tip friends about music and get tipped by friends more
  I frequently send and receive Spotify URI’s to/from friends that also use Spotify

Reasons

I think that the reason for my changed behavior depends on two key feature in Spotify.

1. Instant availability
   Since a lot of music is instantly available it lowers the threshold for finding new music. It encourages me to explore. A key factor here is the fast performance of the search box. Another important factor is that in the song list I’m able to click album name and artist name to get more information related to that.
2. Share music
   By being able to easily share music with friends also using Spotify I frequently discovers new music which increases my music interest.

I think this is an interesting example of how technology changes the way we behave. This service has certainly changed the way i consume music and in the process enriched my life. That’s how it should work and I’m happy, when it on these rare occasions, do.

Spotify has clearly met a latent need that I had. It would be interesting to know more about the research behind it.

Improvements

While I’m able to share music with others I still think it’s an area where there’s plenty of room for improvements. In the current version I have to right-click a song/album/playlist and choose Copy Spotify URI.

I then have to send this URI to a friend someway who have to execute it somehow, for example with Run… in Windows.

I think that the natural progression should be some sort of Social aspect in Spotify. In it’s simplest form it could be being able to connect with friends using Spotify. You could then easily send them songs through the UI of the application.

Conclusion

I think that Spotify is great. It’s made me listen to more music. Has it changed the way that you listen to music?

Most popular articles

Looking back at the year that has passed and after reviewing the statistics for 2008, these are the five articles that got the most pageviews.

1. The use of buttons in web forms

   After Luke Wroblewski wrote about this article on his site Functioning Form I’ve had a great increase in traffic. It’s really nice to see that so many have an interest in this.

2. Polylines in Google Maps [Part 1]

   Pamela Fox at the Google Maps API team was kind enough to link to this article from the Google Maps API documentation. That of course led to a massive increase in pageviews. It seems like this topic is of great interest to a lot more people than just me.

3. Imagemap rollover

   This tutorial shows how to code an efficient imagemap rollover. It explains how to solve a few bugs that I couldn’t find an explanation for anywhere else on the web.

4. Polylines in Google Maps [Part 2]

   This article which is the second part of two articles about Polylines in Google Maps, also got linked to from the Google Maps API Documentation. It explains how to encode a polyline on the server side.

5. User Controls in ASP.NET MVC Preview Release 5

   During 2008 I have tried to wrap my head around the ASP.NET MVC Framwork, which by the way is a really great framework. One of the confusing issues with it was how to work with User Controls in it. This article explains it all.

Most popular articles on Usability and Interaction Design

It seems that the tutorials are the most popular posts but I’ve also written some articles on different
aspects of Usability and Interaction Design. Here are the top 5 articles in that category.

1. No undo? Redo!

   Undo is a feature found in almost every desktop application. How come it’s so rare in web applications? This article explains the importance of this.

2. Gradual Engagement

   Gradual engagement is the concept of getting engaged visitors. This article explains the concept and presents a few examples.

3. Visualizing the age of content

   How do we visualize how fresh a piece of content is? This article presents a few possible solutions.

4. Page Load Times vs Conversion Rates

   After reading Andy King’s book Website Optimization, I was surprised by some of the statistics presented. This is one of them.

5. Change your focus to locus

   The late Jef Raskin, also known as the father of Macintosh, presented some pretty interesting concepts during his life time. Here’s one of them.

2009

I look forward to see what happens with this blog during 2009. As of now I have a few more articles on Google Maps lined up, and I plan to write more tutorials and articles on stuff relating to web interfaces. I do however also plan to increase the number of articles on Usability and Interaction Design this year.

What kind of articles do you enjoy and what do you think I should primarily write about?

Have a good 2009 everyone!

The results

For Google an increase in page load time from 0.4 second to 0.9 seconds decreased traffic and ad revenues by 20%. For Amazon every 100 ms increase in load times decreased sales with 1%.

I’m surprised that such relatively small changes in load times had such a massive impact on conversion rates.

The importance of speed

These statistics makes me even more convinced that speed is one of the most important factors for how users experience your application/web site. According to Andy speed is crucial for engaging the user.

Speed is the most important factor, after site attractiveness, to increasing flow in users. People who are more engaged while browsing your site will learn faster and show an improved attitude and behavior toward your site

- Andy King, Website Optimization, page 148

Decrease in tolerance for load times

A rule of thumb have been that if page load time exceed 8 to 10 seconds, the user’s frustration increases. Newer research has shown that about a third of all broadband users are reluctant to wait more than 4 seconds for a web page to load. For narrowband users almost half of them won’t wait more than six seconds.

Optimize for speed

It has always been important to optimize for speed, but maybe it’s even more important now than before. The audience is more demanding and the competition is harder. A great start if you want to learn more about how to optimize your site is Andys book, Website Optimization.

Illustration by Paul Moline Designs

I’m for one hate shopping for groceries. If I could have a system like this that remembers what groceries I normally buy and suggests a shopping list according to my dinner plans, I would be more than delighted. In fact, if I didn’t even had to physically go to the grocery store, I would be even more delighted.

The UI

From what I can tell from the video it’s very much inspired by the iPhone interface. It’s probably the touchscreen and visual effects that gives that impression. The user interface looks really cool, but it do seem to lag and respond a little slow.

The UI has a lot of 3d effects. One pretty cool thing is that you can choose a product and then rotate it to read the text on the package. I’m not sure though, if that’s the optimal way to display that sort of information, but it sure looks cool.

Technology

Apparently it’s built with Microsoft’s WPF technology, the same technology that Silverlight is built upon. I haven’t seen much built with this technology so it’s nice to a example of what you can do with it.

In the video Paul Dawson and Matthew Adams demonstrates and explains how it’s all supposed to work. They also tell some about how they built it.

Right now it’s an early beta, but they’re soon going to perform trials with customer.

Read more about Conchango and the Tesco project on MSDN.

Thanks Peter, for showing me this.

For me personally, who’s already using jQuery along with ASP.NET, the main difference will be the intellisense annotation support for jQuery. This will be a welcomed enhancement of my development environment. Needless to say the asp.net team at Microsoft will also build ready-to-use controls in the ASP.NET AJAX Control Toolkit that builds upon jQuery.

According to Scott Guthrie there will be a free download with the jQuery Intellisense support in a few weeks. The ASP.NET MVC download will also contain it and the jQuery library.

Read more about it on Scott Guthrie’s blog and in John Reisig’s blog post on jQuery.com.

In the real world it’s not a problem. Physical objects, like paper, clearly wears the mark of time. Paper turns yellow and get torn. Other things get scratched or changes it’s appearance in some other way that makes it obvious that it’s not new.

The digital world

There are a few pretty common ways of displaying the age of content on web pages. These are primarily date stamps, telling when something was created or last edited. There’s also different color on visited links, that in a sense also is a way of telling that content is older. At least you know that you’ve already visited the page.

But that’s about it. And often, even those cues aren’t used.

New ideas

Robert Hoekman Jr. has written some about in the book, Designing the Obvious and in the article Design Stories: Sorted link-lists using “ambient signifiers” on rhjr.net. His idea is to show the age of links by displaying them in different colors. The older they are, the lighter the color.

The term to describe this is ambient signifiers. It’s not restricted to just illustrate the age of content but is the concept of giving subtle cues, to help people interpret context.

Ross Howard has written about this in the article Ambient Signifiers on Boxes and Arrows which, I think, is where the term got coined. He describes his experiences with the Tokyo subway system, where a unique chime is played on each station, giving a subtle cue for the frequent commuter of where he currently is. This gave him the idea of ambient signifiers in digital media.

Currently there are some use of ambient signifiers in the applications we use. In Firefox for example, the address bar turns yellow when you enter a secure site. On sites the current status is often visualized in some way, like if you’re logged in to a site or not.

Aurora – Mozilla Concept Browser

Adaptive Path and Mozilla Labs has developed a concept of a future browser with lot of new ways of interacting with data. It’s kind of a zooming interface where you can browse your content in a 3d view where the z-axe represents time. They visualize the age of content in two ways. First of all the farther away the content the older it is. Secondly the content fades with time. I think that is a very natural way of visualizing it and a great illustration of how ambient signifiers can be used.

Watch the concept in action in this video from Adaptive Path.

Aurora (Part 1) from Adaptive Path on Vimeo.

At first I thought that this was a either a major bug that slipped in the new release, or maybe some clever enhancement a´la the Awesome bar. But after checking with a coworker, who’s also got the new version but still has the buttons, I suspect that this might be something strange happening on my computer.

I don’t think Jakob Nielsen will take lightly on this as he says that according to his research, the back button is the second most used navigation feature. The back button indeed act as sort of an undo function. Enabling the user to back out from unwanted pages.

I’ve tried to restart Firefox but that didn’t help. Maybe rebooting the computer can fix it?

Does anyone else experience the same problem?

Position

According to Jakob Nielsen, the order of the buttons doesn’t matter that much. Both positions has it’s pros and cons. The important thing is to be consistent and if possible follow platform GUI standards [1].

Outside the web world there are GUI standard. The problem is that they are different on different platforms. On the Windows platform the GUI guidelines state that OK should be positioned to the left and Cancel to the right. On the Apple platform it’s the other way around.

On the Web there really is no standard on how to do this, so we have to try to find out which position is the smartest on our own.

Luke Wroblewski elaborates on this topic in his article Web Application Form Design [2]. His recommendation is to position the Primary action (OK) aligned to the left part of the form and the Secondary action (Cancel) to the right.

He elaborates even further on this topic in the book Web Form Design [3], where he presents the finding from a usability test performed on a form with different designs. What the test showed is that having the Primary action left-aligned and the Secondary action to the right of it makes for the fastest performance.

Robert Hoekman, jr. has also thought a lot about this and presents his thoughts in the book Designing the Moment [4].

He agrees with Luke Wroblewski that the Primary action should be left-aligned with the form. The reason for this is that this forms a nice line for the eye to follow, working it’s way down the form, thereby making it easy to scan. Another reason is that if the user is navigating the form with the tab-key, the Primary action comes before the Secondary action in the tab order.

Labeling the actions

Robert Hoekman, jr. also have some thoughts about the labeling of buttons. Instead of just labeling the buttons OK and Cancel it’s better to label them after what they actually do [4]. If it’s to save a note, then why not label the OK-button “Save note” instead. Jakob Nielsen also recommends using a label that explains what it does instead of just a generic label [1]. By doing this the user is more confident using the form since he knows what to expect when he pushes that button.

Visual distinction

One other thing Robert Hoekman, jr. discusses is to visually distinguish the actions making it easier for the user to pick the right one.

Luke Wroblewski also concludes that making the Primary action stand out more than the Secondary action is a good thing. In the findings of the usability test, he finds that it takes the user a little more time to complete the form if the Primary and Secondary action has a different design. But on the other hand it makes the user more confident and less prone to choose the wrong one. He suggest making the buttons in different colors or making the Secondary action a plain link.

A simple way to visually distinguish the two that I sometimes do, is to use a bold font weight on the Primary action and a normal font weight on the Secondary.

Robert Hoekman, jr. recommends using a plain link for the Secondary action [4]. He’s arguments for this is that it makes it clear which one is the most prominent. But it also applies to Fitt’s Law, which suggest that the distance and the size of a target determines how long it takes to reach it and click it. The bigger the target the faster. The Primary action should therefor be bigger than the Secondary action.

In user tests that I’ve conducted I’ve found that some users can get a little confused by a plain link “acting as a button”. I think that this might be because of never having encountered it in a form before. But as this practice gets more common in both web- and windows applications, I think that this is probably not a persistent problem.

The Reset button

The Reset button is used to reset an entire form. It was pretty common in the early days of the web but is rarely seen nowadays. Nevertheless I thought I would say a few words about this button too since when it appears in a form, it’s usually paired with the Primary action.

In most situations it’s best not to use this button at all. All to often users click the Reset button by mistake thereby deleting everything they’ve entered. (I did it as I wrote in Confusing Northface contact form) And seriously, how often do you want to reset an entire form, and if you do, how hard is it?

The risk with this button is simply to big compared to the possible benefit of it. Plus in most cases it just adds more clutter to the form.

Or as Jakob Nielsen put it in his alertbox column Reset and Cancel Buttons [5]:

The Web would be a happier place if virtually all Reset buttons were removed. This button almost never helps users, but often hurts them.

Possibly the only time when a Reset button is called for, is when a form is used repeatedly by the same user and the information entered differs from each use.

Luke Wroblewski has an idea about the Reset button [3]. He thinks that if you provide one you should also provide an undo for it. By changing the Reset button into an Undo after being clicked the user can restore the form. This means that you have to temporarily store the form data, but that’s a small price to pay for the convenience of the user.

Best practices

Taking all of the opinions above in consideration, plus my own experience in using and designing web forms, I’ve come up with these best practices.

• Position the Primary action to the left

  Having the buttons aligned with the left side of the form makes a clear path for the eye to follow. By putting the Primary action to the left of the Secondary action it’s also positioned first in the tab order.

• Label the actions in a natural language

  By describing what the action actually does, the user feels more comfortable using it since he know what to expect.

• Make the Primary action stand out

  This makes it easier for the user to choose the option that’s most likely without making it harder to find the other option.

• (Almost) Never use a Reset button

  Reset buttons often hurts user more than it helps them. The only time it’s called for is in a form that the same user uses over and over again with different input. If you use a Reset, also try to provide an undo function.

Do you agree with my conclusions or do you have a different opinion about this? Please share!

References

1. OK–Cancel or Cancel–OK?, Jakob Nielsen 2008
2. Web Application Form Design
3. Web Form Design, Chapter 6, Luke Wroblewski 2008
4. Designing the Moment, Chapter 13, Robert Hoekman, jr. 2008
5. Reset and Cancel Buttons, Jakob Nielsen 2000

Translations

This article is also available in:

• Chinese: web表单按钮的使用 (Translation by 2003)

Gradual Engagement is simply the concept of not throwing a big fat sign-up form in the face of the first-time visitor before he has a chance to try out the site. A better approach is to try to get him engaged in what the site is all about before trying to get tons of information from him.

Luke Wroblewski is also using Geni, among a few other sites, as an example of this concept.

The Geni example

In the Geni example it’s an almost transparent sign-up process since you immediately start to build your family tree, naturally starting with yourself, thereby entering your name and email-address. You’re instantly engaged in building your tree and are investing time and effort in the web site.

An email is sent to you with a temporary password and a link back to the site where you can set a permanent password. Making it easy for you to get back to the site and continue where you left off.

Conclusions

This is still the best example I seen so far in getting the user to interact with the product right away. They sure have nailed the concept of Gradual Engagement, but also manages to clearly communicate what the site is all about in a single page.

It’s probably not a coincident that they’ve managed to get over 20 million profiles. Trying to remove as many barriers as possible in getting the user engaged is crucial for the success of web applications.

I think this is something we all can learn from, especially when it comes to social media and web applications.

Do you know of other examples of Gradual Engagement?

The basic concept is to allow users to subscribe to a part of a page. Similar to how you subscribe to RSS feeds. This is done by making parts of a web page into WebSlices. For example if you interested in an object on eBay, you can subscribe to the information about that particular object if it’s marked up as a WebSlice.

Because it has the form of a Microformat it’s a very safe technique to use. If your browser is WebSlice enabled you will benefit from it, if it’s not you won’t notice anything unusual.

The WebChunks add-on

There’s already an add-on for Firefox called WebChunks that handles WebSlices in a similar way that IE8 does. I wouldn’t be surprised if the next version of Firefox also will handle this (and other Microformats) natively.

Actually Firefox has something similar which they call Microsummaries. It works just about the same way but is trickier to implement, plus the feature is hidden deep inside the browser where no one, except geeks, will find it.

In this example I add a Suunto watch from an eBay auction to my WebChunk toolbar. You can try it yourself at eBays WebSlice enhanced search page.

When you put the mouse cursor over a WebSlice, a blue icon appears next to the content (in IE8 it’s purple).

You store the Webslice by clicking on the icon.

With WebChunks you get an extra toolbar in Firefox where your saved “chunks” appears, kind of the same way as Active bookmarks does. If the content has changed since you last looked at it, the text will be bold. You access the Webslice by clicking on it and are presented with just that part of the original web page, readily accessible regardless of what page your currently at.

Other pages you can try this on is an article on Wikipedia about the Acid3 test and Internet Buzz on StumbleUpon. Of course you first have to install either Internet Explorer 8 Beta 1 for Developers or the WebChunk Firefox Add-on.

How to code it

Like all other Microformats, WebSlices relies on standard HTML elements and attributes to mark up the content.

WebSlice

First of all the WebSlices must be contained inside a containing element with the attribute class="hslice". This element must also have an unique id attribute.

Entry Title

It also have to have an Entry Title. This could for example be the name of an eBay object and could be contained in a <h3> with the attribute class="entry-title". This is the same as the hAtom standard property.

Entry Content

There’s a third optional attribute that’s also important, and that’s Entry Content. It contains the content of the WebSlice and is marked up with the attribute class="entry-content". Preferable inside a <div>.

This results in the very simple code below. It has all the ingredients of a nice WebSlice.

<div class="hslice" id="item-1">
	<h3 class="entry-title">Suunto X-lander watch</h3>
 	<div class="entry-content">
		<img src="x-lander.jpg" alt="" />
		<p>Nice wristop computer watch. Price: $229.99</p>
	</div>
</div>

Other optional attributes are:

Expiration

This optional attribute indicates the end time of an object. Like for example when an auction is finished. It’s expressed with the attribute class="endtime".

<p>End time: <abbr class="endtime" title="2008-08-28T12:00:00-05:00"> 6 hours</abbr></p>

Bandwidth

This optional attribute indicates how often the item is updated. It’s value must be an integer and expresses the number of minutes before update. It’s expressed with the attribute class="ttl". (ttl=Time To Live)

<p>This item updates every <span class="ttl">15</span> minutes.</p>

Feed URL

This optional attribute indicates if there’s a different source to get updates from. It’s contained in an anchor element <a> with the attribute rel="feedurl".

<a rel="feedurl" href="http://www.ebay.com/feed.xml">Subscribe to Feed</a>

If you’re familiar with the concept of Microformats, this is very straight forward and easy to code.

Conclusions

Will WebSlices catch on? Who knows? I think that because it builds on existing standards it might stand a chance. The beauty and simplicity of Microformats will make it easy for web developers to implement. But of course, in the end it’s up to the web surfers if they find this technique useful or not, that will ultimately determine it’s future.

Will it evolutionize RSS? Personally I think that if WebSlices catch on, RSS will probably coexist with it
since it’s more lightweight presentation is more suitable for some types of content.

Anyway I think it’s nice to see that Microsoft is doing an effort in the same direction as the Microformat initiative, elevating existing standards instead of trying to do something completely propitiatory. I think that they are starting to play well with the rest of the web development community and that’s really nice to see.

Further resources

• Internet Explorer 8
• About Webslices on MSDN
• Download whitepapers
• Demo Video: how to use Webslices in IE8 Beta 1

Finally I’d like to thank Fredde, for showing me this technology and pointing me in the right direction.

The MVC framework certainly solves a lot of the issues I have with ASP.NET and actually makes it possible to create standard compliant websites without having to bend over backwards with all the awkward quirks of the ASP.NET Web Forms model.

Scott Guthrie has written about the new release, describing what’s different from the last one. One thing that I found particular nice is that it’s now really easy to implement functions for handling logins and such. The new template even includes basic examples that you can easily adapt to your own needs.

Action Filter Attributes

Action filters is a way to intercept an Action Method and perform something before and/or after it has been executed. They are not new since they been around since preview release 2, but the news is that there are some really useful ones built in. You can also easily make your own.

They are very easy to use. You just define them on a class within a Controller or directly on an Action Method like this:

[FilterName]
Public Class ClassName : Controller
{
	[FilterName]
	public object MethodName() 
	{
		//Code...
		return View();
	}
}

Two of the built in filters I find most interesting are the OutputCache Filter and the Authorization Filter. The OutputCache Filter enables you to easily cache certain content via ASP.NET’s output cache features. The Authorization Filter lets you integrate authorization control on different content in a very simple manner. This in combination with the built in user handling makes it really easy to build websites with login functionality.

To read more about these enhancements and others, visit Scott Guthris blog.

Download ASP.NET MVC Preview Release 4 from Codeplex.

I’ve listed them in the order I think one should read them and I’ve also written a small text about each.

1. The Inmates are Running the Asylum

by Alan Cooper

This book is not a how-to-book but rather a book about what’s wrong with how we look at software/web development. It’s suitable not only for designers and developers but everyone that’s involved in the development process. Everybody from project owners and project leaders to interaction designers and programmers.

It was a real eye-opener for me back when I first read it and made me reconsider my whole attitude towards the industry and the processes that drives it. This book was what really started my passion about creating good user experiences.

I wish more people would read this book as it gives a whole new perspective on the business of creating software. I think it would enable people in different roles to communicate more effectively and have a better understanding of each others work and priorities.

The Inmates Are Running the Asylum
Author: Alan Cooper
Publisher: Sams – Pearson Education, 2004
ISBN-10: 0-672-32614-0
ISBN-13: 978-0-672-32614-1

2. Don’t Make Me Think

by Steve Krug

I really love this book. It’s written in a fun and engaging way and is also pretty short, making it shock full of valuable tips and insights. Steve Krug has a really pragmatic attitude towards interaction design and usability, making his points understandable for everyone. Or as he himself puts it: “It’s not Rocket Surgery”.

If you’re looking for a good introduction to usability and usability testing. I can’t think of a better book than this.

Don’t Make Me Think
Author: Steve Krug
Publisher: New Riders Press; 2nd edition, 2005
ISBN-10: 0-321-34475-8
ISBN-13: 978-0-321-34475-5

3. The Design of Everyday Things

by Donald Norman

Donald Norman is a true giant in the field of usability. This book is a classic and an essential read for anyone working with user interface design.

The Design of Everyday Things is not so much a book about software design, but a book about how people perceives the world and interacts with it. He talks about everyday objects like doors and water taps and what makes them easy or hard to use. It’s a lot about how the human brain works and how we interpret different objects according to how they look and feel.

I promise that you’ll never look at a door the same way after reading this book. At least I didn’t.

The Design of Everyday Things
Author: Donald A. Norman
Publisher: Basic Books, 2002
ISBN-10: 0-465-06710-7
ISBN-13: 978-0-465-06710-7

4. About Face 3

by Alan Cooper, Robert Reimann, and David Cronin

About Face 3 with the subtitle The Essentials of Interaction Design is sort of the sequel to The Inmates are Running the Asylum. Where the latter book have more of a business perspective on usability this book is about how to actually put those ideas into action. Alan Cooper is a strong advocate for User Centered Design (UCD) and was the one coming up with the concept of personas. Which, as a side note, was first introduced in The Inmates are Running the Asylum.

The book is divided in three parts where the first part, “Understanding Goal-Directed Design”, deals with how to research the needs of the users and how to use this information to create usable designs. The second part is about “Designing behavior and form” and the third part is about “Designing Interaction Details”

I think that the first part of the book is the most valuable one. It provides you with the tools to perform effective user research, and how to analyze the gathered data. It also provides fundamental insights into what kind of different users there are and what different needs they have.

The two other parts is more of best practices when it comes to the actual design of interactions. One thing that’s really useful is the lists of “Design Principles” that is compiled in a single list at the end of the book.

About Face 3

Author: Alan Cooper, Robert Reimann, and David Cronin
Publisher: Wiley 2007
ISBN-10: 0-470-08411-1
ISBN-13: 978-0-470-08411-3

5. Designing the Obvious

by Robert Hoekman Jr

The dominant usability method right now is User Centered Design (UCD). Lately there’s been an intense debate over at IxDA wether it’s a good practice or not. Robert Hoekman Jr is one among others that believes that it’s not such a good approach. He has introduced his own concept which he calls, Activity and Behavior Centered Design (ABCD), which he describes in the three part article: Redefining User-centered design [1] [2] [3]

In Designing the Obvious he doesn’t talk about ABCD but he does present seven principles of interaction design that has proved useful in his own work. This book is really nice in its pragmatic approach and will provide you with tons of good advice and a lot of good examples of great design.

I liked it so much that I’ve read it twice!

Also read the review I wrote on his latest book: Designing the Moment.

Designing the Obvious
Author: Robert Hoekman, Jr.
Publisher: New Riders 2007
ISBN-10: 0-321-45345-X
ISBN-13: 978-0-321-45345-7

All of these books have been important for me in my understanding of usability and UX design and I highly recommend all of them. What do you think? Have you read any of these books or other books that you think are essential reading for people working with these things?

So what is X-Ray?

For you who don’t know what X-Ray is. It’s an add-on for Firefox that enables you to see the HTML on a web page without having to look at the source code. It justs shows tags around the different elements directly on a web page and gives you an instant glimpse of how the page is built.

I use it to get a quick understanding of how web pages others built are structured but also to see what class or id a certain element has, which header level a heading has and things like that on the pages I’m currently working on. It’s one of those small tools that have proved to be really useful.

So please, Stuart Robertson, update X-Ray to work with Firefox 3 as soon as possible!

Update [2008-07-10]: I just discovered that Stuart has posted a comment at designmeme.com that he actually have submitted an updated version to addons.mozilla.org, but I can’t find it. Is there anybody else who has?

Update 2 [2008-08-21]: It’s finally here! And it’s been available for the last six days, I just haven’t noticed. It’s with pure joy I can say that I yet again can use X-Ray in my daily work. Install it now from addons.mozilla.org.

The most common solution to prevent user errors is to simply throw an alertbox warning about potential damage or loss of data that the action might cause. Even otherwise awesome web applications often resorts to this behavior. Take for example Backpack from 37 signals, which I regard a very usable and overall great product. When you try to delete a note they throw this alert in your face:

This is, from the developers point of view, the easiest way to handle it. It’s almost too easy to implement an alert and many developers habitually do it without giving it a second thought.

A far better solution is to use an undo function. Although harder to implement it maps so much better to the users mental model and behavior patterns. As Alan Cooper puts it in About Face 3:

Users generally don’t believe, or at least don’t want to believe, that they make mistakes. This is another way of saying that the persona’s mental model typically doesn’t include error on his part. Following a persona’s mental model means absolving him of blame. The implementation model, however, is based on an error-free CPU. Following the implementation model means proposing that all culpability must rest with the user. Thus, most software assumes that it is blameless, and any problems are purely the fault of the user.
Alan Cooper, Aboute Face 3

An undo function enables the user to easily recover from mistakes and also encourage him to explore the interface without fear of doing irreversible damage. It transfers the responsibility of handling errors from the user to the system, where it righteously belongs.

Problems with alerts

Alerts seems to be the dominant solution to handle potentially “harmful” action but there are several problems with them.

1. Interrupts workflow
   It makes the user have to stop and consider what it says or just ignore it and dismiss it as fast as possible.
2. Locks up the whole browser
   Alerts that are application modal, locks the whole browser, preventing the user from doing anything before he dismisses the alert. This is plain rude behavior! Sure there are times when it’s motivated but often it’s not. As a developer you have to ask yourself: “Is this action so serious that I have to give the user the strongest possible warning. Maybe there’s other ways of doing it?
3. Users tend to just click “OK”
   If the system throws alerts all the time during normal tasks, the user eventually tends to ignore them and just habitually click “OK”. When he realizes that he’s deleted the wrong document, it’s already too late.

Document modal alerts

Document modal alerts has gained popularity on the web but are little better than application modal dialogs. It’s the kind of alert that looks like lightbox showing an image (Click one of the images below to see what I mean). The only difference from application modal alerts is that they don’t lock up the whole browser but only the page you currently at. They do however share the same problems.

Examples

Here are some examples of web sites that have implemented different variations of an undo function.

Flickr

Flickr has a nice way of showing important messages. The message is a link that takes you to the important information and in the right part of the message box there’s a close button.

When you click the close button the content of the message box changes into a short note that the message will disappear the next time the page loads. But there’s also an undo-link that gives the user the opportunity to change his mind.

This design pattern encourages the user to click things and explore the interface. The ignorant user is not punished for clicking the “x” not knowing what it will do. If it didn’t have the desired effect he can very easily recover from his mistake and still be able to read the important message. If it did what he thought it would he can just carry going about his business.

Gmail

I think Gmail was the first web app that I seen using this design pattern. Their implementation gives the user the chance to undo the latest performed action.

Google Docs

In Google Docs there’s a similar solution. Whenever you perform an action such as moving or deleting a document. You have the opportunity to undo it until you perform another action.

Writeboard

37Signals Writeboard facilitates a different kind of undo. When a Writeboard is deleted the following message appears enabling the user to, for a pretty long time, undo the deletion.

Mixx

Mixx takes on a different approach with a time-limited undo. When you submit a new story, you have 15 minutes to edit or delete it. After that you can no longer do anything with it.

Final thoughts

Although some web apps implements an undo function it’s still very simple ones, enabling the user to undo only the last action performed. The next logical step should be to implement a multi step undo, giving the user real confidence in exploring the application.

Aza Raskin has in his blogpost Undo made easy with Ajax (Part 1) and (Part 2) made an attempt to implement an undo function. He have, with the help of jQuery, made a simple one. It’s not without flaws but is still a good example of one way to implement it. He has also written an article on the subject, published on A list apart called Never Use a Warning When you Mean Undo.

Paul Boag over at Boagworld also have some interesting thoughts around undo.

What do you think about the undo function?

When we are designing user interfaces it’s important to be aware of where the users locus of attention are, so that we are able to show crucial information where the user has his or her attention.

The term was coined by the late Jef Raskin who were one of the pioneers of designing the first Macintosh. He is sometimes actually referred to as “The father of Macintosh”.

“I use the term locus because it means place, or site. The term focus, which is sometimes used in a similar connection, can be read as a verb; thus , it conveys a misimpression of how attention works.”

The Humane Interface – Jef Raskin, 2000

Real world example

One way to implement this concept is to allow input where there is output. The edit-in-place design pattern, as for example seen on Flickr, where you can edit a heading by just clicking on it, is a perfect example of this.

1. You want to change the title of a photo so you click where you have your locus of attention: The title.

2. The title becomes editable and you enter a new title.

3. When you click the Save button a message telling you that the title is being saved appears right where your locus of attention are.

4. And just like magic the new title appears.

External links

• Jef Raskin on Wikipedia
• The Humane Interface
• Review of The Humane Interface

Very well I started filling it out the form and wrote a long explanation what was wrong with my jacket. When I was finished I and wanted to post the form I accedentely clicked the Reset button. Everything I’d written was instantly deleted. Why did I click the “Reset-button” one may ask. The reason is very simple, it was the only button available in the bottom of the form. When I looked closer at the form I noticed a small text saying “Send” to the left of the reset-button. Apparently the link to the image mimicking a button was broken and instead of the image the alt-text was shown.

Often users doesn’t read labels but rather just click on the thing that looks most appropriate, in this case the button. Send is the primary action and reset the secondary action therefore the send-button should be the most prominent one. But in this case it’s the other way around.
The use of a reset-button is also very questionable. In this case it provides very little value because in a form this small it’s really no effort to change or delete the the values I’ve already entered in the fields if I want to. But very annoying to accidentally reset the whole form. The risk by far outweighs the benefits of the reset-button.

One thing they did right though is to place the primary action before the secondary. That way the user, if using the tab key to navigate the form, will reach the primary action before the secondary.

One other good thing about this solution is that they provided the send-button with an alt-text so even though it’s not rendered it can still be understood and clicked. To provide these kind of fall backs is crucial when developing web interfaces. A person with images turned off can for example still use the functionality of the form. And in cases like this when an image is missing, the usability of the form decreases but the user can still complete the task at hand.

Lessons learned

• Consider using native form elements for buttons etc, thereby avoiding this problem altogether.
• If you still decides to use images, make sure the link to the image is not broken and also provide an alt-text.
• Don’t provide a reset button in simple forms, the cost of error is simply too high.
• Make the primary action stand out more than the secondary action thus hinting the user of the correct action to take.
• Place the primary action before the secondary action to make it a little more convenient for the user.

Do you have any other ideas how to further improve this form. Please leave a comment and share your ideas.

In all web application requiring users to sign up before they can use it. One big barrier is to get the user to actually sign up in the first place. By instantly giving her some kind of gratification, like in the Geni example, you significantly lower that barrier. The user only have to enter a minimum, and in this case very relevant, amount of information before they can reap their rewards. No bloated forms to fill out. You just get started right away.

All other information you need from the user can be added later, when the user’s already up and running. After having invested time and effort in the application she is much more likely to give away more information about herself.

Do you have other examples of web applications who has managed to make the sign up process almost invisible?

External links

• www.geni.com