I certainly didn’t intend to insult anyone, but it proves that this problem isn’t going away soon. Proper procedures won’t be put in place until programmers are self-aware.

Consumers don’t think about how things work on the inside. Your interface should function as a magic box. Push a button and something predictable happens.

The brake pedal on your car is a great example. Someone who doesn’t understand how brakes work may envision the pedal pushing a lever which exerts sideways pressure on the wheels, causing the car to slow. Their mental model says that pushing this button causes the car to slow down.

The real implementation model of a brake system is far more complex. That complexity shouldn’t translate into the interface.

Alan Cooper, in his book About Face 3, states:

User interfaces and interactions designed by engineers, who know precisely how software works, quite often lead to a represented model that is very consistent with its implementation model. To the engineers, such models are logical, truthful, and accurate; unfortunately, they are not very intelligent or effective for users. The majority of users don’t much care how a program is actually implemented.

Related posts:

1. Why you should keep programmers away from your GUI.
2. New Browser Windows
3. Design Is Communication
4. Why Flash is Mostly Bad

Programmers don’t understand the Mental Models of their consumers. They are so entrenched in the geeky details, that they can’t step back and look at the product through their customers eyes.

A user interface does not need to reveal the inner workings of the product. Rather, the user interface should expose feedback about the actions that the person expects to happen.

For example, a landline telephone uses a very different protocol for transmitting voice than a cellular telephone does. To the consumer, these are variants on the same product. They exist for the same purpose. However, many programmers would consider these to be entirely different products.

It’s important for designers to be involved in deciding what features should be implemented, as well as deciding how the interaction will work, before any technical plans/code are put in place. Otherwise, you may end up with a website indistinguishable from online-banking websites.

Related posts:

1. Why is Apple discouraging interface consistency?
2. Implementation Model vs. Mental Model
3. Forgiveness
4. Design Last Design

Abstract from Patent 6,233,682:

The system and method permit the purchase of audio music files over the Internet. The PC user logs onto the vendor’s web site and browses the songs available for purchase. The songs can be arranged by artist, music style, etc., as mentioned above. Further, the vendor can provide suggestions on the web site, directing the PC user to songs that might be desirable, based on that PC user’s previous purchases, her indicated preferences, popularity of the songs, paid advertising and the like.  If interested in a song, the PC user has the option of clicking on a song to “pre-listen” to it–hearing a 20-second clip, for example. [...]

As is true of many software patents, this is just bogus.  They’ve patented the traditional ecommerce workflow, specifically targeting the music industry.  The patent was filed in 2000, one year prior to iTunes premier.

If I had the rights to a similar patent in the t-shirt niche, you couldn’t open a t-shirt website without infringement.  You couldn’t organize by brand or designer.  You couldn’t recommend other products to upsell based on shopping habits. Heck, you couldn’t even show a preview image of the design on the front.

After a little research, I couldn’t determine exactly what business Sharing Sound, LLC is in.  I’m assuming they are in the business of litigation.

Related posts:

1. Why is Apple discouraging interface consistency?
2. Blades and Razors / Razors and Blades
3. 10 Tips to Increased Ecommerce Profits

Visual design is not just about look and feel. It’s about using visual elements to emphasize the meaning of the content. I haven’t found themes which really pay attention to this detail as well as I would like.

So, as any obsessive designer would do, I created my own.

What the content means:

• Available items should be unstyled. These are the baseline design contrast.
• Upcoming items should be slightly emphasized. They aren’t any more important than other available items, but do demand our attention. I’ve bolded them.
• Overdue items are bold and red, which immediately grabs your attention.
• Unavailable items should be de-emphasized or hidden altogether, depending on the context.
• Completed items are demphasized with a strikeout and italicized. I de-emphasized them to stay out of our primary focus, but italicized them to easily differentiate them from blocked tasks.
• Groupings follow the same rules, unstyled for available and demphasized for blocked.

Visual Style

I didn’t do anything fancy with the style. I switched to using Helvetica Neue for all text as it has a clean variety of font variations.

I switched to a subtle blue/green theme so that I can use a white background for emphasis in some special situations.

Download this Theme

This theme is available for download, please leave your feedback in the comments below.

Related posts:

1. Blurry, Colorblind and Brilliant
2. Poor Internal UX Design Causes Zappos $1.6 Million
3. Typography on the Web
4. Web Form Fundamentals

Adobe’s own statistics on Flash’s market penetration claim 99 percent penetration as of last month. That’s because, according to their survey methodology, they’re only counting “PCs” — which ignores the entire sort of devices which have brought about this debate. Adobe is arguing that Flash is installed on 99 percent of all web browsers that support Flash, not 99 percent of all web browsers.

If you wanted to build an application to reach the masses, which of these options would you pick?

Related posts:

1. Why Flash is Mostly Bad
2. Dear HTML, CSS, and JavaScript: Flash is more flexible
3. Embedded Fonts – A Bad Idea
4. IE8 – Trying to become a real browser?

#23 – Use dark gray text instead of black text on a white background;

My intention here was to point out that a subtle lightening of your black text on a white background actually helps improve legibility.    True black text on a true white background is too high of a contrast for everyday reading.  Subtlety is key.

An added bonus to this method is that it gives you the ability to use contrast to your advantage.  For example, you could bold a phrase in the middle of the paragraph and bring it’s color up to true black for an added “pop.”

This also makes the text appear more natural.  In our everyday reading off of the computer we rarely see true black on white text anywhere.

Newspapers use a dark grey text on a light grey background.  Most printed books are printed with a dark grey on white as well.

Related posts:

1. Typography on the Web
2. Is Blue Still The Best Color For Links?
3. 50 Tips To A User Friendly Website
4. Introducing the “Divergence” Omnifocus Theme

I use the following “tools” everyday without fail, and I could not run my business without them.  I’ve listed the most important  tools first.

WARNING: If you are here looking for the latest in cool technology, this is not the place for you.

1. A brain. Preferably your own, or one that belongs to someone who works for you.  Get away from the computer and think.  Take a walk outside, the fresh air and change of scenery can be inspiring.  The hipster design tools don’t separate you from your competition, your brain does.  Use it, use it well.
2. A stack of paper. Drawing on paper is definitely the fastest way for me to get ideas out of my head and into the hands of our clients. I use dot-grid paper you can download for free from our site.
3. A thick marker. Sharpie brand, or similar.  Fine tipped pens and pencils encourage you to dig into details which aren’t important at the conceptual stage.  The broad strokes of a thick marker force you to think about the big picture.
4. A trash can. Recycling is better.   It’s ok to sketch an idea that doesn’t work.  Drawing is often inspiration in itself.  Draw ‘em and Toss ‘em until you get it just right.
5. Design Books. It’s like thinking, but lazier.  Read the ideas and patterns of others critically and see what you can learn from them.  It’s obvious, but I know lots of designers who just hate reading.
6. People. Real people who live and breathe.  The kind who will be honest and tell you what they really think, even if it hurts.  People in your target demographic who would actually be using the product you are designing.  That is the best source of quality feedback.

The remaining 4 tools are software.  I like these products because they encourage you to do the 6 items above.   You can use these products without the above tools, but the returns leave a lot to be desired.

7. Basecamp. For communicating ideas effectively with clients.  Great design requires consistent feedback and Basecamp provides a great platform for that.
8. Silverback. For recording sessions with real people and extracting feedback.
9. Omnigraffle. For outlining processes and making slightly prettier wireframes after you’ve completed your paper-and-marker designs.
10. Google Analytics. For measuring the results of a completed design.  This is great for extracting feedback from massive amounts of real people.

What tools do you use that I haven’t mentioned here? Leave a comment below.

Related posts:

1. Designing the User Experience
2. Simple user interfaces are not always easier to use
3. Designing Data Collection Forms
4. Paper Prototyping vs. Balsamiq Mockups

Low-fidelity wireframing is most important part of my design process. I don’t mean low-fidelity in the sense of Balsamiq Mockups, but rather paper and marker wireframes.

Designers rarely get the design right the first time, second time, and as it is often in my case, the 19th time.  For that reason, I want to keep the cost of change as low as possible. Few things are cheaper than low-fidelity wireframes that you can crumple up and resketch quickly.

Once the low-fidelity is good, we get real and don’t typically create high-fidelity wireframes at all.

Related posts:

1. Unobtrusive Javascript Controversy
2. Paper Prototyping vs. Balsamiq Mockups
3. Top 10 Tools for Designing Intelligent User Interfaces
4. Designing the User Experience

eBay's Registration, as an example

Why it’s overlooked:

• Checkboxes are small, particularly ones which aren’t grouped in a fieldset;
• They are typically at the bottom of a form – Out of sight out of mind;
• They are placed in close proximity to a larger button which takes the focus.

This checkbox is completely unnecessary, and it’s purpose can be handled in a much more graceful manner.  Most popular websites have fixed this issue, while most less popular websites have not.

The “I agree” checkbox is the leading cause of form validation errors. In my research, about 1/3 of participants in our studies miss the checkbox the first time around.  Even though the problem is easily corrected, people occasionally abandon the form altogether when it fails validation the first time.

This error pattern sticks out like a sore thumb when you see it in action, but goes completely unnoticed when you aren’t observing real people using your form.

Replace with a quick sentence: “By clicking the ‘submit’ button, you agree to our terms of service.” The legal contract is the same (as far as I know), without the added point of failure.

Twitter's Registration Process

Twitter’s registration form is pretty straightforward and simple.  However, by placing the “I agree” sentence beneath the button, it will lose some attention.

YouTube's Registration Process

Google gets it perfect on their YouTube registration page by visually grouping the sentence with the submit button.

Basecamp's Registration Process

As usual, 37Signals takes it a step further and emphasizes this with excellent copyrighting and design on their Basecamp signup page.

Related posts:

1. How to Label Submit Buttons
2. Complexity and Simplicity are Perceptions
3. New Browser Windows
4. The difference between User Research and Usability Testing?

Interface First Design

I’ve always been a supporter of Interface First Design. To your customer, the interface is the product. The customers needs are all defined by the way they interact with your product. This is why we have always encouraged designing the interface before writing any code. This keeps developers from over-engineering features and ensures the customer gets what they expect from you.

However, I often find myself over-designing. I waste a lot of time designing things that will be deleted in future iterations.

Introducing Design Last Design (DLD)

Recently, I’ve been experimenting with what I call “Design Last Design.” Essentially this means we sketch out a user interface in the beginning, as we always have, but we don’t pretty it up. We build the whole application in greyscale with standard fonts, and boxes, but nothing pretty. Near the end of the project, we wrap it all up with graphic design. The interactions are all still designed up front, but the graphic design is laid on at the end. We don’t waste time on graphical details which are not yet important.

Focus on the customers needs and build a crude UI which fulfills them. The UI can, and probably will, be ugly. That’s ok, as the purpose of this step is to gather feedback on the interactions, not the graphic design.

It feels like you are building a wireframe in OmniGraffle or Visio, except with real behavior underneath.

Our customers have appreciated this process, since it makes design changes easy. We can juggle elements around the page or move things from one page to another. The whole application is working and can be played with. We can do some pretty intensive usability testing on these interfaces too.

The goal of this process is to collect as much feedback about the interactions of the application as possible. When customers know that design is not-finished, they are more open and honest with their comments. The cost of implementing change is less. When we are ready, we can start to lay a graphic design on top of it.

The quality of the finished product is always better than our previous methods, without an increase in development time.

Related posts:

1. Design Is Communication
2. Poor Internal UX Design Causes Zappos $1.6 Million
3. Beginning Web Design Workshops
4. Satisfy the Cat, a.k.a. User-Centered Design

• Are of contrasting color from the body text;
• Are underlined;
• Change color when visited;

However, when I began researching this article it became clear that the scientific evidence was against me. Articles, old and new, clearly prove that users find links significantly faster when they are blue, underlined and change purple after being visited.

Each of the articles I read attribute this to a usage pattern. The consistent design of links will program our brains to react consistently. This is absolutely true across all elements of design.

I Still Disagree

I do not dispute any of the research. It is complete and consistent across multiple studies. That being said, I will continue to use my judgement when designing links – blue or not.

The aesthetics of a design play an important role in the experience a user has with a website. I believe a trade-off in color choice is okay in exchange for improved aesthetics.  In some special cases, such as headlines on blog posts, I will only show the underline on hover.  But, that is always an exception to the rule.

References

Here are a few of the more interesting studies used in my research.

• The effect of spatial layout of and link colour in web pages on performance in a visual search task and an interactive search task by Van Schaik and Ling
• Against Non-Standard Link Colors by Kristoffer Bohmann
• Should hypertext links be blue and purple? by Luc Carton

What Do You Think?

Google, Yahoo, Amazon, Microsoft and Apple all use blue links.  Do you think these websites would be less usable if the links were other colors?

Related posts:

1. Google Penalizes Paid Links
2. Color Contrast in Web Typography
3. 50 Tips To A User Friendly Website
4. New Browser Windows

HTML uses “submit” as it’s default text, which isn’t ideal in any situation.   We often find ourselves labeling buttons badly, just because it’s become standard to do so.

Best Practices When Labeling Buttons

1. Shorter is better I should be able to, in a glimpse, understand what action will be taken on the form data I’ve just filled out.
2. It should be consistent with the form title. Consistency between the title of the form, at the top, and the submit button of the form, at the bottom, is important.
3. Includes a verb and a noun. For optimal clarity, I like to use a verb and a noun in each button label.  The verb indicates the action being taken, and the noun indicates the data being submitted.
4. Buttons should be large. Fitts’ Law predicts that the time required to rapidly move to a target area is function of the distance and the size of the target.   Put more simply, it’s easier to click on large buttons than small ones.  I generally tend to make the font-size about 20% larger on submit buttons than on the surrounding text, with plenty of padding.

Examples of Bad Button Labels

Here are a few examples of bad text.

• Submit
• Continue
• Save
• Update
• Go
• Click Here
• Reset

A good friend of mine and great designer, Brad Dielman, fell victim to WordPress’s bad button use.  It’s a simple change, but makes a big difference.  His new site is slated for release in 2017, and I’m sure he’s taken this into consideration.

Google Analytics does a good job of naming buttons with their “Customize Report” functionality.

Everyday examples, and how to improve them

On a password reset form, it’s better to use “Reset my password”  than simply “reset.”  The addition of the noun “my password” makes things even clearer.

When updating account information: “Update My Account” is better than “Save.”  Again, the inclusion of the noun makes the action clearer.

When asking for comments on a blog, I prefer to use “Post Comment” over the default “Submit.”

The occasional exception

I often leave out the noun on search forms, as the context of the search is generally obvious.  In cases where the context of search is not obvious, including the noun makes it clear.

Related posts:

1. Why you should eliminate “I agree” checkboxes
2. 50 Tips To A User Friendly Website
3. Why Flash is Mostly Bad
4. Making CAPTCHA Usable

Note: This applies to Photoshop CS2.  There may be a more prominent way to do this in newer versions.

Dividing into 2 Sections

Dividing into 2 sections is simple.  Draw guides on the outer edges of your object to divide:

Next, with your objects layer selected (the pink square, in my case), drag a guide toward the center.  When it gets close to the center, it should snap to the center.

Dividing into 3 or more sections

Before stumbling across this feature today, dividing into even sections was a mathematical test.  While the math is simple: Use the rulers to calculate the distance, then divide that distance into the number of segments you require.

Don’t worry, this tip doesn’t require any math skills.

The first step is to pull our your slice tool. and draw a slice around the object you wish to divide.  If you select your object layer first your slice should snap to the bounds of the layer.

Next, right click on the slice you created and choose “Divide Slice.”  I chose to divide my slice into 3 vertical columns:

After clicking “OK,” you should have 3 slices in place of the one you had previously.  Grab some guides and snap them to the edge of the slices.

The only thing left to do, is to erase the slices we just created.

There you have it, a simple visual way to divide a section of your photoshop document into multiple rows or columns which are spaced evenly for you.

Related posts:

1. Sharing the Grid
2. Asymptotic Perfection
3. Designing the User Experience
4. Satisfy the Cat, a.k.a. User-Centered Design

1. Clicking on the logo should take you to the home page;
2. Your logo/site title should be positioned in the top left of the page;
3. Duplicate your main navigational links in the page footer with links to additional, but less prominent pages;
4. Keep your navigation positioning consistent from page to page;
5. Don’t open links in a new tab/window, except PDF’s and embedded documents;
6. Highlight your current location in your navigation bar;
7. Use reasonable sized fonts (12px or larger);
8. Make sure font sizes are flexible (Use em’s or %, not px);
9. Sans-serif fonts are easier to read at small sizes;
10. Serif fonts are easier to read at large sizes;
11. Center your layout on the screen;
12. Use a page width appropriate for your audience (Older people use lower resolutions, tech saavy people use higher resolutions);
13. Use whitespace to logically group related items on the page;
14. Use font sizes, colors and styles to prioritize content;
15. Use 1.4 or 1.5em line height;
16. Use line lengths of 45 – 60 characters, the same as a paperback book;
17. Link to related content within the context of your page content;
18. Make sure your links change color/style when visited;
19. Always underline links, except some navigational cases;
20. Do not make important parts of the website look like an advertisement;
21. Use pull quotes to highlight important content in a lengthy article;
22. Text should be concise and scannable;
23. Use dark gray text instead of black text on a white background;
24. Break long pages into multiple pages;
25. Do not use all uppercase words, word shape helps word recognition;
26. Divide text into sections and use sub headlines to make content more easily scanned;
27. Keep a consistent layout, colors and typography throughout the whole site;
28. Print friendly automatically with print stylesheets;
29. Use buttons to submit forms (Some images which look like buttons are ok);
30. Don’t disguise or over-style inputs;
31. Don’t redesign standard UI elements, like scrollbars (this means you, flash people!);
32. Use breadcrumb navigation for hierarchical content;
33. Search results page should reiterate the phrase you searched for;
34. Do call your homepage “home” – not “welcome,” “front page,” “your company name” or anything else;
35. Use short and easy to read URL’s;
36. Give links to other content on your site related to their current page;
37. Optimize images for fast downloading;
38. Publish new content regularly, don’t “set it and forget it;”
39. Test in all browsers and OS’s, and different versions – IE, Firefox, Safari, Opera and Chrome;
40. Listen to your users and let them dictate changes (user centered design);
41. Avoid using jargon in page copy unless absolutely necessary;
42. Keep forms short, only ask for what you absolutely need;
43. Encourage conversation around your content.  Comments, forums, etc…;
44. Include a text only sitemap;
45. Use the title attribute on links to add more context;
46. Never use “click here” as the text on a link;
47. Write in a inverted pyramid style;
48. Create friendly 404 pages which help people find content;
49. Create incentive to come back later;
50. Connect information via hyperlinks, don’t force navigational channels;

Related posts:

1. 10 Tips to Increased Ecommerce Profits
2. 10 Tips to Better Google Wave Conversations
3. Simple user interfaces are not always easier to use
4. Typography on the Web

Grids are foundational to all my designs. I always sketch out ideas on a Behance Dot-Grid Book, (thanks to Garrett Dimon for sharing this a few months ago). While these square grids are perfect for sketching idea’s and concepts, they don’t work for fine-tuning your design.

Khoi Vinh and Mark Boulton both advocate grids which are divided into even vertical columns separated by gutter columns (usually smaller in width).

I’ve found that working from a base grid of 16 columns works really well in a variety of 2, 4 and 8 column layouts. I created a Photoshop grid template which meets my needs well. I share this with other designers occasionally and thought it could be put to wider use if I shared it here.

I hope you find it useful.

Edit: By popular request, I have also included my dot-grid printable page which I use for hand drawing UI concepts. The Behance Grid-Book above is great for formal ideas, but sometimes you just need a piece of scrap paper to scribble down some ideas. You can even make your own on-the-cheap dot-grid book with the PDF.

Disclosure: The dot-grid page was generated by an old resource on the net at imcompetech.com, but they seem to have disappeared.

• Baseline Grid (PSD)
• Baseline Grid (gif)
• Dot Grid Printable Page (pdf)

Related posts:

1. My Favorite Pomodoro Timers
2. Top 10 Tools for Designing Intelligent User Interfaces
3. How to pace yourself through laborious books.