Why are the basics still so hard?

Last week I encountered a few situations where all I could think was, "why is this still so difficult?" In one case, someone who was incredibly tech savvy was having difficulty getting a TV to work with a particular attached device -- shouldn't this be easy by now? Why do we all still have four television remotes? Why is there such a confusing jumble of wires and inputs? Why haven't we figured this out yet? Virtually everyone (at least in the US) has a TV and at least one device attached to it -- a DVD player, a cable box, or maybe a TiVo, or AppleTV, or even a full home media system -- but these systems still seem designed from an engineer's perspective, not for the average Joe.

I don't know how to answer all those questions I posited there, but I'm hoping that we eventually reach a point where we start making a little more room for real world usability. I've heard (unfortunately I can't cite a statistic) that HDTVs are frequently returned because people think they're broken, when in reality it's because they haven't attached it to their cable connection correctly or they have not properly adjusted the settings, and if you mess all that up, the end picture often looks worse than old analog TV. But, how is an average person supposed to know that? And at what point do you get enough complaints and returns to actually go back to the design phase and say, "let's simplify this"?

A lot of designers thinks this means that people are stupid, and you have to oversimplify to the point of babying people. Let's snap out of that mindset, and instead try putting ourselves in someone else's shoes. Imagine some field you know nothing at all about, and now imagine an expert working on something that is ultimately meant for you, the "average" person. Wouldn't you want them to make it as clear and easy for you to understand as possible? So why balk at doing that in design?

New Portfolio Site

I've just relaunched my portfolio site. The re-design isn't hugely dramatic, and I will probably continue to do some behind-the-scenes tinkering to clean up the code and maybe do a little text editing here and there, but I'm proud of the relaunch!

The main differences:

• The primary navigation is now along the top
• There is more use of color throughout the site
• The "About" section has been expanded
• The thrust of the site is now more about making client connections rather than just showing what I've done in the past
• The new color switcher!

I've also tried something new where the entire site is designed without any images (with the exception of the portfolio imagery). Most websites use combinations of background graphics, graphics-as-text, and other graphical embellishments, but I gave myself the challenge of doing it all solely using HTML and style sheets. There may be a slight benefit in loading speed, but for the most part, this was purely as a personal challenge to see what I can achieve, and I'm pretty happy with the result.

One of the key additions to the portfolio section is the recent relaunch of the SpeakEasy Stage Company site, one of Boston's premier theater institutions. Check it out.

I also finally linked to my blog, which has been running for about 3 months now, as I wanted to make sure there was a decent back log of content available before promoting the blog. So feel free to peruse past entries and let me know what you think - leave a comment on a post if you find it interesting! (Please note that for now I am using a blogger template for the blog, but I plan to create my own blog layout soon - one step at a time.)

Thanks for visiting, and if you're looking for a new designer, hopefully I might be working with you soon!

Introducing the color switcher

I've just relaunched my portfolio website, and one of the main new features is the color switcher (pictured above). I realized a few things about my site as I was considering a redesign:

• My site has a very simple color pallette - black, white, and green - but the green was chosen somewhat arbitrarily. Why not a different color?
• My site should be more than just a place to show images of my work, it should show some of my coding ability as well.
• Some of the best design firm/portfolio sites I've seen add a level of interactivity that engages the visitor.

Those three concepts tied together quite well in the concept of the color switcher. I used the code from this helpful tutorial at A List Apart and removed all color declarations from my primary CSS style sheet (sorry if this is a bit codey for the non-coders), and then created seven style sheets that dealt only with colors. It also creates a cookie which remembers what color you last chose when you return to the site.

All in all, it is a fairly simple concept that can be executed in larger ways for other sites, such as changing font sizes or allowing re-skinning for users, and can extend well beyond colors into entirely reformatting the visual structure. CSS Zen Garden is a good example of this taken to the extreme, although unlike CSS Zen Garden, my color switcher requires no page refresh.

Pretty neat, huh?

What is accessibility?

One of my most enlightening experience at a previous job was learning more about web accessibility. At first the word "accessibility" may conjure images of people in wheelchairs needing ramps, rather than stairs, to enter buildings. This isn't so far off the mark in terms of web design.

Accessibility certainly deals with making websites that work for individuals with impairments that might make websites otherwise difficult to use. These can include:

• Visual Impairment - Note that this covers a wide range, from the completely blind (who use screen readers to have content read to them) to those with poor eyesight (who can see but need larger text and clear imagery) to those with color blindness (who may have difficult seeing certain contrasting colors, such as red text on a green background).
• Hearing Impairment - One might think this is not a problem on the web, but as video and sound are increasingly used, some sites have entire introductions and "avatars" that use audio to provide instructions and content -- without a text component, the hearing impaired are lost.
• Motor Skill Impairment - I don't know the technical term for this one, but it's important to remember that not everyone uses a mouse, and not everyone who uses a mouse has the dexterity to easily click on a link if it is just a few pixels in size.
  

The funny thing about designing websites with all of the above in mind is that you generally are improving usability for non-impaired visitors as well. Some people with fine vision may simply prefer larger text for reading, and good visual contrast makes a site easier on the eyes for everyone. Similarly, someone may not be hearing impaired but may be browsing your site in an environment where they can't have sound turned on (such as at work or at a library) -- making sure your navigation and content is available as text helps here, and can also help those who may not be fully fluent in your language and find it easier to read text. And of course, we've probably all been in situations where we've moved our mouse through a set of complicated drop-down menus only to get frustrated as moving 1 pixel outside the target area makes the whole menu disappear -- that doesn't require any impairment to be annoying.

There are also behind-the-scenes benefits -- websites coded with accessibility in mind can often place higher in search engines, as semantic markup (for example, labeling your headers as headers rather than just regular text with fancy font formatting), image text replacement (that is, whenever your graphics have text in them, the text should be written into the code as well), and proper usage of "alt" and "title" tags will help the search engine find your content and mark it as relevant.

It's also important to keep in mind that many web technologies -- such as JavaScript and Flash -- are not enabled or available to some users (the most notable recent example being the iPhone's lack of Flash support). The concept of "degrading gracefully" has become an important one -- essentially meaning that should these technologies be turned off, your site content should still display in a readable (and hopefully visually pleasing) manner.

I do not consider myself an expert in accessibility but it is certainly something I keep in mind as I design sites, and with each new project I try to implement new learnings. I think it's important to share this concept, however, as many people have never even heard of or thought about website accessibility. Having this knowledge in the back of your mind, even if you don't necessarily know 100% what its implications are, can help in the decision-making process during design. Accessibility issues may only be strictly necessary for a rather small minority of visitors, but designing with them in mind usually has a positive impact for everyone browsing your site.

How much can you know?

Confession time: I don't know everything. I know, you're shocked. But seriously, I was talking with a couple friends who are in web design, shooting the shit about various techniques and CSS and JavaScript (you know you're a nerd when...), and at one point I blurted out, "sometimes I feel like I don't know nearly as much as I should and I'm just making it up as I go along." My friend, who has had a few years more experience than I have, didn't miss a beat: "You just described everyone in our industry."

That was comforting, and probably true, as there are so many different things any individual could know in the field of web design that it's pretty much impossible to expect anyone to know it all. I'd argue that the greatest advancements in design have come from people who were making it up as they went along.

It seems to me that a good designer -- or perhaps more specifically a coder/developer -- doesn't necessarily need to know how to do every idea or assignment that comes their way. They just need to know how to LEARN how to do it.

I'll give an example of a recent project I did. There were a number of techniques I wanted to do, yet didn't know specifically how to do them off the top of my head. Among them: tabbed content within a page (rather than clicking to a new page for every tab), an automatic rotating image slideshow, a form that calculated various fees and totals in real time as you select different options, and a method to display content only if it exists on the server and how to present an alternative if it doesn't -- these are all things I had never done before, but knew I could figure them out, and I managed all of them successfully. Admittedly these are smaller features, and allowed me to learn in chunks rather than being presented with something as complex as "build us an online stock trading system." I felt confident tackling them because I at least knew enough about the various languages and techniques involved to know that they were all achievable, and as I worked on them, I learned more about other underlying concepts that will help me with the next new idea/design.

I think too many people, when given a challenge they don't already know how to complete, simply give up and think it's outside of their abilities. This is rarely true. There are still coding languages and techniques that seem so complex to me that I can't help but feel intimidated -- but breaking them down, and remembering that everyone who is now an "expert" was once in my shoes as well, has made me realize that knowing "how to know" is a skill that lets you do just about anything.

Learning to be self-aware

Jumping off of a concept from my last post about common sense usability, one of the most important things a good designer (particularly in the usability field) needs to be is self-aware. In general, people are extremely un-self-aware. Concepts of time are often way off (anecdotally, I remember my mother, in 2007, referring to Princess Diana's death as having been "a couple years ago," when in fact it had been ten years), and we tend to conflate memories into events that either didn't happen or occurred in separate times and places.

This is particularly an issue when working on web design. Very few people stop to ask of themselves the kinds of questions that are absolutely vital for good design. Where does my eye go first? This can help you organize the layout via information hierarchy. Am I moving my mouse to follow my eye? This may suggest good places to have hover states. Do I quickly click from page to page until I find what I want or do I scan a page fully before making my first click? This could inform your approach to site navigation. How many seconds does it REALLY take for me before I get annoyed at not finding what I want? This may determine whether a long-loading Flash module or graphics-heavy page is worth the sacrifice in loading time it may cost.

As important as it is to do proper testing and remember that, as the designer, you are rarely the intended audience, and you certainly know far more about the site than the average visitor will, you can still glean a lot of information just by carefully noting your own reactions -- even reactions to sites that have nothing to do with the one you are working on.

This is also helpful for someone who is not in design, but may need to work with a designer on a project. Are you working at a small organization that needs a better website? You'll be better able to get a top-notch end product if you are able to articulate clearly what your needs are, and you'll be better able to stand up for good usability practices if you end up working with a designer who has a great eye but perhaps a poor sense of usability. Think about your own site. Are there places you (or your visitors) frequently go to on your site that are buried? Is valuable home page real estate being devoted to unsupported or barely visited portions of your site? What aspects of your own site or your competitors' sites frustrate you and what do you find pleasing?

Asking these questions and being aware of your emotional state (by which I mean, happy, annoyed, indifferent, etc.) while browsing can help you pinpoint the design aspects that work and those that don't. So next time you find yourself frustrated by a website, stop for a second and think about what exactly is bothering you, and maybe even write it down. Similarly, next time you enter a site and find the information you want right away, think about what they did right -- this is often just as important or more important than finding the negatives, and frequently we don't even notice when something is done right.

But even when trying these exercises, keep in mind that there will undoubtedly be things you are doing that you are not realizing. It may sharpen your instincts, but for any larger scale project, you'll still need to take that critical look and apply it to other users to truly find underlying patterns and problems.

Why isn't usability common sense?

One of the things that has always amazed me is just how many books there are out there about every imaginable web-related topic from programming to strategy to marketing. And of course, there are plenty of books about usability and all its related fields.

Let me emphasize for a moment that I'm talking about BOOKS -- big thick tomes, hundreds (sometimes thousands) of pages long. I can't entirely fathom why they are all necessary. How much can you really say on any of these topics? But, I recognize that there is obviously a market for these books and I'm sure many find them incredibly useful. On that end, I chalk it up to a difference of approach -- most of what I have learned has come from experience and small chunks of learning, but I can certainly appreciate that others learn in a different way.

But the one thing that strikes me is just how much of this knowledge, particularly when it comes to usability, should be common sense but isn't. Certain things require research to determine, and may not be entirely obvious. People scan web pages in an F pattern. The first two words of a list item should carry the informational weight (even if it means poor grammar). Most people find websites via search engines. None of those things are all that surprising, but they're not the kind of things you'd expect the average person to know off-hand.

But what about some of the other, more "obvious" aspects of usability? Tiny fonts are hard to read. Straightforward, descriptive language is easier to understand. Human beings are creatures of habit. All of these things seem like they should be self-evident -- the last of those three is even a common proverb. But take a look online. The web is rampant with sites that use extremely small type, writers bury their content in made-up jargon and unclear, confusing prose, and many designers view it as a personal challenge to always break from traditional designs and interfaces in favor of flashy, unexpected interactions.

If you asked a construction team to build a house, but told them it should have no windows, the door should be a round porthole the size of a hula hoop, and the ceilings should be 4 feet high, you'd be called crazy. But, technically, it would still be a "functional" house, and it would certainly get some attention. A lot of websites seem to fall into this category, often because they are old and poorly made just due to a lack of skill/investment, but some newer websites even fall into this trap, as high-end designers seek to create showy, "interesting" sites that draw in the eye but fail when it comes to actual interaction.

Is it that these common sense ideas aren't common sense after all? Is there an innate drive among designers to always push against commonly-held perceptions? The challenge of anyone with an eye on usability is to recognize that the desire to question the status quo is enormously valuable -- but the ability to look critically at your own "innovative" ideas and recognize when change is a negative is possibly even more beneficial, and is certainly undervalued.

Don't blindly accept "the way things are," but don't abandon common sense in the name of innovative design.