Web Design

Design is a funny word. Some people think design means how it looks. But, of course, if you dig deeper, it's really how it works. To design something really well, you have to 'get it.' You have to really grok what it's all about. It takes a passionate commitment to really thoroughly understand something... Most people don't take the time to do that.

Steve Jobs, May 13, 2005

Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius, and a lot of courage, to move in the opposite direction.

Albert Einstein

When all you do is copy others, you copy their mistakes, too.

Scrivs, CEO 9rules, March 9th, 2007

I have finally solidified my thinking on why most graphic designers have no business developing interfaces for desktop or web applications. Of course, I am not speaking in absolutes here. There are those rare individuals who, without any formal training, realize a need to not only understand visual issues, but in addition have also chosen to augment their skill-set with human interaction and usability training. However, they are rare and in my opinion the mainstream of those designing web interfaces today are simply under-qualified. When I say under-qualified, I mean they do not posses the necessary skills to provide intelligent interaction design solutions. It is sad I have to point this out. Several years ago it was an accepted fact that a traditional graphic designer had no business developing a GUI. Today though it has become acceptable to erroneously believe a graphic designer is capable of producing an interface simply because they appreciate aesthetics.

Far too often, most graphic designers are artist first and engineer second. That is, they can produce beautiful content like a poet, sculptor or painter but when it comes time to design they are simply not suited for the task. When I say "design" I mean the ability to provide a functional product that is intended for widespread distribution.

Graphic Designers, Friend or Foe of the Web Interface - February 2, 2006

One of the things that needs to change in 2006 (which will undoubtedly be the year of the web-application) is the care for user experience and usability. Many managers and business-people need to change their perspective and hire the right people to take their web-businesses to a new level. We are no longer in 1999, age of Photoshop-designed templates and lens flare effects on homepages, cut into place in Dreamweaver MX.

We've been getting quite a few work proposals in the last few weeks - which you'd say is by any standards, a good thing. But the percentage of people (even on very high places) who have no clear notion of how user-centered design and information architecture should work for their company and websites is astonishing.

If you manage a web-application or a web-based business and are thinking about a new look, don't think color schemes - or hire people that think about color schemes and layouts. Think about the best ways to make what you do clear to your visitors - and hire people accordingly. It might become one of your best decisions.

Frederico Oliveira, Fewer templates, more user experience - December 25, 2005

In the usability corner, wearing the blue and purple underlined trunks, weighing in at just under 25K per gig... J-a-a-a-a-a-kob Nie-e-e-e-e-lsen, usability guru extroadinaire, with over 16 usability patents and several "lists of 10" -- do's, don't's, thou shalt's, and thou shalt not's.

And in the graphic design corner, wearing the greyscale trunks, weighing in at 500K per site (that's dollars, not bytes)... Kioken(oken-oken-oken), firing clients left and right, and wielding Flash as if the plug-in itself were built into Joe Newbie's genetic makeup.

Curt Cloninger, Usability experts are from Mars, graphic designers are from Venus - July 28, 2000

When I give speeches, I always have a slide that says, "The most important design tip of the day." OK, what's this tip that's so wonderfu?. Simple. All it has is the question

"Would Amazon.com use that design element on its site?"

It's an important question because Amazon.com has probably spent more time and money researching what works and doesn't work on a web site than anyone. If you don't see a web design technique on Amazon.com, you probably should follow their guidelines and not use it on your site.

Some design techniques you probably won't see on Amazon.com: (all links open new windows)

Vincent Flanders, What Would Amazon.com do?

I am going to make the rather controversial claim that Website development is not an art. By saying this I am not trying to undermine the work of graphical designers on Website projects. The Website development process is not an art. In fact, the steps involved in the production of any Website are well defined and I am going to gradually lay them out for you in a series of posts.

Recently I realized that the reason why many Websites fail to accomplish anything is because measurable goals were never set for them.

Imagine you’re running a mid-size manufacturing business, with the budget to invest into the re-development of your corporate Website (you probably already have one). You choose your development company and go through a series of meetings. The first deliverable you get is the graphical design for your new Website. From this point on you keep going back and forth on the color scheme or layout of the pages, without concentrating on the content, It’s structure and its ability to generate any new business for you. As a result you end up with a Website that does absolutely nothing else for you besides setting you back $5 - $10 K.

Lukasz Karapuda, Website Development is Not an Art - April 15, 2005

When designing a Web site, we need to consider three basic factors: presentation, organization, and interaction. Presentation is how your site appears to your audience, organization is the structure of your site, and interaction is how your site behaves in response to user actions. Because all interactions between your audience and your structure occur through the site's presentation, it must be understandable and engaging. If the presentation is not clear, your audience might not be able to make it to your content. If the presentation is not engaging your audience might not be motivated to try.

Luke Wroblewski, Site-Seeing: A Visual Approach to Web Usability - June 28, 2002

Many young web designers view their craft the way I used to view pop culture. It's cool or it's crap. They mistake Style for Design, when the two things are not the same at all. Design communicates on every level. It tells you where you are, cues you to what you can do, and facilitates the doing. Style is tautological; it communicates stylishness. In visual terms, style is an aspect of design; in commercial terms, style can communicate brand attributes.

Most of all, I worry about web users. Because, after ten-plus years of commercial web development, they still have a tough time ?nding what they're looking for, and they still wonder why it's so damned unpleasant to read text on the web—which is what most of them do when they're online.

Jeffrey ZELDMAN, Style Versus Design - ?

1. Simplicity: Don't compromise usability for function
2. Support: Place the user in control and provide proactive assistance
3. Familiarity: Build on users' prior knowledge
4. Obviousness: Make objects and their controls visible and intuitive
5. Encouragement: Make actions predictable and reversible
6. Satisfaction: Create a feeling of progress and achievement
7. Availability: Make all objects available at all times
8. Safety: Keep the user out of trouble
9. Versatility: Support alternate interaction techniques
10. Personalization: Allow users to customize
11. Affinity: Bring objects to life through good visual design

IBM, Design basics

The oldies continue to be goodies -- or rather, baddies -- in the list of design stupidities that irked users the most in 2005.

This year's list of top problems clearly proves the need to get back to Web design basics. There's much talk about new fancy "Web 2.0" features on the Internet industry's mailing lists and websites, as well as at conferences. But users don't care about technology and don't especially want new features. They just want quality improvements in the basics

1. Legibility Problems
2. Non-Standard Links
3. Flash
4. Content That's Not Written for the Web
5. Bad Search
6. Browser Incompatibility
7. Cumbersome Forms
8. No Contact Information or Other Company Info
9. Frozen Layouts with Fixed Page Widths
10. Inadequate Photo Enlargement

Jakob Nielsen, Design basics

A failed redesign is a Web page created from scratch, or substantially updated, during the era of Web standards that nonetheless ignores or misuses those standards. A failed redesign pretends that valid code and accessibility guidelines do not exist; it pretends that the 21st century is frozen in the amber of the year 1999. It indicates not merely unprofessional Web-development practices but outright incompetence. For if you are producing tag-soup code and using tables for layout in the 21st century, that's what you are: Incompetent.

When teenagers' hobbyist blogs (short for "Web logs") have better code than brand-new Web sites, somebody's doing something wrong. And that somebody is you, the developer. In a just society you would simply be fired; in an Orwellian society you would be sent to a reëducation camp. Failing either of those, you could at least read a fucking book and upgrade your skills to a point where you are no longer a total laughingstock.

And yes, if you are the developer of any of these sites and we should ever meet, I will tell all of this to your face, and I certainly reserve the right to publicly ridicule your site onstage in the future. Because you're worth it.

Joe Clark, Failed Redesigns

The tendency to leap straight into implementation deprives many organisations of the opportunity to design their websites. In many cases there is no distinction made between design and implementation. By failing to design what they want, companies build what they can.

In a typical scenario, the job of website design is handed over to the person who is seen as having the appropriate skills, meaning the ability to use tools such as DreamWeaver, Flash or FrontPage. This approach has several disadvantages. It gives control of the design to personnel who might not be best suited to understand the users, it excludes many stakeholders, and it tends to limit design options. It often leads to designs that do not support non-expert users, because the developers are not sympathetic to their needs.

It is not unusual to see web development projects that have become bogged down in an endless cycle of build and review, with technical developers at loggerheads with marketing or business personnel.

Gerry Gaffney, Paper as a Design Tool

"Fidelity describes how easily prototypes can be distinguished from the final product and can be manipulated to emphasize aspects of the design."

University of California, Berkeley, High or Low Fidelity, Paper or Computer

Six Signs That You Should Use Paper Prototyping

1. There are many different ideas about the design.
2. You find yourself defending a particular design.
3. There are parts of the design you're unsure about.
4. You're changing the way that the users perform a task.
5. The concepts or terminology are new to the users.
6. You're feeling uncreative.

Carolyn Snyder, Six Signs That You Should Use Paper Prototyping - December 23, 2003

We need to abandon the idea that user testing on the Web is a quantitative process. Focusing on numbers to the exclusion of other data leaves researchers with nothing more than noticeably dubious statements like, "Design A is 5% more usable than design B" (or "90% of all usability testing is useless"). Instead, user research for the Web should delve into the qualitative aspects of design to understand how and why people respond to what has been created, and, more importantly, how to apply that insight to future work. ...

There is an outdated notion that usability research requires a blank slate-that outside observers will somehow comprehend what your users are doing in a more objective manner than yourself. But when you can't rely on statistics, and you need to understand the context of your site's use, all you have to go on is what you yourself can observe.

So it's time to get your hands dirty. Usability testing for the Web doesn'at require outside firms that hold themselves separate from the design process. Understanding context means embracing this research as part of the design process. It should be performed with the full participation of the design team, so that everyone can internalize the user's perspective. Developing and leading usability tests should be a core competency owned by someone within your team (though many folks believe it ought not to be the original designer).

And it shouldn't be exclusive to this team. Individuals from across the organization should participate. Anyone who might have a stake in what's being tested should be present for at least a part of the process. If the right people in your company see real users having real problems to which you can provide solutions, they'll understand both your value to the organization and the need for the time and resources to make sure that good design happens.

Lane Becker, 90% of All Usability Testing is Useless June 16, 2004

Nearly 40 percent of Internet users delete cookies from their primary computers on at least a monthly basis, according to a study by Jupiter Research. The finding has big implications for advertising and marketing firms that depend on cookies for tracking and targeting.

Based on a survey of 2,337 U.S. respondents, the study finds that 17 percent of Internet users delete cookies on a weekly basis. Approximately 12 percent do so on a monthly basis, and 10 percent make it a daily habit.

Consumers Delete Cookies at Surprising Rate - March 14 2005

1. Frames break the unified model of the web
2. Frames cause problems for search engine robots
3. Frames make URL's stop working
4. Frames break bookmarking
5. Frames make printing more difficult
6. Frames hurt accessibility
7. Frames increase technical complexity

Roger Johansson, Who framed the web: Frames and usability

The Jarrett-Zetie Rules of Pop-ups

EXPECTATION
The user expects new content, and expects that content to be a diversion from the current task rather than intrinsic to it.

CONTEXT
There is some advantage to the user in seeing the new content on screen at the same time as the existing content.

SIZE
The pop up size is between one quarter and one third of existing window size. (If the size is less than one quarter, then the content should be moved onto the main page. If the size is more than one third, then you break the rule of context).

KNOWLEDGE
The user isn't thrown by pop-ups and knows how to close them.

SINGLE USE
There is only one pop-up at a time, and you have some way of being sure that the pop-up comes to the front.

Caroline Jarrett, Caroline's Corner: A Farewell to Pop-Ups - May 4, 2004

1. Pop-ups in front of your window – 95%
2. Loads slowly – 94%
3. Tries to trick you into clicking on it – 94%
4. Does not have a “close” button – 93%
5. Covers what you are trying to see – 93%
6. Doesn't say what it is for – 92%
7. Moves Content Around – 92%
8. Occupies most of the page – 90%
9. Blinks on and off – 87%
10. Floats across the screen – 79%
11. Automatically plays sound – 79%

Jakob Nielsen's Alertbox, The Most Hated Advertising Techniques -December 6, 2004

1. The company name or logo was only physically seen in 2% of all ads
2. 50% of ads were closed before the ad finished loading
3. 35% of pop-up ads were ignored completely
4. The average time from a pop-up ad frame appearing and the clicking of the close button was 2.5 seconds, the average time for a company name or logo to appear in a pop-up is 8.2 seconds
5. There were no positive comments about pop-ups from any of the 36 users tested
6. Users feel that their intelligence is being insulted because of the suggestion that they cannot find what they are looking for themselves
7. Users feel imposed upon because sometimes they have no choice but to act in order to get rid of the advertisement
8. Users are particularly irritated by pop-ups which are not related to the site, as there is no useful reason for them to be there
9. Users are particularly frustrated by adverts which appear in the centre of the screen or obstruct information.

BunnyFoot Universality, Bunnyfoot Research into Pop-Ups shows Users Hate Them - April 2004

After ten years, you'd think web designers would understand how to use text, but they don't. Here are some helpful hints.

Text is Text. Don't use graphics or Flash for text. The first reason is it increases the size of the page; the second reason is it isn't search engine friendly; the third reason is the graphics are often of poor quality and are aliased (jaggy);

Vincent Flanders, The Biggest Web Design Mistakes of 2004

HOTMAIL

1. Ignores everything in the <head></head> tags, including <style></style> but will render <style> tags that are in the <body>
2. Renders inline styles, except:
   a. margins (which is unexpected)
   b. background images
   c. does render specific heights
3. Does render traditional background images correctly, for example: <td background="image.gif">, as well as height and width.
4. Ignores BODY background images.

So, if you're creating an HTML email or template, here's the formula for success:

1. Use Tables
2. Use Inline CSS, padding, borders, fonts, colors, but NOT background-images or margins
3. If you need background images, they only work in TD table cells, coded traditionally, not CSS.
4. <body> background images... won't work. Better to have a big Table width 100%, height 100% with a background in the TD.
5. Need a specific height? It'll only work as a traditional <td height="x"
   width="x"> not CSS.
6. Use images for text as little as possible and if you do, make sure that you use good alt tag descriptions of the images.
   

eROI, Testing Email Creatives in Gmail and Hotmail Email Clients

1. Keep Your Eyes on the Content
2. Think, Design, Draw
3. We Heart Site Maps
4. Don't Reinvent the Wheel
5. Stay Objective
6. From Concept to XHTML

Joshua Kaufman, Getting IA Done, Part II - August 22, 2005

Research reveals all human beings make a subconscious judgment about a person, environment , or item within 90 seconds of initial viewing and that between 62% and 90% of that assessment is based on color alone.

Institute for Color Research, Getting IA Done, Part II - 1997

Generally speaking, our participants tend to have the background color of webs as red, blue and green, which we call three primitive colors. They are the purest colors within the spectrum. It is to say that our participants prefer pure or sterling web pages.

People prefer some kind of color when they visit some catalogue of companies' web. There should be certain relationship between catalogues on web and their color. We find that from the test as following:

About us: red, orange, green
Company news: blue
Products introduction: blue green
Service/Technical support: blue green
Finance (stock, financing, purchasing or purchase through internet): red, blue
Human resource (recruitment or training): blue, green, yellow, off-white
Homepage: blue
Web community (partners, member center or enterprise culture): green, blue

After the research we find it important to choose suitable color for certain catalogue in web design. It can not only help users to find out which catalogue they are in but let them feel very comfortable surfing the net. Gratifying web design let users have respect on the companies. And that is the most important thing.

Xiaowei Yuan, Xiaoqin Wang, Color on Web Design Case Study

1. Minimise traffic between browser and server so that the user feels the application is responsive.
2. Be clear on the interaction mode being used - regular HTML versus Ajax versus desktop application so that the user can predict what will happen next .. no surprises.
3. While avoiding confusion, borrow from conventions of HTML and desktop applications so that the user can rapidly learn how to use your application.
4. Avoid distractions such as gratuitous animations so that the user can focus on the task at hand.
5. Stick with Ajax wherever possible - just say no to entire page downloads so that the user's experience is consistent.
6. Adopt Ajax for usability, not just to illustrate you're hip to where it's at so that the user is engaged, and not immediately driven away by your nod to website splash screens, <blink tags>, popup ads, and other usability disasters of websites which have gone to a place you don't want to be.

Michael Mahemoff, Ajax Patterns: Design Patterns for Ajax Usability - May 15, 2005