Post on 20-Jan-2016
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?