Viestintä II

1.11.11

Web Site Project *phases & challenges

Antti Leino

Digital director @ Omnicom Media Group

#anttileino

Author of “Dialogin aika” and “.net (2010),

Verkkoviestinnän käsikirja” (1999), and

“Social Web for Small Biz” (2012)

Visualize.me

Pukstaavi.fi 3

Pukstaavi: tarjoupyynnössä riskillä ehdotus teknisestä alustasta, jonka roolin tulkitsin tärkeäksi tekijäksi

4

Pukstaavi: alkuperäinen kustannusarvio pohjautuen tarjouspyyntöön

tuntia € yhteensä SUUNNITTELU Aihealueeseen tutustuminen 4 0 0 Työpajojen valmistelu 40 0 0 Työpajat (2 kpltta) 6 0 0 Työpajojen purku 40 0 0 Toimenpidesuunnitelman luominen 4 0 0 ja toteutus Yhteys/projektinjohto/tekn valvonta 16 0 0

Avaus yhteensä 0

TEKNINEN TOTEUTUS Annetun konseptin ja ulkoasun pohjalta Oletuslaajuus noin 20 sivua

Verkkosivuston työstäminen suunnitelmien mukisesti 0 Verkkosivustoon liittyvä koulutus sisältyy hintaan 0 Uutiskirjepalvelun käyttöönotto 0

Koodiviidakko yhteensä 0

YHTEENSÄ 0

YLLÄPITOKUSTANNUKSET(Koodiviidakko) Ylläpitomaksu julkaisujärjestelmä ja uutiskirjetyökalu 137 €/kk Uusien sivujen tuotanto 75 €/h

5

6

7

Phases of Web Site -project

Phase 1: Definition and requirements: why? To whom?

Phase 2: Development of size, content and structure: what?

Phase 3: Visual design and interface development: how?

Phase 4: Production and quality control

Phase 5: Launch and follow-up

http://www.slideshare.net/anttileino/verkkopalvelun-suunnitteluprosessi-in-brief

8

Phase 1 - Definition and requirements

9

Phase 1 - Definition

Collection information

Client Survey • Business requirements • Common information, products and services • Business area analysis • Current web site / previous solutions- analysis • Reasons for the project / re-design • Target audience and their desired behavior • User -studies • Desired overall feelings • Content requirements • Technology requirements • Marketing and maintenance

Collecting user needs and user understanding

• User segmentation / manageable chunks of user needs • demographic criteria • psychographic criteria • attitudes towards technology • knowledge of the subject in matter (novice, expert, professional)

• Create different user groups • Stock-broker system for novice small investors versus system for professional users must be different even they are using the same web-based application

Pukstaavi.fi requirements 11

12

After conversations and studies we should have an understanding about the following topics:

Objectives – Overall goals? Business goals - sell more, save money? What other objectives can be accomplish? Think: tonality, message, usability, recognition.

Audience – Expected visitors, what do we know about them? What type of user profiles can be seen? Visitors needs, wishes, expectations, skills?

Create “User Personas” to help focus on most important user groups.

Tone-of-voice – what kind of tonality our client is looking for? Where do we want our visitor to focus on page? Is this solution sofisticated,funny, safe, cheap, clean, fancy etc? Make clear analysis about this topic because creative work is based on it!

Size – what are the limitation of the project in all possible views: budget, timetable, creative solution, technical needs, and overall size of the site (or application). It is impossible to make a project plan without this information!

Technology – what type of innovative technology (if any) our client expects us to use? Back-end/front-end? Remember to make a technical survey also

Maintenance – what is our client´s idea about maintenance? How will be responsible and how often? Is our solution part of something bigger entity? Is ti part of some kind of Content Management System? Is needed ask client to fill Maintenance Survey.

Contact – Who are involved? Who makes decisions? When? Material available - Collect all previous related material. To know what has been done before. To know what is not supposed to do again.

13

Do not proceed without documented and approved definitions and requirements

1.  Business requirements 2.  Audience analysis 3.  Content requirements 4.  Technical requirements

Next a) cretive brief and b) project plan

14

Creative brief

Summary about project (what, to whom, why)

Recognition / tonality / guidance

Communication strategy (client)

Competitive situation (client)

Desired message in one sentence

Creative brief is typically internal document for a design team to start their work.

Debrief is a summary of the objectives which is typically discussed together with the client.

15

Project plan

List objectives and goals as well details, assumptions and limitations.

Expected size of the site / or size of the application? Does our client provide all required material like images? Will our client provide all text material? Will it be edited to the web?

Budgeting

10-20% extra for extra costs or 3rd part costs

Timetable

Realistic

“Deliverables”

Building the project team

Setting up a test area for the project / extranet

Planning testing early

Kick-off!

Box.net 16

17

Client management is expectation management

If our client signed a paper, put it in safe place.

Print all e-mails which contain approvals

Print all e-mails which includes briefs and changes

All oral approval must be re-approved via e-mail (or paper)

Communicate. Continiously. Tell where we are going. What happens next? One e-mail a week to tell what has been done and what is going to happen.

If you see challenges in budget, time or creative solutions - call our client!

Multi-vendor –project

18

Phase 2 - Development of size, content and structure

19

Phase 2 - Development

Information design organizes content/information

Information design provides guidance, “traffic signs”, which help visitors to get lost or to give up

Time spend here saves time in later phases

20

Information design will be improved via visual design

Visitors need visual clues, which help them to understand different parts of the sites and how they are related.

For example colors, s h a p e s or font sizes help to make items understandable. Typically used in navigation solutions.

21

Good information design Information design is about outlining structure both on page level (wireframing) and site level (content mapping)

Successful information design creates common and functional systems for navigation, use of images, layouts, headlines etc.

It helps visitors to know where to go, what to do, and to accomplish something etc

Visitors are not able to see efficient information design - things just work well

Information design should be done prior visual design, at least iteratively.

22

Design moves from big to small, from chaos to details

A. Content view (what are we going to publish here)

B. Site view (how to organize content to a logical chunks)

C. Page view (how to show detailed page elements within a page)

23

A. Content view

Planning and development of the content – without good, relevant content an innovative technology and fancy illustrations are just empty placeholders.

Pukstaavi / content plan 24

25

26

Content plan

Content plan = outlining content

Without this one cannot proceed in a project.

Content plan does not contain ready-made text (though, it must be produced later), it is a rough outline what kind of material, topics and items will be placed to the site.

It is also a high-level organization of the content

Bird-view perspective.

Do not waste too much time for details (headlines, sub-headlines etc). They will be decided in next phase.

Add plan for the content production to our project plan

27

Some details

Specific attention must take when your solution is based on Content Management System

• Feeding the content to the system must be plan and add to time table.

Mark to your content plan also secondary content like META-, TITLE-, form- and error messages to be produced and other content elements: photos, images, illustrations, charts and tables, videos, maps etc.

• Make your list as specific as possible (what, when, who). • Keep on eye the size of the site at the same time • Evaluate content plan weekly

Every change afterwards affects overall project (layout, navigation, CMS..)

28

29

B. Site view

Site map is a visual presentation about the structure, content organization, and in some cases about the user flow.

Why Structure Map? • The map communicates, defines and explains • If it is not at the map, it could be out of the project implementation.. • Map can be high-level presentation, or it could be very detailed

Product News

Line1

Line2

Line3

Product lines

Products

Service

Support

Services

HR

Employees

Library

Databases

Resources

Mainpage

Company

30

Tasks for the designers

Chunking: how to organize different items and how to tie them together

Similar content parts goes together but be careful not create categories visitors do not understand.

Every category creates a menu page

5±2 rule

LATCH

Prepare to expand: think and evaluate how much this site could grow and how to make it possible: navigation has extra room for example.

Leave room for any changes

If you already know that site will grow near future, add those section part of your design already now (IPO example)

31

Site map is one of the most important production tools

Keeping the site map up-to-date is important that designers can rely on it when producing images, text and especially during the implementation phase

When redesigning existing site it is wise to make a rough outline of the old site.

• Then decide can you use the same structure or not? Typically not. • Can you use same labels (nomenclature)? • Who does navigation changes?

Remember that visitors do not have manual to use your site. And no one bother to read it anyhow :-)

Pukstaavi / site map / structure 32

33

34

C. Page view

Wireframes (“rautalankamalli”) are visual story-boards of the site

Building wireframes is interface design

Wireframes contain the hierarchy of the information but they do not exactly tell how certain element should appear on the page.

Wireframes focus everything else than visual presentation. • Describe navigation, text placement, graphical elements, most important headlines and other element which should be on screen.

• In other words, raw information appearing on page.

Design wireframes from most used pages (4-8 typically)

35

Pukstaavi / wireframes 36

37

Using wireframes

Rule: wireframes are designed for all main page, all section main pages, and all templates required for the site. Plus for all pages that will include something special

Add details to every page, specify special needs for functionality (for example next the wireframe diagram)

Sometimes you need to create all wireframes

Use either a) real, typical text from client´s business or b) lorem ipsum (www.loremipsum.net)

Add marking text only the amount you think there will be on a final version

Consult all the time with visual designer! Wireframe designer must know standard user interface elements

38

Phase 3 - Visual design and interface development

39

First law of usability

40

What is the most important thing one should do if you wants to make sure your web site is easy to use?

Nothing important should ever be more than two clicks away?

Speak the user´s language?

Be consistent?

DON´T MAKE ME THINK! You should be able to “get it” - what it is and how to use it, without expending any effort thinking about it.

41

Reality check: people do not use web pages like we design them

42

?“Things” that make us think

For example:

1 Names • Cute names, clever names, marketing-induced names, company-specific names, and unfamiliar technical names

• Jobs - Employment Opportunities - Job-O-Rama

2 Link and buttons • The ones that are not obviously clickable

3 Search boxes • If user have to think about how I want to search

Customer experience and Web and iPad and Android phone and interactive kiosk…

Every site is a self-service product. • No manuals • No training • No customer service reps

There is only user, facing the site alone with only her guesses and experience to guide her.

• It´s vital to understand what people want and need.

The customer experience forms the customers impression of the company offerings.

• That why it´s vital to provide quality customer experience.

1 Simple

2 Social

3 Alternative

1 Simple

“Don´t Make Me Think!”

2 Social

“I share. You Share. They share.”

Arviot & arvostelut

Kommentointi

Mitä muut ovat sanoneet

3 Alternative

“We don’t read pages, we scan them”

Suosituimmat

Kartat

Pukstaavi / visual design 51

52

Graphic templates

Graphic template is approved layout proposal

Will be used to optimize rest of the pages and for production

Note that this proposal is always slightly different than final execution - CSS/TABLE/FLASH - based outcome is not the same than PhotoShop-layout. Tell that to client.

Now, create the final graphical elements.

> navigation on/off/over -pics

> buttons on/off/over-pics

> placeholder or alternative-images for flash and video

53

Phase 4 - Production & quality assurance

54

PHASE 4 - Production & quality assurance

Goals for the production are simple: build a site (or application) that looks the same and works similar to all visitor. Avoid multiple work, each page view is coded only ones

Evaluate project situation prior production: is it in budget? In time? Is content ready already? Is the test environment technically ready?

The dynamo of the Internet is XHTML. Make sure your production team has people who are extremely good in html programming (or flash/action scripting)

Final decisions: • Content • Functionalities and features • Design and layout • File structure and file naming • Directory naming • Domain name

55

Content is always late.

Content is always late. In 99% of the projects.

Make a plan to produce and deliver content with deadlines

Tight deadlines for the clients will help you.

More earlier you receive the content, the better information design (and visual design) will succeed.

Add some buffer for content delivery

Be very happy if content is in time - more happier if it is in good quality.

56

Size: expectation vs. reality

Is the project size like specified on site map or is it grown bigger? Can we build the project on time? How much there is totally new content to produced?

Are the graphical template ready? Can we use our prototype?

Dynamic content?

File structure is surprisingly important detail • Growth of the size • Maintenance • Direct access to sub pages • Does the file structure follow content structure • Are all images in one “img” directory?

57

Why prototype?

With prototype design team can develop visual design and interface further, fine-tune information design, recognize missing content parts (too much, too little, missing all, wrong type etc) and test again and again…

Requires testing • Difficult framesets • Functional mouse-over techniques • Locations and size specific pop-up windows • Style sheet and browser specific topics • All functionalities • Information architecture and navigation • Terminology • Usage logic

Internet Explorer, Safari, Firefox, Opera, Netscape

Building the prototype also connects production team to the project and they know what is expected to achieve.

58

Style Guide

After the templates design team writes a style guide for production and maintenance teams.

Each page on site is different but they all contain same elements. Define those elements. This allows you to build a consistent site where visitors can easier find items they are looking for.

Content of the typical style guide: • Column width • Mouseover states • Link colors • Other colors • Fonts • Headline and other text sizes •  Image dimensions • Animation effects • Usage of logo (safety areas)

59

Production

Optimization of images is extremely important for the good quality results. Learn who to use PhotoShop!

Slicing is a part of the production where all required image files are produced from the graphical master template. Slices are joint together during the building of the site

HTML-templates, are circulated within production team. These “pages” contain already information pieces like:

• Global navigation • Basic layout (TABLE, DIV) • FONT-definitions • ALT- and META text as an example (who writes them?) • Document specific comments <!-- comment -->

Test HTML template

60

Production #2

Building is done either with HTML-editor, by hand (or with Flash development tool)

Add content to pages (or feeding content to CMS)

Light scripting with javascript (or Actionscript / flash)

Even programmable page (.asp, .php etc) require one or more HTML-template where programming is added

Add other media types

Look at the size of the pagte. Over 100 kbyte is typically too heavy.

Hand coding or editor?

Version control?

61

Quality assurance

Site is ready (almost). Time to quality assurance

Quality Manager / Engineer

Never, never publish a site without quality assurance. Never.

Broken links. Placeholder-text and -images. Functionality bugs. Wrong content is wrong place.

Testing environment should be similar than final server environment (dynamic material)

Prioritizing finding and fixing

62

Phase 5 - Launch & follow-up

63

PHASE 5: Launch & follow-up

Setting up final production environment

File transfer to the www-server (FTP, SCP)

Marketing

Traffic measurement / Google Analytics • Most visited pages • Most used functionalities • Most downloaded files • etc

64

What ever you do..

Don´t make me think!

Whatever you decide to design…

65

Thanks!