Warning: Declaration of Thesis_Comment::start_lvl(&$output, $depth, $args) should be compatible with Walker::start_lvl(&$output, $depth = 0, $args = Array) in /home/ffoypppigph0/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/functions/comments.php on line 0

Warning: Declaration of Thesis_Comment::end_lvl(&$output, $depth, $args) should be compatible with Walker::end_lvl(&$output, $depth = 0, $args = Array) in /home/ffoypppigph0/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/functions/comments.php on line 0

Warning: Declaration of Thesis_Comment::start_el(&$output, $comment, $depth, $args) should be compatible with Walker::start_el(&$output, $object, $depth = 0, $args = Array, $current_object_id = 0) in /home/ffoypppigph0/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/functions/comments.php on line 0

Warning: Declaration of Thesis_Comment::end_el(&$output, $comment, $depth, $args) should be compatible with Walker::end_el(&$output, $object, $depth = 0, $args = Array) in /home/ffoypppigph0/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/functions/comments.php on line 0
Get The Eye http://www.gettheeye.com A series of articles about making software feel good. Fri, 09 Jul 2010 22:32:20 +0000 en-US hourly 1 https://wordpress.org/?v=5.3.17 Complex UX http://www.gettheeye.com/complex-ux/ http://www.gettheeye.com/complex-ux/#respond Sun, 27 Sep 2009 01:08:29 +0000 http://www.gettheeye.com/?p=1239 ]]>

Complex UX

I can’t use Microsoft Word anymore, or OpenOffice.org Writer, or any of the other standard word processors. When I’m writing something that really matters I just can’t use them. Adobe InDesign has ruined other word processors for me. I made my resume in InDesign, my offline checklist in InDesign, and every other document I create where how it looks matters.

I tell my friends how much I like InDesign. They try it, but they never stick with it. There are two very large reasons not to use InDesign: cost and complexity. I can’t say much about InDesign’s nearly $700 price tag. That is Adobe’s decision. But the complexity has been bothering me for a little while.

I am a strong proponent of simple software, and InDesign is anything but simple. Try to create a new document and it will ask you about the page width, columns, margins, orientation, gutter, bleed, and slug. It took a lot of people a lot of time to make InDesign.

The basic philosophy of user experience design can be reduced to a simple equation:

payoff_equation

The easiest way to solve this equation is create a small number of very simple features that people really want to use. This is the approach taken by 37 Signals and a dozen other next generation web application companies. The strategy has a lot to recommend it.

Simple software takes less time to create so if you get it wrong you’re risking less. If your customers want something else it is easy to make adjustments. You can’t charge as much for it, but you have lower cost of production and often a wider potential market.

InDesign solved the equation a differently. Their software is very difficult to use. They spent a lot of time trying to make it easier, it is still very complex. I don’t use half the features. Their learning time is very high, but they offset that with a feature list that is off the charts. There are things you can do with InDesign that you simply cannot do anywhere else.

Justification

In Microsoft Word I can make a chunk of text justified. That makes the left side of the text and the right side align evenly. The text in most books looks like that. Word does this by adding extra space between the words to make everything line up. Sometimes that means putting pretty large spaces. Typographers call it stealing sheep. It just looks ugly.

In InDesign when I make a chunk of text justified they use a special algorithm developed by Herman Zapf. It uses spacing and hyphenation of the entire paragraph to make the justification much better than Word. In addition to adding spacing between the words, InDesign will add space between the letter and even change the letter sizes. If that isn’t enough I can tweak the minimum, desired, and maximum percentage of the word spacing, letter spacing, and glyph scaling. These little changes make the text that InDesign produces feel better than Word.

justification

These little details, and a thousand others, make InDesign more difficult to use. They also make me reluctant to suggest it to anything less than pretty serious typography buffs. And that is the risk of solving the equation this way. Your audience is smaller to you must really meet their needs.

Adobe mitigated that risk with a large beta program including some of the most famous professional typographers. They worked with, quizzed, and enticed their beta users. In essence they made them partners in the product. They created an audience who could appreciate the incredible level of detail in their product.

I can’t recommend this solution to everyone. It has very high risk and takes domain knowledge, commitment, and a lot of money to succeed, but when it works it creates something wonderful. Adobe has other experiences like this. Even though editing images in Photoshop is like trying to balance a cat on your head it is still the software for professional graphic designers. It hasn’t been beat.

InDesign is a category killer. It has pushed out almost all of the competition and dominates the publishing industry. Pick up any modern book and there is a good chance it was typeset using InDesign. The learning curve is steep, but what you create with it is marvelous. And that is truly compelling pay off.

]]>
http://www.gettheeye.com/complex-ux/feed/ 0
Filtering http://www.gettheeye.com/filter/ http://www.gettheeye.com/filter/#comments Sat, 05 Sep 2009 19:13:25 +0000 http://www.gettheeye.com/?p=1173 ]]>

Filtering vs. Searching

Search and filter are full of subtle differences that change everything. Searching is fundamentally inclusive. I’m looking for something like this, please go find it. Searching is also infinitely expansive. Google searches for everything. It doesn’t restrict you to certain fields.

Filtering shows you a set of data and let’s you filter down the results. It uses an exclusionary model. Let’s look at a simple example:

Filter for:

Animal
Good pet?
Notes
Ape
No
You never know what they’re throwing.
Cat
Yes
Sleeps a lot, but furry and good to snuggle.
Dodo
No
All sold out.
Dragon
No
Difficult to procure since they don’t exist.
Duck
No
Splashes water, takes up space, and quacks at strangers.
Fish
Yes
Quiet and keeps to themselves. Terrible for cuddling.
Frog
Yes
Easy to care for and fun to leave on the dinner table.
Gerbil
Yes
Keep away from vacuum cleaners.
Hamster
Yes
Just like a gerbil, minus the tail.
Iguana
Yes
Lives for over 20 years.
Kinkajou
No
Never likes to touch the ground.
Lion
No
Not good around house guests.
Mouse
Yes
Chews on electrical wires, is easily replaced.
Parakeet
Yes
Looks pretty, doesn’t do much.
Parrot
Yes
Talks constantly, is often right.
Platypus
No
Has poisonous knees (its true, look it up).
Porcupine
Yes
Really not snugly.
Rabbit
Yes
Be ready to clean out the cage every day.
Scorpion
Yes
Eats goldfish, not great for kids.
Skunk
Yes
Remove the scent gland before bringing them home.
Slow Laurus
No
Has poisonous elbows.
Snake
Yes
Eats many of the pets on this list.
Tarantula
Yes
Scares your friends, you’ll never get a date.
Tiger
No
See Lion.
Walrus
No
You can’t keep a walrus in your bathtub.
No results found

Let’s explore this interface by trying some simple interactions. Try to find what you are looking for like this:

  1. Filter for “cat”.
  2. Clear the filter.
  3. Filter for “mouse”.

Performing the first filter is easy. You press the filter button and typed in c-a-t. Clearing the filter is trickier. The button still says filter and that implies adding a filter, but you want to remove one. We could change the name of the button to something like manage filters, but that would make it even more confusing.

Once you’ve opened the filter dialog you’ll notice that it is modal. You can’t do anything else until you get rid of it. I’m not totally opposed to modal dialogs, they work well for authentication, but I always try to use them with care.

Now you have the dialog and you might press the cancel button. After all you want to cancel the filter you just applied. However, cancel will close the dialog and change nothing. The way you clear the filter is to apply a second filter with an empty name. This idea of cancel something by applying the inverse is popular in computer programming, but it is too confusing for this UI. We could add a clear button, but that brings new confusion. Are you clearing the contents of the dialog or clearing the filter?

The fundamental problem with this type of interaction is that it has saved state. It remembers the applied filter, but doesn’t really indicate that to you the user. After you’ve filtered for cat you need to replace the filter by filtering again.

Another issue is the title of the filter dialog. Add Filter makes sense in step one, but doesn’t really make sense in step two when you are really removing the filter. These types of tricky language problems are a good indication that there is room for improvement in the interaction. Good UI is easy to explain.

Now try another test, filter for “Walrus”.

I’ll bet it was tricky to figure out how to find Walruses. The “Good Pet” checkbox is at fault. The checkbox is either on or off and that makes it impossible to filter for all animals regardless of their viability as pets. You have to know if a walrus makes a good pet before you filter. Actually, it is worse than that. You have to know if I think a walrus makes a good pet. You might have a lot of trouble finding skunk since a neighbor of mine actually did have a pet skunk.

The “Good Pet” checkbox is poor UI within this filtering interaction. We could change it to a set of radio buttons that, but these types of bad interactions are pervasive in filtering scenarios because of the nature of the interaction. When you think in an exclussionary way you tend to present your users with exclussionary options like this or that instead of inclusive ones like all. All get represented as not filtered.

This filter is an increasingly complex interaction. The more you want to do the more difficult it is to do it. Can you imagine having an advanced filter dialog? It has the same pitfalls all over again.

Filtering also has data performance problems. You have to see all the results before you filter them down. Imagine if Google showed you the entire Internet and then asked you to filter it for what you want.

Now let’s look at the same interaction using a search metaphor. We start with the search dialog which makes it very clear that this interface helps you find things:

Search for:

Animal
Good pet?
Notes
Ape
No
You never know what they’re throwing.
Cat
Yes
Sleeps a lot, but furry and good to snuggle.
Dodo
No
All sold out.
Dragon
No
Difficult to procure since they don’t exist.
Duck
No
Splashes water, takes up space, and quacks at strangers.
Fish
Yes
Quiet and keeps to themselves. Terrible for cuddling.
Frog
Yes
Easy to care for and fun to leave on the dinner table.
Gerbil
Yes
Keep away from vacuum cleaners.
Hamster
Yes
Just like a gerbil, minus the tail.
Iguana
Yes
Lives for over 20 years.
Kinkajou
No
Never likes to touch the ground.
Lion
No
Not good around house guests.
Mouse
Yes
Chews on electrical wires, is easily replaced.
Parakeet
Yes
Looks pretty, doesn’t do much.
Parrot
Yes
Talks constantly, is often right.
Platypus
No
Has poisonous knees (its true, look it up).
Porcupine
Yes
Really not snugly.
Rabbit
Yes
Be ready to clean out the cage every day.
Scorpion
Yes
Eats goldfish, not great for kids.
Skunk
Yes
Remove the scent gland before bringing them home.
Slow Laurus
No
Has poisonous elbows.
Snake
Yes
Eats many of the pets on this list.
Tarantula
Yes
Scares your friends, you’ll never get a date.
Tiger
No
See Lion.
Walrus
No
You can’t keep a walrus in your bathtub.
No results found

Try to perform a task similar task with the search dialog.

  1. Search for “Cat”.
  2. Search for “Dog”.

The interaction is much clearer. You do the search and then start a second search. There is no saved state and none of the language problems with the filter dialog. You just search for what you want. This search interaction is also much more flexible. We could support a complex search pattern or add an advanced search.

We also don’t have to worry about data overload. You never see all of the animals at once unless you want to. This isn’t as much of a problem with 25 animals, but imagine 500 or 1,000. The search expands well to larger amounts of data. You don’t have to worry that loading everything will be slow since people only see what they ask for.

Filtering works well for a small number of fixed choices applied to a small amount of data, but it doesn’t scale upwards and it isn’t as flexible. Searching is an expressive interaction that scales almost infinitely. The success of Google has made one thing abundantly clear: everyone can understand search.

Note: The image used for this article is stock photography and is not available under the creative commons license.

I know this bounces around a little on IE. I ran into a bug with IE and WordPress and I haven’t been able to resolve it. I’m working on it.

]]>
http://www.gettheeye.com/filter/feed/ 2
Speed http://www.gettheeye.com/speed/ http://www.gettheeye.com/speed/#respond Sat, 29 Aug 2009 14:07:48 +0000 http://www.gettheeye.com/?p=1148 ]]>

Speed

On the Internet speed is fundamental for usability. Even the best web pages turn awful during the few minutes you wait for them to load. Performance isn’t the exclusive purview of server administrators counting the number of processors assigned to each database. It is the responsibility of everyone working on a project. You can make your blog run faster, here’s how I did it to mine.

Get The Eye runs on WordPress. Even though WordPress does a lot to make my blog run faster, there is more for me to do. Making a blog run fast takes a little planning.

Focus

Most people enter Get The Eye through the front page. For the majority of blogs the front page is the most complex one and this blog is no exception. I focused my efforts on improving performance of that page.

Focusing performance where it really matters is part of the 80 percent strategy of performance. In performance tuning you’ll never solve 100 percent of the problem and you don’t need to try. Picking the right 80 percent is almost always enough.

Goals

I wanted each page to load in less than 2 seconds.

Performance tuning is like getting rich, you never know when you’re done. That’s why it is important to set goals. Performance goals look like, support X users per hour or make each page load in less than X seconds.

Setting goals is important, but I wanted to make them reasonable. I’m not Google. I’m a long way away from getting even 1,000 requests per hour —forget about 1,000 per minute— so I focused on making the page load faster for each user. My goal is making the front page load in under two seconds.

CSS Sprites

Many website use CSS sprites to improve performance while loading small images. Sprites combine many small image files into one big file. The size of the combined image can be smaller than the combined size of the original icons. Sprites also reduce the number of HTTP requests. I’ll talk a little more about that later in this article.

Sprites work well for smaller images, but Get The Eye uses a larger image to represent each article on the front page. When I had nine articles this was fine, but with 40 articles the combined image is over 350 kilobytes. That is way too big to load fast.

Making one image for everything was too big, but luckily I didn’t need to. Right now this site has either five or seven pages depending on the size of your browser window. You really only need the first page to load quickly so I split the sprites into three image bundles:

As the site gets larger I’ll add even more.

Fast image loading

Splitting the image up made the top page display faster, but you still had to wait for all of them to load. I took three steps to make the images load faster.

1 Deferred image loading

Smaller image bundles is a step in the right direction, but I still needed to keep users from loading all the images before they needed them. The solution was deferred image loading with JavaScript. This took a little bit of code.

var mainImage1 = new Image();
mainImage1.src = "http://images.gettheeye.com/images/main_images1.png";
jQuery(".bundleone").css({
    backgroundImage: "url('http://images.gettheeye.com/images/main_images1.png')",
    backgroundRepeat: "no-repeat"
});

With this mechanism instead of specifying the image location in the CSS I do it in JavaScript. This code gets called after the page loads. The result is that you load the images from the first page first and don’t have to wait for the others before you start using the blog.

2 Puny PNG

I still wanted to make my images smaller so I ran all my images through Puny PNG. It compressed the images without losing quality. It main my main image bundle 25 percent smaller. Final image size: 70 kilobytes

3 images.gettheyeye.com

The last change was creating images.gettheeye.com. Web browsers creates a group of workers to load the many files that make up a single web page. Normally this group has four workers in it. That means if your web page has more than four files you’ll have to wait until some of the workers are free.

However, there is a little bit of a hack here. The browser has a different group of workers for each website. By host my images on the subdomain images.gettheeye.com I can increase my group of workers from four to eight.

All of this makes the images load faster, now let’s work on the JavaScript and CSS.

YUI Compressor

When I write JavaScript and CSS I like to use generous comments. They help me remember what I was doing and help other people read my code. At run time these comments, and extra formatting, become a problem. They make the files larger for no real benefit.

The solution is YUI Compressor. This is a free tool from Yahoo that compresses JavaScript and CSS files by stripping out spaces, tabs, and comments. YUI Compressor took the 20 kilobyte source file for gettheeye.js and squished it down to a 7.5 kilobyte gettheeye.min.js. Over 50 percent smaller!

The only downside to JavaScript compression tools is the undecipherable nature of the code they output. YUI Compressor took 626 lines of JavaScript and compressed it down to one line. Great for computers, but just about impossible to read.

As an added perk YUI Compressor also find potential problems with my JavaScript before I deploy it. I integrated YUI Compressor into a simple build process with one line in a shell script:

java -jar bin/yuicompressor-2.4.2/build/yuicompressor-2.4.2.jar 
gettheeye.js -o wp-content/themes/thesis-15/custom/gettheeye.min.js

This helps make my JavaScript and CSS smaller, now let’s look at changing how those files are loaded.

Fewer HTTP requests

Your browser gets data from a web server using a protocol called HTTP. This is why website URLs start with http://. HTTP is a very stable protocol, but it is also an expensive one. Each time the browser makes a request it spends a lot of time setting up each request. CSS sprites work so well because they cut down the number of requests.

I wanted to apply this same improvement to my CSS files. There are three places you can put the CSS for your page:

  1. In an attribute like <div style=“color: red;”>
  2. In a separate CSS file like mystyles.css
  3. At the top of the page in a <style> tag

Putting the CSS in a separate file makes it easy to maintain. I can edit it using a CSS aware editor and reuse it in other pages. However, that means making separate HTTP requests for each file. Embedding the CSS in a style tag makes it load faster, but is very difficult to work with.

My solution is separate CSS files when I write the page and embedded ones when I run the page. There are some existing tools to do this like Sprockets for Ruby, but I didn’t need anything that complex. This is easy to do with a little PHP.

function echoFile($myFile) {
    $fh = fopen($myFile, 'r');
    $theData = fread($fh, filesize($myFile));
    fclose($fh);
    echo $theData;
}

This code will load a specified file and push the contents of that file back to the browser. I can call it like this for a CSS file:

echo '<style type="text/css">';
echoFile("wp-content/themes/thesis-15/custom/custom.min.css");
echo '</style>';

A small change makes it work for JavaScript:

echo '<script type="text/javascript">';
echoFile("wp-content/themes/thesis-15/custom/gettheeye.min.js");
echo '</script>';

Embedding the files requires fewer HTTP requests for new users. However, repeat users never have the chance to cache the data in their browsers. However, given the size of the files and the nature of my traffic it feels like the right solution.

Faster server-side

All of these improvements focus on making the client load the page faster. To make the server serve the page faster I added WP Super Cache. This is a WordPress plugin that caches the results of a page and serves them again from the cache. This means the page doesn’t get rebuilt for every request. It works so well that there isn’t much more to say about it. If you run WordPress go download it.

Performance tools

For most of these performance improvements I relied on Yahoo’s YSlow and Google’s Page Speed. These are both free Firefox plugins that tell you what your page is doing and suggest ways to make it faster. These two tools found most of the issues I fixed.

The results

Most of the time my top page loads in just over three seconds and makes 16 HTTP requests. Compare that with the results from some other big blogs: 32 for Smashing Magazine, 57 for CopyBlogger, and 81 for ChrisBrogan.com.

I didn’t hit my two second goal for the main page, but many of the individual articles load that fast. I’m still working on the main page. Performance tuning isn’t something you’re ever done with. There are always little tweaks you can add, but I’m feeling good about where I am now. Get The Eye is very maintainable and fast enough that it feel good to use. Now if I could just get the traffic of some of those other blogs I’ll be all set.

]]>
http://www.gettheeye.com/speed/feed/ 0
Typedia Forms http://www.gettheeye.com/typedia-forms/ http://www.gettheeye.com/typedia-forms/#comments Fri, 28 Aug 2009 00:06:22 +0000 http://www.gettheeye.com/?p=1114 ]]>

Typedia Forms Critique

I’ve written before that forms are not the place to get creative. I still believe that, but not creative doesn’t mean not good. There is a new service available called Typedia. It works like Wikipedia for fonts. It was created by Jason Santa Maria and a list of other well-known designers, so it’s no surprise that it looks good and feels good.

A few days ago I was adding the article for one of my favorite fonts (FF Scala Sans) when I stopped and took a moment to realize how great the edit form was. The interaction was smooth and clean, the fields were clear, and (with a few minor exceptions) it did what I wanted without getting in the way. So why do the forms on Typedia feel so good? Let’s take a look at some of the details.

While we look at the details I’ll also suggest some places where there is a little room for improvement. Jason Santa Maria once said that the web as an art form needs critics. I agree, so I’m adding a pinch of constructive criticism along the way.

You might want to see Typedia in action before you read the rest of the article. Go ahead, I’ll wait.

1 Vertical rhythm

vrhythm

The vertical rhythm of the form is pretty close to flawless. In a couple of places the alignment doesn’t match the rest of the page, but within the form it is super tight to the grid.

2 Strong title and subtitle

title2

The form starts off with the simple title “Edit a typeface.” This title is action-oriented, clear, and large without being imposing. The subtitle let’s me know what font I’m editing with a nice yellow background to offset it. The effect is please overall, but it does make me wonder if they could have combined the two as “Edit FF Scala Sans.”

3 Mostly unobtrusive JavaScript

add_designer

The form makes heavy use of JavaScript without overwhelming you. The dynamic components just show up when you need them. When I add a new designer I click the “Add another” link and the field fades in nicely. However, this is one of my biggest critiques of the form. There are a few places where I have to click too many times. The interaction for the “This typeface is part of a family” checkbox is a good example.

typeface_name

I click once to select it:

name_selected

The family members field fades in, which is good, but then I can’t unselect the checkbox. I have to press the change link before I can unselect. This goes against my expectations about how checkboxes work and takes a few too many clicks.

name_change_warn

I guess I understand the need to warn me about losing the family members, but this is a good example of why you should never use a warning when you mean undo.

4 Unobtrusive AJAX

ajax

The AJAX they use to suggest potential designers and type foundries has the natural ease found in every well-worn tool. There are hundreds of AJAX typeahead controls, but this one is especially nice. The only change I would make is allowing the escape key to close the popup.

5 Mixed field layout

fields

This form contains some short fields (like the typeface name) and other long ones like the background. For most of the short ones the labels are on the left and the field on the right. They mix it up to give the long ones some more space and that works very well. However, I would add a resizer to the text area. It makes it much easier to edit long background descriptions.

6 No cancel button

This is my only pure critique. They should add a cancel button. When I make changes it is a little unclear how to back them out.

There are a few places where this form gets a little too fancy, and a couple of minor bugs, but overall this is one of the best web forms I’ve ever used. Simple, clear, and it just works. You need to register before you can edit, but it’s free and well worth it. So go try it already.

The T from the Typedia logo was created by John Langdon and is used here under the Creative Commons license.

]]>
http://www.gettheeye.com/typedia-forms/feed/ 2
The Power of No http://www.gettheeye.com/no/ http://www.gettheeye.com/no/#comments Sun, 23 Aug 2009 13:55:37 +0000 http://www.gettheeye.com/?p=1095 ]]>

The Power of No

Did you have a pet when you were growing up? Please select from the following list:



















The majority of people would answer dog or cat. Smaller mamals like hamsters and gerbils also have a strong following. You could probably count the number of kinkajou owners on one hand.

Since most people choose dog or cat, and those options are on the top, are the rest hurting anything? The answer is overwhelmingly yes. Scientists have been studying how choices effect decision making for a long time. Cognitive reasercher Donald Redelmeier conducted this simple experiment with college students:

He asked students to imagine two options:

  1. Attend a lecture by an author you admire.
  2. Spend the evening in the library studying.

Most of the students chose the first option. Then he ran a second experiment with three options:

  1. Attend a lecture by an author you admire.
  2. Spend the evening in the library studying.
  3. Watch a foreign file you’ve been wanting to see.

In the second experiment twice as many students chose to stay in the library and study than in the first one. Adding just one more option changed the decision many students made. For this experiment removing the third option is a simple answer, but in real life removing options means saying no.

Many years ago I wrote a code editor as part of a larger tool that helped programmers write applications. Programmers spend hours a day working in code editors and small differences can cause debates of religious fervor. I was adding a feature that automatically finished commonly typed code blocks. For example, if you typed if it would expand to:

if () {
}

The list of phrases was configurable, but I wanted to give the user many useful defaults. I added over 50. Two of my teammates cut the list down to the 15 most common choices before the product was released.

I agonized over their change. For every phrase they removed I imagined users tearing their hair out. In my mind they cursed us for forgetting their most commonly used phrases.

And of course it didn’t work that way at all. Removing the extra options made everything much more usable. The years have given me some perspective, but I was emotionally invested at the time. Every one of those options seemed important to me. I wouldn’t have added them otherwise.

Saying no is always hard. Yes makes people happy and no makes them upset. Telling other people they can’t have something is confrontational; saying no to yourself takes will power. No is difficult, but it is also powerful. No makes your applications better.

Everything on the screen is something the user must look at and decide if they should ignore. You may have never had a pet porcupine, but you still had to read the option and decide not to select it.

]]>
http://www.gettheeye.com/no/feed/ 1
Big Friendly Buttons http://www.gettheeye.com/bfb/ http://www.gettheeye.com/bfb/#respond Sun, 16 Aug 2009 15:52:11 +0000 http://www.gettheeye.com/?p=1069 ]]>

Big Friendly Buttons

You’re a user experience designer. With every decision you make about your blog, website, or application you’re designing the way your users will experience it. And you want to give them a good experience.

User experience design is half art and half science. Good art is a matter of opinion and tastes change over time. The Mona Lisa might be timeless, but a good website today looks very different than a good website from 10 years ago. Art is constantly reinventing itself.

Science is more stable and easier to measure. With the science part of user experience design you can actually prove that one user interface is better than another. One key metric is big friendly buttons. Larger buttons are actually closer to where your mouse is. This happens because distance on your computer screen works differently than it does in real life.

fitts

User experience design professionals call this Fitts’s law. The equation scared me at first too, but the idea behind it is easy. On a computer screen the amount of time it takes to get your mouse to a control depends on how far away it is and how large it is. Basically, bigger friendlier buttons are actually closer to your mouse.

We can prove it with a simple experiment. Try to press these two buttons with your mouse:

I’ll bet the big friendly button was much easier to press and took you less time. Now let’s try a second experiment. Click the buttons again, but this time do it with your non-dominant hand. If you’re a righty switch your mouse to the left side and vice-versa. That big friendly button is even bigger and friendlier with your left hand.

Bigger doesn’t always mean larger

Big and friendly isn’t just for buttons. It works for links, menu items, and anything else your users might want to click on. Making a control larger makes it an easier target to click on, but that isn’t the only way. On a Mac they made the menu bars bigger by putting them on top of the window and giving them a hard stop. You can push your mouse well past the menu item and still hit it. The menu bar is infinitely large moving upward.

menu_bar_mac

On Windows each menu bar sits below a window title so they’re pretty small.

menu_win

Internet Explorer 8 made it even more difficult to select something by putting the menu bar below the location text field.

menu_win_ie

Making big and friendly UI

Bigger controls are easier to use, but make everything gigantic and you’ll run out of space. The hard stop on the Apple menu bar is one way of making a larger target without taking up more space on the screen. There are a few others.

Invisible borders make a big target without looking big. This technique is used on the icons view when you put your mouse over an image and see the big button border.

Sticky buttons are ones that hold onto the mouse pointer just a little longer than normal. Done right sticky buttons make the target big and friendly, but make the button too sticky and they hold the mouse pointer too long. This Flash-based sticky button demo lets you adjust the stickyness so you can see how they respond.

Expanding buttons make the target much larger by causing the button to grow when the mouse moves over it. This type of button is more popular in Flash. Here is a simple expanding button demo.

Big friendly buttons are a tool to make your applications more usable. They are one more way you can help your users forget about the interface. Leave them thinking how great your application was, not how tricky it was to click that button.

]]>
http://www.gettheeye.com/bfb/feed/ 0
Redefining Nifty http://www.gettheeye.com/nifty2/ http://www.gettheeye.com/nifty2/#respond Sat, 15 Aug 2009 02:34:46 +0000 http://www.gettheeye.com/?p=1057 ]]>

Redefining Nifty

I’ve written before about watch out for nifty. I got this advice from someone else and it was some of the best advice I received as a burgeoning designer. However, lately I’ve started to change my mind. Now I’m trying to redefine nifty.

When I first started as an engineer nifty was Hello World! It was a chance to show everyone something cool I could do. Show them how good I was. The problem is that your users don’t care how good you are or what you can and can’t do. Your users only care about how your application is going to help them. That’s why nifty normally gets in the way.

When I talk to engineers they see nifty as look how cool this is, but designers see it differently. The designers say look how smooth this is, or see how tight I got this. They revel in the little details of their designs that make them feel better to use. I recently ran into examples of each type of nifty.

Work at Play is a design firm based in Vancouver. Their site is well made and shows some impressive work, but the first page you see has a bad case of nifty. They show you six clients you can click on for samples of their work. Each client’s name is a box that flips when you click on it.

The flip here isn’t helping you. It doesn’t make the page look better or work better. It just takes time to load and distracts you from the content.

Zaum & Brown clearly saw nifty differently. At first their page looks totally normal. They have a set of boxes with information about their projects for various clients. Look for another minute and you’ll see the boxes fit your screen perfectly. Resize your browser window to watch the boxes jump and skirt around each other in a mad dash to rearrange into the perfect layout for your new window size.

I love this effect so much I made my own open source sliding resizable grid. The greatest thing about this effect is that I almost missed it. You don’t need to see the sliding squares, it just feels like the page was custom made for your screen.

This is the best type of nifty. It makes the page look better and easier to use. You don’t have to slide a horizontal scroll bar back and forth or wonder why everything is squished into 500 pixels. This effect is selfless. It makes your life easier and doesn’t need any recognition.

This type of nifty is scary. What if someone never notices all your hard work? What if they just think it worked that way by default? It s a good thing if that happens, and that is the irony. We worry that people won’t think we’re smart without something nifty, but making something clear and easy to use makes users think you’re smarter.

That’s why you need to redefine nifty. See it for what it is and how it can help you. Focus on what really helps and user and learn to feel good that they feel good.

]]>
http://www.gettheeye.com/nifty2/feed/ 0
Zack Design http://www.gettheeye.com/zack-design/ http://www.gettheeye.com/zack-design/#respond Sun, 09 Aug 2009 00:43:28 +0000 http://www.gettheeye.com/?p=1032 ]]>

Zack Design

As a designer I’m primarily an engineer. I started writing software full-time in 2000. After spending a few years as a consultant all I wanted to do was write compilers, database drivers, and other tools that are only used by other engineers. My design philosophy was simple:

Phase 1: It works so stop complaining

Life didn’t exactly go as planned and I ended up working on an IDE instead of a server. Eventually I started creating and then designing new user interfaces. I cringe in hindsight, but I thought they were very good at the time. They had all the options I wished other software packages had and every other option I could think of for good measure. I wrote one search dialog with more than 24 check boxes. It got pretty ridiculous.

A coworker sat me down and changed my world. He told me that “everything on the screen is something the user must look at, understand, and decide if they should ignore.” He didn’t realize it, but he started a major shift within me and ushered in my second phase of design thinking:

Phase 2: Works well, looks bad

In phase two I made very functional UI. I cut out some of the features that really weren’t necessary and made everything more focused. The resulting software wasn’t easy to understand, but once you learned how to use it you could get your work done. I stayed in this phase for a couple of years learning how to understand user requirements and create software that solved real problems.

That worked well enough, but it was very frustrating. My small company was bought by a big company with a human factors designer. I finished one feature after another only to have him totally redesign all of them. The worst part was that his designs were infuriatingly better than mine.

So I started reading. There are a lot of books out there about creating user interfaces and most of them tell you how to work with a specific UI framework or when to use a radio button instead of a checkbox. They focus on how to create something and not what to create. After a few years of butting my head up against this wall I finally found salvation from an entirely unexpected source: Robert Bringhurst.

Mr. Bringhurst wrote The Elements of Typographic Style. It is all about choosing and arranging fonts. I started out just reading it for fun, but it changed everything and pushed me into my third phase of design thinking:

Phase 3: Functional beauty

The Elements of Typographic Style doesn’t have anything to say about computer software. Computers only show up in a few passing references. Instead it focuses on why certain configurations of type and space feel better than others. It taught me why some book layouts are difficult to read and others are easy.

That is what user experience design really is; creating something that feels good and makes sense the first time you use it. Everything on the screen needs to work well by itself, but it also must fit harmoniously with everything else. It’s hard work, but it’s worth it. When something feels better to use more people will use it.

So here I am in my third phase of design thinking. This site is the culmination of that phase, and I’m just now realizing I didn’t do it very well. There is a whole lot of nifty, but not enough simple-to-use good advice. It doesn’t feel good enough to use.

Realization is the gift of concentration plus feedback. When you work hard enough at something you’re sometimes rewarded with a flash of insight that it isn’t what you thought it was all along. I thought this site was my playground and I’ve realized it can be so much more. I think the fourth phase of my design philosophy is coming soon and creating this site is making that happen.

]]>
http://www.gettheeye.com/zack-design/feed/ 0
More Grid Love http://www.gettheeye.com/mg/ http://www.gettheeye.com/mg/#respond Sun, 09 Aug 2009 00:21:40 +0000 http://www.gettheeye.com/?p=1021 ]]>

More Grid Love

I recently had a review of Get The Eye with Justin Evans from Stress Limit Design. Justin was, as always, amazingly helpful. One of his big pieces of feedback was that I wasn’t following my own advice of keeping things simple and easy to use. This site started as a place for me to play with different design ideas and layouts. I never thought I’d write more than nine articles. Over time it became so messy that navigating from one page to another felt like changing channels from CNN to PBS to HBO. Nothing really matched.

Around the same time that Justin reviewed my work I finished reading Grid Systems by Kimberly Elam. The two of them convinced me to create a standard grid and go back over my previous articles to make sure everything was super tight to the new grid.

Check out the grid:

I finished the first part of this redesign work yesterday. It was a long and fiddly process. There is just no easy answer for aligning to a grid in HTML. HTML is dynamic and doesn’t give you anywhere near the control over your layout as a tool like Adobe InDesign. I spent a lot of time with Gridfox making minor tweaks so everything lines up.

So was it worth it? It makes the site feel neater which makes it feel unified. Each page feels like it belongs. The grid made it possible to add the new navigation bar and make it easier for you to find your way around. Grids generally make it easier to navigate because they let you build up a familiarity. You get used to where things are so you don’t have to spend as much time looking for them. The grid alignment also makes the site tighter and more professional. But that doesn’t answer the real question.

Another way of asking was it worth it is asking, will most people notice? The answer is probably no and yes. I don’t think anyone will install Gridfox and check each of my pages, but they will notice that the site feels better to use. These types of improvement are very difficult to quantify, but they are the difference between a site that feels good and one that doesn’t.

This new grid also gives me a better way to move forward. The confines of the grid are more freeing. I can spend more time being creative and less time worrying that things aren’t lining up.

Learning to really love the grid might be the next big step for me as a designer. I hope it makes the site better. More big changes are coming.

]]>
http://www.gettheeye.com/mg/feed/ 0
Framing http://www.gettheeye.com/framing/ http://www.gettheeye.com/framing/#respond Sat, 01 Aug 2009 21:01:54 +0000 http://www.gettheeye.com/?p=921 ]]>

Framing

rembrandt_storm

In the Isabella Stewart Gardner Museum in Boston there is a large empty frame with a small note telling of the theft of The Storm on the Sea of Galilee by Rembrandt. The painting is over six feet tall and frame extends well higher than I can reach. It is a heavy wooden affair with gilded corners and handcrafted joints.

In the absence of the painting the frame itself has become the exhibit. People stop to read the story of the thieves and marvel at the empty frame. It isn’t significantly different from the others in the gallery, but being on the wall empty gives you a chance to really see it.

vs

The frame is normally a guide directing you to the destination. However, when there isn’t clear content the frame can become the destination. In computer software the frame contains useful options like menu bars, toolbars, and extra links. Most web applications have heavier frames than their desktop counterparts. I edit most of my blog posts in SlickEdit. It is my favorite editor in part because it has hardly any frame at all. I can expand the content I’m working on and see as much of it as my screen allows. Products like WriteRoom offer the same feeling for a less technical audience.

Most web pages use an overbearing active frame and blogs are the worst. The content is surrounded by best of posts, Twitter links, and other bric-a-brac. The Thesis Theme (which I’m using on this site) surrounds the page on two sides with navigation elements and extras that try to pull and guide you through other content available on the site. There are other configurations that surround the content on all four sides. With a header, a footer, and two sidebars this pattern is common for blogs.

The transition from a larger frame to the smaller one signals a transition from author to reader. On a desktop you’re the author and the frame disappears. The content you’re creating is the entire focus of your attention. On the web you become the reader. The author tries to guide you through the content they want you to see. They fill the frame with extra information and links to keep you clicking. Letting the author guide you through the content is fine, but when the frame overwhelms the picture you have a problem.

free_culture

Tools like the Adobe Acrobat Reader blur the line. They make you the active reader. You choose your own content and don’t need them to guide you to a different file. The navigation is there if you need it, but it isn’t in your face. It takes an opt-in approach.

When you design your interfaces there are a few different frame metaphors to choose from.

Invisible frames let the content stand completely on its own. These frames do nothing to distract you from the middle and are the choice of WriteRoom where the software is meant to present a little distraction as possible.

Minimalist frames, like the ones in SlickEdit and Adobe Acrobat, give you the chance to add a little functionality with a minimum of distraction.

Dynamic frames slide in and out as needed; normally when the mouse gets close to them.

Active frames provide additional information like links and other data that is almost as important as the content.

Fluid frames allow the content to interact with and sometimes extend beyond the frame. Fluid frames provide the interactivity of active frames without the hard border. Jason Santa Maria has some excellent examples of fluid frames on his articles Royal, Pretty Sketchy, and Oh Snap.

Overwhelming frames take up more space and attention than the content in the middle. Creating such a large distraction from the content is rarely a good idea.

Appropriate framing helps your user understand the nature of your application. It sets their expectations. Providing extra information is the frame is OK, but never forget the cardinal rule: content is king. Hopefully The Storm On The Sea of Galilee will be returned to the museum one day. When that happens people will once again look at the painting instead of the frame.

And in case you’re curious, the painting linking to this article from the main page is Escapando de la crítica, 1874 by Pere Borrell del Caso.

]]>
http://www.gettheeye.com/framing/feed/ 0