Skip to main content
How is a Website Like a Book?

How is a website like a book? It’s not a riddle, though I might have thought so two years ago, when I was an editor of arts & crafts books, and my design interests were more inclined to typography choices and cover art. But the worlds of website design and art instruction books really aren’t so far apart.

There are plenty of obvious differences: websites are interactive, books are static; website performance can be tracked using a range of metrics (unique page visits, click-thrus, revenue from ads), books are pretty much only tracked by sales; websites exist in the vast ether that is the Internet, books exist in our tangible, touchable reality. (Except for e-books, which is a whole separate conversation.)

So how are websites and books similar? Both are designed with the user in mind -- from homepage to cover, from sitemap to index. If a book isn’t designed to attract, educate, and constantly engage the reader from beginning to end, it is doomed. Just like a website. And this is where UX Design becomes so important. Here, we explore a basic understanding of User Experience Design, and why it can make such a difference to a company’s bottom dollar.

What the Heck is UX Design?

User Experience Design (UXD) is a design principle that focuses on the user’s interaction with a product. For our purposes, the “product” is a website. The designer creates elements that will affect a user’s feelings about the website and the company or person who owns it. UXD, when effectively applied, can influence a user’s behavior on the site as well, encouraging more interaction and conversions.

UXD goes beyond the look and feel of a website; it is about how the site behaves. It applies to the backend of the website, how it integrates data from multiple outside sources, how it aggregates content from sources across the entire site, etc. UX designers have a lot more to consider than color palettes and font style sheets; they have to be mind readers. They have to anticipate a user’s expectations, needs, and biases when interacting with the site.

It is easy to fail when designing an interactive experience. Designers fail when they do not know the audience, integrate the threads of content and context, welcome the public properly, or make clear what the experience is and what the audience’s role in it will be.” - Edwin Schlossberg

Personas - Know Your Audience

In UXD theory, a persona is a document that describes a fictional but typical user of the site. In a broader sense, a persona is a person’s perceived personality. We don’t actually know the individuals who will use this website but by doing a little bit of research we can sketch out a rough idea of them.

A UX designer can gather information from a variety of sources. There are a lot of stakeholders in a client project, people who care about the success of the website and know a lot about the client’s customers. This group includes a client’s board of executives, but it also includes the customer service and sales departments. It’s  a good idea to find a few “legacy” employees -- people who have been with the company the longest -- and interview them as well. When these insights are combined with analytical data from the website, the company’s blog, email, newsletter, or mobile app (if applicable), the designer can begin to pull together typical user profiles.

What does the designer need to know? As much information about the customer as is possible, but some information is absolutely critical:

Persona Insightsaverage agegeographic locationeducation levelincome levelhis/her goals when interacting with sitetechnology comfort level

Many designers use photos to help illustrate the different audience personalities, and even name them. Amanda may be a Midwestern stay-at-home mom in her late ‘30s, and Mike is a New Yorker, 20-something Millienial generation kid who does all his web-surfing on an iPhone. Names and photos make these personas more real, and that makes it easier to empathize with their needs when designing. When a designer needs to make a decision that greatly affects the website, they can fan out the deck of Persona Tarot cards and think, How would this affect Amanda? What would Mike think about this?

We had a similar methodology in publishing. Before we could offer a contract for a new title, we had to answer two simple questions: Who is going to buy this book? What do they expect to get out of it?

To answer those two simple questions, we’d interview an author to get an idea of who was in his fan club, who read his blog, who bought his kits or attended his classes. We also asked for insights from the buyers for the major bookstore chains and online stores like Amazon. The Editorial Director of our imprint was a wealth of information on the audience of past similar titles. We didn’t create full-blown persona documents, but I think if I ever went back into publishing I’d push young editors to give it a try.

This information affected many design-related decisions for the title. Hardcover or trade paperback? Gloss or matte paper? Ultimately, these choices will inform the most important decision in a book’s life - price.

In a well-made book, where designer, compositor and printer have all done their jobs, no matter how many thousands of lines and pages, the letters are alive. They dance in their seats. Sometimes they rise and dance in the margins and aisles. - Robert Bringhurst, The Elements of Typographic Style

Site Maps & Book Maps

You know what else website and book design have in common? Tight budgets and tighter deadlines. You know what keeps both of those factors under control? Maps.

Most book editors submit a page count to the designer when they deliver the manuscript, but art instruction books require more in-depth planning. The chapter openers should land on verso pages, each step-by-step demo should take up two spreads, certain images cannot be cropped or must be show full-bleed, etc. A young book editor is often sat down with the manuscript, contact sheets of all art related to the title, and a book map template.

This is the book map. It starts with the title page and ends with the very last page in the index. Every chapter opener is called out, every A-head for each page is annotated and every image that needs to be full-bleed is marked. The editor is providing an incredibly rough skeleton for the designer to follow. Why go to all this trouble? Two reasons. One, designers are visual creatures and bookmaps are a visual communication of the editor’s vision for the project. And two, the editor knows that the designer has very little time to make this book look good - tight deadlines, remember - and any help the editor can give the designer increases the book’s chances of being on schedule.

A sitemap is constructed for much of the same reasons, but web designers play a much larger role in the sitemap than a book designer does in a book map. The designer creates a sitemap as the first visualization of content organization, navigation features, and hierarchy of processes. Each page - from home page to FAQ - and all of their subpages, are laid out in an easy-to-follow flow chart format. Tip: Google Sites makes a flowchart sitemap interactive, with comments and edits features available to anyone to whom the designer bestows such power.

“Good design will not sell an inferior product, but it will enable a great product to achieve its maximum potential.” - Thomas J. Watson

Designing the Experience

The designer has the user research, the business specifications, and the map detailing the project. It’s time to start the fun part! The designer performs the first of many transformations, by changing the words of the stakeholders into graphic assets and usability features. No need for smoke and mirrors - the designer performs this feat by unleashing their creativity on the structured site map and list of stakeholder objectives.

UXD, contrary to the name, is about more than just the user experience. It encompasses the entire existence of the website. The site must be easy to use, of course, but within that it must be easy to navigate, contain useful content and engaging visual elements, and have targeted SEO phrases that make it searchable. The designer’s job is to manage all of these priorities and create within their boundaries.

Guess what? People really do judge a book by its cover! The cover, like a website’s homepage, is the first touchpoint with a consumer. And like a homepage, the book cover must do an enormous amount of marketing. The editor decides the searchability of the book through its title and subtitle, but the designer is responsible for creating a useable and navigable book that is strikingly attractive to its target reader.

So, we’ve created a truly kick-butt website. Or book. What is the final aspect of similarity between websites and books? Intuitive, creative, user-focused design can make all the difference in their success. And the success of the company supporting them.

Good design allows ‘form to complement performance.’ The way things look is not irrelevant to the way things work: how they work is how they should look. - Thomas F. Schutte 

Why is UX Design So Important?

We’ve all experienced the frustration of a poorly designed website. Where are the navigation tools? How do I share this content? And why are these ads so gosh-darn intrusive?!

Some websites we grudgingly accept despite poor usability. Government websites tend to be daunting and unnavigable; financial institutions also seem to prefer unwieldy websites with cryptic navigation; we accept these kinds of experiences because to some degree, we have to. But what about optional interaction websites? When we go looking to buy a product or sign-up for an event, we expect that interaction to be geared toward us. If it’s not, there’s a very good chance we’ll move on and find a better-designed website.

With the rise of e-commerce over the last decade, a well-designed, user-oriented website is not only good for the user, it’s good for the company’s bottom line. Companies spend a lot of money on Information Technology, about 1 trillion dollars a year! And a lot of that money often goes to projects that fail or are abandoned, or to fix mistakes once a project has launched. A website designed with the user in mind, therefore, can reduce costs and increase income.

“Good design is good business.” - Thomas J. Watson

Talk About Cutting Costs

McAfee cut their support calls by 90 percent by focusing on user interface when designing ProtectionPilot. McAfee software development manager David Ries said in an interview:At the outset, we had two big concerns: We designed ProtectionPilot so that the person using it would need to spend less than an hour a week maintaining his organization’s antivirus protection.... Second, because of the large number of users, we wanted to keep our support calls low. No matter how trivial, every support call has some costs associated with it. Installation should be easy, and initial use should be intuitive.By focusing on the user’s experience, we were able to deliver a favorable user experience.

The beauty of User Experience Design is its ongoing quest to create the very best of whatever is being designed. Website, book, or coffeemaker - User Experience Design combines passion and creativity with research, strategies, and objectives. It is about creating objects that serve their user and their stakeholder equally well, promoting interaction and conversions, letting both customer and company live happily ever after. The End.