Post on 28-Dec-2015
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