User Testing

I did a usability test to get people’s opinions on my site. Below are the questions I asked and people’s answers to them.

Claire Anthony

Q1 Is the website easy to use?

Yes, the website is really easy to use. Information is set out in a hierarchy with headings etc. and everything is set out neatly. The pictures draw the user's attention to what is being said in the text so it is easy for them to find what they are looking for. The navigation is nice and simple and the content is really interesting, particularly the top tips section.

Q2 Is it clear which is the home page etc?

Yes, the home page is clearly in the navigation and the content of the page introduces the magazine briefly so I know what the site is about.

Q3 Is the site fit for purpose?

Yes, I know very little about running and the site gives me lots of interesting information about it. The integration of social networks would be particularly useful for users so they can find and meet people who share the same interests and so they can discuss the website and events. All of the images I checked had alt text on them which is useful for people using screen readers.

Q4 Do all the links work?

Yes, all of the links worked. However, the search results did not display. Do you want some help with that?

Q5 Is the text easy to read?

Yes, there is a high contrast between the text and the background so it is very easy to read.

Some extra points:

Resize your thumbnails in Photoshop instead of using CSS to resize them. This will make the page load quicker.

I found it difficult to find some events on the calendar, is there some way you could show the user which dates have events on?

The countdown to the London Marathon is a nice touch

I would turn the large "Road Runner" logo into a link to the homepage, lots of people click on the logo to go back to the start

David Riley

Q1 Is the website easy to use?

Yes very easy to use and is also very informative.

Q2 Is it clear which is the home page etc?

The home page is very clear and has a link at the top left of the screen which is useful

Q3 Is the site fit for purpose?

Yes, the site is very informative and will certainly help runners who don't know there I.T. Band from their Glutes. Very useful.

Q4 Do all the links work?

I have checked all the links and they do all work fine. Both internal and external links.

Q5 Is the text easy to read?

Black text on white background = cannot beat it for ease of reading, the characters could have been in a larger font but this could be due to my screen resolution and other readers could easily adjust this.

Overall a very good site which I would recommend to my friends to use, job well done.

Dave Carr

Q1 Is the website easy to use?

yes it's very clear and easy to navigate

Q2 Is it clear which is the home page etc?

yes clear and constant navigation

Q3 Is the site fit for purpose?

for the search you should provide a default action if just the go button is pressed, actually the search doesn't return any results when I try to search the site.

You need to resize images for thumbnails not use full size images and contain within code you can see the image on the home page is squashed, make a separate thumbnail of the magazine cover.

Make use of title attributes on social networking icons so people know where they go in the image src add title="Follow us on Twitter" for instance.

For the newleteer signup have a style error message when there is an error there is a style applied msg-error but you've not got this style in your stylesheet, make it obvious when there's an error.

On the diary, it would be better if a date has an event make that date bold so you can see at a glance which dates have events.

I've found more images that are large and constrained with code, resize image to make your pages load faster, Google now uses page speed as one of it's ranking factors, also each image should at least have an alt tag for accessibility, if someone visits your site with a screen reader for instance they won't see the image so the alt tag is there to describe what the image shows again good for SEO.

Q4 Do all the links work?

Yes but some open in a new window and so don't be consistant with this.

Q5 Is the text easy to read?

I would slow down the slideshow trying to read the information can't always read it all in time.

overall a very nice site built very well

Great work.

Evaluation

I am pleased with how my site turned out especially the look of the site. I am pleased I changed my initial design with the bright red background. I think the tarmac image I’ve used as my background fits well with the design of my site. I especially like the JQuery sliders with the text added to them because they stand out. I think I have completed all the tasks I set out to achieve at the beginning of this project apart from a printed version of the magazine because I ran out of time to design one. This was due to the fact I concentrated so much on adding all the content to my site I never had the time to create a printed magazine. Apart from not producing a magazine I think I have built a site to the best of my ability.

I have added php to the site in the form of a search bar, calendar and a form for people to sign up to receive updates about the magazine. I have also added a content management system for the calendar with a login with username and password to take you to the calendar admin page. On this page you can add, edit or delete events to the calendar which will then show up on the calendar on the events.php page. I have also had ago at creating a content management system for my site. I have created a login with username and password which takes you to an admin page were you can edit and delete content on the pages. Below are screenshots of this.

I also added flash to my site in the form of a countdown timer that counted down to the start of this years London Marathon. I was pleased with the countdown timer because flash isn’t my strongest point either.

I did have help with my php from fellow students and Dave Carr but that was to sort things out that weren't working. I followed Dave Carr's tutorial to build a cms and I followed another tutorial to create the calendar and a tutorial to create my countdown timer.I am slowly starting to get it but I intend to practice and read up on it again over the summer so hopefully I will be more confident in using php next year. I think if this was a live site it would appeal to its target audience of local runners and people who are keen on running in the region and I would buy the magazine and look at the website mind you I am biased because I created it.

Could the site be improved?

If i had more time I would have produced a printed magazine to run alongside the website as I intended at the beginning but I ran out of time. On the site the only changes I would make if I was more confident in php would to add an image upload to the cms. I would have also added it to Google Analytics so I could see how many people looked at the site and where they viewed the site. Apart from that I am really pleased with my finished site because I have put a lot of work into it.

Finished site http://www.roadrunneronline.co.uk/index.php

Changed Countdown Timer to 2012

I have changed the countdown timer on my site now so it is counting down to next years London Marathon on 22nd April 2012. I decided to do this because this years marathon is over so the countdown timer on my site had finished.

Finishing off the site

Once I'd added the pictures and videos to my VLM Diary page all I had left to do was to finishing adding content to the top tips and shops pages. I added more content to the tops tips page and found some pictures of runners exercising and warming up along with pics of drinks stations. I also finished off writing my top tips for running the London Marathon. Below are screenshots of the tops tips page.

I then added content to the shops page which was the last page I needed to add content for. I added maps, addresses and websites for specialist running shops in the area along with maps, addresses and websites of some of the major chain stores in Hull that stock running gear.

Adding Videos and Photo's

I have added video's and photo's of my 2011 London Marathon experience onto the VLM Diary page of my site. I have added five short video's that show me starting and running at various stages of the marathon and then finishing the marathon. If I had more time I would have made one video and edited the clips together but I was running out of time forgive the pun so I uploaded my footage to YouTube and then embedded them on my site. Below are screenshots of my videos and a picture of me and my mate James Caley holding our medals.

Adding a Search Bar

I have also added a search bar to my site on every page. I did have help with this from two 3rd year students Claire Anthony and Liam Smith who helped me create the tables in php MyAdmin and helped with the coding. I also had help from Dave Carr who helped me sort out the CSS for the search bar. So now if you type in running in the search bar it will take you to a search.php page where the results are shown.

PHP Code

I created a table in my sites database in phpMyAdmin called searchbarpages. In this table I created 8 fields for the 8 pages on my site. From the instructions I had been given from Claire Anthony I added pageID, pagename, pageurl and content into each field. So the index/home page looked like the screenshot below with 1, home and url and content for that page in the value boxes.

I then had help adding the code to my site so I could retrieve the information for the search bar. I added the following code to the top of each page of my site in Dreamweaver

//ob_start();

session_start();

// db properties

include ("inc/_search.php");

define('DBHOST','localhost');

define('DBUSER','username goes here');

define('DBPASS','database password goes here);

define('DBNAME','database name goes

here');

// make a connection to mysql here

$conn = @mysql_connect (DBHOST, DBUSER, DBPASS);

$conn = @mysql_select_db (DBNAME);

if(!$conn){

die( "Sorry! There seems to be a problem connecting to our database.");

}

?>

I then created a page called search.php whe

re the results from each search would be displayed again I had help from Liam Smith and Dave Carr with this. Below is the code I added on the search.php page in Dreamweaver so the results displayed.

//get search results from database

//******************replace tablename with name of table in database. Replace fieldname and otherfieldname with columns in table that you want to search

if($srch_ck){

if(empty($srch)){

echo "No search";

}else{

echo "

Showing search results for '".$srch."'

";

$sql = "SELECT * FROM searchbarpages where pagename LIKE '%".$srch."%' OR content LIKE '%".$srch."%' ORDER BY pagename ASC";

$result = mysql_query($sql)or die ('I cannot because: ' . mysql_error());

$num_rows = mysql_num_rows($result);

if($num_rows == 0){

echo "No results";

}else{

//echo "There was". $num_rows ."results";

while($row = mysql_fetch_object($result))

{

//*****************************replace with fields that you want to pull from database

$pageID = $row->pageID;

$pagename= $row->pagename;

$pageurl= $row->pageurl;

$content= $row->content;

echo $pagename.'
';

echo $content.'
';

//creates a link to the page

echo 'Read more';

}

}

}

}

?>

Below are screenshots of the search bar on the index/home page and the search.php page

Adding content to other pages

I have also started adding content to the other pages. Today I've added the content to the music page and wrote a review on the Running Trax 2 CD. I have also added a list of other CD's that are available to buy and linked them to play.com so people can go and purchase them for themselves if they want to.

Added a Calendar on the Events Page

Even though I was off ill I managed to add a calendar to my Events Page. I found a tutorial online and followed it and created the calendar in php. I then had help from Dave Carr to create the tables in php MyAdmin so I could add events to the calendar on the dates they where on. Dave created me a login and username and an admin page so I could update the calendar when events are on. Below are screenshots of the calendar:

So now when you click on the calendar say the 17th April 2011 if there is an event on that day a description will appear in a box under the calendar. So I know on Sun 17th April 2011 its the London Marathon because it appears when you click on the date.

PHP Code

to enable me to add events to the calendar I had to have some help from Dave Carr. Dave told me to create a table in phpMyAdmin and call it calTbl and add for fields to it called calID, calName, calDesc and calDate. Then give the calID and int(11) and add a value in the value box. Then in calName give it a varchar(65) and in the value box a name of the event. Then in the calDesc give it a varchar(255) and in the value box a description of the event and finally in the calDate in type make it date and then in the value box add the date for instance the date of the London Marathon would be 2011-04-17. So with Dave's help I created a calendar admin cms which I could add events to or edit an event or delete an event. To get into this admin cms I have a login and password.

Then to retrieve the information from the table on my site I had to enter the following code in Dreamweaver so the calendar would show on the site and you could click on a date and see what event was on. Below is the code I added to my events.php page.

Scheduled Events

Todays Date

//$todaysDate = date("n/j/Y");

//echo $todaysDate;

// Get values from query string

$day = (isset($_GET["day"])) ? $_GET['day'] : "";

$month = (isset($_GET["month"])) ? $_GET['month'] : "";

$year = (isset($_GET["year"])) ? $_GET['year'] : "";

//comparaters for today's date

//$todaysDate = date("n/j/Y");

//$sel = (isset($_GET["sel"])) ? $_GET['sel'] : "";

//$what = (isset($_GET["what"])) ? $_GET['what'] : "";

//$day = (!isset($day)) ? $day = date("j") : $day = "";

if(empty($day)){ $day = date("j"); }

if(empty($month)){ $month = date("n"); }

if(empty($year)){ $year = date("Y"); }

//set up vars for calendar etc

$currentTimeStamp = strtotime("$year-$month-$day");

$monthName = date("F", $currentTimeStamp);

$numDays = date("t", $currentTimeStamp);

$counter = 0;

//$numEventsThisMonth = 0;

//$hasEvent = false;

//$todaysEvents = "";

//run a selec statement to hi-light the days

function hiLightEvt($eMonth,$eDay,$eYear){

//$tDayName = date("l");

$todaysDate = date("n/j/Y");

$dateToCompare = $eMonth . '/' . $eDay . '/' . $eYear;

if($todaysDate == $dateToCompare){

//$aClass = '' . $tDayName . '';

$aClass='class="today"';

}else{

//$dateToCompare = $eMonth . '/' . $eDay . '/' . $eYear;

//echo $todaysDate;

//return;

$sql="select count(calDate) as eCount from calTbl where calDate = '" . $eMonth . '/' . $eDay . '/' . $eYear . "'";

//echo $sql;

//return;

$result = mysql_query($sql);

while($row= mysql_fetch_array($result)){

if($row['eCount'] >=1){

$aClass = 'class="event"';

}elseif($row['eCount'] ==0){

$aClass ='class="normal"';

}

}

}

return $aClass;

}

?>

for($i = 1; $i < $numDays+1; $i++, $counter++){

$dateToCompare = $month . '/' . $i . '/' . $year;

$timeStamp = strtotime("$year-$month-$i");

//echo $timeStamp . '
';

if($i == 1){

// Workout when the first day of the month is

$firstDay = date("w", $timeStamp);

for($j = 0; $j < $firstDay; $j++, $counter++){

echo "

";

}

}

if($counter % 7 == 0){

?>

}

?>

}

?>

);">						);">
S	M	T	W	T	F	S
>

if(isset($_GET['v'])){

$date = $year.'-'.$month.'-'.$day;

$date = mysql_real_escape_string($date);

$sql="select calName,calDesc from calTbl where calDate = '$date'";

$result = mysql_query($sql);

$numRows = mysql_num_rows($result);

if($numRows == 0 ){

echo '

No Events

';

}else{

echo '

Events Listed

';

while($row = mysql_fetch_array($result)){

?>

}

}

}

?>

Adding more content

I have started adding more content to my site now. I have added a sign up form in php so people can add their names and email addresses and sign up for updates and special offers to be sent to them via email. I have also added my video I did in the 1st year of me training and running the London Marathon on the VLM page. On the home page I've also added an image of the front cover of the magazine I am going to produce to go with the website. I have also created a facebook page for Roadrunneronline and added a facebook like plugin on my site so people can click to like my site. I have also began adding content to the other pages.

Below are screenshots of just some of the things I've added

Feedback on website

After showing Sally the changes I made she said she liked them especially the sliders with the text added in them. Sally liked the way I'd done the text in the Events sliders with Bold Larger text describing the event with smaller plain text underneath describing the date of the event. Sally suggested I make the sliders on the home page the same style and make part of the fact in Bold Larger text with the rest of the fact in smaller plain text. I also added an opacity to the black box the text is in of 90% so you can see the image through the box. So this is what I did and you can see the result below in the screenshots I've took it looks more effective.

Adding Content

I began adding content to the pages and I added the article I had wrote on Beverley AC to the Clubs page. I added images I had found on google images of the running club, the Westwood and a picture of me running the Humber Bridge Half Marathon for the club to the article.

I also added training runs I had been doing to prepare for the marathon on the VLM Diary page with the dates I'd ran them and where I'd ran and how far each run was.

Made the changes

Following on from Sally's feedback I went away and made the changes she had suggested the week before. I found a tarmac background so I replaced the red background with this. I also added the countdown timer to the header and made the logo smaller so it fit alongside it. I then found facts online about the marathon which I added in black boxes in white text inside the sliders on the Home page. I also did the same on the Events page however I had the title of the event in Bold text and the date of the event underneath in smaller text.

Below are screenshots to show the changes I made: