"Don't Make Me Think!"

This week I read the first two chapters of Steve Krug's book "Don't Make Me Think: A Common Sense Approach to Web Usability" ( 2nd edition). While I don't have a rich background in web usability, I do have a strong background in design thinking, and anticipating user needs and wants. In that regard, these two chapters really did seem like common sense. A large portion of my current design work consists of printed pieces used for recruitment of sixteen through eighteen year olds - a group not exactly known for having a long attention span. I was pleased to see that many of the strategies I use in this print work, carry directly into good design for the web. My number one goal for each print piece is to anticipate the questions that might arise on the subject matter at hand, and make it very easy for the reader to find the answer before they even know they had a question! Although I hadn't verbalized them, or put them in list form, I use Krug's list of questions that a visitor "shouldn't have to think about" daily. Those are:

1. Where am I?
2. Where should I begin?
3. Where did they put _________?
4. What are the most important things on this page?
5. Why did they call it "that"?

I'm happy that my current work has prepared me to make the leap to usable web design.

I was most interested in Krug's facts of "Real Web Use", especially fact #3. Facts number one and two posit that (1) we don't read web pages, we scan them; and (2) we don't make optimal choices, we select the first reasonable option and go with it (aka, we satisfice - cross between satisfy & suffice). Fact #3 however, states that we don't try to figure things out, we just muddle through. And this works in many cases, but Krug gave four reasons why we should help our users get it rather than allowing them to muddle through. Those reasons:

• there's a better chance the user will find what they want,
• there's a better chance they'll understand what the full range of the site has to offer,
• there's a better chance of steering them to where you want them to go, and
• they'll feel more in control, which is more likely to bring them back.

Because my interests lie in recruiting and in helping small businesses, these four points are critical to my design work. I think I probably knew these things before reading this, but they seem much clearer and much more important after seeing them in writing!

"Design Is A Job" so defend your process!

Chapter 6 of Mike Monteiro's Design Is A Job was a tough pill to swallow for me. Monteiro tells of an experience where a client asked him to present up-front sketches (a step that typically came later in Monteiro's design process). When he turned the client down and explained his reasoning, they hired him! Gutsy move that paid off in this situation. What I wondered as I read the account, was if that strategy would play out so well for a less-established designer?

I know I've been guilty of breaking my process in order to please a client. Monteiro explains that relaying your process to a client should happen before they hire you. I think that's probably the critical step that I'm missing. I've tried to hint at my process on my new portfolio site, but perhaps I should go back and do some editing to outline specifics.

A warning Monteiro gave details the way a client may try to break your process. He says to guard against clients that:

• ask for visuals right away
• want you to work out of order
• want to do your work for you
• block your access to others in the organization
• rush!
• "waffle" over decisions
• ignore goals in favor of organizational politics
• want to try trendy ways of doing things

Seeing this list makes me recognize times through my career where these things have likely happened. I'll be sure to keep this close-at-hand for future jobs in an effort to stick to my process no matter what the client thinks is the best plan.

Evaluating Content Strategy

Two weeks ago I featured NYC web design boutique Vento for their nice responsive layout. This week, I'm looking past the surface to the content to evaluate it's effectiveness. I am basing my evaluation on Erin Kissane's ideas in Elements of Content Strategy. Specifically, Kissane says good content should be:

• appropriate
• useful
• user-centered
• clear
• consistent
• concise
• supported

I would consider my web-design knowledge to be "beginner-level". That's actually a good thing when it comes to evaluating the content on this site... I can put myself in the shoes of a client who knows they need a website, but that's about it. If that were truly the case, I fear that Vento hasn't been as successful as they could be in the "user-centered" category. Industry terms and jargon like "custom CMS," "strategic design planning," "driving conversion" and the host of product names littered throughout the site likely mean nothing to a client who wants a website. Explaining the technicalities of the how the site was built seem counterintuitive to what a client is shopping for in a web design firm. I want to know how the website will affect my bottom line by serving my customers.

I also have to dock Vento a few points when it comes to clarity and consistency. A few of the navigation items feature dropdown menus, but also allow the user to click on the top-level nav. Clicking on this top-level takes me to a page that then has different - but very similar - navigation choices. For example, the Services drop down menu features four navigation choices, while clicking on the word Services leads to a page that has six navigation choices. Closer inspection shows that the dropdown has a list item for this "overview" page that is the same destination as clicking on Services. The dropdown then combines Design & Development which are separate items on the overview page, combines SEO & Online Marketing which are separate on the overview page, has an individual list item for IT Solutions, but has no list item for E-Commerce which is on the overview page. These types of small inconsistencies get confusing. Going one additional level reveals that the "read more" under the Design category on the overview page and the "read more" under Development actually go to the same destination! This appears to be an effort to fluff their content and appear to be a larger company than what they are. Unfortunately, it just confuses users and actually turns me away from wanting to use Vento for my own website.

Vento's site is beautiful and seems very professional. I do think they should consider revising their content strategy to focus more on providing customers with information that will help them make a decision about whether to hire the firm instead of hoping to compete with large companies in the size and depth of the website. Sometimes less is better!

Responsively Designed Sites

In preparation of designing my own responsive portfolio site, I found that the best way to understand the considerations of a scalable site was to look at as many as possible and write a list of things that bothered me, or things that were especially delightful. The main issues I encountered revolved around:

• Organization | Elements on the page will have to shift as the screen size changes, but they need to remain in a logical reading order. Some elements may even be able to go away when real estate gets tight.
• Navigation | The navigation of choice seems to be a menu button with a drop down navigation list that appears when clicked/tapped. Because my site will only have a few page categories, I may be able to get away with keeping them all on the screen as opposed to hiding them behind a button. My logic says that if I can prevent the user from having to tap or click any more than necessary - without making them scroll for day just to get beyond the navigation - then visible buttons will be the way to go.
• Typography | The type will likely need to scale down in many places as the design scales. A few sites that I looked at however, had type that scaled exactly as the page did. That means that some of the small copy became so tiny for mobile devices that it was barely readable. Scaling type to an extent, and then redesigning to accommodate larger type on smaller devices seems like a better solution.
• Spacing and Proportion | All items may not scale proportionally and still look pleasing. Some images may need to stay a bit large, others may just go away once they've scaled to a certain point. Also, spacing that works for the desktop version may feel too generous for a mobile device. Other items began to feel very cramped as they shifted from multi-column to single-column without any change in organization or spacing.
  

Here are a few sites I found that seemed to handle these issues well.

DEVBRIDGE

One of the nicest responsive designs I've come across so far is that of Devbridge, a web development and design company based in Chicago. Devbridge's site is one of the few that feels very well organized and proportional no matter the width of the screen. The logo toggles back and forth between just the db mark and the full logotype depending on the arrangement. The type also becomes simplified as the screen narrows. The navigation at the mobile level is still visible on screen with the exception of the most narrow width, with nice finger-sized buttons.

VENTO

I also like the streamlined look and organization of Vento Solutions' responsive site. I do feel that some of the type gets too small when the design is scaled down to the mobile version, but the white space is nice. Vento also uses a hidden/nested menu for smaller screens.

BEARDED

I also enjoy the way that Bearded's website scales. The subtle use of texture gives the site some polish while letting the work and the solid organization stand out. One feature that I'm not sure I like, is their particular use of a menu button for small screens. Rather than reveal a fly-out or drop down, the menu button is a jump link that sends the user down to the footer where they have the complete navigation. For anybody not accustomed to navigating a mobile site, I think this could probably cause some confusion. The upside though, is that on each page, users can jump right into the content rather than having to scroll through a few screens of menus, titles, etc.