Transcript overview

Website Development
Process
Introduction
A.
Types of websites
B.
Web development team
Types of websites
A.
Static pages
B.
Dynamic pages
C.
Web content management
Static pages

Content or layout changes only when a web
author manually updates them

Vast majority of web sites use static pages

Highly cost-effective for publishing
information that doesn’t change substantially
Static pages

Simple

Secure

Less prone to technology errors

Easily visible by search engines
Dynamic web pages

Adapt their content or appearance depending
on the user’s interactions

Can use client-side scripting techniques
(XML, Ajax, Actionscript)

Most content is assembled on the web server
using server-side scripting language (PHP,
ASP, Perl)
Dynamic web pages

Flexibility

Requires rapid high-end web server

Much less visible to search engines than
static pages
Web content management

Most large corporate, enterprise, and
university sites

Enables non-technical content contributors to
update and create new web pages
Web content management

Use a database to store web content

Use templates to provide a consistent user
interface
Blog

Simple CMS

Popular, inexpensive, widespread

Easy publication of text, graphics, multimedia
content
Blog

Built in tools to enable readers to post
comments

Built in features such as calendars
Website Development Team
Core skill sets needed in team
 Strategy and planning
 Project management
 Information Architecture & user interface
design
 Graphic design
 Web technology
 Site production
General advice
I Ready, aim, fire
Make pages only when you have all the
important answers in place to guide the rest
of the design process
Goals
Audience
General advice
II Stay away from visual design until
everything else is planned
Visual form of your site should flow from
careful and informed decisions about site
structure, navigation, content requirements,
and overall business goals.
General advice
III Small is good
Stay small and focused.
Large websites are expensive to maintain.
Website Development
Process
The Website Development
Process
1.
Site definition and planning
2.
Information architecture
Site design
Site construction
Site marketing
Tracking, evaluation and maintenance
3.
4.
5.
6.
1. Site Definition and Planning
A. Mission statement
B. Competitive Analysis
C. Audience Profile
1. Site Definition and Planning
A. Mission statement
1. Define purpose/goals




To buy and sell something
To entertain
To educate
To inform
1. Site Definition and Planning
2. Define scope
• Serves as a useful prioritizer and simplifier when
the project is growing complex
• Prevents scope creeping
1. Site Definition and Planning
B. Analyze competitors’ websites

Extrapolate techniques: approaches, functionality,
usability, and accessibility

Search engine visibility

Promotional techniques
1. Site Definition and Planning
C. Define the target audience



who are the potential site visitors
skills and needs
market segmentation
If you know your audience, you have a better
chance of success
1. Site Definition and Planning

Who is your product or service aimed at?

Is this target group online? If so, how literate
are they?

Will your audience be different in an online
environment?
1. Site Definition and Planning

Role play: User/task analysis. Use cases.

Have a set of requirements, and have real
people in a real situation.

Produce design and functionality specification
for project
1. Site Definition and Planning

Need to form relationship with customers

Promotion planning

Search engine strategy: keyword and key
phrase is developed here.
Content & layout
will
largely
depend
on the
target audience
1. Site Definition and Planning

Read Letting Go of the Words, Chapter 2

Write a brief explanation of the 7 steps to
understand your audience
The Website Development
Process
1.
Site definition and planning
2.
Information architecture
3.
Site design
Site construction
Site marketing
Tracking, evaluation and maintenance
4.
5.
6.
2. Information Architecture
A.
Inventory your content
B.
Establish a hierarchical outline of content
C.
Chunking
D.
Site map
E.
Wireframe
2. Information Architecture
A.
Inventory your content
Assess the content you need to achieve
your goals
2. Information Architecture
Build an inventory of the existing content

List all the content that you currently have available in
your organization

Include text, images, video clips, and databases

Note what format they are currently in. Do they need to
be converted to web friendly formats.

Does the text need web editing? Who will do this?
2. Information Architecture
Content wish list

Based on your target audience, what content to you wish
to acquire

Plan for content which you will need

Brainstorm for ideas

Source content

Text such as articles, recipes, references, help
descriptions
2. Information Architecture
Web content inventories of existing sites
take form of spreadsheet with multiple
worksheets
2. Information Architecture
Each page on the site gets a row with columns
listing




Page title
URL
People responsible for content
General type of content
Example
2. Information Architecture
B. Establish a hierarchical outline of content

Divide the content into logical units

Establish a hierarchy of importance among
units

Use this to structure relationships among units
2. Information Architecture
C. Chunking
Readers appreciate short chunks of
information that can be located and
scanned
Short reference documents that are
intended to be read nonsequentially
2. Information Architecture
C. Chunking
Discrete chunks of information lend
themselves to web links
Chunking can help organize and present
information in modular layout that is
consistent throughout the site
2. Information Architecture
C. Chunking
Let the nature of the content suggest how it
should be subdivided and organized.
2. Information Architecture
You need to divide your content into Topics
2. Information Architecture
Read
1) Letting people start key tasks immediately
2) Sending people the right way (pg 41-46)
3)
Breaking up large documents (pg 69-80)
2. Information Architecture
Find examples of sites:






Divide content into topics based on
Time and sequence
Task
People
Type of information
Questions people ask
2. Information Architecture
Navigation workshop
Read
Build your site up from the content (pg 50)
Online card sorting
2.Navigation
Information
Architecture
workshop
Read
Build your site up from the content (pg 50)
1. Write each topic on a card
2. Organize topics into groups/clusters
that seem intuitive and logical
3. Label groups/clusters
4. Go through the steps again
5. Repeat until there is consensus about what
organization makes most sense
2. Information Architecture
D. Site map
Site diagrams visualize the developing
information hierarchy
Help communicate the concepts to the
team
2. Information Architecture
D. Sitemap
2. Information Architecture
D. Sitemap
Site diagrams provide the global overview
of the developing web site
Useful when your project moves from
planning to web page production
2. Information Architecture
D. Sitemap
First place programmers look to gain an
understanding of how the site files should
be subdivided into directories (folders) on
the server
2. Information Architecture
E. Wireframe
“Rough map”
Rough two-dimensional guides to where the
major navigation and content elements of your
site might appear on the page
2. Information Architecture
C. Wireframe
2. Information Architecture
E. Wireframes
Eventually be used by graphic and interface
designers to create preliminary and final page
designs for the site
2. Information Architecture
E. Wireframes
Force teams to stay focused on the
information architecture and structural design
without getting sidetracked by the distraction
of the visual layer.
2. Information Architecture
E. Wireframe
2. Information Architecture
E. Wireframe - standard elements






Organizational logo
Site identity or titles
Page title headlines
Breadcrumb trail navigation
Search form
Links to a larger organization of which you are a
part
2. Information Architecture
C. Wireframe - standard elements






Global navigation links for the site
Local content navigation
Primary page content
Mailing address and email information
Copyright statements
Contact information
2. Information Architecture
E. Wireframe
Sample
Sketch
2. Information Architecture
Keep your wireframe diagrams






simple and unadorned
avoid distinctive typography
use a single generic font
use gray tones if you must to distinguish
functional areas
avoid color or pictures
usually only graphic that appears is the
organization logo
2. Information Architecture
Where to put things, and why
Handout
The Website Development
Process
2.
Site definition and planning
Information architecture
3.
Site design
4.
Site construction
Site marketing
Tracking, evaluation and maintenance
1.
5.
6.
Website Design Involves
1. Interface Design
How the user interacts with the site
2. Page Design
Designing the appearance/style of the ‘pages’ of the site
Balancing elements (text, graphics)
3. Site Design
Design Critiques
Look at successful models of websites from
the user perspective.
See what works and what does not
3. Site Design
Every site will consist of a number of linked
pages.
The differences will be:



Number of pages (breath and scope)
How they are linked (navigation system)
How easy or difficult to use and get around
3. Site Design
Interface
Interface design
How the user interacts with the site
Methods Used:



Metaphors
Images
Text
3. Site Design

Must suit target audience

Simple

Consistent
Interface
3. Site Design
Interface
“Wayfinding”
describe concept of environmental legibility
that is, the elements of the built environment
that allow us to navigate successfully through
complex spaces like cities and towns.
3. Site Design
Interface
The most fundamental underlying metaphor
of the World Wide Web is navigation through
a space populated by places we call web
“sites”.
3. Site Design
Interface
Wayfinding has four core components:
1. Orientation: Where am I am right now?
2. Route decisions: Can I find the way to where I want
to go?
3. Mental mapping: Are my experiences consistent
and understandable enough to know where I’ve
been and to predict where I should go next?
4. Closure: Can I recognize that I have arrived in the
right place?
3. Site Design
1.
2.
Interface
Most people’s maps were populated by
five types of elements:
Paths: Familiar streets, walkways, subway
routes, bus lines
Edges: The physical barriers of walls,
fences, rivers, or shorelines
3. Site Design
Interface
3. Districts: Places with a distinct identity, such as, in
New York, Chinatown, Wall Street, and Greenwich
Village
4. Nodes: Major intersection or meeting places, such
as the clock in New York’s Grand Central Terminal
5. Landmarks: Tall, visible structures that allow you to
orient over long distances
3. Site Design
Interface
Principles for wayfinding in web sites
1. Paths: Create consistent, well-marked navigation
paths
2. Regions: Create a unique but related identity for
each site region
3. Nodes: Don’t confuse the user with too many
choices on home and major menu pages
4. Landmarks: Use consistent landmarks in site
navigation and graphics to keep the user oriented
3. Site Design
Interface
Readers need a sense of context of their place
within an organization of information.
Electronic documents provide none of the physical
cues we take for granted in assessing information.
3. Site Design
Interface
Your home page is not the only gateway to your site.
Search engine users increasingly arrive at a site on
internal content pages, not the home page.
3. Site Design
Interface
3. Site Design
Interface
Browse versus search
User interface research shows that about half
of web users prefer to browse through menu
lists of links to find information, and the other
half will go straight to the search box to enter
keywords for search.
3. Site Design
Interface
No matter how big your site is, users only
see one page at a time.
3. Site Design
Interface
Even the view of individual web pages is
restricted for many users.
3. Site Design
Interface
Web pages need to give the user explicit
cues to the context and organization of the
site.
3. Site Design




Interface
Site graphics
Page titles
Breadcrumb trails
Navigation links
can supply the cues that allow users to establish
their “you are here” location within the site.
3. Site Design
1.
2.
3.
4.
5.
6.
7.
Clear navigation aids
No dead-end pages
Direct access
Simplicity and consistency
Design integrity and stability
Feedback
Bandwidth
Interface
3. Site Design
Interface
1. Clear Navigational Aids
a.
b.
c.
Users should always be able to return easily to
your home page and to other major navigation
points in the site.
Basic links should be present and in consistent
locations on every page.
Headers provide basic navigation links and create
an identity that tells users they are within the site
domain.
3. Site Design
Interface
Main interface problem
lack of any sense of where you are within
the local organization of information.
3. Site Design




Interface
Clear consistent icons
Graphic identity schemes
Page titles
Headings
can give users confidence that they can find
what they are seeking without wasting time.
3. Site Design
Interface
2. No dead end pages
Make sure all pages in your site have at
minimum a link back to the home page or,
better yet, a home page link along with links to
other main sections of the site.
… Interface Design
3. Direct access
Define an efficient hierarchy of information
 This allows users to access what they want quickly
 Minimize the steps needed to reach it the
information
3. Site Design
Interface
4. Simplicity and consistency
The goal is to be consistent and
predictable;
your users should feel comfortable
exploring your site and confident that they
can find what they need.
… Interface Design
4. Simplicity and consistency
Your interface metaphors should be
simple, familiar, and logical—if you need a
metaphor for collections of information,
choose something familiar, such as file
folders.
… Interface Design
4. Simplicity and consistency
Unusual or peculiar “creative” navigation
and home page metaphors always fail
because they impose an unfamiliar,
unpredictable interface burden on the
user.
… Interface Design
4. Simplicity and consistency
Let your content shine, and let the
interface recede.
The best information designs are never
noticed.
… Interface Design
A consistent approach to the




layout of titles
subtitles
page footers/headers
navigation links
to your home page or related pages will
reinforce the user’s sense of context within
the site.
3. Site Design
Interface
5. Design integrity and stability
A site that looks sloppily built, with poor visual
design and low editorial standards, will not
inspire confidence.
3. Site Design
Interface
6. Feedback
Feedback also means being prepared to
respond to your users’ inquiries and
comments.
3. Site Design
Interface
7. Bandwidth Considerations
Research shows that the threshold for frustration
is about 10 seconds
3. Site Design
Every web page needs:

An informative title

The creator’s identity

A creation or revision date
Interface
3. Site Design
Interface
Every web page needs:

A copyright statement, Creative Commons statement, or
other statement of ownership to protect your intellectual
property rights

At least one link to a local home page or menu page, in a
consistent location on all pages

The home page url
3. Site Design
Interface
Most web pages should also incorporate these additional elements:

An organization logo or name near the upper left corner, with a link
back to your home page

Navigation links to other major sections of your site

At least one heading to identify and clarify the page content

Mailing address and contact information or a link to this information

Alternate (“alt”) text identifying any graphics on the page
3. Site Design
Interface
Include these basic information elements and
you will have traveled 90 percent of the way
toward providing your users with an
understandable web user interface.
3. Site Design
Interface
Read handout
Page Structure & Site Design
Briefly explain with the aid of a diagram what should
be each of the following areas:
header
content
footer
Make sure you have placed all relevant in your
wireframe.
Site Design

Organising information


Organising site content. Each page in your
site needs to be placed in a structure chart or
storyboard
Designing the Navigation Structure



Textual v graphical
Consistent placement and colour of links
Global, local and document navigation
Organising Information

Organising content

We can learn from the organisation of printed
material ie books, magazines and periodicals
and their conventions:


Chapters, tables of contents, page numbering,
footnotes, indexes etc
Web documents will evolve and develop
their own conventions in time
3. Site Design
Universal usability
a. Equitable use
b. Flexibility in use
c. Simple and intuitive to use
d. Perceptible information
3. Site Design
Page
Page design
Design grids - Good design depends on
creating a hierarchy of contrast and viewer
attention, so that a few focal areas of the
page become entry points and the other
page materials are clearly secondary
3. Site Design
Page
3. Site Design
Visual Design





Consistency
Contrast
Whitespace
Style
Simplicity
Page
The Website Development
Process
4.
Site definition and planning
Information architecture
Site design
Site construction
5.
Site evaluation and maintenance
6.
Site marketing
1.
2.
3.
3. Evaluating and maintaining a site
A.
Conduct basic technical tests
B.
Conduct basic usability tests
C.
Collect site feedback
D.
Present web pages to others (team and
clients) for feedback and evaluation
3. Evaluating and maintaining a site
A.
Conduct basic technical tests
B.
Conduct basic usability tests
C.
Collect site feedback
D.
Present web pages to others (team and
clients) for feedback and evaluation
A. Conduct basic technical tests
Check

spelling

links
http://validator.w3.org/checklink
[broken & orphaned links
(files with no links to them)]
Find & fix problems
A. Conduct basic technical tests
Check

Validation

XHTML
Check markup to see if it conforms to the rules of the Doctype
http://validator.w3.org

CSS
http://jigsaw.w3.org/css-validator/
Point out problem & provide an explanation
Only checks one page at a time
A. Conduct basic technical tests
Check

Validation

XHTML
http://www.sitepoint.com/launch/htmlforum

CSS
http://www.sitepoint.com/launch/cssforum
A. Conduct basic technical tests
Check

Accessibility
http://www.contentquality.com/
A. Conduct basic technical tests
Check

browser compatibility (preview in browsers)
Find & fix problems
3. Evaluating and maintaining a site
A.
Conduct basic technical tests
B.
Conduct basic usability tests
C.
Collect site feedback
D.
Present web pages to others (team and
clients) for feedback and evaluation
B. Conduct basic usability tests
Usability testing is conducted to measure
how well users interact with the site.
It tells whether users can



Find information
Navigate the site
Utilize its features without difficulty
B. Conduct basic usability tests
The user is given a series of tasks, such as find some
information that is known to be on the site, and
observe how quickly they perform the task.

One-to-one with an observer and individual user
Recording a user’s activities with software or a
camera

B. Conduct basic usability tests
Note how easily and quickly user completes
each task
Record users reaction to the site architecture,
navigation and page elements
B. Conduct basic usability tests
Testing is conducted in rounds, with just a few
users per round
After a round of testing, a review is conducted
by the design team, changes made to the site,
and a subsequent round of testing is conducted
B. Conduct basic usability tests
After a few rounds, the main issues that
prevent users from accessing the site have
usually been identified and resolved, and the
site is ready for publication.
B. Conduct basic usability tests
Accessibility tests measure how well users with
visual, auditory, motor and other impairments
can access the site.
C. Collect site feedback
Gather feedback informally, by interviewing the
client and asking questions, or formally through
the use of a survey.
D. Present web pages to others
When your site is close to completion and
technical errors have been resolved, you may
wish to present it to the client and others
outside of the project team and gather
feedback.
The Website Development
Process
5.
Site definition and planning
Information architecture
Site design
Site construction
Site evaluation and maintenance
6.
Site promotion
1.
2.
3.
4.
Site Promotion
1. Submit your website to search engines

Link from other sites search engines know about

Fill in a form on a site
http://www.google.com/addurl
http://search.msn.com/docs/submit.aspx
http://search.yahoo.com/info/submit.aspx
Site Promotion
2. Register with directories

Internet directories
Open Directory Project http://dmoz.org/add.html

Regional directories
http://www.delicious.com
http://cubeonlinemarketing.ie/listofirishwebdirector
ies/
Site Promotion
2. Register with directories





Vertical directories (related to industry)
Put press releases into classified sites.
Put adds in for your service and link to website.
Link from as many services as possible.
Look at competitors.
Site Promotion
3. Friends and colleagues
4. Email signatures with site details
5. Add signatures to posts on related forums
6. Link exchange
Swap links with other sites
Site Promotion
Read
37 ways to market your website