Web Production and Design Key Principles

Sorin A. Matei Various classes Last updated 2010

Web production requires planning

FFF or FRI First things first Fools rush in

You need a plan to define the content, functionality, and look of your site Some of the information you need for defining these facets of your

project is obvious, some is not Before creating the site you have to spell out everything you need to

know about it This will help you formulate the mission of the content, its audience, its

functionality and scope

Planning documents

Planning interview Strategic Planning document Site/Content Map Storyboard

Pre-design Interview You need to ask your client (or yourself) a number of

clear and direct questions that will determine:

Why do you want to create the site? What should it do? Who should it address? What is to be done to accomplish that? By whom and by what due date?

NOTE: Ask many probing questions, try to find out all that you need to find out from the client.

Strategic planning document Distills the information found in the Pre-design interview,

This is your contract with the client, in which you specify what is to be done. It is also your project’s polar star, your compass.

Deals with two types of issues: General Specific

Mission statement (general, broad goals): What does this project and the type of content it will generated want to accomplish in the grand scheme of things? Who is it going to address?

Objectives (specific, concrete aims) What does the content want to accomplish concretely, in deliverable terms?

Implementation What are the deliverables?

Actions What is to be done to produce the deliverables?

Monitor and feedback How are we going to make sure that the product achieves its goals

Content MapA simple diagram, depicting the pages (sections) and the relationships

between them

Mental Maps content map

Storyboard

Rough diagrams of each main page or master pages to be used on the content

Organized in a stack Leaf through the pages

as if you were navigating through the content

USABILITY PRINCIPLES

DON’T MAKE ME THINK When you look at an interface everything should be self-

evident

People should be able to navigate a webpage or GUI (graphic user interface) without being conscious of their decisions

The process should be “natural”

“Thinking” is the process of figuring out the meaning of various page elements It’s a bad thing and you should stay away from it

Why “thinking” is bad

If people start “thinking:” They lose track of what they came to the page for ORThey get bored ORConfused AND

WILL MOVE ONRemember: everything is to be understood in one glance

“On the web competition is just a click away”

How do people use multimedia content?

When confronted by an interface, people act on impulse

People are impatient: they are not willing to spend more time at an interface than they need to

How much time are they willing to spend? Very little!

Interfaces and the art of scanning

People go to a webpage with a very specific goal (need) in mind and they expect to satisfy that need (goal) right away—instant gratification

They get easily frustrated if the page does not serve them that ONE thing they are looking for

This thing should be available at a glance, with minimum reading and reasoning

The navigation process

SCAN SATISFICE MUDDLE THROUGH

Fact of life 1: We don’t read computer screens. We scan them.

Reasons: It’s a habit We never read everything, that’s how we deal with most

printed materials other than textbooks (or especially with those!)

Reading stuff off screens is hard

We advance through visual hops anchored by “hot spots” (graphics) People go to a webpage looking for something that

resembles (no matter how remotely) what you are looking for and IS CLICKABLE

Fact of life 2: People do not make optimal choices, they satisfice

People do not reason about “the best choice”

They choose the first reasonable option Reasons: hurry, no penalty for being wrong, no benefit

from being right, guessing is more fun

Fact of life 3: People don’t figure out how things work. They muddle through

People use a lot (and wrongheaded) guesswork

They forge ahead and learn how to use a device or content through trial and error

What is the web experience closest to?

Rank the following experiences according to their similarity to the web surfing experience: Reading a newspaper Glancing at a billboard by the side of the

highway at 60 mph Surfing through TV channels Reading a book Chatting with a friend Playing a game

All of them but …

The initial contact with the site is similar to glancing at a billboard

COROLLARY:

Everything should be made available to the user in a snap and should be brainless

Layout principles

PUT THE CENTRAL TOOL IN A CENTRAL PLACE MAKE A STRONG, ONE GLANCE IMPRESSION

Just like in a billboard, the viewer should understand with one look what is going on

FIRST THINGS FIRST Rule of newspaper headlines: the more important something is,

the more prominent Use bold and distinctive fonts but do not break the unity of the

content ORGANIZE THINGS HIERARCHICALLY

Things related logically should be related visually Things that are subordinated to other things should be nested visually in

them Good organization reduces the “thinking” process

Gaming/computing conventions On the web web, just like in other computing

experiences, we use conventions These should be self-evident and in general use They include: layout, buttons, search engines,

forms, etc They are part of user’s repository of learned

behaviors Chinese language test of convention use (page 35)

– your page should still be usable, even if translated into Chinese, just by knowing what the content is about E.g. try to use the Chinese interface of yahoo to check

your email

What all well-behaved interfaces should look like

All webpages should include: Clearly defined areas

Header (content ID and name), text, navigation areas (General and local), indicators of location (if necessary)

Hyperlinks that are obviously so They should all be invitingly “clickable”

Search boxes that are simple and prominent (if necessary)

NOTE: KISS-keep it simple stupid

To make sure that everything is OK apply the TRUNK TEST

From KrugImagine that you’ve been blindfolded and locked in the trunk of a car, then driven

around and dumped on the stoop of a webpage deep in the bowels of the Internet. If the page is well designed you should be able to answer these questions without hesitation:

What kind of content is this? (content ID) What page I am on? (Page name) What are the major sections of this content? (Sections) What are my options at this level? (Local navigation) Where am I in the scheme of things? (“You are here”

indicators) How can I search?

Organizing your interface

Header Conveys the main idea of the content; is an “ideogram”

(like a Chinese character) Establishes content identity (content ID) Needs a title and a TAGLINE

the title of the content should be metaphorical and easy to remember

the tagline should be descriptive, it explains what the content is all about

The tagline can be complemented by a first, clear to understand paragraph on the page, but it should not replace it

Page essentials continued-TextEliminate needless words

Text should be treated as if it were optional: the user should be able to use the content even if a mysterious virus erases all the text

Text is a bonus feature on the main pages, it adds (a little bit) of depth to the content Text is, however, important on informational contents

Text should be easy to read and broken down into small paragraphs All text should be broken down into columns, no column should be larger than 400 pixels Use headers and subheaders generously but not frivolously

DO NOT insert hyperlinks in the text – except for blogging, where this has become a convention in and by itself It’s like someone is shooting a pistol next to your ear when you are reading the newspaper

Do not make headers into links UNLESS the header is followed by very little text Create small links on the side

Blend text with pictures (break down monotony)

Long bodies of texts (articles, etc.) should be available in a print-ready format (preferably pdf)—make sure text width fits on printed page

First important principle of writing text for multimedia

Write your copy BEFORE starting to design the page Content should drive form Write in short bursts, soundbite-like Everything (or most everything) should be

memorable

Second important principle of writing text for multimedia

Stuff your page with keywords and phrases likely to appear in search engine searches Search engines parse your content for keywords,

which will be matched with your content when queries are sent to the search engine

Third important principle of writing text for multimedia

Happy talk must die Space on the screen is precious because a user’s attention is short Do not waste space with needless happy talk Get to the point and stick with it Don’t carry an idea for more than a few sentences

Instructions must die If you feel like you need to explain your users what they should do with

the navigation or graphic elements on the interface, this is a sign that your design sucks

Instructions should be limited to a few words Technical instructions (downloading, etc) are, however, useful

Navigation bars and tools as maps Embed “where pages are” in their design

Navigation bars are essential for orienting the visitor in space When well designed, they tell you where you are

To serve as navigation aides bars should: Look like navigation devices (follow conventions)

Should be located where they are expected to be located (across the top or on the left side of the page)

Be immediately intuitive – buttons or obvious links

Should run throughout the content—except for entry page and forms

They should highlight where the user is right now An alternative version is that of breadcrumbs (display the path to the

page e.g. Yahoo directory)—Always put them at the top

Navigation bars

They should be comprehensive and not include too many hierarchical levels (1 or max 2) Combine a main navigation bar with a secondary,

section specific, navigation bar that appears only in pages specific to a section

Use simple image maps and tabs, most resilient and easy to recognize

They should always have a “home” button (better, yet, link the header to the homepage throughout the content)

Analysis

Google Amazon.com Facebook

The 11 principles

1. Form follows function

2. Define the function

3. Less is more

4. Hierarchy is important

5. Hierarchies can be subverted

6. Degrade gracefully

7. Picture = 1000 words

8. Use conventions

9. Place content in space and time

10. Use keywords and soundbites

11. Never match colors you would not wear together

PRINCIPLE 1: FORM FOLLOWS FUNCTION (CONTENT), NOT THE OTHER WAY AROUND

Creating multimedia content: More than writing code or displaying pictures

Your are trying to convey a specific type of information or to help the user accomplish a specific mission IN THE EASIEST AND MOST INTUITIVE manner

possible The form of your content should facilitate this process, it

cannot be a goal by itself The cool factor is important but only if subordinated to

your main mission

PRINCIPLE 2 DISCOVER AND DEFINE THE

FUNCTION OF YOUR SOCIAL MEDIA PRODUCT

What do you want to accomplish with this content? Possible types of content:

Informational Entertainment Task-oriented (create user generated content, perform a service, sell a product, etc)

For each type of content there should be a specific mission: ON-LINE CONTENT

NEWSPAPER – to provide in a web environment “all the news that’s fit to print” E-comerce/Corporate: to sell products and create identity

GAMES, MOVIES: To transport you to a make-belief world SOCIAL CONTENT: To help people create and share media

There is no “pure” information, entertainment or task-oriented content – thus, multiple missions, but they are usually organized into a hierarchy

Define the content in a user-centric manner Function and mission should be defined not in the abstract, but in view of

satisfying an expected viewer/user Who is going to be my typical user?

PRINCIPLE 3: LESS IS MORE

Offer on the “front-page” gateways for each major type of user, organized around a common theme

For most real world and corporate content products missions are multiple and users diverse

DO NOT confound this with offering a smorgasbord of information

Organize the content around a single, clear information path with possible jump-off points

How do they stack up? ANSWERS.com, YouTube.com, FACEBOOK.com,

GOOGLE.com, Amazon.com, Digg.com

PRINCIPLE 4: ORGANIZE CONTENT HIERARCHICALLY

Draft pre-design lists of elements that your imagined typical user will need on the content platform Organize the lists (information clumping)

Hierarchically By class (type) Alphabetically Chronologically

PRINCIPLE 5: SUBVERT HIERARCHY

Do not get bogged down in very intricate hierarchical/nested pages Give access to as many elements on your content

as possible MOST IMPORTANT: Display or link most

important information right from the beginning HAVE THE USER IN YOUR MIND ALL THE

TIME

PRINCIPLE 6: DEGRADE GRACEFULLY

You never have complete control over the way in which the viewer will see your content

Stuff gets “ported”, translated, repurposed Construct content around a simple and sturdy

basic structure, use simple protocols and widely accepted content formats. Familiarity and usability of a format takes precedence

over “cool” factors, unless the technology you are proposing is truly revolutionary

PRINCIPLE 7: A PICTURE IS WORTH A THOUSAND WORDS & A MOVING IMAGE

EVEN MORE PROVIDED

The picture is good, appropriate for the context and does not get in the way

The movie is short, well edited and conveys a message

Images are complemented by text, music, sound, to make the experience complete

PRINCIPLE 8: USE CONVENTIONS AND STICK TO THEM

Use conventional colors for different sections Use icons and clip-art consistently Be conservative: use pre-existing metaphors, do not

invent new ones unless they are very, very, very compelling For navigation:

Links and buttons that go to links should look like navigation devices

Label everything clearly and in plain English (abstain from cute nicknames)

Use icons with caution

PRINCIPLE 9: PLACE THE content IN SPACE AND TIME

Include on interface, especially in informational contents:

When was the content created What geographic or spatial area it is related to Location and contact modalities for all people,

organizations, etc. mentioned in the content that you think would benefit from being contacted

PRINCIPLE 10: USE SOUNDBITES AND KEYWORDS

Stuff the text with the words you would like the people to remember and nothing more Use words in the text people might use in a

search on Google

PRINCIPLE 11 NEVER MATCH COLORS ON YOUR content THAT

YOU WOULD NOT MATCH IN YOUR CLOTHING Avoid clashing colors / use complementary colors Use a limited color palette for each interface For interfaces with a lot of text that is meant to be read

in more than a few seconds use black text on white background Link the body of the text off the main screen

Use a colors to mark section and level in the section Use red like animals do, as a sign of attractiveness or

danger Use black for stylish, high contrast contents, do not use

for regular, text rich contents

Test your knowledgeAnalyze a social media website of your choice using the following question list:

Does form follow function? Is the function of the website clearly presented? Does it apply the “less is more” principle effectively Does it organize content hierarchically? Does it subvert hierarchy, when necessary? Can the content be transported to simpler devices Does it use pictures effectively? Does it use easily recognizable conventions? Does it place content in space and time? Does it use effective wording? Does the color scheme look good?