We’ve all seen what we would call bad design on the web, and we usually base this judgement on our personal aesthetic preferences. I have a new definition of bad web design that goes beneath the surface. I don’t care how great an artist you are, how much your agency pays you, or how much the client loves your work. If your “web design” doesn’t actually work on the web you’ve failed.
During my career I’ve seen plenty of failed designs, but lately I’ve seen some epic fails from designers at big-name firms. I’m starting to see more of this because of a trend toward HTML interactivity spurred by the buzz around HTML5, jQuery and CSS3, and the movement away from Flash brought about by the increasing popularity of the iPad and other mobile devices.
Flash was always a favorite of agency designers because it allowed them to create movies and TV commercials, mount them on a web page and call themselves web designers. Another favorite agency technique was to make a website out of a print brochure (often with a traditional portrait orientation). In short, they called themselves web designers even though they were deeply committed to the old paradigms of print and television and had little knowledge or appreciation of web capabilities and usability concerns. Their ignorance of their medium was shocking and their unwillingmess to learn was disappointing. Their only concern seemed to be keeping their design looking exactly like it did in Photoshop.
Those designers are now discovering that their Flash site won’t play on their iPad, and they’re rushing to catch up on all the cool things they can do with Javascript. But they also still want the rigid control and rich graphics they had with Flash.
The result is that they’re creating designs that specify HTML with very complex interactions, the consequences of which they do not understand. They are like kids in a candy store. They see a modal window on a website, so they add that to their design. They see stylish fonts coming in natively and start specifying any font they like for headlines, menus and even body copy. They put in accordions, hover effects, carousels and tabs. And of course they still have their trademark agency styling that requires rounded corners, complex gradients and drop shadows. What they never ask themselves or the developers on the project is, “How much will this cost?”
They don’t ask this key question because they don’t understand that there is a cost, or in what terms that cost is measured. Cost comes in several ways:
- Cost to build the site:
Many designers don’t realize that a complex design costs more to build. Most big agencies charge enough that they don’t have to worry about this, but for smaller agencies and smaller clients a designer could design a site without realizing it carries development costs that exceed the client’s budget. If the build is handled by the agency under the contract price it’s a big loser for the agency, since they will have to eat that development overage—and it adds up fast. - Cost of changes during development:
Any design changes or “tweaks” during development are going to cost more time and more money because of complexity, dependencies, and the amount of cross-browser testing required for cutting edge functionalities. - Cost to the user:
There can also be a negative impact to the user, who wants a fast experience. Sites that require large graphics, many scripts and complex animations can significantly slow down page render and make pages unresponsive. They often are not built with accessibility in mind and can be unusable those using assistive devices. There is also a hidden cost at the server level, which affects the client paying for the bandwidth to serve a bloated site.
Here’s a breakdown of what design costs (in kilobytes):
- Any interactive effects, including widgets, accordions, tabs and modals:
~250k for Javascript toolkits + additional CSS and images to skin it. - Custom or unusual special interactions (drag scrolling, e.g.):
20k-50k for custom script and/or custom plugins - Custom font embedding (@font-face):
~25k per font family AND weight (+$$$ if it isn’t one of the handful of free fonts) - Images for gradient backgrounds and shadows:
5-50k apiece
A few years ago, most of a page’s weight came from the graphics, so it was very clear what the page size was. The effect on the user was that they saw the page building in front of them as the graphics loaded. Browsers can load several graphics concurrently, which helps speed.
As pages evloved to use scripting for interfaces and actions, the weight of the page shifted into the head. Scripts do NOT load concurrently. They come in one at a time on a single thread and block the loading of other elements. The effect on the user is that they stare at a blank page until the scripts are finished loading, then they start to see the images come in.
When a user is seeing something happening on the page they are more willing to wait than when they see nothing. Long waits will cause abandonment.
But there is also a more insidious and persistent degradation of the user experience caused by bad design. When the browser is overtaxed by a design that requires a large number of DOM elements and which takes a long time to reflow and repaint after page resizes and DOM interactions, users begin to see sluggish behavior, excessive CPU usage and even crashes. In short, you no longer have a responsive site. If you only use Chrome you can pretend you don’t have a problem. Use IE7 and you’ll feel the pain.
I am currently finishing up two sites which are both examples of “bad” design. The first has a beautiful and engaging design conceived by a truly brilliant designer. Unfortunately this boutique site was priced to the client at a fraction of what it actually cost to implement the ambitious interactivity and the multitude of unique page styles. The result was that my hourly wage for building this site ended up being embarrassingly low and the client now has unrealistic expectations about future enhancements.
The second example is a reskinning of a global e-commerce site. The agency that provided the design approached the project as if they were designing a boutique site and did not consider the rarified page speed requirements performance-based sites must adhere to in order to stay competitive.
They tried to differentiate the design by rounding the corners of form inputs and specifying custom styles for form dropdowns. They specified rollover states for table rows and other interactions that were poorly supported by browsers. In short, they created a design that was a mismatch for both the client’s needs and the capabilities of the browsers that used the site.
The result was that performance took such a hit that the site crashed in its first week. It’s quite a feat to create a design that can crash an enterprise site that is distributed over multiple servers! After that, the IT team scrambled to turn off “features” the down-level browsers were struggling with.
The cost of this particular bad design was abstract prior to the launch. After go-live, and including the crash, we could assign a dollar value to lost sales (and lost customers) that amounted to millions of dollars. As a designer, would you like to be responsible for that level of failure? Would you like your arrogance and ignorance of your medium to be so publicly exposed?
The site stats show how the design taxed the browser and the servers. The new site design caused the following increases:
- HTTP requests up 33%
- Total script size up 200%
- Number of scripts up 33%
- Total uncompressed load = 945k
As a result of this recent experience I’ve learned quite a lot about performance which I can summarize as follows:
Designers have to choose:
- Massive Graphics OR Ambitious Interactivity;
- Overall DOM size OR Amount of DOM manipulation;
- Cool forms OR Accessible, functional forms
- Concept OR Budget
- Their portfolio OR The user
Maybe in the early ’90s it was okay for a print designer to dabble in web design. But at this point the web has been around long enough that there’s no excuse for someone who calls himself a web designer to be ignorant of the abilities and limitations of the medium. We wouldn’t allow an architect to practice who doesn’t know how much weight a column will support or who specifies marble at the same price as concrete. It’s time we demanded the same level of professional qualification from web designers and hold them personally accountable for their mistakes.