We have moved to brand new offices in central Stockholm. I just came back after three weeks in Tokyo and walked right in to this amazing new environment. Every last surface and space is thought through and has been built according to our needs. Gone is the stale air, noise, bad lighting, cramped workspaces and overbooked conference rooms. Not having taken part in the move everything feels a bit alien and will take a few days to process. One thing is for certain: this will change everything.

That tingling feeling I get every time my phone correctly identifies a (for me) unknown track is only indirectly a result of Apples and Shazams hard work to create a slick user experience. My somewhat vague and fuzzy theory is that it is induced by a momentary feeling of being connected to a large portion of humanity´s accumulated culture. It is not magic but a small step closer to nirvana… through technology.

Had any profound, wonderful or wacky magical moments that were made possible by technology? Please feel free to share in the comments.

As Ajax, JQuery and other technologies have enabled more dynamic states in our designs. The consequences of this is often overlooked. Changing states on mouse interaction and using varied forms of animation to guide users through these transitions requires planning and proper execution.

UI animations are good for clarifying what is happening, avoiding jerky/disruptive changes of state and allowing the user to comprehend the new state faster. To do this properly means setting the right values for your animation and defining good hit areas. This is not only crucial for the experience at the point of interaction but will also set the overall feel for your site as a whole. I have jotted down a few basic guidelines my work tends to follow.

Latency

As in many aspects of life waiting is not how we want to spend our time. Delays in our daily commute or waiting for images to load are seldom described as positive experiences. When it comes to webpages make sure you have your elements loaded and ready to present upon interaction. Milliseconds count.

Animation

Getting the length of animations right is important. A rule of thumb is to always strive for directness and never have the user feel like they are waiting for the UI to finish. Anything above point five of a second is really slow (unless we are talking entire page transitions). The same does not have to be true for an outro animation when the users focus has changed to other elements.
In some cases conveying messages through the behavior of the animation can further enhance the overall feel of the UI. This can be achieved by using different “easings”, algorithms that calculate acceleration and deceleration of the animation. Always use such sparsely and with good judgement. If you think it “looks cool” you have probably over done it. Setting these values and the proper timing requires restraint and practice.

Staying on target

Defining the size and location of the hit area when making a rollover action is a fine balance. On one hand you want to be generous so that there is not too much precision involved in triggering the event. On the other hand if the area is too generous it might be triggered unintentionally and become annoying. For example if your page contains multiple overlays of information you might not want use a roll over event to trigger them. The result could be a blinking mess of layers being shown and hidden. Look at how you can define and expand your hit areas with the css box model.
There is also some science behind doing this right. If you want to dive in at the deep end read up on Fitt’s law which predicts that: “the time required to rapidly move to a target area is a function of the distance to and the size of the target”. The time required to wrap ones head around that sentence should not be underestimated.

How do we go about communicating these details?

Annotating wireframes with animation data can do the trick for less complex projects. Though that approach can soon become messy, complicated and less than self explanatory. The best way to assure you get this right is by building interactive prototypes. A topic I intend to write more about in the future as I progress with my experiments and work.

We have also been looking at incorporating the behavior of animation into the brand identity manuals we produce. Defining some fundamental values of interactive elements on a strategic level is important. Leaving it up to every animator/programmer to define for themselves will not result in the holistic experience we want to achieve for our clients users. This is a interesting and so far quite difficult work in progress. I hope to be able to share more details about it at a later date.

Summary and conclusion

Taking these factors into account and following the guidelines should help your highly interactive webpage become a more pleasant experience to use. Remember to:

• Not keep your users waiting.
• Use your animations to help ease users into new states or UI elements.
• Strive for directness in your animations.
• Ask yourself what message your animations convey and if they should say anything at all?
• Do these things properly or hire someone who knows how to do them.

Thats it and just in case you did not get the nerdy reference here is Chuck. Now go tell Tsjaikovski and your friends the news.

The beginning of wisdom is to call things by their right names.

-Ancient Chinese Proverb

While numbers in proper context will speak for themselves UX-terminology does not. It is ugly, has diverse definitions depending on approach and is many times unnecessarily technical or in worst cases a smug acronym (just look at the title of this blog). If you like me do not live in an english speaking country add to that an unnecessary language barrier. Most often your own language (swedish in my case) already has perfectly adequate terms to match its english/techno-based counterparts. Markus Weber recently posted a few thoughts on the subject. Continue reading if you are curious to my approach.

Terminology does not have to be a problem.

As long as you share a common language or common terminology with your team and your clients it will help avoid misunderstandings, misconceptions and a great deal of frustration. Establishing this common shared terminology does take some effort but I believe it is time worth spending.

Bringing down the barriers

How do you go about spreading your knowledge and explaining the terms you use? You could always blog of course (duh). If your goal is unified shared knowledge with a specific group of people there might be better ways of logging and distributing the information. Setting up and building a wiki is actually not that difficult or time consuming. You don´t have to complete the entire wiki at once. If you dont want to make a fuss about it until it has matured you can set it up on your workstation or laptop during the initial development. If you are not the techgeek type you might want to go with a packaged installer like xampp for apache and mySQL and add mediawiki once it´s up and running on your machine.

Add to your wiki as questions pop up in your projects and you will find that you keep it relevant, reusable and a nice point of reference when needed. Going through the trouble of translating and explaining the terms in your native language and thereby avoid holding meetings that sound like buzzword bingo sessions.

To sum this up:

Keep it simple
Translating the most common terms or the ugliest ones does not have to take forever.

Keep it native
Being able to speak about what you do in your own language will boost your confidence. This will also build trust with your co-workers and fend of skeptics who tend to frown upon buzzwords and technical jargon.

Keep it updated
When are you finished? Never. Keep your wiki updated. You will have great material for proposals, blogging and internal and client education. If you feel you have the time why not share it with your colleagues in the web community. Who knows, someone might like it or some smart ass just might feel compelled to correct your errors.

Have a look at this post over at A List Apart and see how they describe common terms and activities. It does not have to nor should it be more complicated than that.

Twitter has partially positioned itself as the social networking, idea and news spreading platform of choice for professionals. Even more so with the recent LinkedIn integration. Creating a separate Twitter account for your work related activities can be a good idea. In my case splitting work from private was an easy choice due to the obvious problems of mixing languages. Having a second account has also taught me something else. I´m beginning to see a pattern in the tweets by people I choose to follow out of professional reasons.

Most often I will look up people whose work I find inspiring in hope of them sharing some of their wisdom. However great work alone or working for a respected agency does not make much of a difference when it comes to clicking the follow button. If the sum of your recent tweets don’t have a certain balance or feel to them it´s just not going to happen. So what makes you interesting to follow? There are a lot of great guides out there on how to and how not to tweet. The emerging pattern I´m looking at consists mostly of my gut feeling which is not necessarily a bad thing after reading Malcolm Gladwell´s Blink and learning about the concept of thin slicing. Keep going for the full breakdown.

So what does this pattern look like?

I made a pie chart to visualize the composition of tweets I´m looking for. A suitable visualization as pies are most often divided into slices. My sincerest apologies for some of the text colors (awful readability).

Great. Now here are a few things your recent tweets should not do:

Hey everybody, look at this thing someone made!

Mostly tweet about something you’ve made or are making, not what others have done. Not unless you have added insights or interesting references to offer.

“RT @fluxd Hey everybody, look at this thing someone made!”

Keep your retweets coming at a reasonable interval. If every other tweet out of your account is interesting but begins with RT, following you will most likely be redundant. I´m not sure yet if the new native retweet function will fix this.

“Hey everybody, I just found this awesome thing called the Internets”

If you happen to discover something good but dated do tweet but don’t rant.

“Hey everybody, cheese sandwich for lunch. It tastes like compacted wood pulp”

Be personal but not too often. A bit of humanity in between those 140 chars of insight and great wisdoms you drop adds depth. Don’t go on about what you are doing minute by minute if it is not of public interest or just because you are bored.

“Hey @JohnDoe, I got that thing for what we are doing later”

Private matter? Don´t make it public.

“@fluxd: What breed is your awesome dog?”

If the question you are answering is not of public interest you might answer it privately to keep the noise level down. Update: This is not an issue any longer as Twitter have changed it. (He is a Lagotto Romagnolo)

Have you got any Twitter criterias? Feel free to share in the comments. Nothing to add? Go check out my tweets and see if I´m living up to my own preachings.

Zebrawhat?

Zebra striping refers to the practice of accentuating every other row in a table of data by alternating the rows colors. This is used to help guide the users eye along the row and speed up the reading of data. The experiments on A List Apart amongst other things pointed out that it was common for the user to guide their eye with the help of their finger. Here is where the obvious strikes me. We already have something to point with on screen. The mouse cursor should be able to replace physical fingers greasing up the screen (oh, don´t you just hate that?). So if the mouse cursor was available to the users why did they not choose to use it as visual aid while trying to read?

My assumptions are that a combination of the following makes the cursor less than ideal for the purpose:

• There is too much precision required in handling the mouse or other tracking device in an exact straight line for the average user.
• The cursor is not easy enough to see as it by default turns into a horizontal line while hovering over text, virtually making it disappear.

Now I´m not saying that the cursor state is wrong as it does indicate that the text is selectable. However it is not helping the user with the primary task regardless of your row colors.

Bringing something to the table

How do we go about making the table more readable? Adding some CSS and JavaScript can remedy the problem. By adding a simple hover state to the current row, cell and or column and highlighting them on roll over you will greatly increase readability. You might also consider making it a bit more functional by adding some JavaScript. If you do not wish to spend your time reinventing the wheel there are several solutions out there that do this. Frequency Decoders version is the one I prefer at the moment. Their solution is interaction-wise as simple and unobtrusive as can be.

Play with this for a couple of seconds:

*

So why is this type of interaction not more widely implemented? Again a couple of assumptions based on personal experience.

• Designers. Photoshop compositions do not convey how things should work and behave only how they should look. Making comps of every state of an interactive page element is time consuming for designers.
• Developers. There is a bit of extra effort involved in producing these tables. Developers without proper specifications or allotted time might opt for the easy way (not doing it).
• Weight watchers. Adding the extra JavaScript and CSS to a site with extreme traffic loads might not be a good idea. As always use common sense and good judgement.

Making your tables interactive is not the way to go in every case as the extra work is not always justifiable nor do all tables contain important enough data. I would recommend an absolute minimum of four rows and columns before going through the trouble. Any help we can give the users to complete their task, on the other hand, is always a good thing.

Back to the pajamas horses

While zebra striping is sometimes esthetically pleasing and does help to some degree I´d like to leave you with a (somewhat vague) thought. On the savannah the zebra actually uses its stripes to confuse predators when moving (albeit more effectively so in large groups). I personally doubt that anyone would make use of such high contrast in a table but try looking at a striped table while scrolling. You will feel your eyes jump up and down the page like table tennis balls. It has the same effect as when trying to focus on a single line in the middle of the road while speeding along in a car (hopefully in the passenger seat). You follow it to a point then your eyes automatically jump ahead to your previous starting point and start over.

To sum this rant up:
If you need a striped table try keeping the contrast between row colors at a reasonable level. Otherwise your table might become a disruptive element on the page. Also do consider making the table interactive. Your efforts are bound to be appreciated by someone.

Got any additional thoughts on tables and the reading of data? Please leave a comment.

There has also been some talk about playfulness lately. Playfulness is another example of how to achieve enjoyability. Emil Ovemar UX Director at Bonnier R&D recently wrote a good post on playfulness.

Whatever you choose to name your attempts at making your site enjoyable, delightful or fun to use, you should approach these activities with some caution. Trying to make your site enjoyable may never come at the cost of the foundations of good web design (structure, interaction design, usability, etc). Enjoyability activities must also be aligned with your clients design strategy, brand and identity. Without this, doing any of the following will likely only help you waste time. Read on for some examples.

Playful interaction

Tweetie´s developer got this just right in version 2 for the iPhone. The drag to refresh gesture is basically impossible not to play with as if it were a rubber band. It quickly feels natural and coupled with great audio feedback it does leave you with a bit more satisfaction than what tapping a button would. My only concern might be the enormous number of unnecessary extra requests this must generate for Twitter. Update: Regardless of which twitter api client you use, you get 70 total requests per hour.

Humor

Incorporating humor can be tricky as not everyone will appreciate your sense of it no matter how funny your copywriter is. Working with humor in microcopy can work as it does not feel very intrusive and also shows a level of humanity. A positive humorous experience is also more likely to be remembered, a factor to keep in mind when trying to build long term relationships.

Humanity

Remember that you are communicating with humans (most often) not machines. An error message reading HTTP Error 503 – Service Unavailable might be decipherable to the average user. It will however not spark the same type of emotions as the Twitter “Fail Whale”. Sometimes these emotions evoke more or less healthy expressions of creativity with the end user.

Visual feedback using mimics

The Mac OS X login prompt is a great example of not having to spell everything out in words. It simply shakes its head or shrugs off the incorrect password attempt.

Pleasant surprises

Image credit: http://www.flickr.com/photos/mondriankilroy/

Receiving something well designed, funny, informative and above all highly personalized without knowing about it before hand is a rare gift. Dopplr´s personalized year report does all this and manages to move their brand one notch higher in their users hearts and minds.

Easter eggs

Hidden treats triggered by a secret code or input of some sort. Anything but a new practice. Common sense and good judgment should be applied if used though.

Aesthetic visual stimuli or “eye candy”

Image credit: http://www.flickr.com/photos/longzheng/

Use subtle visual cues to create recognition patterns and more aesthetically pleasing interfaces. Windows 7 taskbar icons use an ever so subtle effect where the color of the icons glossy hover state is picked up from the main color of the actual icon.

Fact is the brain constantly wants new imagery to process. Cognitive psychology states that our brains need stimuli to work correctly. Depraving us of stimuli that we are used to fairly quickly leads to sensory deprivation. Our need for new input is also a reason why we grow tired of projects with long life spans or why clients who face the same design every day feel the need for renewal. There is often nothing wrong with the concepts or ideas the design is built upon, it just start to feel old. This is highly comparable to how trends in fashion work. Read this great article on A List Apart for more information on eye candy and it´s effects.

These are just a few examples I gathered for a presentation recently. Do you have any tips for reaching great enjoyability? Are you perhaps sitting on a treasure of examples? Sound off in the comments. Any and all feedback is welcome.

As of this fall my new job title at Söderhavet will be User Experience Designer. To many around me User Experience (abbreviated UX) is either an unknown or at best a vague term. Why? Well it actually is a vague term in that it has such a large scope (more on definitions at a later date). For this reason it became apparent early on in the process that a clear and specific work description would be absolutely necessary. Given that many of my coworkers already are varied levels of experts in some of the fields included in User Experience Design we decided to focus on areas where we need added expertise or where we lacked focus. I have also prepared myself by doing a hefty amount of reading and attending seminars/courses on the subject and its related fields (I will be adding my read list to the blog shortly). Furthermore working out good activities and deliverables for internal and client use (still a work in progress) will hopefully make this venture a success.

This blog is meant to follow me on my explorations into the field of User Experience Design. If you feel like joining me I will also be updating more frequently on Twitter. Feel free to comment and participate with thoughts and advice as I learn and share my gathered knowledge and mistakes. A lot of what I will write about might seem somewhat redundant to many but given the state of most of the Internet more resources preaching a common sense approach to web usability, interaction design, enjoyability, accessibility and… (the list goes on) wont hurt but rather be a good thing. Thanks for reading, now go ahead and wish me luck in the comments below. I do think I´ll need it.