Website Development Process. Introduction A. Types of websites B. Web development team.

transcript

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

Simple CMS

Popular, inexpensive, widespread

Easy publication of text, graphics, multimedia content

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

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 planning2. Information architecture

3. Site design

4. Site construction

5. Site marketing

6. Tracking, evaluation and maintenance

1. Site Definition and Planning

A. Mission statement

B. Competitive Analysis

C. Audience Profile

A. Mission statement

1. Define purpose/goals To buy and sell something To entertain To educate To inform

2. Define scope

• Serves as a useful prioritizer and simplifier when the project is growing complex

• Prevents scope creeping

B. Analyze competitors’ websites

Extrapolate techniques: approaches, functionality, usability, and accessibility

Search engine visibility

Promotional techniques

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

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?

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

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

Read Letting Go of the Words, Chapter 2

Write a brief explanation of the 7 steps to understand your audience

1. Site definition and planning

2. Information architecture3. Site design

5. Site marketing

2. Information Architecture

A. Inventory your content

B. Establish a hierarchical outline of content

C. Chunking

D. Site map

E. Wireframe

A. Inventory your content

Assess the content you need to achieve your goals

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?

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

Web content inventories of existing sites take form of spreadsheet with multiple worksheets

Each page on the site gets a row with columns listing

Page title URL People responsible for content General type of content

Example

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

C. Chunking

Readers appreciate short chunks of information that can be located and scanned

Short reference documents that are intended to be read nonsequentially

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

C. Chunking

Let the nature of the content suggest how it should be subdivided and organized.

You need to divide your content into Topics

1) Letting people start key tasks immediately

2) Sending people the right way (pg 41-46)

3) Breaking up large documents (pg 69-80)

Find examples of sites:

Divide content into topics based on Time and sequence Task People Type of information Questions people ask

2. Information ArchitectureNavigation workshopReadBuild your site up from the content (pg 50)

Online card sorting

2. Information ArchitectureNavigation workshopReadBuild 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

D. Site map

Site diagrams visualize the developing information hierarchy

Help communicate the concepts to the team

D. Sitemap

Site diagrams provide the global overview of the developing web site

Useful when your project moves from planning to web page production

D. Sitemap

First place programmers look to gain an understanding of how the site files should be subdivided into directories (folders) on the server

E. Wireframe

“Rough map”

Rough two-dimensional guides to where the

major navigation and content elements of your site might appear on the page

C. Wireframe

E. Wireframes

Eventually be used by graphic and interface designers to create preliminary and final page designs for the site

E. Wireframes

Force teams to stay focused on the information architecture and structural design

without getting sidetracked by the distraction of the visual layer.

E. Wireframe

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

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

E. Wireframe

Sample

Sketch

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

Where to put things, and why

Handout

2. Information architecture

3. Site design4. Site construction

5. Site marketing

Website Design Involves

1. Interface DesignHow the user interacts with the site

2. Page DesignDesigning the appearance/style of the ‘pages’ of the site

Balancing elements (text, graphics)

3. Site DesignDesign Critiques

Look at successful models of websites from the user perspective.

See what works and what does not

3. Site DesignEvery 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

Must suit target audience

Simple

Consistent

“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.

The most fundamental underlying metaphor of the World Wide Web is navigation through a space populated by places we call web “sites”.

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?

Most people’s maps were populated by five types of elements:

1. Paths: Familiar streets, walkways, subway routes, bus lines

2. Edges: The physical barriers of walls, fences, rivers, or shorelines

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

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

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.

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.

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.

No matter how big your site is, users only see one page at a time.

Even the view of individual web pages is restricted for many users.

Web pages need to give the user explicit cues to the context and organization of the site.

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.

1. Clear navigation aids

2. No dead-end pages

3. Direct access

4. Simplicity and consistency

5. Design integrity and stability

6. Feedback

7. Bandwidth

1. Clear Navigational Aidsa. Users should always be able to return easily to

your home page and to other major navigation points in the site.

b. Basic links should be present and in consistent locations on every page.

c. Headers provide basic navigation links and create an identity that tells users they are within the site domain.

Main interface problem

lack of any sense of where you are within the local organization of information.

Clear consistent icons Graphic identity schemes Page titles Headings

can give users confidence that they can find what they are seeking without wasting time.

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

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.

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.

Unusual or peculiar “creative” navigation and home page metaphors always fail because they impose an unfamiliar, unpredictable interface burden on the user.

Let your content shine, and let the interface recede.

The best information designs are never noticed.

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.

5. Design integrity and stability

A site that looks sloppily built, with poor visual design and low editorial standards, will not inspire confidence.

6. Feedback

Feedback also means being prepared to respond to your users’ inquiries and comments.

7. Bandwidth Considerations

Research shows that the threshold for frustration is about 10 seconds

Every web page needs:

An informative title

The creator’s identity

A creation or revision date

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

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

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.

Read handoutPage Structure & Site Design

Briefly explain with the aid of a diagram what should be each of the following areas:

headercontentfooter

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

Visual Design Consistency Contrast Whitespace Style Simplicity

3. Site design

5. Site evaluation and maintenance6. Site marketing

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

Check spelling

links http://validator.w3.org/checklink

[broken & orphaned links (files with no links to them)]

Find & fix problems

Check Validation

XHTMLCheck markup to see if it conforms to the rules of the Doctypehttp://validator.w3.org

CSShttp://jigsaw.w3.org/css-validator/

Point out problem & provide an explanation

Only checks one page at a time

Check Validation

http://www.sitepoint.com/launch/htmlforum

http://www.sitepoint.com/launch/cssforum

Check Accessibility

http://www.contentquality.com/

Check browser compatibility (preview in browsers)

Find & fix problems

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

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

Note how easily and quickly user completes each task

Record users reaction to the site architecture, navigation and page elements

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

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.

Accessibility tests measure how well users with visual, auditory, motor and other impairments can access the site.

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.

3. Site design

5. Site evaluation and maintenance

6. Site promotion

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/listofirishwebdirectories/

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

37 ways to market your website

Website Development Process. Introduction A. Types of websites B. Web development team.

Documents