Combining Agile development philosophy and UX work hasn’t always been a match made in heaven. Many are the UX designers who’s been frustrated trying to work in an Agile environment, and there’s a few reasons for this.

Old Habits

Many of the practices we have, have been developed for Waterfall methodologies with clear silos and clear milestones. These processes has required a massive design documentation that have later been handed over to development to spend then next few months (or years) implementing.

Those practices doesn’t work anymore and they haven’t worked that well before either. As Agile has gone mainstream we as designers need to adapt to the Agile practices and rethink how we do our work.

But how do we do that?

One way is by reading Jeff Gothems book Lean UX, which explains how to incorporate a different, more lean, mindset to the UX process. He proposes a workflow with more focus on trying out hypotheses in the real world and less focus on creating deliverables.

Lean UX describes a way of doing UX work in an Agile fashion. It does so in a very clear and easy to digest fashion. Jeff draws from his long experience in leading agile UX work when he describes the pitfalls and opportunities.

So what is Lean UX?

Lean is all about reducing waste and it’s the same with Lean UX. The book outlines a few core principles to do this:

1. Less focus on producing design documentation, The value lies in delivering the product.
2. A focus on collaboration between Designers, Developers, QA and Business People. By breaking down the silos we get a much more effective design process and ultimately a better designed product.
3. The realisation that what we think are good solutions are just hypothesis that need to be tested in the real world. The key is to do this continously and effectively.
4. Design for outcomes instead of features. By focusing on the outcome the team is free to find the best solution to the problem instead of being locked down to a certain feature that might not be the optimal solution.

My verdict

Lean UX is an easy to digest, practical book on how to incorporate a more effective way of developing software. It provides both valuable insights and practical techniques. I highly recommend it for anyone involved in software development and by that I don’t mean just designers. I mean anyone involved.

Book information

Title:

Lean UX: Applying Lean Principles to Improve User Experience

By:

Jeff Gothelf and Josh Seiden

Publisher:

O’Reilly Media (March 8, 2013)

Pages:

152

ISBN:

1449311652

ISBN-13

978-1449311650

Buy on Amazon.com

Note: I wrote this review for O’Reilly’s Blogger Review Program. Their deal is pretty good: You get a free e-book to read and once you post a review you get another. Try it yourself if you’re interested in reviewing books.

We are no longer limited to the confides of our desktop computers for digital experiences. Digital is all around us in the form of Computers, Smart phones, Tablets and increasingly Smart TV’s. There’s even a whole slew of new devices waiting around the corner in the form of the Internet of things. That is everyday things that are connected to the Internet like scales, fitness tools and intelligent toasters.

Changing User Expectations

With access to all these devices, people are no longer satisfied with being restricted to just one. They want to do everything on the device that’s makes most sense for their current context.

The best computer is the one you have with you when you want something done Jakob Nielsen

Conventional wisdom says that mobile users are rushed and on the go. That’s a myth. People use their mobile phones in all kinds of contexts. Yes some of them are when they are rushed and on the go. But they also use them when they have some time to kill, or when they relax in the sofa at home after work. People even perform tasks on their mobile devices that’s not typically “mobile” tasks. See 40% of people use their phone in the bathroom and other interesting facts.

Building multi-device eco-systems

What this means is that we can no longer just think one application on one platform when we build software to solve a problem. We need to consider the bigger picture. How to solve that problem in a wider context. The future of computing lies in building eco-systems of applications for different devices that solves a particular problem.

But having to provide software on multiple devices. How do we design, build and maintain these without getting overburdened by the complexity and diversity?

Strong APIs

I’ve been thinking long and hard about this and the answer I’ve come up with is this: Build a strong and easy to use API with an eco-system of simple clients using it.

The trick here is to put as much of the complexity as possible in the API and make it as easy as possible for the clients to use it. This way the API is the piece you invest most in and that will live for a longer period of time. It will provide a foundation on which you can build relatively simple clients around.

The core of my thinking is that you need to make it as easy and painless as possible to build the client applications. New technologies comes and goes, who knows what the next wave of connected devices will be? Smart watches, smart glasses or something else? Whatever it is we need to make sure that we can be on that platform with relative ease, without having to start from scratch.

Go REST

I’ve been talking broadly about API’s here but what I advocate is to build a REST API.

REST is not a technology, it’s an approach. It relies entirely on HTTP for communication so it’s virtually technology agnostic. This is good. It doesn’t require you to use a specific technology to build clients. No matter what the technology, they will likely be able to communicate via HTTP.

Keeping it technology agnostic is a key aspect. Given that your API will live for a longer period of time, you can’t predict what new tech will be introduced, and you can’t predict which type of clients you will build a couple of years from now.

Use a simple Data Format

Just as you should invest in a solid API. You should invest in a robust data format. The format should be simple enough to not add a lot of overhead but capable enough to transfer fairly complex data models.

I’ve found JSON to be a good candidate for this. It’s simpler than XML (or SOAP [shudder]) but can communicate lists and nested objects. An additional benefit is that since it’s really a JavaScript object, it’s perfect for web applications.

Summary

To sum it up.

• We need to start thinking about building eco-systems of clients on different platforms rather than just thinking one application.
• To keep the cost down we need to invest in a solid API and a reliable data format. JSON being my choice of flavor.
• To keep the API technology agnostic, REST is a good approach. Since it relies on HTTP for communication virtually any programming language can talk to it.
• Putting the complexity in the API lets us focus on simple clients that are relatively easy to build and maintain.

I hope that I’ve got you thinking about how to approach building software for this new diverse and ever-connected world.

What’s your thoughts about this? I love to hear them in the comments.

The problem with bloated methods

The problem with bloated methods are twofold.

• They are hard to use since they require you to remember all arguments and the order they need to be supplied
• They are a pain to change. Adding an argument to an existing method can require you to find every instance where it’s used and update those calls with the additional argument.

Take this method for example.

var bio = function(id, name, description) {
  // Code
}

Ok, maybe it’s not that bloated. I actually think that using up to 3 arguments is OK, but add more than that and it’s getting messy. But for the sake of explanation let’s say it’s bloated and you want to remedy that.

A word about functions and methods

I’m talking about methods here but functions and methods are essentially the same thing. The only thing that differs is that a method is a function that’s part of an object. So in this example I assumes that the function being used is part of an object, hence the name method.

Objectify

Ok, so how do we get around this issue. The answer is simple – Use one options object instead of several arguments. It solves all of the problems listed above. Check this out:

• you don’t have to remember in which order to supply the arguments
• no need to supply all arguments on all calls
• easy to provide default values
• easy to expand the number of arguments without breaking functionality.

Ok so how’s this done then? Let’s take a look at the code for constructing the method.

var bio = function(options) {
  var id = options.id || -1,
    name = options.name || 'Empty',
    description = options.description || 'Empty';
}

The first thing you’ll notice is that instead of taking multiple arguments the method only takes one called options. But then you might be wondering what’s going on inside the function?

Inside the function is a check that make sure that the object has certain properties and saves those into local variables. If a property is missing, a default value is provided.

Calling the objectified method

Ok, so now you know how to create the method, but what about using it? Let’s look at some code.

// Creating an options object
var options = {
  id: 1,
  name: 'Luke Skywalker',
  description: 'Young talented man'
}

// Calling the method
bio(options);

In the code above an options object is first created and populated with the values that you want to pass to the method.

The options object is then used as the single argument when calling the method.

Note: The options object is created as an object literal which is a convenient way of creating objects on the fly.

Extending the object

Now, what if you need to add another argument?

No problem, just change your method to embrace the new argument.

You could do it in one of two ways.

• By providing default values
• By checking if the property exists and react accordingly.

The first way is how it’s implemented in the example so you just need to follow that same pattern.

The other way is sort of the same thing but a little different. Instead of providing a default value you can simply check if the property exists or not when you need to use it.

Let’s try that with a new argument: profession.

var bio = function(options) {
  var id = options.id || -1,
      name = options.name || 'Empty',
      description = options.description || 'Empty';

  if (options.profession) {
    alert(name + ' is a ' + profession);
  } else {
    // Some sort of fallback
  }
}

Now even if you call the method without supplying the profession property the code won’t break. Since we’re checking for its existence the method will handle it gracefully. This means that you don’t have to worry about breaking existing functionality.

Pro tip

You could make the call to the method more terse by creating the options object on the fly when calling the method, like this:

bio({
  id: 1,
  name: 'Luke Skywalker',
  description: 'Young talented man'
});

That’s how I usually do it, unless of course I need to use the options object for other things as well. Then it’s better to store it in a variable so you don’t have to create it all over again.

Conclusion

Passing arguments in an object instead of as individual arguments is a great way of improving your methods. It keeps your methods terse, extendable and easy to use. My recommendation is:

Whenever you find yourself with a method that requires more than 2 or 3 arguments, pass them in an options object.

Happy coding!

Note: This article has previously been published on Code Crafting Blueprints.

A base HTML

For the sake of explanation I’m going to use a simple HTML structure to illustrate how each selector works. It’s fairly simple and only contains a few basic elements:

<div id="wrapper">
  <h1>Big headline</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <div>
    <p>Paragraph 1 inside div</p>
    <p>Paragraph 2 inside div</p>
  </div>
</div>

It’s a simple structure but it will serve well for our purpose.

The DOM

I often find it useful to look at the HTML as a tree structure when trying to understand how different CSS selectors work. In fact, HTML forms a tree structure in the browser called the DOM – which is short for the Document Object Model.

The HTML structure above could be visualized like this:

As you can see some elements are below other elements and some elements sits side by side.< It’s actually like a family tree and the relations between the elements are in fact called things like parent, child, sibling and descendant.

A recap of the most basic CSS selectors

To cover our bases I’m going to do a quick recap of the four most basic selectors. If you’re already familiar with these, feel free to skip ahead to the section about the combinators.

• The Universal Selector
• The Element Type Selectors
• The Class Selectors
• The ID Selectors

The Universal Selector

The Universal Selector is an asterisk (*) and applies to all elements in the DOM. It’s useful when you want to target several different element types.

* {
  margin: 0;
}

This selector would affect all of the elements in the DOM-tree:

An obvious use case for this selector is to create a simple CSS Reset. You can have this selector at the top of the CSS and set all the properites of all HTML elements to default values.

The Element Selector

p {
  margin: 0 0 1em;
}

The Class Selector

.first {
    color: #ff0080;
}

The ID Selector

Since there can be only one specific ID in a HTML document, the ID Selector always target a single element. It uses hash (#) and could look like this.

#wrapper {
  width: 980px;
  margin: 0 auto;
}

So far no surprises. You’re probably already familiar with these selectors and with that brief recap out of the way lets move on to more intesting things, namely the CSS Combinators.

The Combinators

The combinators are used in conjunction with the basic selectors. As the name suggest they enable you to combine other selectors in different ways so that you don’t have to have a class or ID on every single element that you want to target.

So why is this good then? Well it serves you well to keep the HTML and CSS as separated as possible. The least amount of extra attributes you have in the HTML the better. It will not only reduce the page size but also make maintenance easier.

To learn more about the benefits of keeping the HTML and CSS as separate as possible, read the article Separation of Concerns http://codecraftingblueprints.com/post/15732181414/separation-of-concerns which explores the benefits in greater deatail.

Now, lets move on to the combinators.

CSS Combinators

There are four different combinators in CSS and they each bring their own unique benefit:

• The Descendant Selector
• The Child Selector
• The Adjacent Sibling Selector
• The General Sibling Selector

The Descendant Selector

The Descendant Selector is just two or more selectors after each other, separated by whitespace. If for example you only want to target the <p> elements inside of the <div class="facts"> you could write:

.facts p {
  color: #ff0080;
}

With this code only <p> elements that lives below the element with the class="facts" are targeted.

The Child Selector

The Child Selector is a bit more specific than the previous one. It looks almost the same but you add a greater than character (>) between the two selectors. Doing this you make sure that only the elements that sits on the level immediately below the first selector are targeted.

#wrapper > p {
  color: #ff0080;
}

Now only the <p> elements immediately below <div id="wrapper"> are affected.

This is great for dealing with deeply nested structures where you want the styling to only target one level.

A common use case is when styling drop-down menus. These are often constructed with nested lists (<ul>) where you want the lists to have different styling depending on which level they appear.

The Adjacent Sibling Selector

The Adjecent Sibling Selector targets only elements that’s immediately after an element on the same level in the DOM-tree. It’s used by inserting a plus (+) between the first and the second selector.

h1 + p {
  color: #ff0080;
}

Now only the <p> that’s directly after the <h1> is affected.

A common use case for the Adjacent Sibling Selector is when you want the first paragraph in an article to have bigger text than the rest of the paragraphs. You could of course add a class such as .first to it but it’s nicer to not have to add extra attributes in the HTML. Instead you could write something like this:

p {
  font-size: 16px;
}
h1 + p {
  font-size: 24px;
  font-weight: bold;
}

The General Sibling Selector

The General Sibling Selector targets elements that are siblings, but unlike the Adjacent Sibling Selector, the targeted element doesn’t have to appear immediately after the first element. It’s constructed using a tilde (~) between the two selectors.

h1 ~ p {
  color: #ff0080;
}

Now both <p> elements are affected since they’re all on the same level as the <h1>.

Note that the affected elements need to appear after the target element. So if we have the HTML below, only the two <p> elements that appear after the <h1> will be affected.

<p>Paragraph 0</p><!-- This paragraph is not affected -->
<h1>Big headline</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

Conclusion

CSS Combinators are great for reducing the amount of extra classes and ID’s in your HTML and they have pretty good browser support too, at least if you target IE7 and above.

All of the combinators except the General Sibling Selector, are part of the CSS 2.1 specification which means that they’ve been around for quite some time. The General Sibling Selector is part of the CSS 3 specification but it still has really good browser support.

I hope that you will find CSS Combinators useful in your future CSS coding!

Can you think of more use cases for the combinators? Let us know in the comments!

Note: This article is previously published on Code Crafting Blueprints.

I have definitely been there and it’s equally frustrating each time. As the use of smart phones and tablets increases, so does the importance of having big enough target areas to interact with. But it’s not only important for mobile browsing. The truth is that it benefits desktop users as well.

Fitts’s Law

Fitts’s Law is a classic rule of thumb in Interaction Design. The law can be expressed in a fairly complex mathematical way but in a nutshell it states that the larger and closer a target is, the easier and faster it is to click it.

It’s not exactly Rocket Science, but still it highlights the importance of having, not only big enough targets, but also to position them intelligently.

If you want to know more about Fitts’s Law there’s an excellent explanation over at Particle Tree.

Designing for Touch

For touch devices, such as smart phones and tablets, a big enough touch target is even more important than on desktop. While a mouse pointer is a precision instrument with a click area of just 1 x 1 pixel, a human finger is more of a sledge hammer. The avarage size of the pad of a human index finger is 1.6 to 2 cm which translates to about 45-57 pixels on a screen.

You’ve probably experienced the frustration yourself when trying to click small links that are tightly packed on a smart phone. It can be really hard to hit the right target and that’s not the experience you want people to have with your web site.

Recommended touch target sizes

Apple iOS Human Interface Guidelines state that a touch target should be at least 44 x 44 points large. (The reason they’re using points instead of pixels is that points can be used for both standard and retina displays).

Microsoft’s Windows Phone UI Design and Interaction Guide suggest that the size of the touch target should be 34 pixels with an absolute minimum of 26 pixel. And Nokia’s Developer Guidelines state that the touch target should be at least 1 x 1 cm.

I actually I think that Nokia has the best guidelines since it states its minimum dimensions in cm. I mean 44 pixels can be very different on different screens and devices. Just think about the iPad and the iPad Mini. They both have the same amount of pixels but a click area of 44×44 pixels will be a lot smaller on the iPad Mini.

What you don’t have in size you can make up in space

Another interesting aspect of this is that if you absolutely do need to have relatively small touch targets you can partly compensate that by increasing the space between the targets. By doing that you limit the chance of missed targets.

The rule is: The smaller the target, the bigger the gap.

In Practice

Enough already, I think you get why it’s important to have big enough click/touch targets. The question is, how is it done in practice?

The first thing to recognize is that the clickable area could be well outside the visible area of the object.

Regular links

For links in a list, the easiest way to increase the clickable area, is to increase the padding. Instead of having a padding on the list-item you should have it on the link itself. In this example I simply add a 10 pixel padding to a link. Watch how that dramatically increases its clickable area (The faint red background indicates the clickable area).

li a {
  padding: 10px;
}

Checkboxes and Radiobuttons

For checkboxes and radiobuttons, which are often really small, the trick is to put them inside a label and add a generous padding to it. By connecting the checkbox and the label via the id and the for attributes, the entire area of the label is clickable and toggles the checkbox.

HTML

<label for="foo">
  <input type="checkbox" name="foo" id="foo" value="bar" />
  A padded checkbox
</label>

CSS

label {
  display: block
  padding: 10px;
}

Without this special treatment the click area is just the visible part of the checkbox while in the enhanced version the entire label is clickable. In this case this little tweak resulted in an over 50 times larger click area.

Summary

In this new brave world of multi-device experiences it’s more important than ever to cater for touch as well as mouse input. An easy way to do this is to provide big enough click targets. It’ll benefit not just user of touch devices but also desktop users.

This article shows a few simple techniques to do this. Of course there’s also other elements that these could be applied to but I leave it up to you to do that.

References

Online

• Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes
• Touch Target Sizes
• The Definitive Guide To Styling Web Links

Note: This article is a rewrite of the article Make Click Areas Comfortably Large that I’ve previously published on Code Crafting Blueprints.

Imagine that you have an affiliate site for the travel industry. You write beautiful articles which vividly describes exotic places where people could spend their holidays. Sprinkled in the text you have affiliate links to traveling agencies, which in case you didn’t know, have pretty decent kick-backs on referred customers that leads to a sale.
What to do about it

You don’t have to take it as far as usability guru Jakob Nielsen, who infamously claimed that links should be blue and underlined (which they are on his site useit.com by the way). I don’t want to push this issue that far (even though the links on this site are blue and underlined), but do make sure your links stand out from the rest of the text.

Your safest bet is probably to have them underlined. It carries a really strong affordance for clickability (check the Fast Facts Section for more on affordance). But you could also have them in a different color, a different background color and/or styled in some other way. Just make sure that they stand out from the rest of the text.

Note: Since underlined text is such a strong affordance for links on the web, you should make sure that everything that’s underlined is clickable. I.e. don’t underline text just to emphasize it.

Account for color blindness

Don’t forget that about 8% of the male population are color blind. Having something more than just the color to distinguish links is therefor a good idea.

Not just text links

The same thinking goes for other things that are clickable such as buttons, checkboxes, select lists, images etc. Make sure that these too actually look clickable.

For buttons that can mean to make them look like physical buttons with a 3D effect. This makes them stand out from the page and look more like physical objects.

Provide clues

Also make sure to provide other clues when the user moves the cursor over the object. The cursor itself could for example change to a pointing hand which carries a strong affordance of clickability. This happens by default over links in browsers but you could use a little CSS to create this effect on other clickable elements as well.

Another good idea is to make something happen with the clickable object itself when it’s being hovered. One common clue is to change the background color. This is easily achieved with the :hover pseudoclass in the CSS.

.clickable-item:hover { 
    cursor: pointer; 
    background-color: #ff9; 
}

Accomodate for keyboard

Some people prefer to use the keyboard instead of a mouse for one reason or the other. Don’t forget to take this into account when providing clues. Links and form elements are easily reachable by keyboard by just tapping the tab-key. For the user to know which element currently has focus, most browsers create a dotted outline around the element.

That’s a pretty good affordance, but you could make it even more clear. An easy thing that I often do is to make it have the same style as on :hover. This is easily accomplished with CSS by using the :focus pseudoselector.

.clickable-item:hover,
.clickable-item:focus { 
    cursor: pointer; 
    background-color: #ff9; 
}

Pro Tip: If you don’t like the dotted outline, you can get rid of it by setting outline to none in the CSS.

Don’t forget to design for touch

On touch devices there are no such things as a hover. It’s therefor extra important to make clickable objects look clickable. You will also want to make the click area bigger to accommodate for the fat-finger syndrome, but that’s a topic for another article.

Fast facts

Affordance

The term Affordance was popularized by Donald Norman in his seminal book The Psychology of Everyday Things. He later changed the term to Percieved Affordance since too many misunderstood what he meant by it. (Actually his latest term for this is Signifiers but that term hasn’t gained much traction yet)

The Percieved Affordance is the properties of an object we understand by just looking at it. For example a door knob communicates with its shape that it can be grabbed and turned. In a similar way we can, by just looking at a pair of scissors, see that the shape of the two “holes” looks like somewhere you can put your thumb and your hand.

The door knob affords grabbing and turning and the pair of scissors affords sticking your hands in the holes. In the same way a underlined link and a raised button affords clicking (or touching).

References

Online

• Guidelines for Visulizing Links
• Don Norman on Affordance

Note: This article is a rewrite of the article Make Clickable Things Look Clickable that I’ve previously published on Code Crafting Blueprints.

Scrum

I have mostly worked with Scrum, which I think is a great methodology for developing software. It brings a whole lot of good practices to the development process of which I think the most important is to bring the customer and the ones actually implementing the code closer to each other. Scrum really encourages better communication throughout the whole board.

UX brings value to the process

Allthough Agile is great a delivering software it lacks one important ingredients in creating successful product and services, the user. That’s an area where UX Design can bring a lot of value to the process. Great User Experiences doesn’t happen by accident. They happens because of focused efforts and that means bringing User Centered practices into the mix.

Agile and UX can definitely play nice together but there are no firm rules or definite best-practices on how to do it.

My talk

The talk was recorded and is available on YouTube. The presentation is available on SlideShare.

The Video

The Presentation

About Lean Tribe

Lean Tribe Gathering 12 was organized by Lean Tribe which is an organization that encourages discussions about Lean and Agile.

Performance That Matters

The percieved performance in this case is the most important factor. We therefore want the page to load progressively, meaning: The page renders from top to bottom as content is being downloaded.

Lets say you’re building an image gallery to show off your fabolous collection of Rainbow Unicorns. When the user clicks a unicorn a lightbox will open and display a bigger image of it.

Now, the CSS for the lightbox isn’t needed for rendering the page. It’s actually not needed until the user clicks an image. Therefore we could include it at the bottom of the page to let other content load first right.

– You know so that the page will render faster?

Wrong! Contrary to common sense it will actually delay the rendering of the page in a lot of web browsers.

Counterintuitive Behavior

But why does it delay the rendering? Keeping the browser from downloading it before other content ought to make the rendering faster. This is really counter intuitive at first glance, but listen to this:

The browser doesn’t want to risk having to re-render the page, it therefore waits until all CSS is loaded before rendering anything!

The Rule

Fortunately there’s a really simple solution to this. Just follow this simple rule: Include all CSS in the <head> of the page.

References

Books

High Performance Web Sites – Essential Knowledge for Frontend Engineers by Steve Souders

Online

Best Practices for Speeding Up Your Web Site

Note: This article has previously been published on Code Crafting Blueprints.

What you’ve experienced is what is commonly referred to as Spaghetti code. To avoid falling into this trap you should follow one simple rule:

Always separate HTML, CSS and JavaScript into different files.

Remember that HTML is for content (and structure), CSS is for design and JavaScript is for behavior. By separating them into different layers you gain several things. It becomes:

• Easier to maintain
• Increased performance
• Better accessibility
• A good foundation for SEO

Maintainability

First of all, your code becomes more maintainable. If there’s something wrong with the design, it’s probably in the CSS. If on the hand your super cool drag and drop interface stops working, something is probably wrong in the JavaScript files. In other words, it’s easier to find errors.

Imagine wanting to change the entire design of your site to a ninja unicorn theme (shudder). Having your HTML, CSS and JavaScript in a big mess you basically need to rewrite the whole site. But if you been a good coder and kept them separated, all you need to do is to change the CSS. Simple, right?

Performance

In most cases the site loads faster if you have the layers separated. And we all know how important speed is!

JavaScript and CSS files are static assets that can be effectively cached by the browser. What it means is that the browser doesn’t have to download them more than once. You save both bandwidth and rendering time.

Accessibility

By separating the different layers you also benefit the accessibility of the site. It’s in fact the foundation of Progressive Enhancement (and graceful degradation). This means that even if the user interact with your site using a less capable device (for example: disabled JavaScript, screen reader, old browser, you name it) it can still access the content because the device can simply ignore the parts it doesn’t support and render what it can.

HTML is the solid foundation of the web. By making sure that you keep the content there (semantically marked up of course) and that neither the CSS, nor the JavaScript is in its way, you can be sure that every browser on this planet can access your content.

SEO

Web crawlers, the evil robots of Search Engines that constantly crawles the web on their endless hunt for content to index, is another reason you want to separate the layers. A web crawler is basically a blind user. It doesn’t care about your fancy styles or your crazy JavaScript animations. All it cares about is your content – your HTML.

So you better make sure that your content is semantically marked up with valid HTML and that the CSS and JavaScript is out of its way. Having done this, you’re on your merry way towards SEO nirvana.

A Bad Example (Warning Anti Pattern!)

In this example, the separation of concerns is violated. Both content, style and behavior are meshed together in an awful soup.

HTML

<a href="/some/url/" onclick="someFunction(); return false;" style="font-size: 12px; color: #f00;">A bad link</a>

Good Example

Good Example

In this good example the same thing is done with a clear separation between content, style and behavior.

HTML

<a href="/some/url/" id="some_link">A good link</a>

CSS

#some_link { font-size: 12px; color: #f00; }

JavaScript

document.getElementById('some_link').addEventListener('click', someFunction, false);

Conclusion

I hope that this article have convinced you that keeping a clear separation is the way to go. So save yourself a lot of grief and separate these three levels as much as possible or you might as well end up in Spagetti Code Hell.

References

Online

The Web Standards model – HTML, CSS and JavaScript

Separation of concerns on Wikipedia

Books

DOM Scripting by Jeremy Keith, FriendsofEd 2005

Bulletproof Web Design by Dan Cederholm, New Riders 2006

Bonus Fact

The concept of Separation of Concerns is not limited to HTML, CSS and JavaScript. It applies just as much to general software development where you want to keep different things separated. For example the data, the business logic and the User Interface.

Separation of concerns on Wikipedia

Note: This article has previously been published on Code Crafting Blueprints.

About the author

The author of the book, Nancy Duarte, runs a company called Duarte that’s in the business of creating compelling presentations for their clients. They’re famous for creating Al Gore’s presentations for An Inconvenient Truth which was something that definitely showed the power of great use of presentation software.

Highly acclaimed

Since this book is widely praised in a lot of reviews I had pretty high expectations when I started reading it. Maybe that’s the reason I’m not so impressed with it. I found it pretty light on substance and I’m not sure it has added a lot of value to my slide creating skills.

The book touches on basic design principles and presentation skills. I’m sure if you’re a design noob that there’s a lot of nuggets to be found there, but if you have some design skills, it’s all very basic.

The format

The book is very “designed”, something I quite enjoy and I’m sure works very well in the physical book. The problem I had was that I read the e-book version in pdf format and the square format of the book with lots of design elements made it hard to read. I had to constantly zoom in on parts of pages to be able to read the text which made the reading experience less than ideal.

Summary

All in all I think it’s an OK book, which obviously a lot of work went in to creating. If you’re a non-designer you will probably find useful information that will make your slides better. But if you’re like me and have some experience in design and creating slides, you will find it very basic. That said you might still enjoy the design of the book and all the lovely examples in it. But in that case I recommend you get the physical book, because the e-book version is really not adapted for the format.

Book information

Title:

slide:ology: The Art and Science of Creating Great Presentations

By:

Nancy Duarte

Publisher:

O’Reilly Media; 1 edition (August 12, 2008)

Pages:

296

ISBN:

0596522347

ISBN-13

978-0596522346

Buy on Amazon.com

Note: I wrote this review for O’Reilly’s Blogger Review Program. Their deal is pretty good: You get a free e-book to read and once you post a review you get another. Try it yourself if you’re interested in reviewing books.

I’ve already found use for this book as I’ve checked out different design pattern on filtering for an app that I’m currently designing. And that’s one thing this book excels at – providing fast answers to urgent needs.

The book is organized into ten different sections that each presents the design patterns in a concise and brief manner. The focus of this book is not so much on the theory behind each pattern but rather what established patterns exists and how to use them. Thanks to this approach it’s quick to find a suitable pattern.

I’ve read the e-book edition and it features beautiful screenshots in full color of different apps along some sketches that illustrate the major patterns.

Device Agnostic

The book tries to be device agnostic and displays patterns from both iOS, Android, WebOS and BlackBerry which is nice. Unless you have all these devices yourself it can be hard to explore how different apps on different platforms have solved a problem.

A problem with this kind of books is that the evolution of Mobile User Interfaces moves so fast that the patterns and examples, risks being outdated pretty fast. As I read the book, some screenshots already differed from the latest version of the apps.

About the author

Theresa Neil is a User Experience Consultant from Austin Texas. She’s previously co-authored another brilliant book with Bill Scott called Designing Web Interfaces: Principles and Patterns for Rich Interactions.

You can learn more about Theresa on her personal site, www.theresaneil.com.

Conclusion

This is a great book to have when cranking out Wire Frames and Prototypes for mobile UI’s. You can quickly explore the most common solutions to design problems and also some anti-patterns to avoid. If you’re into the mobile app business I highly recommend you pick up a copy!

You can see several of the design patterns online at mobiledesignpatterngallery.com. There’s also links to a few chapters that’s been published online.

Book information

Title:

Mobile Design Pattern Gallery: UI Patterns for Mobile Applications

By:

Theresa Neil

Publisher:

O’Reilly Media (March, 2012)

Pages:

280

ISBN:

1449314325

ISBN-13

978-1449314323

Buy Mobile Design Pattern Gallery from Amazon.com

Note: I wrote this review for O’Reilly’s Blogger Review Program. Their deal is pretty good: You get a free e-book to read and once you post a review you get another. Try it yourself if you’re interested in reviewing books.

In my book I have in fact described how to add multiple markers from JSON and how to attach unique InfoWindows to each of them. What I haven’t described is how to get the JSON-data to actually show up in the InfoWindows. This tutorial aims to describe how to do just that.

The JSON

In this example I’m going to use the capitals of the Scandinavian countries: Stockholm, Oslo and Copenhagen. Each capital will be displayed on the map with a marker. When you click a marker an InfoWindow will popup with some brief information about the city.

The JSON data looks like this:

var json = [
  {
    "title": "Stockholm",
    "lat": 59.3,
    "lng": 18.1,
    "description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)"
  },
  {
    "title": "Oslo",
    "lat": 59.9,
    "lng": 10.8,
    "description": "Oslo is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)."
  },
  {
    "title": "Copenhagen",
    "lat": 55.7,
    "lng": 12.6,
    "description": "Copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)."
  }
]

Note that the JSON data above contains the following information:

• A Title in plain text
  We will use this information for a tooltip on the marker
• A Latitude
  For the latitude portion of the position
• A Longitude
  For the longitude portion of the position
• A Description
  The content that will be displayed in the InfoWindows. I’ve included some HTML in it to illustrate that you’re not restricted to just plain text.

Note: In this example I have the JSON data in the same js file as the code, but in a real-life scenario you would probably grab it from an external source such as a back-end server or a web service.

Creating the map

First of all we need to create a map. The map will be centered over Scandinavia so that both Stockholm, Oslo and Copenhagen are visible.

// Creating a new map
var map = new google.maps.Map(document.getElementById("map"), {
  center: new google.maps.LatLng(57.9, 14.6),
  zoom: 6,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

If you feel unsure how this all works I recommend that you read Google Maps API 3 – The basics. It describes how to create a simple map.

Adding Markers

To create markers from the JSON-data we need to loop through it and extract the information for each marker.

for (var i = 0, length = json.length; i < length; i++) {
  var data = json[i],
      latLng = new google.maps.LatLng(data.lat, data.lng); 

  // Creating a marker and putting it on the map
  var marker = new google.maps.Marker({
    position: latLng,
    map: map,
    title: data.title
  });
}

This will add markers to the map and they will all have their own unique title which will show up as a tooltip when you hover over them with the mouse.

Adding InfoWindows

Ok, so now we've created a map and added some markers from JSON data. So far it hasn't been that hard, the way of doing this is pretty straight-forward. But to attach the InfoWindows properly is a different story. It's now that it starts to get tricky.

First of all We're going to create a global InfoWindow that we will reuse for all markers. This needs to be created outside of the loop. So just above the loop in the code we insert:

var infoWindow = new google.maps.InfoWindow();

This gives us an empty InfoWindow object that we can use on the map.

The next step is to attach a click event to each marker. In the code that executes we will fill the InfoWindow with the correct information and open it att the right location, pointing at the clicked marker.

At first glance it seems that you can do this the same way that you add markers:

// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
  infoWindow.setContent(data.description);
  infoWindow.open(map, marker);
});

The problem with this approach is that when you're trying to add more than one InfoWindow, they will all have the same content as the one in the last iteration. To prevent this from happening we need to use something called a closure.

Closures

What a closure does is to persist the data in each iteration of the loop so that it's bound to that particular marker.

One way of doing this is by encapsulating the code inside an anonymous function that is instantly executed. You need to make sure to pass the information from the current iteration to the anonymous function. In our case we're going to pass the current marker and the current data.

This is kind of a confusing concept and a bit hard to explain, so lets instead look at some code.

Implementing the closure

// Creating a closure to retain the correct data 
//Note how I pass the current data in the loop into the closure (marker, data)
(function(marker, data) {

  // Attaching a click event to the current marker
  google.maps.event.addListener(marker, "click", function(e) {
    infoWindow.setContent(data.description);
    infoWindow.open(map, marker);
  });

})(marker, data);

By passing the data to the anonymous function we make sure that it will stay there. We're essentially creating 3 self contained objects (closures) from our 3 locations.

Now if we're try the code, it will work perfectly and each InfoWindow will display the right information.

Tip: Nicholas Johnson explains how closures work in 5 easy bullet points in his short post, What is it with Closure?

Live Demo

Check out the live demo

Conclusion

I hope that this example will clear out some confusion on this topic. Closures are a pretty confusing concept but once you understand how it works, it's something you we'll easily be able to apply in your own code. Anyway, you should be able to grab the code from this example and use it as a boilerplate to tweak your own needs.

Happy Coding!

When I started out I didn’t have any booked projects and was in fact a bit worried about how it would turn out. Luckily I’ve been fortunate enough to be engaged in several interesting projects that has really kick-started my new business.

Say Hello to Meetod

Until now I’ve been a sole proprietorship and have marketed myself under the name of this site, In usability we trust. But recently I’ve taken it a step further by registering a corporation with the name Meetod Sweden AB.

Meetod will have the same focus as I’ve had until now which is, Designing and Developing Top Notch Web Applications and Apps that work extremely well for the people that will actually use them.

In usability we trust will go back to being a blog and the sites for my business is found at www.meetod.se and www.meetod.com.

Meetod.com

What I’ve been up to so far

A lot has happened since last September that have enabled me to take this step. Here are some of the projects that I’ve been working on:

• Designing an Online Editor for bMobilized (still under production).
• Creating a Map solution with both Google Maps and Bing Maps that’s a part of a product that PositionTech offers to their customers.
• Designing and Creating an iPhone/iPad App for EL-Info called EL-Vis Q&A (Available in the Scandinavian App Store)
• Designing and developing an advanced Web Application aimed at electricians for EL-Info (still under production)
• Leading the UX-design process for an iPad Poker Client for GTECH G2 (Boss Media) (still under production)

Apart from that I’ve also been doing a few talks on UX-design and am currently holding a completely custom course in 10 parts on HTML and CSS for Visma Spcs.

Thank You!

I’m really grateful to all of my awesome clients whom have entrusted me with these projects and enabled me to pursue my dream. With all of my heart, Thank You!

So, what is CoffeeScript?

CoffeeScript is a programming language that compiles to regular JavaScript. What’s great about it is its concise syntax and the fact that it hides away some of JavaScript’s more ugly sides. It’s inspired by script languages such as Ruby and Python which both has a very terse syntax.

In short it’s a great way to efficiently write clear and maintainable code.

CoffeeScript has gained a lot of traction lately and has proven to be a more productive way to write JavaScript than to just write raw JavaScript. Ruby on Rails 3.1 for instance uses CoffeeScript by default. If you’re on the Microsoft .net platform, there’s several Extensions and NuGet packets available. You can also easily run your own complier whatever platform you’re on either via Node.js, Ruby Gem or JavaScript (There are probably even more ways).

What about the book

The book is short, only 60 pages, but manages to clearly explain how to use the language with well explained examples. Before reading this book I had not written any CoffeeScript code, but I was curious about it. It has kept coming up in lots of articles and tutorials lately plus the fact that the creator of CoffeeScript, Jeremy Ashkenas, is also the creator of Backbone.js and Underscore.js which are two libraries that I use extensively in my projects. Reading this book has given me a nice introduction which have enabled me to quickly get started using it in a project.

The author, Alex MacCaw, has a clear writing style and explains the concepts through easy to follow examples that are thoroughly explained which makes the learning experience both enjoyable and efficient.

My Verdict

If you’re interested in getting started in CoffeeScript this book is a great and quick way to get you up and running fast. Since it’s only 60 pages long there’s really no reason not to. I have a hard time imagining a faster way to get going.

The Little Book on CoffeeScript is Open Source and you can read it online at GitHub. If you prefer to read a the physical book or have it in e-book format you can buy a copy from Amazon.com or from O’Reilly.

Book information

Title:

The Little Book on CoffeeScript

By:

Alex MacCaw

Publisher:

O’Reilly Media (January 31, 2012)

Pages:

60

ISBN:

1449321054

ISBN-13

978-1449321055

Note: I wrote this review for O’Reilly’s Blogger Review Program. Their deal is pretty good: You get a free e-book to read and once you post a review you get another. Try it yourself if you’re interested in reviewing books.

Thank you

Thanks to all who attended the event. I had a lot of fun giving the talk and it’s always nice when there’s a good crowd attending it. Also many thanks to my good friends Chris Jangelöv, Danne Nordell and Simon Winter who was also doing talks and helped organize the event.

Watch the whole event

The whole event was filmed and will be available shortly. I will update this article with a link to it as soon as I get it.

If you want to know a little bit more about what’s going to happen during the event, you can check out my previous post named World Usability Day 2011.

Note: Sorry all you non Swedes, but the event is in Swedish.

Watch the live event

If you’re interested in watching the live event online here’s the details how:

1. Go to https://visma.webex.com/visma-sv/j.php?ED=1145602&UID=3701652&PW=NNzQ2ZTg3OTFh&RT=MTUjMTMw
2. Enter your name and email
3. If a password is required, enter cj
4. Click “Delta”
5. Follow the on-screen instructions

Note: I will update this post with information about how to watch the event afterwards as soon as I have the info.

How big is the mobile web?

The amount of web pages that are being accessed by mobile devices is increasing day by day. In fact traffic to mobile websites in 2010 grew by 600%, the year before that it grew by 300%. In the last quarter of 2010 it out-shipped the combined global market of laptop, desktop and notebook computers This happened 2 years earlier than analysts had calculated. So it seems that the mobile web is really exploding and at an accelerating speed. (Statistics from Mobile First by Luke Wroblewski)

The test produces a 6 page pdf-report with your test result as well as personalized advice and best practices for creating mobile web sites.

GoMo

With the background of these numbers it’s not surprising that Google is encouraging companies and organizations to create mobile-friendly sites. After all, Google’s entire business model is dependent on that people can use the web effectively.

If you not convinced yet, here are some more statistics from the GoMo site. For example:

• “By 2013, more people will use there mobile phones than PCs to get online”
• “Mobile Searches have grown by 4X since 2010”
• “There will be one mobile device for every person on earth by 2010”

Source: GoMo – Reasons Mobile Matters

Test your site

I encourage you to test your own site on GoMo. Not the least for the fancy pdf report that you will get. You will also get personalized advice for your specific site as well as some best practices for building mobile websites.

Need help?

If you find yourself with a site that doesn’t score so well on the mobile-friendliness scale, don’t hesitate to contact me for a free quote. Maybe I can help you bring that score up.

Here’s how it will go down: We will get together at Visma Spcs at 12.00. There will be a lunch-sandwich and a few short talks by me and my buddies Dan Nordell and Chris Jangelöv. The whole thing will last about an hour and will end with a short discussion.

Come join us

If you’re in the area you’re more than welcome to join us. It’s a free event, but you’ll have to sign up for it so that we know how much food to supply. Please note, that the event will be in Swedish.

If you’re unable to be physically present at the event, it will be broadcasted so you can attend remotely. Be aware though that you’ll have to bring you own sandwiches. I don’t know the details about the broadcast yet but will post about it as soon as possible.

Design for influence

The talk I’m doing is titled: Design for influence. I will show examples on how to affect the way people behave through different design techniques. I’ve actually been fascinated by that since the last time I spoke at World Usability Day, that time on Design for Sustainability. So it will be interesting to take that talk one step further.

These events tend to be very casual and are a great opportunity to network with other people in the area. So don’t hesitate, in this case there actually is such a thing as a free lunch.

You can also check out our event at worldusabilityday.org.

The patterns that are shown in the book are all Model-View-Controller (MVC), the popular design pattern being used in a lot of back-end frameworks such as Ruby on Rails, ASP.NET MVC and CodeIgniter (PHP) to name a few.

The first part of the book introduces the different aspects of the MVC pattern. Then there’s a few chapters dealing with JavaScript templating, dependency management, some of the new HTML5 API’s and JavaScript deployment. In the last part of the book 3 different libraries for applying the MVC pattern to a project are introduced.

Desktop-like applications

Traditional web applications require a lot of requests to the server, but using MVC on the Frontend you can create One-Page-Applications with all the logic in the frontend. This might sound crazy at first, but after reading the book and trying it out for myself, I’m confident that this is a good approach for certain kinds of web applications. It’s actually more like programming Desktop Applications.

This approach gives you applications that responds immediately on user interaction. Because it doesn’t have to perform constant server requests, it is snappy and responsive.

Not for all projects

I want to be dead clear here. Im definitely not saying that this is the right approach for all web applications, because it’s not. For starters, using a JavaScript only approach means that not everybody can use it, for example people using screen readers or have JavaScript disabled. So for content intensive sites this is not the way to go. But for more advanced Web Applications and for mobile web apps aimed at smart phones, it’s certainly a viable option.

JavaScript libraries

As I mentioned before Alex presents a few libraries that will make it easier to create a MVC architecture in the last part of the book. He has actually created one of the libraries himself, Spine.js. The other libraries are Backbone.js and JavaScriptMVC.

Although I’m sure that all theses libraries are good I myself was most compelled by Backbone.js which I’m currently using to build a mobile web app. I think it’s great in the way it makes the code so much more structured and easier to maintain. It essentially brings backend programming structure to the world of JavaScript.

Check out Backbone.js Introduction and Resources to learn more.

Conclusion

If you have a few JavaScript projects under your belt and you feel that there must be better ways to organize and structure the code, this book is definitely for you. It will teach you how the MVC pattern works on the frontEnd and gives you the tools and knowledge to leverage your own applications.

Bookinformation

Title:

JavaScript Web Applications

By:

Alex MacCaw

Publisher:

O’Reilly Media (August 30, 2011)

Pages:

280

ISBN:

144930351X

ISBN-13

978-1449303518

Buy JavaScript Web Applications from Amazon.com

Note: I wrote this review for O’Reilly’s Blogger Review Program. Their deal is pretty good: You get a free e-book to read and once you post a review you get another. Try it yourself if you’re interested in reviewing books.

There’s probably a few bugs and there are still things that I’m going to add, but it will all happen during the next few weeks.

I hope that you’ll like the new design and I would love to hear your feedback in the comments.

Reasons behind the redesign

There’s several reasons for the redesign but the most important one is that I’m now an independent designer/developer. The role of this site is therefor switching from being just a blog to being the platform where I market myself and my services.

Another important reason is that the current design feels dated and frankly needs a radical makeover.

Responsive design

Responsive Design is the big thing in web design right now and I’ve used that approach in the new design. What it means is that the design will adapt to the context where it’s displayed. So you get a slightly different design depending on if you’re watching it on a big screen, on a tablet or on a mobile device.

The concept of Responsive Design was popularized by Ethan Marcotte who’s written an excellent book called, Responsive Web Design, about it.

Using it on a desktop browser

Using the site on a big screen, it has generous margins and have a main content area as well as a sidebar.

The site when viewed on a desktop browser

Tablets and mobile devices

On Tablets the design is mostly the same. The only difference is that the outer margins are a bit tighter and that the main content area is less wide.

On mobile devices there’s even less margins, the navigation is moved below the site logo and the content area fill up the whole width. Also the sidebar is moved to below the main content area.

The site viewed on iPad and iPhone

When does it launch?

I expect to launch the new design during next week, so keep an eye open for that. I also plan to write an article on the principles of responsive design.

So what are your thoughts on the redesign? Don’t hesitate to share them in the comments.

This video was recorded during a Master Class with Luke Wroblewski and six participants. Luke talks about the topic, shows slides, and the participants asks questions and comment.

The masterclass is structured into three areas which are:

• Statistics
• Setting Context
• Design Conciderations

In the Statistics part, Luke shows a lot of data on mobile web use. The trend is clear: mobile browsing will soon outperform desktop browsing. This part will give you all the facts you need to realize it’s time to start considering the mobile web. It will also provide you with plenty of ammunition for convincing your boss or client that it’s time to get moving.

In the Setting Context part of the class, the capabilities and constraint of the mobile web experience is discussed. It’s all about screen sizes, limited input opportunities and the different contexts that mobile devices are used. For example, we often use smart phones with one hand while on the move which makes it hard to perform precise manipulations of objects on the screen.

In the Design Conciderations part, Luke presents good advice on how to design for mobile applications. He talks about how to organize content and how to design different actions on a touch device. He also talks about things to consider when designing for input and how to design for different devices and different viewports. Lots of practical advice and current best practices.

All in all the class introduces the mobile web area and gives a pretty broad picture of what it is, where it’s heading and what to think about when designing for it.

About Luke Wroblewski

Luke is a very knowledgeable speaker. He’s written two popular web design books, Web Form Design (which I’ve reviewed back in 2008) and Site-Seeing: A Visual Approach to Web Usability. He’s the co-founder of Bagcheck and former Chief Design Architect at Yahoo!.

These last years Luke has been busy talking and writing about the mobile web and he has a new book coming up this fall called Mobile First.

So what is Mobile First?

The approach that Luke is advocating is to think about the mobile web experience first. Because of the inherited restraints of the mobile platform you are forced to focus on the most important stuff and omit the rest. The screen is small, the input limited and the attention of the user is often shorter than on the desktop.

Then, when you move to the desktop experience, you can bring this knowledge and focus with you. It will help you stay focused and not trying to cram content and functionality into every bit of empty space.

The video format

The quality of the video is mostly good. It’s in mp4 format and both the picture and sound are crisp except for sometimes when one of the participants are talking. Then it sometimes sounds like the person is sitting in a jar talking, you can still here what they say though.

Although the quality of the video is pretty good, my biggest concern is with its format. This master class comes in 14 different video files that you can either watch online or download for offline use. Watching them online is pretty straight forward, you have a chronological list of the videos and watch them one after the other. No problems there.

The problem started when I wanted to watch them on my iPad. I downloaded the files, imported them to iTunes and transferred them to the iPad. Now, instead of being ordered chronological they were ordered alphabetically. Because of this I had to manually edit the meta information of the files, something that’s a bit awkward and time consuming. I think this should have been done to the files, before publishing them.

My verdict

My biggest take-aways from this master class is why Mobile First is a sensible approach but also good ideas on how to design navigation for mobile platforms. There were also some very interesting statistics about how huge the mobile web is really becoming.

If you’re designing or developing for the mobile web or thinking about doing it, you really should check this video out. Luke Wroblewski is very knowledgeable and good at explaining his points in a clear an efficient manner. In fact, even if you haven’t considered the mobile web yet, maybe you should watch this video anyway. Chances are it will make you change your mind.

Video information

Title:

Designing for Mobile First

By:

Luke Wroblewski

Publisher:

O’Reilly Media (August 2011)

Duration:

3 hours and 19 minutes

Check out Designing for Mobile First on O’Reilly Media

Note: I wrote this review for O’Reilly’s Blogger Review Program. Their deal is pretty good: You get a free e-book to read and once you post a review you get another. Try it yourself if you’re interested in reviewing books.

My services

My focus is on designing and creating rich desktop and mobile web applications. I do however provide research and design for desktop applications and native apps too.

Here’s a brief list of my services:

• Interaction- and User Interface Design
  Creating Userflows, Wireframes, Prototypes and detailed UI Design using a User Centered approach.
• Web Development
  Developing cutting edge Web Applications for Desktop and Mobile using HTML5, CSS3 and advanced JavaScript/AJAX interactions. I do PHP or ASP.NET(MVC) for the backend.
• Evaluation and Analysis
  Analysis of existing Web Sites/Applications regarding usability, effectivity and performance.

I also do talks and provide training on various aspects of UX and Web Development.

Contact me now

Through the wonders of Skype and Email I’m available for projects all around the globe. But if you’re located somewhere in the south of Sweden it would be nice to meet in person too.

If you need help with a project, contact me right away. I still have some open slots for this fall but it’s already starting to fill up.

Contact me now!

About the book

This book is, as of now, the only book on the subject. There are plenty of books about Search Engine Optimization (SEO) and although Site Search Analytics (SSA) share common traits with SEO, the nature of searching on Google and searching on a sites local search is quite different. You’ll see much more general search terms on Google than on a sites local search.

What’s so interesting is that the term that people use on local sites will tell you something about how they think, what language they use and what they’re interested in. This is valuable information that can help you better understand your audience and better cater to their needs.

What’s in the book

The first section of the book describes what SSA is and provides a case study where SSA helped save a project. It will give you the basics of the topic and good advice on how to start applying it.

The second section is about different type of analysis to gain insights about your data. This will give you a toolkit where you can pick the appropriate tool depending on what insights your’e trying to gain.

The third section describes practical ways of using your insights to improve search, site navigation, meta data and content. It contains very good and practical things you can do to improve your site.

The last chapter looks at how SSA fits into the worlds of UX Design and Web Analysis.

Bridging the gap

A very interesting argument Louis Rosenfeld make is that SSA can actually bridge the gap between Web Analytics and UX Design. Because of the both quantitative and qualitative nature of the data, SSA will appeal to both parties. It can therefor act as a common ground for practitioners in the respective fields to collaborate their researching efforts.

About the author

Louis Rosenfeld has previously co-authored Information Architecture for the World Wide Web, by many considered THE book on Information Architecture. He also runs Rosenfeld Media, a book publishing company dedicated to publishing great books on UX.

With Louis experience in the fields and his clear and entertaining writing style, this book is a pleasure to read. It contains lots of real-life examples and practices that makes the techniques described easy to apply in your own projects.

Conclusion

If your’re interested in making good use of your search data, then this is the book to read. It reveals techniques that will give plenty of benefits for a pretty low effort. I highly recommend Search Analytics for Your Site for both Web Analysts and UX Designers, but also for Project Managers and others involved in creating information rich web sites or Intranets.

Book information

Title:

Search Analytics for Your Site

Author:

Louis Rosenfeld

Publisher:

Rosenfeld Media, LLC; 1st edition (July 6, 2011)

Pages:

224

ISBN:

1933820209

ISBN-13:

978-1933820200

Check out Search Analytics for Your Site on Amazon

Note: I wrote this review for O’Reilly’s Blogger Review Program. Their deal is pretty good: You get a free e-book to read and once you post a review you get another. Try it yourself if you’re interested in reviewing books.

It’s a short book, only 130 pages, that’s easily read in one evening. It provides you with a quick introduction that will give you a kickstart using jQuery Mobile in your own projects. It starts with very basic examples and ends with showing how to build a Twitter web app. It’s very hands-on with lots of example code and code references.

To get the most from this book you should already be familiar with the jQuery framework as well as HTML5 and CSS3 since these topics are not thoroughly covered.

New Beta 1 release

You should be aware that it’s the Alpha 4 release of jQuery Mobile that’s described in the book. As of now jQuery Mobile is in Beta 1 and is expected to make version 1.0 by the end of this summer.

I’ve noticed some differences between the current version and what’s being described in the book. But these are minor differences and shouldn’t cause any serious problems (See the Beta 1 Release Notes for more info).

Jon states in the preface of the book that “As jQuery Mobile advances, we hope to update this ebook to cover new features and provide new tips and techniques.”. So hopefully the version you will read will be updated to reflect these recent changes.

Conclusion

For me this book has given me a head start building the mobile version of a web app that I’m currently developing. (Stay tuned for more info as I plan to release it by the end of this summer). I think Jon has done a great job introducing the framework in a concise and hands-on manner. If you’re planning to create a mobile web app and are considering using jQuery Mobile, you should definitely read this book to:

1. see if jQuery Mobile is something you should use
2. to get at head start using it in your project

All in all I recommend this book for anyone wanting to dip their toes in mobile web development.

Book information

Title:

jQuery Mobile

Author:

Jon Reid

Publisher:

O’Reilly Media (July 7, 2011)

Pages:

130

ISBN:

1449306683

ISBN-13:

978-1-449-30668-7

Check out jQuery Mobile on Amazon

Note: I wrote this review for O’Reilly’s Blogger Review Program. Their deal is pretty good: You get a free e-book to read and once you post a review you get another. Try it yourself if you’re interested in reviewing books.

I’ve been keen on doing this for years and now I feel is the right time to do it. Some of you might know that I’m currently on parental leave. This pause from my current employment, makes it all the more naturally to take the leap now.

I will of course miss my colleges and the interesting challenges at my current employer but I’m really excited about going solo and very curios about where this road will take me.

What I’m offering

Services

I will offer services in most things having to do with designing and building User Interfaces, including:

• User research
• Usability testing/Expert reviews
• Wireframing & Prototyping
• User Interface Design
• Frontend Development

(I will of course also provide expert services for Google Maps Solutions)

Talks and training

I’m also doing talks and training on different aspects of usability and web techniques. Contact me if you want to know more or need a talk or training that’s tailored for your specific needs.

Available for projects from September

I’m still on parental leave but I will be available for new projects from September 19, 2011. So if you need an Interaction Designer or a Frontend Developer for a project this fall, contact me right away.

The plugin is released under both MIT and GPL licenses so you can use it any way you want in both personal and commercial projects.

How to use it

First of all you need to include the tinyrotator.css and jquery.tinyrotator.js files in your document. The stylesheet will give you a standard design but you can easily change it by altering the CSS file. Since it’s a jQuery plugin you will of course also have to include the jQuery library.

The base of the plugin is an unordered list of images with links to bigger images. The list should have the class="tinyrotator" to get the correct style from the stylesheet. You can of course use a different class (or id) if you create your own custom CSS.

<ul class="tinyrotator">
  <li>
    <a href="image1.jpg">
      <img src="thumbnail1.jpg" alt="" />
    </a>
  </li>
  <li>
    <a href="image1.jpg">
      <img src="thumbnail2.jpg" alt="" />
    </a>
  </li>
</ul>

The plugin is then activated by calling the tinyrotator method on the list like this:

$(document).ready(function() {
  $('.tinyrotator').tinyrotator();
});

This will produce a standard image rotator with the images from your list. The plugin will show the bigger versions of the images above the thumbnails and automatically cycle through them. If the user clicks a thumbnail, that image will be shown and the plugin will stop rotating.

A standard version of Tinyrotator

Graceful degradation

If for some reason the plugin won’t initialize (user has JavaScript turned of, jQuery din’t load, etc.) a clickable list of the images will still be visible and the user will be able to click them to watch their bigger counterparts. They will however be opened on a blank page.

Tinyrotator with JavaScript turned off

Options

The plugin has two options with which you can set the time each image should be visible and how fast the transition (a fade) between two images should be.

interval

The time in millisecond that each image will be displayed
Default value is 5000.

fade

The speed of the fade, possible values are: ‘fast’, ‘slow’, ‘medium’, ‘none’ or the time in milliseconds
Default value is ‘medium’

Here’s an example where both the interval and the fade speed has a faster pace.

$(document).ready(function() {
  $('.tinyrotator').tinyrotator({
	interval: 2000,
	fade: 'fast'
  });
});

Be sure to check out the demo to see the plugin in action. Also check out the source of the demo page to see how to use it.

Feedback

I hope you’ll find the plugin useful. If you have any suggestions on how the plugin could be improved, please let me know in the comments. Also if you use it on a project it’s always fun if you let me know.

The simple, perfectly valid and accessible solution is to use the <optgroup> element. It’s used for grouping <option> elements in a <select> list into sections. It’s perfectly safe to use since it’s supported across all browsers.

Here’s an example of how to create a sectioned select list with pets.

<label for="pets">Pets</label>
<select>
  <optgroup label="Dogs">
   <option>Golden Retriever</option>
   <option>Doberman</option>
  </optgroup>
  <optgroup label="Cats">
   <option>Burma</option>
   <option>Siamese</option>
  </optgroup>
</select>

This code will result in this select list:

There’s one big additional benefit and that is that the labels in the list are not clickable and can therefor not be selected by mistake.

So the next time you want to create a select list with sections, look for <optgroup> first.

In this article I will describe what those interests are and what will happen when any of them becomes too dominant. I will also share my thoughts on how to overcome imbalances.

The three major interests within a project

In any development project there are at least three different interests at play:

• Business goals
  The business goals of the product. For example to sell more products, to reduce the number of support calls or to strengthen brand awareness.
• Development opportunities
  The interests that the developers that actually builds the application have. Examples of these might be fast development, code reuse and maintainable code.
• User needs
  The needs of the end users. It might be a problem they want to solve or the need for an easy way to perform at certain task.

The image below illustrates a project with a balanced tension between the different needs. This is the ideal state in a project. Often it’s impossible to maintain a perfect balance but It’s important to always strive for it, at least if you want a successful project.

The three basic needs in every development project

Unbalanced projects

Stakeholder domination

Stakeholder domination

Although the business goals are really important, since they are the very reason that the application exists, it must not be a too dominant interest. When that happens the result is a product that fulfills business goals but are expensive, buggy and fails to meet user needs.

Failing to meet user needs often lead to that the business goals are ultimately not met. A product that’s unusable or doesn’t make it worthwhile to use will probably be abandoned sooner a later.

An example of this could be that a business goal is to collect as much user data as possible with an extensive sign-up form to get good sale leads. The user on the other hand wants to try out the application before making a big commitment. The huge form seems daunting and the user is reluctant to give away personal information this early in the process. This leads to fewer users actually signing up, and business goals are not met.

Developer domination

Developer domination

If developer needs dominates the end result is a cheap solution of high quality that fails too meet business goals or to address user needs.

Having the perfect application with brilliant algorithms and perfectly tuned databases is never a mean to an end. It doesn’t matter how awesome your solution is if it fails to meet business goals. This means that the application probably can no longer exist, since its ultimate success depends on business goals being fulfilled.

User domination

User domination

While it’s important to focus on user needs the project must never lose sight of business goals and developer needs. What happens is that you end up with a solution that indeed fulfill user needs but is expensive, buggy and fails to meet business goals.

This is, in my experience, rarely a problem. More often I think the problem is that user needs are totally neglected. Fulfilling user needs often goes hand in hand with meeting business goals. But there are of course often compromises that needs to be made between the two.

So also with developer needs. Some functions that would have been perfect for the user might be to complicated or expensive to develop to be a viable solution.

My thoughts on keeping a good balance

I personally think that good communication within a project, combined with an awareness of the different needs, is key for a successful project. The biggest mistake to make is to isolate developers and designers from the stake holders. There’s everything to win in keeping them involved in this process so they also have an awareness of business goals and how the customer thinks.

This goes both ways. Having a dialog between stakeholders, developers and designer leads to better understanding of all the different needs. My experience is that it also leads to stronger commitment within the team and that it can lead to new great ideas that neither party would have come up with in isolation.

Finally I think it’s important to have a dedicated member of the team that has the users interests in mind. Be it a UX-designer, and interaction designer or one of the developers. Far to often this is the one interest that is forgotten altogether. One way to raise the awareness of user needs is to conduct usability tests with the whole project team as observers. That’s usually a real eye opener.

How does your projects work? Are they dominated by any particular interest or is one interest totally forgotten? How do you keep the interests balanced?

Read more

If you want to read more about the tension between different interest in a project and techniques to find a good balance, I suggest you check out the excellent book A Project Guide to UX Design. Pay special attention to Chapter 9 – Transition: From Defining to Designing, where this process is described in detail. You can also check out my full review of the book.

Although they’re all about UX Design, they’re still very different in their approach to the subject. I list them here, from the most practical to the most theoretical.

Undercover User Experience Design

Buy from Amazon.com

The first book out is Undercover User Experience Design by Cennydd Bowles and James Box. Both designers at the renowned web agency Clearleft. This book takes a pragmatic approach to the UX process. The authors recognize that it can be hard to do UX-work in an organization that has not yet realized the benefits of UX. This book is all about how you can sneak in this kind of work anyway to slowly get the organization in the know.

Undercover User Experience Design offer very practical and cheap approaches for conducting:

• User research
• Idea generation
• Prototyping
• User testing

Who is this book for

If you want a hands-on book with practical suggestions on how to perform UX work, this is a good book to start with. Also if your dealing with clients that don’t get UX or work within an organization that don’t get it, I highly recommend you buy it.

Book information

Title:

Undercover User Experience Design

Authors:

Cennydd Bowles and James Box

Publisher:

New Riders Press; 1 edition (September 27, 2010)

Pages:

192

ISBN:

0321719905

ISBN-13:

978-032171990

Buy from Amazon.com
Buy from Adlibris.com (Sweden)

Sketching User Experiences

Buy from Amazon.com

Sketching User Experiences was not at all what I expected it to be. I thought it would be a book on how to use sketches on paper for designing user interfaces. It turned out that the author Bill Buxton means sketching in a much broader sense. In his definition a sketch is:

1. Quick: quick to make
2. Timely: can be provided whenever needed
3. Inexpensive
4. Disposable
5. Plentiful
6. Clear vocabulary: the style makes it clear that it is a sketch and not a finished product
7. Distinct gesture: similar to the vocabulary, sketches are distinctly open and free
8. Minimal detail
9. Appropriate degree of refinement
10. Suggest and explore rather than confirm
11. (Intentional) Ambiguity

With this definition a sketch can be anything from a carved out piece of wood that represents a PDA to an actual sketch on a piece of paper. What he proposes is that you should always do different types of prototyping to test a product out before starting to actually create it. What this process aims for is to not only get the design right but also to create the right design.

That the book wasn’t what I expected wasn’t a bad thing. I think Buxtons thoughts on the design process is very interesting and all viable if you’re in an organization with big budgets for this kind of work. And even if you’re not, there’s still a lot of interesting ideas in it that you can apply to your work.

The book is both very practical and theoretical. While it discusses the design process from both a design, development and business perspective on a fairly theoretical level it also supplies lots of hands on examples and approaches.

Who is this book for

If you’re interested in the design process not only from a designers perspective but also from a development and business perspective this book is definitely for you. Also if you’re interested in prototyping on different levels, this might be an interesting book for you.

Book information

Title:

Sketching User Experiences

Author:

Bill Buxton

Publisher:

Morgan Kaufmann (March 30, 2007)

Pages:

448

ISBN:

9780123740373

ISBN-13:

978-0123740373

Buy from Amazon.com
Buy from Adlibris.com (Sweden)

Simple and Usable Web, Mobile, and Interaction Design

Buy from Amazon.com

The book Simple and Usable is about creating simple and usable digital products and services without dumbing down. According to Giles Colborne, the author of the book, there are essentially 4 strategies for reducing complexity without losing important features:

• Organizing
• Removing
• Hiding
• Displacing

These 4 strategies is the core of the book and they’re beautifully illustrated by applying them to the design of a complex remote control. There’s also lots of other examples.

The book is organized into 8 parts which each consists of several chapters. Each chapter is just one page long which I think is an interesting approach. It makes the book really easy to digest and also makes it easy to later look up things.

Who is this book for

If you have already have some experience in design and wants a fresh perspectives on interaction design for web and mobile platforms, this book will be good for you. Apart from the four core strategies for reducing complexity it contains a lot of other gems that you can use to improve you designs.

Book information

Title:

Simple and Usable Web, Mobile, and Interaction Design

Author:

Giles Colborne

Publisher:

New Riders Press; 1 edition (September 26, 2010)

Pages:

208

ISBN:

9780321703545

ISBN-13:

978-0321703545

Buy from Amazon.com
Buy from Adlibris.com (Sweden)

Living with Complexity

Buy from Amazon.com

Living with Complexity is the latest book by Don Norman. If you’re not already familiar with his work he’s written several seminal books on usability and is one of the pioneers in the field. (You should definitely check out The Design of Everyday Things) In Living with Complexity he addresses the fact that we live in a complex world. Norman writes about the dilemma that we crave simplicity but in reality need complexity.

A good metaphor for this is the cockpit of an airplane. For an untrained person it looks very complicated with its vast arrays of dials and instruments. For the trained pilot on the other hand, it looks very well organized and suited for their needs. A cockpit can’t be dumbed down to a single instrument, because all the instruments are needed for the pilot to take the plane safely from one airport to another. Therefore other strategies are required, training for example.

Who is this book for

This book is more academic and theoretical in nature than the others. If you’re looking for a practical book on how to do design, this book is not for you. But if you more interested in the philosophical side of design, I strongly recommend it.

Book information

Title:

Living with Complexity

Author:

Donald A. Norman

Publisher:

The MIT Press (October 31, 2010)

Pages:

280

ISBN:

0262014866

ISBN-13:

978-0262014861

Buy from Amazon.com
Buy from Adlibris.com (Sweden)

Conclusion

These were a few of the books that I’ve read recently. I think they all have something to bring to the table in their own unique ways. Personally I believe that reading books is one of the best ways to get better at what you do. It not only expands your horizons but also confirms the knowledge you already have and can spark new ideas that you can use in your work. If you’re interested in more book on usability and UX you might want to read 5 Essential Books on Usability, an article I wrote a couple of years ago.

So what do you think? Have you read any of these books or any others on UX recently?