13
Nov
2009

Cooking a Website

I’m not really an expert at cooking but I do love to watch professionals cook. I mean Michelin star level professionals. What these guys produce is really amazing and its also interesting to see just how much work some of these dishes involve and how many unique techniques are used. It’s not just food really, it’s art. Some art is there to be seen: paintings, some art is to be listened to: music, and some art is to be tasted. Anyhow… what does all this have to do with websites?

Well, what I do find interesting is that I’m seeing several parallels between cooking and designing interfaces and websites. Let’s see…

6
Nov
2009

A Better Distribution Channel for Desktop Apps

My Tuesday’s post was about the iPhone and what it does right. Apart from being a usable device it has another great feature: the App Store. You can browse all the apps available for the phone and get them with just a tap of the finger (or two, together with password input to be precise). The apps you download are also updated through the App Store — so whenever there’s a new version of the app out, you see a little number pop up above the App Store icon. That number says: you’ve got a new update available. Going to the update window lets you see what’s been updated and download the update.

This is a great delivery channel for apps. There are two big benefits to this approach: 1) you get to browse all the apps available for your platform in one place and 2) you can keep all your apps up to date with ease.

3
Nov
2009

3 Things Phone Manufacturers Should Get Right to Beat the iPhone

It’s interesting to see the latest developments in the phone market. Everyone is scrambling to match the iPhone in form and function in order to hold on to their market share. Sure, the iPhone is a high end phone, so not everyone is going for it, but it at is also a very very successful phone that gets a lot of things right, and the competition knows it.

Which is why we’re seeing all those Storms, Pres and Droids on the market lately. They come close, but always seem to fall short. It’s not the features — these phones usually have more features and better specs than Apple’s offering — it’s something else. To me, it all boils down to just 3 things. If any phone manufacturer gets these 3 things right, they’ll beat the iPhone at its own game:

26
Oct
2009

Mouse Cursor Affordance

One important interaction indicator on the web is the mouse cursor. The default cursor arrow changes into a pointing hand when you hover over links for example, which indicates they are indeed links and can be clicked on. It also changes into other things to differentiate context, for example it can change into a text input cursor when hovering over text fields to indicate you can type there.

When styling your website with CSS, in some cases you may lose the correct cursor type for certain elements. It’s important to retain this indicator as it will inform the user about how the item they’re hovering over can be used (see affordances). The solution is easy: if the cursor type is wrong, specify it using the CSS “cursor” property.

23
Oct
2009

Everyday Usability Heuristics: Visibility Of System Status

Guest post by Ondřej Válka

Ondřej is a freelance front-end Web developer & designer, currently
helping Pixmac to make its front-end bulletproof.

Two weeks ago, I was watching my 45-year old father browsing the Internet. Every time I watch him I learn a lesson in usability. I’m sure you know with situations like this one – valuable opportunities to learn from the ordinary users for whom we design.

As he is using Windows XP the very first thing he did was that he ran Firefox clicking an icon on the desktop. No response. Nothing happened so after a few seconds he clicked the icon one more time. With his eyes focused on the Firefox icon he clicked the icon again. Everything he got was three Firefox windows opened. Sounds familiar?

5
Oct
2009

Remember Me

Last month David Heinemeier Hansson posted a micropost on the 37signals blog asking if it’s time to kill off the “Remember me” checkbox on login forms and simply assume that the user wants the app to remember them the next time they load it, automatically logging them in.

I think this falls in the same category as Jakob Nielsen’s recent suggestion to drop password masking. Yes, it would make life easier in many cases, but it would also pose problems. The consensus seems to be that the problems outweigh the benefits. Forgetting to log out and thus compromising your data is worse than having to check a “Remember me” box.

But this isn’t the only solution to the problem. There is another way you can do this that leans closer to the automatic remembering, but doesn’t go quite as far:

2
Oct
2009

Restraint

Restraint in design
There is one attribute of good design that I often see overlooked: restraint. Restraint in design is the quality of holding yourself back and implementing something which solves the problem in the simplest way possible. Oftentimes designers want to show off, imprint their own identity on a piece of work or simply get carried away, producing work that is good but losing simplicity and elegance in the process.
Giving your work an identity certainly doesn’t mean you’re losing restraint — it’s actually a good practice — but it may lead down the road of implementing too many design elements for the sake of design elements — things that don’t really need to be there in order to solve the problem. Instead, apply your identity to the core elements — things that you absolutely cannot take out — and throw away the rest. What you’ll achieve is a product that’s simple, yet bears your own mark upon it.
Let’s take a look at a set of modern mobile phones:
[image]
You can see how one phone stands out from the rest: the iPhone. Ok, an obvious example, but it’s only obvious because it’s good.
The iPhone uses the minimal design possible. There is only one button and the whole phone is essentially just one big display. Apple always use simple geometric shapes — there are no unique curves or design elements sticking out — it’s just symmetrical curves, circles, rectangles and lines carefully arranged to form their iconic minimalist, industrial design.
The other phones may feature fashionable, sleek shapes, but they lack simplicity because these shapes are unique to each phone and there are too many elements involved. There is the keyboard, the accept and decline buttons, the Ok and Cancel buttons, menu buttons in some cases, and also the button wheel. The lines and curves are not made out of simple symmetrical shapes — they’re unique to each phone. Yes, this makes the new phones look sleek, but it also makes them look less iconic and less memorable when compared to the brilliant simplicity of Apple’s design that uses only the simplest shapes.
You can sketch the iPhone with just a few lines and the resulting shape is clearly identifiable.
[image]
This is minimalist design. It’s iconic. Of course minimalism isn’t a requirement for creating successful designs but by reducing the phone’s construction to the bare minimum and composing it out of simple geometric shapes Apple consistently delivers products that stand out and products that people love. The same design principles are seen in all their work: iPods, iMacs, MacBooks and so on.
Restraint plays a huge part in this because you have to stop yourself and think: hang on — I don’t need all these lines and shapes. I don’t need this button here. I can make this whole section out of one piece of material. I don’t need to use these complex lines where simpler shapes would suffice. And so on. Restrain yourself — think about accomplishing your goal with less — what you’ll achieve is simplicity.
Let’s take a look at some more examples of restraint. This is Dan Cederholm’s website SimpleBits:
[image]
It’s not spartan by any means — there are visual elements throughout, like the subtle background texture in the header and the lighter gradient at the top of the content — but it would be impossible to call it anything other than simple and clean. It’s a beautiful minimalist design that works.
Is restraint always good? No, it only works in the right circumstances. Sometimes, you need to forget restraint and embrace complexity. Some work just needs to be complex — needs to be unique, elaborate and remarkable. Not all design should be utilitarian and industrial, some things are made for self expression and art.
For example, portfolio sites of artists and web designers are usually very intense in use of visuals and eye candy. Here are a couple of great examples:
[image]
[image]
This isn’t simply design — it’s art. The aim here isn’t to make a clean and usable website, but to create a unique, branded identity and to impress and delight the sites’ visitors.
On the Red Square, in Moscow, stands an impressive cathedral: Saint Basil’s Cathedral. The cathedral was commissioned by Ivan IV (Ivan the Terrible) and was built in 1561. It’s a very remarkable building, with a unique design and several very colourful and intricately decorated domes. There is a legend that says that the architect of this cathedral, Postnik Yakovlev, was blinded after its construction by Ivan’s orders to ensure that he doesn’t build anything more magnificent for anyone else.
And so it is with work like this. Forget restraint and create something truly spectacular — something that inspires and takes your breath away, something that nobody else can replicate because of its intricacy and unique technique involved in its design.

There is one attribute of good design that I often see overlooked: restraint. Restraint in design is the quality of holding yourself back and implementing something which solves the problem in the simplest way possible. Oftentimes designers want to show off, imprint their own identity on a piece of work or simply get carried away, producing work that is good but losing simplicity and elegance in the process.

Giving your work an identity certainly doesn’t mean you’re losing restraint — it’s actually a good practice — but it may lead down the road of implementing too many design elements for the sake of design elements — things that don’t really need to be there in order to solve the problem. Instead, apply your identity to the core elements — things that you absolutely cannot take out — and throw away the rest. What you’ll achieve is a product that’s simple, yet bears your own mark upon it.

Let’s take a look at a set of modern mobile phones:

You can see how one phone stands out from the rest: the iPhone. Ok, an obvious example, but it’s only obvious because it’s good.

9
Sep
2009

Contextual Interviews and Ethnography: Two Different Types of Home Visits

Guest post by Demetrius Madrigal

Demetrius is a co-founder of ActiveComm Labs, who specialize in user experience and human factors research.

It’s important to make a distinction between these two different research methodologies and the kind of data you get from each. Both involve visiting a participant in their homes or other environments but they are distinctly different. Contextual interviews, which rely on self-report data, and ethnography, focusing on objective behavioral data, are sometimes confused as being the same, but they actually provide different types of data and have different strengths. We’ve had clients engage with us requesting ethnography when what they actually wanted was a contextual interview in a person’s home.

I always make a point of clarifying what they mean as the difference in price and approach between the two can be dramatic. Understanding the differences between these two types of methodologies can help you to more effectively plan your user research, maximizing the value of the research while keeping cost in line. To cut to the chase, here are the different research approaches and their strengths and weaknesses.

24
Aug
2009

Should There Be a Unified Set of Styles For Web Interfaces?

If we look at interfaces in operating systems, we’ll see that there is usually a set of unified interface elements that’s shared not only by the operating system’s own tools, but also by third party programs running on that operating system.

For example, Apple’s OS X had a UI called “Aqua” for quite a few years now that gave the buttons and other interface elements a certain look a feel — a liquid look for the buttons and a more metallic/plastic look for the texture of the windows themselves. They’re now moving towards a more aluminum look that will bring it closer to the look and feel of their hardware products.

6
Aug
2009

OpenHallway — A New Usability Testing App

We’re starting to see more and more new tools appearing for the purpose of conducting usability testing. A while back I wrote a review of UserFly, a web app that lets you record your visitors actions, from mouse movements to clicks and keyboard strokes, and then play it back as if you’re sitting behind the user’s screen.

The biggest problem with UserFly is that the information you receive is fairly basic. Yes, it’s objective — you see exactly what the users are doing, without the pressure of a developer standing behind their shoulder examining their every action. But at the same time, it’s very one dimensional — you don’t know what the user is thinking and you don’t know how they feel — you can only guess.

OpenHallway is a tool that lets you perform usability testing without having to be in the same room as the tester.

Credits: RSS and guest post icons designed by Function.
Powered by WordPress.