Uffenorde.com

I recently read an article regarding psychological usability heuristics. Not only was the article informative but the author created a Google document containing 10 heuristic categories each filled with useful heuristics.

I decided I wanted to organize these heuristics into a reference poster in PDF (366k) and web format (please use a modern browser).

The image below represents my efforts. Please feel free to download and distribute.

In my effort to create an 11” x 17” poster housing myriad psychological usability heuristics I found myself constantly re-orienting the title. Due to valuable vertical real estate I’ve opted for the slightly less readable vertically oriented text. I was constantly fluctuating between orienting the title vertically top to bottom or bottom to top. I find vertically oriented text consumes far more cognitive processing but the focus of this poster is not the title nor is it considered to be an advertisement. Consequently, I’ve placed far less importance on the title being quickly internalized or serving as an attention grabber.

A book’s spine is printed top to bottom allowing the text to be easily read if lying face-up on a table. However, I’ve also heard that people are left-eyed or right-eyed and that one eye leads, the other follows. How is the readability affected between left-eye-high and left-eye-low and what is the split in the general population?

In the US we read top to bottom left to right so it may follow that any vertically oriented text should be read top to bottom. Text oriented bottom to top may result in double takes as the reader is essentially reading it backwards.

Art schools sometimes teach that “upwards is positive, downwards is negative.” This sounds very culturally biased and I’d love to see some research on the theory.

If you adhere to the mantra that “You read best what you read most” then top to bottom would seem to be in order for us Americans.

If more than one line of vertical text is necessary then I would prefer the text to be read bottom to top so the next line  read would be to the right of the initial line (following standard US left to right reading style).

There is a paragraph on the topic of  binding in ‘Designing Books’ Hochull, Kinross: Hypen Press. pg 101

It suggests if the spine of a book is broad enough to orient it horizontally, but goes on to say:

‘If they are vertical, traditionally in German-language books text runs from the bottom up (except on large-format volumes that are laid front cover up in the bookshelf, so that the spine title can be read normally). Since the spine title functions primarily when a book is standing upright on a shelf, this arrangement is certainly more rational–because one inclines one’s head more readily to the left than to the right–than the international standard, according to which text should be made to run from the top down. That one can read this spine text better when the book is lying on the table is not a factor in the matter; by then the reader knows which book is lying there (and anyway, many books also have their title on the cover).’

I wonder what data supports the claim that “one inclines one’s head more readily to the left than to the right.”

Upon searching Google for “vertical banner” I found virtually all read bottom to top.

Ultimately I’m leaning towards top to bottom due to my tendency to read the top-most word first.

Recently a friend (an excellent cabinet maker / carpenter) who owns Banks Cabinets here in Utah  asked me to create an image he could use as his profile photo (or avatar) for Facebook and LinkedIn. I always enjoy working with photos in Photoshop so I agreed and proceeded to touch up the photo. It needed a lot of work. After about 2 and 1/2 hours of work I finally had something I was proud of.

Here’s what I did to it:

1. Color corrected entire image
2. Reduced the amount of Reds
3. Added red back to lips
4. Removed yellow/orange tinge from shirt
5. Removed blemishes on shirt and face
6. Whitened teeth
7. Brightened eyes
8. Straightened shirt logo
9. Blurred highlights a bit
10. Reduced highlights a bit
11. Added wood background
12. Added Banks Cabinets logo
13. Marveled at my genius

Thanks for this opportunity Banks Cabinets!

A Bad Web Site is Like a Grumpy Salesperson – Jakob Nielsen.

I’ve been wanting to create an Android honeycomb related wallpaper for some time.

“Honeycomb” is the code name for version 3.0 which was designed specifically for tablets.

Click image for 1920 x 1080 version.

Image Source: http://theoatmeal.com/comics/design_hell

I’m a web designer by profession. Unfortunately the title “web designer” is deceptive. While many think this means I push pixels around and write simple HTML it is far, far more complicated.

Here’s just a few other considerations I have to take into account and provide solutions for:

1. Obviously the site must be designed (people think design is so subjective…well…at least in the browser world it’s not). Simply putting “cute kittens” in a site does not mean everyone will love it. Just because someone designed a bake sale flyer in 1982 doesn’t mean they “have an eye” for design.Image Source: http://theoatmeal.com/comics/design_hell
   
2. Cross browser support (does the site function and is it presentable in IE7, IE8, IE9, Firefox, Chrome, Safari, Opera?) Most have no idea that browsers interpret code vastly different.
3. Is it usable? This is a huge and hot issue and is becoming more and more critical as technology evolves.
4. Accessibility. Can someone with disabilities navigate the site? Am I using up to date web standards to accommodate screen readers? Betcha’ didn’t think about that now did ya?
5. Clean, valid, markup. Is the markup (the code that the browser interprets) solid and free of errors?
6. Interaction design. If there is a need for the user to provide input, how easy is that interaction for the user?
7. Page flow. How navigation from page to page is structured.
8. Content strategy. How well is the content designed for the context it’s placed in? Is there too much “fluff”?
9. Print styles. How well is the page’s content presented when the user requests a “Print” (oh yeah…each browser does this differently as well).
10. Mobile device support. Does the site look presentable and function well in mobile devices?
11. Responsive design. Does the site respond appropriately to a device that is 320 pixels wide versus 1920 pixels wide?
12. Maintainability. Will the site accommodate swift and efficient changes? Will the guts (the code) have to be ripped out and created again?
13. Scalability. Will the site allow new content or features easily?
14. There’s more that can go in this list but people don’t generally read a list that has more than like 7 things in it and I’m way passed 7.

People have no idea how much work, knowledge, and talent is required to create something (of worth) on the web. I love (read cringe) when people naively assume the Internet is just a copy and paste environment.

One of my favorite things to hear aspiring web owners (or people in general who have no idea what they’re talking about with regard to Internet related things) saying is “Oh yeah, creating a web page is simple…just use Microsoft Word’s ‘Export to HTML’ feature and upload it.” Please, kill me.

Image Source: http://theoatmeal.com/comics/design_hell

Indeed modern technology has enabled many less savvy people to create something digital that they can share on the Internet. This is a good thing (don’t misunderstand). But the problem this engenders people with is the idea that because they can use Facebook, Twitter or Google docs easily, they can hire a web designer to create an elaborate feature rich web site for pennies.

No, my friends, the Internet is not simply cut & paste and web designers worth their salt deserve more respect (read money) than I see them receiving these days. Better yet, go build a web site yourself and you’ll quickly see that there’s more to it than a simple ctrl+c, ctrl+v and well placed cute kittens.

I recently read an article by Jakob Nielsen titled “College Students on the Web“. In it he reveals 3 myths regarding how students use the Internet. I quote them below.

Myth 1: Students are Technology Wizards.

Students are indeed comfortable with technology: it doesn’t intimidate them the way it does some older users. But, except for computer science and other engineering students, it’s dangerous to assume that students are technology experts — or “digital natives” as it’s sometimes called.

College students avoid Web elements that they perceive as “unknown” for fear of wasting time. Students are busy and grant themselves little time on individual websites. They pass over areas that appear too difficult or cumbersome to use. If they don’t perceive an immediate payoff for their efforts, they won’t click on a link, fix an error, or read detailed instructions.

In particular, students don’t like to learn new user interface styles. They prefer websites that employ well-known interaction patterns. If a site doesn’t work in the expected manner, most students lose patience and leave rather than try to decode a difficult design.

This is yet another testament to one of my favorite usability quotes: “Sometimes, there is no need to be clever or original.”

Myth 2: Students Crave Multimedia and Fancy Design

Students often appreciate multimedia, and certainly visit sites like YouTube. But they don’t want to be blasted with motion and audio at all times.

One website started to play music automatically, but our student user immediately turned it off. She said, “The website is very bad. It skips. It plays over itself. I don’t want to hear that anymore.”

Students often judge sites on how they look. But they usually prefer sites that look clean and simple rather than flashy and busy. One user said that websites should “stick to simplicity in design, but not be old-fashioned. Clear menus, not too many flashy or moving things because it can be quite confusing.”

Students don’t go for fancy visuals and they definitely gravitate toward one very plain user interface: the search engine. Students are strongly search dominant and turn to search at the smallest provocation in terms of difficult navigation.

It’s often frustrating when a client indicates they want some element of a web site to ‘pop’ or to be more ‘flashy’ or have some sort of movement effect when it really affords their customers nothing. Often, they merely inhibit a users’ progress and rarely hold benefit. Isn’t it interesting that users will comment that these so called “design enhancements” really just get in the way but CEO’s, marketers, project managers, website owners (users themselves) think that’s what will increase revenue and that people will click on them when they themselves, upon encountering them in their own personal Internet experiences, declare them distracting!

Myth 3: Students Are Enraptured by Social Networking

Yes, virtually all students keep one or more tabs permanently opened to social networking services like Facebook.But that doesn’t mean they want everything to be social. Students associate Facebook and similar sites with private discussions, not with corporate marketing. When students want to learn about a company, university, government agency, or non-profit organization they turn to search engines to find that organization’s official website. They don’t look for the organization’s Facebook page.

I have zero desire to have everything be social. In fact, just last week I signed up for Facebook. I put it off for as long as I could and only submitted due to an interest in high search rankings and visibility. We’ll see how it pans out.

37 signals sites “All the Wrong” things they did with their new book “Rework” and the list is very interesting.

Here’s a quote from their site:

It’s been almost a year since we published REWORK, a book that violated a lot of the publishing industry’s conventional wisdom…

Conventional wisdom: Books targeted at entrepreneurs generally don’t sell very well or usually end up on the bottom shelf.
REWORK: Written specifically for starters and small business people.

CW: For the price point of our book, it must be at least 40,000 words. Readers want something bulky that’s got lots of content.
REWORK: We chopped the final edition down to 27,000 words (from 50,000+). You can get through it in just a few hours.

CW: Business books don’t have illustrations.
REWORK: Each essay accompanied by Mike Rohde’s artwork. (Mike explained the process in these posts: part 1, part 2.)

CW: The copyright page goes at the beginning.
REWORK: The copyright page is at the end. And there’s no foreword either. That lets readers get right to the meat of the book.

CW: The back cover should be filled with a lengthy explanation and blurbs.
REWORK: The back cover is as pretty as the front cover. A few key points and that’s it.

CW: The format should be long chapters.
REWORK: Filled with short essays, most just a page or two.

CW: A business book should use business-y language.
REWORK: Plain language throughout (and even some cursing).

CW: Books don’t have commercials.
REWORK: Coudal helped us created great trailers and even a Karl Rove “attack” video that helped get the word out about the book.

I love learning about how successful digital technology can be, especially when it defies conventional wisdom and antiquated thinking. Another testament to the ever more popular idea that user centered design is superior. Go 37 signals.

An article on 37signals.com referenced a photography website’s “Lifetime Warranty” policy on one of the carrying cases they stock.

I’ll quote it here…

This is why the lifetime warranty is really ridiculous. If you’re 30 years old when you purchased a bag, are you really going to return it 30 years later for repair? The only way this is possible is if the bag has stayed in your closet the majority of the time. Remember the leather cases in the 1960’s? Is anyone returning these bags for repair under the “lifetime” warranty? This is why the lifetime warranty is more of a marketing gimmick than the truth. Is it the life of the bag, or your personal life? The normal life of a bag, if it is used weekly, is four to 10 years, which is not “lifetime.” If lifetime means your personal life, when you’re dead, you won’t need the bag, unless it’s a body bag.

This is why we offer our No Rhetoric Warranty with confidence. We build our products to last, with top quality fasteners and top zippers. We feel the best lifetime warranty is, in fact, creating bags that don’t need fixing.

OUR WARRANTY To the original owner, we guarantee and warrant the bag against any defects in material or workmanship for as for long as you use the product. If you have any problems with the bag, please contact us for return authorization at warranty@thinktankphoto.com before sending the bag. We will then repair or replace the product at our option.

source link

It’s refreshing when websites decide to dispense with the boring and totally impersonal legal speak in favor of something that sounds more like what you would hear if your best buddy was describing to you how they felt about a certain product. You know, concise, to the point, truthful and no fluff to confuse or mislead.

People generally detest being snowballed with deceitful doublespeak and incomprehensible legal jargon. We don’t put it up with that face to face, why should we have to put up with it on websites?

Sites that employ more personalized copy not only (in my opinion) increase in favor with their customers but plant seeds of confidence in their products by making their visitors feel like the website represents a local shop run by actual working human beings who love their product and who are housed just down the street from you. People like that.

There are extremes though and sites can go too far by trivializing serious matters by inappropriately describing topics that deserve a more formal tone.

However, by and large I think customers appreciate a more personalized style when it comes to copy found in areas like  frequently asked questions, warranty information, terms and conditions, privacy policies, descriptions, ads and many others.

Again, your website represents you, your product and your business. Why not treat people with respect just as if you were face to face with them.

*Warning: all links in this post are dummy links…they wont do anything*

I get angry when I’m surfing a site and it uses the antiquated and utterly useless “Click Here” method to define their links. Seriously? What possible useful information can a user glean from the words “Click Here”? None I say…none at all.

Using the “Click Here” method compels users (who 99.9% of the time are in a hurry) to read further to figure out just what really happens when they click a link that merely offers “Click Here” as a method of communicating what’s behind it. I’m becoming angrier as I write this…

Simply put; a link should be indicative of what it does. For instance, consider the following examples:

Today’s TOP story is a real doozy! Click here to find out what happened to the Tsunami victims!

Vs.

Today’s TOP story is a real doozy! Find out what happened to the Tsunami victims!

Read ‘em again and watch as your mouse glides over each word as you read it. In the first example you wonder what “Click Here” will do, then you read on and discover what it does and then have to retrace your steps to find the link that you think will take you to where you want to go.

The second example allows the reader to engage with the content while concurrently reading it. No wondering. No retracing. No confusion.

One may suggest that you could link “Today’s TOP story” but I would argue that it too is ambiguous and not a good candidate (taking context into consideration here).

What does the “Click Here” method look like when you have a list of links ? Let’s take a look shall we?

Example:

This month’s top 5 Must-See-Movie List:

• Tron | “Click Here” to view the trailer
• SALT | “Click Here” to view the trailer
• Harry Potter and the Deathly Hallows | “Click Here” to view the trailer
• Chronicles of Narnia: Voyage of the Dawn Treader | “Click Here” to view the trailer
• True Grit | “Click Here” to view the trailer

Ridiculous right? Totally. Tons of unnecessary text cluttering and distracting the user from what they really want to know; the names of the top 5 movies they must see and how they can view the trailers.

Now, imagine how confusing and irritating it would be if the links were intermingled amongst different content in paragraph style. You wouldn’t know which “Click Here” associates to the correct content it supposedly represents. Now, lets redo the above movie list.

Example:

This month’s top 5 Must-See-Movie List:

• Tron | view trailer
• SALT | view trailer
• Harry Potter and the Deathly Hallows | view trailer
• Chronicles of Narnia: Voyage of the Dawn Treader | view trailer
• True Grit | view trailer

Not bad, but I submit the below example as an ultra-compact alternative which ironically enough is contrary to my original rant about links being indicative of what they do but bear with me here (I still believe the above example is superior but offer this as an alternative):

Example:

This month’s top 5 Must-See-Movie List:
(click the movie name to view the trailer)

• Tron
• SALT
• Harry Potter and the Deathly Hallows
• Chronicles of Narnia: Voyage of the Dawn Treader
• True Grit

Please, for the love of ………STOP using “Click Here” to define your links!

*whew*…I feel better.