Lancs Mountain Cycle Club80.229.138.60/hjnr/downloads/web/co1552_ass_2.pdf · Initial Storyboard generation ‘Homepage’ Storyboard 5 ... 11-15 2 Too young for dangerous sports

Lancs Mountain Cycle ClubContents

Preface

An Insight into the Target AudienceThe Targeted User Group 3

Children 4Visually impaired 4

Conclusion 4

Initial Storyboard generation‘Homepage’ Storyboard 5

‘What to Ride’ Storyboard 6

The Look and Feel of the Site (Multimedia consideration)Background colour 11Background media 12

Graphic images JPGGraphic images GIF

Button MediaOther Button types

Streaming Video

Site Hierarchy

Data Sources

Predictive Evaluation

Production Storyboard

Appendix

Lancs Mountain Cycle Club

04/04/2006 --- 12:17 AM page 2 of 23

Preface

The purpose of this site is educational only. With this saidthere will be image and information materials that will havebeen poached from many varied areas without anyconsideration for copyright law. Had this site been aproduction site then these copyright issues would havebeen properly addressed, image and information approvalof use would have had prior consent of use.

All information provided within this site, where possible, isaccurate to manufacturer’s recommendations. (Had theybeen consulted)

The title “Lancs Mountain Cycle Club” is not a registeredtrademark of any known body.


04/04/2006 --- 12:17 AM page 3 of 23

Anticipated User Groups

The term “Hits” refers to any persons viewing the site. Assumptions are all potential hits arepeople with internet access.

I started by trying to identify possible age groups of all potential hits. Form the table 1 I canimmediately narrowed the scope of the site to both genders aged between 16 and 40. Obviouslythere is still potential for hits outside of this range but due to this being the targeted age group,ages out of this range will not be directly catered for, but always welcomed.

Gender Age Degree ofinterest 1-5 Comments

5-10 1 Too young for dangerous sports11-15 3 Too young for dangerous sports16-20 4 Targeted21-25 5 Targeted26-30 5 Targeted31-35 5 Targeted36-40 4 Targeted41-45 4 Too old for dangerous sports46-50 3 Too old for dangerous sports

Male

50+ 1 Too old for dangerous sports5-10 1 Too young for dangerous sports

11-15 2 Too young for dangerous sports16-20 2 Targeted21-25 3 Targeted26-30 3 Targeted31-35 3 Targeted36-40 2 Targeted41-45 2 Too old for dangerous sports46-50 2 Too old for dangerous sports

Female

50+ 1 Too old for dangerous sportsTable 1

From the targeted rage of all people aged 16 to 40 there has to be much narrowing of theaudience scope. Factors considered were, the site content topic, obviously not every 16 – 40year old is going to be interested in mountain cycling, but the ones that are, concern this site.To satisfy the curiosity of the intended audience I will have to define what this niche market willbe in search of when visiting the site. With a “Toys for Boys” feel already savouring the appetite Ididn’t want to drive away women. The girls will have to be catered for.


04/04/2006 --- 12:17 AM page 4 of 23

The Targeted User Group

So we have identified the 2 age/gender groups which are going to betargeted. From a web designer’s point of view, these hits will besurfing for different purposes. As it is to be a new site many may besteered by a search engine, the rest will be either referrals form othersites or hits (suggested by a friend), else direct hits from market placeadvertisements. However I’m not here to market the site just to scopethe audience and build a site to suit them.

Potentially the interest for visiting hits are going to vary, looking at what content the site will offerby means of interests and attractions, will give us a better view of our audience.

The site through content is going to attract more men than women; this guesstimated opinioncan be easily validated by the ratio of men to women seen enjoying the mountain biking sport.This does not give the excuse to ignore the ladies. Women’s interest in this site is going to be ofeither a more defined group (sports/interested parties) or however if our expected audience islooking for eye-candy then why not give them what they want.

Table 2

Audience Motivational Reasons (expected) Site Content

High Octane, big risk dangerous pursuits, attractslarge numbers of males this age group.

Insanity appeal, drawsin the “fellas”

Targeted by the sites studied earlier. (Already provenscope).

Evidence from earlierstudies

Sports and fitness enthusiasts, keen out door typepeople and obviously MTB cyclists.

It’s a sports orientatedsite.

Reviews of fashion trends. Hardware, clothingancillaries

What’s hot and what’snot. (though for thissite only hardware)

Males16 - 40

(PrimeTargeted)

Shopping, or for the sourcing info, perhaps for afuture purchase

Bike info / advice may-be an ask a pro, form.

Often persuaded by partners See male motivations.

Sports and fitness enthusiasts, keen out door typepeople and obviously MTB cyclists.

It’s a sports orientatedsite.

Female16 – 40

(SecondaryTarget) Shopping, or for the sourcing info, perhaps for a

future purchase. Or even searching for a present.

Would women have aless technical insightand therefore needfurther advice?


04/04/2006 --- 12:17 AM page 5 of 23

Children

Children of all years will show some interest, some will find themselves upon this siteso content has to be suitable for view by all ages, though no content is to be provided

for this audience at this time, future updates may change this limitation.

Disabled surfers

Hits with physical disabilities will be welcomed but as per nature of the sitecontent there is little scope for entertaining severely disabled mountain bikecycle enthusiasts. Concerning hits wishing to view the site, their experienceshould be as easy and as pleasurable as any other surfer, if this is notpossible (through disablement) then at-least made to feel welcomed. Tomeet this expectation there is little that can be done to ease a physically

disabled person’s visit to that site that wouldn’t have been addressed by the designer of thisperson’s computer. However, if this disability is a visual impairment or even blindness, then wecan facilitate a more pleasurable experience by adding correct “Alt-tag” definitions to all framestables and images, this way I can guarantee I have tried to cater for ever possible visitor. A finalthought on disabilities could be to make button images large enough for effortless used, withoutspoiling the look and feel of the site.


04/04/2006 --- 12:17 AM page 6 of 23

Audience synopsis

Users of websites don’t just look for information they interact with it. Therefore the GUI design ofthe site has to communicate easily with the intended audience. The interaction and metaphorhas to conform to an anticipated manner. Images of bikes should take the user to a place wherebikes can be seen, read or both, if an images/photos link was present then a suitable metaphoricicon link could be a camera and obviously the text “Photo’s”, and so on…. So to be able tocommunicate fluently with may target audience these issues will be addressed in the comingpages.

The targeted audience is:

English speaking

Males & Females aged 16-40

Keen mountain cycle enthusiasts,

Local residents of Lancashire and neighbouring districts.

Other areas of concern:

All images and multimedia should have clear unambiguous “alt tag” definitions.

Button images should be large enough to be viewable by all surfers.

This site will contain material suitable to all ages.

IMAGE HERE


04/04/2006 --- 12:17 AM page 7 of 23

Site Hierarchy

1 Homepage

The home page will be kept simple. The main message I want this page to convey is” This is mymountain cycling site! And you are now on it!” The other only content on this site will be thenavigations, the title / address, some image(s) and perhaps an introductory message.

The next two pages, “2 Places to Ride” and “3 What to Ride” are to be the guts of the site,their content is to be what information site intends to convey, this information will needto change monthly, to keep the surfers coming back.

2) Places to Ride

This page will introduce the place of the month sub pages. These sub-pages, (For the initialmonth “Rivington”) are only visible form this page, however this page will be directly accessiblefrom any page within this site.

2.2 - 2.8 Place of the Month (Rivington - pike)

2.2 is sub-page1 of a 10 sub-page gallery. Pages 2.1 to 2.8 will explore the Rivington piketrail. These 8 pages will all be pages of one gallery of images and each page have oneimage and some text describing the image / trail, difficulty of the ride, the overall distanceand expected time of completion. There will also be some graphical representation ofeach area. (see Data Sources)

3) What to Ride

What to ride is to be a page on hardware, the theme here will be a different bike review will beexampled each month. There can not be any obvious hardware testing unless I get hugesponsorship contracts with manufacturers, but what I can do is example form broacher what isavailable and comment on the suitability (see Data Sources).

HOME

2 3

2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 2.9 2.10


04/04/2006 --- 12:17 AM page 8 of 23

‘Homepage’ Storyboard

Main page body: this area will change per page viewed and although thedata and perhaps image (1 or max 2 per page) will change, their location willbe similar to this 6 pane arrangement. (text size 12)

Title and logo will be inthis location on everypage.(Anticipated asGif Images).Address andtelephone detail(textual 14, 16 or 18)needs to appear on atleast the home pagebut may appear onevery page.

Text and images willconstitute the mainbody of the home pagedesign

6 panels have beenmarked out. Eachpanel could eithercould text or images 0rbe even merged toaccommodate a largerimage / text body. (textsize 12)

Recap of linked pagesthis time justHyperText Links. (textsize 12)

Site Update status

Maybe a hit counter

The navigation bar isfixed in this locationfor every page.Content of the buttonsis similar throughoutthe site with linksbeing in the samelocation

Link 7: (or last link if not seven.)Email Link for feedback – may even link to a form for full feed back requirements


04/04/2006 --- 12:17 AM page 9 of 23

2.1 ‘Places to Ride’ Storyboard

THIS IS A TEMPLATE for Pages 1 to 8 of the gallery. (2.1 – 2.8)

This image are metaphor button that link the user to the twoLast page of the gallery pages for a statistics recap.

Title and logo will be inthis location on every

page.(Anticipated as GifImages).

Address and telephonedetail (textual 14 or 16needs to appear on at

least the home page butmay appear on every

page.

“This month’s ride”offers information onplaces to ride. I haveelected personalfavourite Rivingtonpike for the initialtopic. This page ispage 1 in a series of 8pages making agallery.

“Ride Statistics” thiswill be the one page inthe gallery detailinglocality, ease anddistance etc (text size12)

The navigation bar

Example Button :

Next and PreviousPage links to all pages.Of the gallery.

Scroll to reach Recapof Hypertext links.

I may add some graphics to this region (eg Acyclist perhaps)

Rivington Pike

Statistics of ride

Rivington Pike and it's tower can be seen from miles around. It is 361m(1200 feet) above sea level.

The overall distance of this ride is only about 8 miles but its hard…

Next Page Previous Page


04/04/2006 --- 12:17 AM page 10 of 23

2.2 ‘Places to Ride’ Storyboard example gallery page

This pages is made from the template 2.1The beacon at the summit of Rivington Pike. With some effort an

experienced rider should reach this summit, then its all down hill home.Some brief text overthe to describe thearea exampled. (textsize 12)

Title and logo will be inthis location on everypage.(Anticipated as GifImages).Address and telephonedetail (textual 14 or 16)need to appear on atleast the home page butmay appear on everypage

The navigation bar isfixed in this location forevery page. Content ofthe buttons is similarthroughout the site withlinks being in the samelocationExample Button.

A series of imagesdepicting views ofwhere to ride,pathways and pointsof interest.

The theme of theimages will be agallery, ranging 1 to x,all illustrating the routeto be ridden. (text size12)

This page may requirescrolling a little toreveal the Recap ofHyper-Text Links, SiteUpdate statusEtc.

Here it is

Page1 Page2 Page3 Page4 Page5

Page6 Page7 Page8

Rivington Pike was the site of achain of beacons, a bonfire builtand lit at night used to sendwarning messages in times ofdanger. Rivington Pike and it'stower can be seen from milesaround. It is 361m (1200 feet)above sea level.open to the public to ride.

Next Page Previous Page


04/04/2006 --- 12:17 AM page 11 of 23

3 ‘What to Ride’ Storyboard

An Image of bike. The bike is to be the topic of this pageThis will be in a stereotypical hardware review

Text bubblesaround the imagewill each detailone area, of thebike underexamination. (textsize 12)

Title and logo will bein this location oneverypage.(Anticipated asGif Images).Address andtelephone detail(textual 14 or 16)need to appear on atleast the home pagebut may appear onevery page

The navigation bar isfixed in this locationfor every page.Content of thebuttons is similarthroughout the sitewith links being in thesame locationExample Button.

This pagecurrently staticmay be updatedmonthly todescribe adifferent cycleeach month

This page mayrequire scrolling alittle to reveal theRecap pendingimage size.

New text panel forfurther texts. Egexpected prices.(text size 12)

FrontHydraulicDisk brake

Front Forks:“BOMMER”

RearHydraulicDisk brake

Wheels

“Shimano”

Frame“Aluminium”

Gears by“Shimano”

Text in this box will give further descriptions of what is highlighted in theyellow boxes above.


04/04/2006 --- 12:17 AM page 12 of 23

Heuristic Evaluation Report.

To prevent early mistakes getting into the web site development project, I ran a Heuristic Evaluation to highlight any areas ofconcern already appearing in the initial story board generation of the suggested site.

Pursuing advice taken from Molich and Nelson, I followed several walk-through’s evaluations of the storyboard designs makingnotes of what the procedure resulted, paying attention the bullet-points listed in the table below.

1 Visibility of the system.

I have suggested a postal address should appear on every page. This has to be correctedas this club does not have a current postal address, this could cause confusion, and thesite would be much simpler if the viewer just used an email or feedback form.

I also suggested a six panel layout for the main display area of the homepage andsubsequent pages; this failed my HE visibility design test as the panel areas would betoo small to contain very much else the panels will grow width ways resulting in screenswhich require much horizontal scrolling to view the entire site.

4

2 Match Between system and the realworld.

To compare this system against real world systems could be difficult; there are somesimilar topic web sites to which this site does compare in functionality with, very well.Also there are many printed magazines which too bear similar aesthetics to the designsused in this site. .

The gallery system used on this site does comply with internet standards. Many similargalleries are used on the internet, however there is an issue with the number of pagelinks to pages of the gallery that are visible at any one time.

3

3 User control and Feedback.

The “NEXT PAGE” and “PREVIOUS PAGE” links on the gallery pages 2.1 to 2.8 willcause some viewer irritation, as there are to be approximately eight such pages, though,at any one point a viewer will only be able to see two links, Previous and Next. Theother six pages outside of this Now Next loop will be constantly hidden, forcing theviewer to work through all the pages to find a particular one.

An email link is present for the purpose of any user comments that may arise as a resultof visiting the site.

5


04/04/2006 --- 12:17 AM page 13 of 23

4 Consistency and Standards.Some of the text on the icon buttons is in German. This will have t be addressed as thesite is strictly targeting local English speaking, again will cost visitors as some mayleave initially thinking this is a German site.

55 Error Prevention.

There are no further errors that could occur on this site. There are no “Dead –end” pagesand all pages will have both the navigational bar and the recap of hypertext links at thefoot of EVERY page. (see HE4 above)

3

6 Recognition Rather than Recall.

Icon Buttons on the navigations bar (all pages) will offer graphical representation of,where or what area of the site, this link will take the visitor to, also every image “alt-tag”will give hover text information should the surfer require.The metaphor of a cycle icon travelling down hill will link to the routes to ride page.

1

7 Flexibility and efficiency of use.Novice or Experienced, internet surfers of any calibre should easily recognise all areas ofthis site and enjoy their visit, there were no suggestible omissions found. The title of the“What to Ride” page could use some re wording. 2

8 Aesthetic and minimalist design.Information on the historic interests of the Rivington bears little relevance to theinterests of a modern mountain cyclist. 4

9 Help Users Recognise, Diagnose,and recover from errors.

I couldn’t evaluate what error a surfer could ever generate other that the wrong pages.All the numerous links throughout the site will help steer a lost visitor to regain theirbearings.

1

10 Help and Documentation.

No need for either help or any documentation on this site at present. A feedback formmay be considered in the future but this feature will be subject to this same HeuristicEvaluation, before it is ever implemented to the internet. 1

11 Speed and efficiency.

Some of the larger images on this site will need some obvious compression methods. J-Peg compressed images and CompuServe Giff images will be adequate methods but stillfile sizes and quality needs to be monitored. All pages are required to open with minimaldelay; obviously the pages of the galley which will host larger photo effect qualityimages will be permitted to take slightly longer opening time. This should still be kept toa minimum.

2


04/04/2006 --- 12:17 AM page 14 of 23

12 How efficiently does the site conveythe intended information?

Concerns to Correct:

A. Club postal address not required.

B. Six panel layout of all pages is not suitable.

C. Icon Text to all be in English.

D. Rename “What to Ride”.

E. Re-evaluate Navigations on the Gallery pages.

F. Information content needs some attention.


04/04/2006 --- 12:17 AM page 15 of 23

3 ‘What to Ride’ Storyboard (POST EVAL)

Main page body: this area will change per page viewed and although thedata and perhaps image (1 or max 2 per page) will change, their location willbe similar to this 6 pane arrangement.

The site is designedfor full screen viewingat 800 x 600 resolution.No third party pluginsare required at thisstage (but maychange)

Title and logo will be inthis location on everypage.(Anticipated asGif Images).

Text and images toconvey the message ofwhat to look for whenpurchasing your nextmountain bike.

Site Update status

Maybe a hit counter

The navigation bar isfixed in this locationfor every page.Content of the buttonsis similar throughoutthe site with linksbeing in the samelocationExample Button :

Recap of linked pagesthis time justHyperText Links.

Link 7: (or last link)Email Link for feedback – may even link to a form for full feed back requirements


04/04/2006 --- 12:17 AM page 16 of 23

Keep this pages because it’s the right shape.


04/04/2006 --- 12:17 AM page 17 of 23

POST PREDICTIVEEVAL


04/04/2006 --- 12:17 AM page 18 of 23


04/04/2006 --- 12:17 AM page 19 of 23

The Look and Feel of the Site.

Page Layout for home page and child pages, colour scheme and graphicallayout will be established from the homepage and adhered to throughout thesite.

Background

The background was to be the first multimedia I was to consider. Not originallyconvinced I wanted to use a background image at all I tried some simpleexperiments with pastel coloured backgrounds, the results below show arather satisfactory result for each of the four colours under consideration.

Background Colours considered.

I then surfed http://www.boogiejack.com/ looking for a sample tiledbackgroung images that would be suitable for the requirements of thesuggested site. If I was to use an image, it had to meet these requirements;

Be of natural appearance or affect.Soft Pastel in colouring.Small in file size (to maximise page download speeds ).

Seamlessly repetitive.

Background images considered.


04/04/2006 --- 12:17 AM page 20 of 23

Most of the background images I found, I thought were too over powering. Idecided to slightly edit some, to see if I could improve their effect. The twoimages to the left have been digitally lightened to make them appear softer.When compared to the originals above either, their effect is enhanced.

287, 314,319 nice too

Here I have tried the overlay foregroundsample image, with the two editedbackgrounds.

You can see either would make a suitablebackdrop.

Here are the originals, and many mayargue the background effect is better,however when the whole site is puttogether then the background will prove adistraction.(I may change my opinion at theconstruction stage.)


04/04/2006 --- 12:17 AM page 21 of 23

Typical background images are between 3 and 7kb. When a web page isviewed, this size will open at an acceptable pace based upon a modern 56kinternet connection. It will also upload at a reasonable pace when the site isdeployed to the host server. Sizes outside of this tolerated size will be eitherof bery poor quality or simply slow the opening the site to an un acceptabletime scale.All the background images comply to this strict regulation. I decided upon abackground style of image, which is seamlessly to be tiled across the entireback drop of the site. Personally I would like the back not to move when thesite is scrolled so the following html will be added to the eventual web page.

Buttons Characteristics Considered.

Rollover Text

Gif Image Buttons

I found these buttons on aGerman web site, thinkingI could make good use ofthem I would obviouslyhave the editing to do asthey are not in English.They will also need to besaved in the right format.

NB TO ME Places to ride to become WHERE to Ride

Hierarchy of website pages links / pages of the site.

Initially I have detailed five pages for this site, these are;

Home Page Places To Ride

o River Ribble

On Rollover CSS TEXTOff Rollover CSS TEXT


04/04/2006 --- 12:17 AM page 22 of 23

o Rivington Pike Bikes to Ride

Three of which will be visable from the home page a further two“River Ribble” and “Rivington Pike” will only be visible from the“Places to Ride” page.

Data Sources


04/04/2006 --- 12:17 AM page 23 of 23

Places to Ride Page Requirements: AFTER PREDICTIVE EVLA EDIT

Site / club logo Address Navigational Bar

o Places to ride Rivington River Ribble

o What to Rideo All about uso Email link or link to contacts page and may be form

Two extra links are visible only on this page. The links to two rides detailed bythe site

Rivington Pike. My personal favourite

River Ribble. The local / short run.

These two links could be selected be either the Nav-Bar or two 15mm squareimages depicting river waves or mountain peaks. Hear are some I preparedearlier, edits from a German website

Placesto rideIcon

Documents

Lancs Mountain Cycle Club80.229.138.60/hjnr/downloads/web/co1552_ass_2.pdf · Initial Storyboard generation ‘Homepage’ Storyboard 5 ... 11-15 2 Too young for dangerous sports