Usability is not about a single page

I often get asked if I can look at a certain usability problem on someones screen. “Where should I put this button?”, “should I place this option in a modal window or a panel which slides down?” or “What information and actions should I place in this overview?”. Probably good questions, but the problem or solution may not even be on that page. There may be something more fundamentally wrong.

Usability is not only about how you interact with a single page, it’s also about the flow of an application or website. Which page sends you to which page. Should you even be directed to another page? How many pages does someone have see to achieve something?

When the flow is right you can focus on the pages and their problems. But when the flow is off it’s hard to create something that feels good to use.

The general rule is that short flows are good, but sometimes things are more clear if you break them up. Just remember that sometimes the problem isn’t on that single page.

People are people

We all know the irritating client. The one who doesn’t seem to get what you’re doing. Who you need to tell everything twice (or more). Who’s e-mails you don’t want to show up in your inbox. You can point out all their faults and maybe even regard them as plain stupid.

But consider this. That client is a person. He was born. Has a mother and father, and those might not be alive anymore. He has laughed and cried. Maybe has kids. Went on vacation and got drunk with friends. He went to school and probably did some crazy things. He has friends who invite him over. Someone looks up to him. He is loved.

Because we only interact with clients on a professional level it’s easy to forget that they are people just like us. That they’ve lived a life too. But we also tend to forget this when interacting with store clerks or those, not so supportive, support people on the phone.

Even if a client is not the best match to work with you, he still deserves respect. He’s a person, just like you. So treat him how you’d like to be treated. Don’t forget: People are people.

Consider small things. Consider people

A nice new post by Russ Unger on the Cognition blog talks about how small things can have a big impact on many other things.

“It’s really easy to forget about the tiny details and remain focused on what matters to us. If we take a few small moments out of our days to focus on the really small things, it can have a much larger impact on so many levels. It can be a ripple effect that begins to allow you to spend some quality time and energy on the really big, fun-to-solve problems, without worrying about the pinprick distractions that strive to ruin our flow.”

Russ also touches on another subject.

“Do we consider whatever load someone else is bearing before we ask for “just 10 minutes” of their precious time?”

This is important. Work is not only about you. And it’s not only about how busy someone is.

Think about all the products you love. Those are all about making your life easier. The people creating them were carefully considering you, the user, when designing it. This seems obvious but do you consider your users, or do you just make something that works?

Going back to the small things, carefully considering your user (or the next person that handles the thing) can go a long way.

A designer creating a Photoshop document while considering the HTML someone else needs to code. Creating HTML while considering the developer which needs to insert code into that document. A developer creating a CMS that a client needs to use. The second person in the chain will definitely thank the first.

More concrete. Your developing a PHP class other people will have to use. In that case please make the interface as simple and clean as possible. Consider how people will be using that class and what they want to achieve. Make sure that the use of the class is as simple as possible. If something that takes three method calls can be consolidated in a single method then create that single method.

It’s these thing that makes me like things like Ruby on Rails and LESS so much. The people who created it carefully considered how people would be using the technology. And that’s the technology that’s nice to use and has staying power.

Please consider the people. Your collegues, your internet friends, your open-source buddies and your clients.

Quick tip: LESS.js in development and watch mode

If you run LESS.js in a HTML5 browser it will use local storage to cache the generated CSS. Great for normal visitors, but frustrating when you’re developing since you won’t immediately see the changes you made to the script.

Luckily the following lines of javascript will load less.js in development and watch mode. In development mode CSS won’t be cached and the watch mode should auto refresh your CSS when you save your .less file (so no browser refresh is needed).

<script type="text/javascript">
     less.env = "development";
     less.watch();
</script>

Just remember to remove the code when the site goes live. You can always enter the lines into your javascript console if you need to test something.

Unfortunately for me the watch mode doesn’t seem to work if you work online.

More semantic HTML with LESS CSS

In my ongoing quest to make the web a better place, or at least in the places I have a hand in, I was looking for a way to easily create CSS for POSH HTML. And I found a way in the shape of LESS. LESS calls itself “the dynamic stylesheet language”. And they don’t lie.

I had come across LESS before, but never really paid attention. I loved creating well structured CSS for my HTML, but never realised that my HTML was lacking.

My HTML was usually a trade-off between ease of development and semantics. I usually use a hand made CSS grid system. That makes it easy to divide the layout in columns by applying a .col2 class to a div that needs to be 2 columns wide. It would mean a lot of repeated lines of CSS if those rules would needed to be specified on every selector in the CSS. The result was that a lot of those non-semantic classes ended up in the HTML.

But now there don’t have to be anymore trade-offs because of LESS. And it has been a while since I was this excited about a web technology.

LESS allows you to create code very similar to CSS which compiles into valid CSS. It has many great features like variables, nested declarations, calculations and color functions, but there is one feature which is really going to change the way I work. And that feature is Mixins.

Say we have to following markup:

<section>
      <article></article>
      <aside></aside>
</section>

And the following CSS:

.col1, .col2{
      float: left;
      padding: 0 20px;
}
.col1{
      width: 280px;
}.
.col2{
      width: 600px;
}

The goal is to have to make the article 2 colums wide and the aside 1 column. In the old days that, to me, would mean giving the article a class=”col2” and the aside a class=”col1”. But now behold the power of mixins! In the LESS CSS document declare just this:

article{
      .col2;
}
aside{
      .col1;
}

A mixin basically means you can reuse previous declarations by simply calling them within another declaration. After compiling the LESS into CSS all the styles associated with .col2 would have been inserted into to article selector and the .col1 rules into the aside selector. Pretty awesome! Even better is that the HTML can be kept completely clean of non-semantic classes!

Think about how you could use this to keep .clearfix out of your HTML. Or to easily declare border-radius (with all the vendor prefixes) on elements by just inserting .rounded-corners;. You van even declare parameters for mixins. That means that you can use our new .rounded-corners class like this: .rounded-corners(10); to give the element a border-radius of 10px;.

You should definitely read up on LESS CSS on lesscss.org!

Don’t ever stop learning

The great thing about problems is that there is usually a solution, The fun in a lot of jobs is finding the solution to these problems. This solution is found by doing research or tapping into the experience you have build in the past. Solution found, implemented and done. Let’s move on.

Finding solutions is great but unfortunately we have a tendency to reuse solutions. Usually because it’s easy. We know that something will probably work so why try to find another solution. Oh man, how I hate that.

Just because you have found a solution doesn’t mean you found the best solution or that it will work good on a similar problem. And finding the best solution now doesn’t mean it will still be the best solution next month. The world moves fast and we need to keep up. We need to keep on learning and broaden our experience.

Look back at work you’ve done 6 months ago and please tell me you’re scared of what you created. Please tell me you’ve got no idea of how you could have ever made something like that. That you’ve honestly grown. Because if not, you’re not learning enough. Really.

The problem of Internet Explorer

Today I came across this nice looking comparison of Internet Explorer 9 and Firefox 4. It’s conclusion is that Firefox 4 is many times more modern than IE9. In some cases even Firefox 3.5 (now 2 years old) is more modern than IE9 in terms of web standards support.

Internet Explorer 9 vs. Firefox 4

Frustrating? Yes. IE9 is something we’ll have to deal with for some time. Every feature it’s missing is holding the web back. I’m amazed that one of the biggest tech companies in the world can’t build a better browser than some open-source platforms. *

But we have to stop whining. IE9 is the best Internet Explorer since the Big Bang. And I recently realized that IE itself is not the problem. The fact that it takes a long time for a new version to arrive is the problem. IE6 to IE7 took 5 years. IE7 to IE8 took 2,5 years. IE9 will probably be released 2 years after IE8. So new browsers seem to be released faster, but if Microsoft wants to stay in this game and really help the web forward they should release a new (or .5) version every year.

How awesome would it be if an even more standards compliant IE10 was released around march 2012? Google’s Chrome was first released in september 2008. During it’s 2,5 year run it has already seen 9 releases and is regarded as one of the best browsers around.

So please Microsoft. Please release newer versions of Internet Explorer faster. Please improve it’s webstandards support. Please move the web forward!

* well, in the case of Microsoft I’m not that amazed. Please Microsoft surprise me for once!

Is Facebook now the internet?

The internet is a marvelous thing. I would count it as one of mankinds greatest creations. It’s a great open platform for business, information, leisure and social interaction. The internet has spawned amazing websites such as Amazon, Wikipedia, Youtube, Google, Twitter and Facebook.

My hero Ryan Carson has now boldly stated that the internet is the internet no more. He simply says that “Facebook.com is now the internet”. And while I agree with his arguments, his statement sends shivers down my spine.

He bases his statement on big companies which communicate their Facebook page as their main web location more and more. This seems to make their website obsolete. It raises the question if there still is a place for company websites.

I’m all for change, but in this case it scares me a bit. But I’m not all doom and gloom so let me share some thoughts.

Why are the brands so high on Facebook?

This is simple. Facebook is where the eyeballs are, plain and simple. You can’t stay away from a platform with over 500 million users. The fact that sharing amongst friends is so easy and powerful gives a great opportunity the expand your brand. Consumers also like the easy interaction they can have with a company. Being big on Facebook makes you seem more accessible as a company.

Facebook limits creativity

As a designer and developer moving away from total control is frightening and limiting. You need to work with what Facebook gives you. Custom CSS and HTML are not an option. And it’s not hard to see a lot more restrictions.

Restrictions empowers creativity

On the flip side, working with restrictions forces you to be creative. I’m sure a lot of great and currently unimaginable solutions will be created to get the best out of the platform.

Limits the experience

To me this is the biggest problem. Brand websites are all about the experience. Facebook limits the brand experience in big ways. A brand’s Facebook page is not that different from your friends Facebook profile. The creative solutions some companies will develop may create a better experience, but you are still at the mercy of Facebook.

You can say goodbye to all color theory and typographic knowledge. You have no control over how your page will display in Facebook’s app or on a mobile phone.

When you don’t have full control over the experience, it’s very hard to create an experience which helps you to achieve your clients goals. And those goals are what’s really important to a client.

What we need to do

As web professionals we need to learn from why companies are moving to Facebook. It’s because they are missing something in their current websites. Our job is to find those missing pieces and incorporate them better in the sites we create. A lot of consumer brand websites are all experience, but no content or interaction. Others do offer content, but are still very limited on interaction. Facebook solves the interaction part, but if that is what’s missing, why not give people that within a carefully crafted experience? And it’s funny that it’s Facebook that gives you the tools to do just that.

My predictions

Facebook won’t go away, but so won’t company websites. Facebook is all the rage right now and rightfully so. I love Facebook, but no matter how you look at it, it’s still a website. And every website has it’s limitations. And the great internet, which has given us means to spread knowledge, to entertain, to do new business and stuff we can’t even imagine yet can’t fit within limitations. Facebook can help us achieve goals, but it is not the goal itself.

I love to learn

Okay, here we go. I’ve finally started a true personal blog. After fiddling around with Tumbler it is time to get a bit more serious about blogging. Why? Because I love to learn. This blog will help me learn and practice more.

My English (and Dutch) are pretty bad. Blogging is a pretty brute-force way to practice my language skills. I would like to write concise information and learning that while (hopefully) creating some useful content is more motivating than several writing exercises.

I always want to try out new HTML5, CSS3 and jQuery tricks. Client work isn’t always the best place to try stuff out so this blog will be a nice public place to do so. I also want to try and create custom designed blog posts to try out some of these ideas.

Learning WordPress is another goal. It’s the web’s biggest blogging (and website) platform, so there must be some things I can take away from it’s back-end and inner-workings.

And last but definitely not least this will be a space in which I’ll explore ideas. Ideas about everything I’m interested in. Hopefully receiving feedback in the process. Getting things out of my head, making them clearer and sharing them will definitely learn me a lot. And that’s exactly what I love!