Hello World!

Graham Ruddick

Building a webpageTemplate

Content(CMS)

Images

What we’ll cover What’s a web site Understanding audiences KPIs and ‘what’s good’ Information architecture Principles of design Producing wireframes Writing for the web & simple SEO Approaches to project management Managing an agency relationship Responsibilities around sign off User acceptance testing Launch

Structure and tech of a website

How the web works

Building a website: components

Graphics & Colours

How websites work

3. The request is sent to a Domain Name Server

4. The DNS returns a web address: www.myshow.com = 123.234.500.345

1. The user ‘goes online’ and establishes a link to their own web server

2. The user types in a URL:www.myshow.com

5. The page is requested from the host serverAnd a session is started

6. The host server asks its backend systems to put together the right page

7. The correct page is sent to the user

Building a webpage

Head

Body

Web graphics

Web images are made of pixels

Web graphics – how graphics are encoded

1. Start with the grip of pixels – here 10 x 102. Describe each pixel in order3. Creates imagesBlack, black, black, black, black, black, black, black, black, black

Black, black, black, white, white

Web graphics – how colours are described Online colours are described in terms or Red,

Green and Blue (RGB) Using 0 – 255 scale

Converted to base 16 (hexidecimal) for code purposes

255, 0, 0

0, 255, 0

0, 0, 255

255, 255, 0

0, 255, 255

255, 0, 255

255, 255, 255

125, 125, 125

0, 0, 0

Web graphics file types Gif – good for block colour/cartoon etc Jpeg (.jpg) - good for photos Png – increasingly used (although some older

browser don’t render png)

Creating a site

Audience groups Needs and priority of messages

Business needs What you need the audience to do What are the required outcomes Prioritise

Information architecture How do you structure information and functionality to best satisfy the

priorities set Design

Real estate Menu and page structure Iconography

Understanding audiences

Audience needs and how you help them

Value proposition

Personas

Use cases/User journeys

Understanding audiences Audience needs and how you can help them

Groups/sectors/regions/types etc Defining needs sets Understanding and focusing on those needs you

can help satisfy

Value propositions Benefit based (not feature statements) One per group you plan to serve Short, pithy and understood by whole

organisation

Value proposition development Question 1 – What are the key customer groups?

Identify those who buy and those who impact the decision. Question 2 – What are the needs of those groups?

What are the objectives that are going to be in mind when they are choosing a specific action/making a decision

Recognise those that we can and cannot necessarily fulfil Recognise that, where we have different groups with different prioritised

needs, this translates to a need for us to deliver different product offers. Question 3 – How is this prioritised for the business?

Customer groups are generally prioritised by economic impact, the needs analysis by what is important to the customer

Question 4 - For each one of the key customer groups’ needs: how well do we fulfil them? How well do we fulfil them at the moment How well will we fulfil them in the future How well do we fulfil them in contrast to our competitors

Question 5 – What is our value proposition?

Developing personas

Build personal attributes Demographic Psychographic ‘webographic’

Create a ‘primary persona’

“Your primary persona needs to be a common user type who is important…but needy”

Developing user cases (user journeys) It’s about story telling It captures each step of that particular users

journey It makes as many descriptive calls as possible It drives the structure of the project It provides your test analysis scripts

User journeys

User journeys/case studies

Setting KPIs Traditional onsite

The traditional onsite metrics remain important for a community site Page views Visits Unique visitors Registrations

Engagement onsite Articles and posted content from community Volunteered feeds Pages per visit Recency % Loyalty % Comments and UGC Member invitations (by members)

Buzz metrics/share of voice/sentiment Mentions of your site in social media (plus sentiment measurement) Identification of key advocates (number, influence etc) Reach of your site through social channels (cf Alexa)

Information Architecture Key content groups Sub elements of content groups Consistent levels/layers 2/7 rule Identification of location “where am I?” No dead ends

Card exercise

Wireframes

Digitaldoughnut wireframes

Design Match priority of messages Menus = info architecture Consistent placement Use of real estate Advertising opportunities Colours Simplicity White space Resolution

Design discussion examples www.lingscars.com www.apple.com Impressapenguin.com

User centric design

UCD Process: start early, step up pace and involve users

For best results begin as early as possible in the product development cycle

Iterative and rapid … allows for quick changes

Work with product management, developers … and users!

Involve your users as soon as possible, for best UCD benefits

Opportunity for design changes

Requ

irem

ents

Desig

n

Develop

men

t

Laun

ch

Conce

pt

The earlier UCD is involved…

… the more value UCD can create… the quicker the project can run… the less money the project will

cost… the more likely it is that the

project will be a success

When should you get UCD involved?

The earlier the better! Cost of design changes

Requ

irem

ents

Desig

n

Develop

men

t

Laun

ch

Conce

pt

Pre-production test methods: expert reviews

Definition

First releaseEvaluation &

Redesign

Project ManagementProject Management Project ManagementProject Management Project ManagementProject ManagementProject ManagementProject Management

Production & Implementation

Concept

PHASE 1

PHASE 2 PHASE 3

Pre-production

PHASE 4

Common method in concept phase is

Expert Review/Usability Expert Test:– Based on mock ups– Conducted by experts– Thorough review based on

best practicesOther methods are: Cognitive walkthrough (based on user’s

goals / scenario’s) and GOMS (Walkthrough based on goals & sub goals)

But, never leave it toexpert reviews – theyAre easy to get the basicsright, but do Involve yourCustomers in the nextphases!

Pre-production test methods: involving your customers

Definition

First releaseEvaluation &

Redesign

Project ManagementProject Management Project ManagementProject Management Project ManagementProject ManagementProject ManagementProject Management

Production & Implementation

Concept

PHASE 1

PHASE 2 PHASE 3

Pre-production

PHASE 4

User Test– Based on user’s goals / scenario’s– Conducted by clients

Focus Groups:– User feedback on initial concepts / first drafts– Initial response to design– Check assumptions on expected user behaviour

Other method in this catgory is: Card sorting (Structuring content)

Pre- and postproduction test methods: involving your customers

Definition

First releaseEvaluation &

Redesign

Project ManagementProject Management Project ManagementProject Management Project ManagementProject ManagementProject ManagementProject Management

Production & Implementation

Concept

PHASE 1

PHASE 2 PHASE 3

Pre-production

PHASE 4

Task Analysis:– evaluation through observation and interviews of how people actually accomplish things on

the website– a set of tasks that support the visitor’s goals is determined

Eye tracking: – This technique measures the Eyeball movement and tracks the way visitors go through the

website.

Mouse movement tracking:– Clickmap Measurement. Tracking clicking behavior of users

Other methods in this category:Analyzing statistics and Prototyping (Non-)clickable mock-ups

Heatmaps allow you to test your design assumptions in a glimpse….

Source: http://poynterextra.org/eyetrack2004/heatmap.htm

Elsevier Tuition used the mouse movement tracking method to evaluate its website’s navigation and forms.

Writing for the web & SEO Write relevant content

It may be tempting to write about your brother's dog, but if it doesn't relate to your site or page topic, leave it out. Web readers want information, and unless the page is information about said dog, they really won't care, even if it is a good metaphor for what you're trying to say.

Put conclusions at the beginningThink of an inverted pyramid when you write. Get to the point in the first paragraph, then expand upon it.

Write only one idea per paragraphWeb pages need to be concise and to-the-point. People don't read Web pages, they scan them, so having short, meaty paragraphs is better than long rambling ones.

Use action wordsTell your readers what to do. Avoid the passive voice. Keep the flow of your pages moving.

Format; Use lists instead of paragraphsLists are easier to scan than paragraphs, especially if you keep them short.

Writing for the web & SEO Limit list items to 7 words

Studies have shown that people can only reliably remember 7-10 things at a time. By keeping your list items short, it helps your readers remember them.

Write short sentencesSentences should be as concise as you can make them. Use only the words you need to get the essential information across.

Include internal sub-headingsSub-headings make the text more scannable. Your readers will move to the section of the document that is most useful for them, and internal cues make it easier for them to do this.

Make your links part of the copyLinks are another way Web readers scan pages. They stand out from normal text, and provide more cues as to what the page is

Proofread your workTypos and spelling errors will send people away from your pages. Make sure you proofread everything you post to the Web

Basic rules of good SEO at early stageDO: Title tags Key phrases (especially in main entry pages) Meta tags Relevant content in correct format (H1 etc) Sitemaps – no cul-de-sacs Review the favourite search keywords on your

site Always add ALT tags to images to explain the

content in the image Concentrate on optimizing main entry pages

first

Project management

Waterfall project management

Initiation

Specify DesignBuild &

testDeploy

ObjectivesStake holdersFundingGo ahead

PhasesNeeds analysisSoWTeamResourcesUse cases

IANavigationModulesLook feel

Back end Front endDatabase layer

UATStaging to liveBeta testingPromotionLaunch

Agile manifesto Individuals and interactions over

processes and tools Working software over comprehensive

documentation Customer collaboration over contract

negotiation Responding to change over following a plan

Features of agile Short iterations (timebox or chapters) Mixed skill teams (Customer representative,

scrum master, design, dev) Iterative approach Absolute focus on business benefit Focus on collaboration and discussion over

docs

Roles and responsibilities In house

Champion/sponsor Project lead Project manager Brand management

Supplier Account management Project manager Technical Lead Design lead Back end developer Front end developer

Launch

Technical aspects of launch

Marketing aspects of launch

Technical aspects of launch User acceptance testing

Based on use cases – does it do what you asked it to?

Does it seem to be sensible Get some other people (customers) to help testing

Move from staging to live Beta testing Final elements of UCD

‘Make live’ Change the DNS to point at the new site Start marketing it!

Keep testing

Managing an agency relationship

Managing an agency Be open

Be clear about what you’re trying to do for whom Be open about how you will make money and

which bits are important to you Tell them your budget

Be organised Go through as much of the process as you can Sign off when you say you will Don’t let scope creep or ambition creep over

extend the project

Summary Understand audiences and their needs KPIs and ‘what’s good’ Information architecture Wireframes Design Writing Build User acceptance testing Launch