LO5: Feedback and Evaluation of Website

Feedback

The feedback from the five people who have used my site (see my "LO4: User Testing" post) has been positive. After they had finished using the site, they were impressed that all of the buttons worked correctly and all of the pages loaded quickly. Another thing that the users liked was the layout of the site - the house style/theme of the site was consistent on every page and that made the website easy on the eye and comfortable to use. Also, they found that all of the information on the site read well and was easy to understand. Overall, the impression I got was that the users thought the site was clean, easy to use and easy to navigate.

In addition to these five users, I got feedback from Giles Grover, the owner of Small Machines, after I emailed him. This was what he thought about the website:

Evaluation

Below are the strengths and weaknesses of my site, based on user feedback and my own opinion:

Strengths:

• The site is easy to navigate and feels smooth and snappy
• The house style is easy on the eye and gives the website a clean look
• The text is large and easily understandable, perfect for the target audience of parents.

Weaknesses:

• Some of the photographs on the website don't perfectly fit their frame and look slightly cut-off
• It isn't very easy to tell which page you are on from the header - the colour of the name of the  page you are on is very similar to the colours of the other page names.
• The yellow of the buttons contrasts with the rest of the site and the background might not have been the best choice.

One thing that needed changing on the site, based on the test plan, was that the "buy" button for one of the machines on the "Our Machines" page didn't work - nothing happened when it was clicked.

I had forgotten to add a link to the button, so I immediately corrected this by adding to the button a link to the shop.

As mentioned in the "weaknesses" section of the site, one thing that could be improved on is the fact that it isn't easy to tell what page of the site you are currently on, when you look at the header. This is because the colour of the name of the page you are on is very similar to the colours of the other page names.

In the image above, I am on the "Our Machines" page, and you can see that the highlighting of this page name is a very similar grey to the rest of the page names. So this is something that could be improved - I could change the highlighting colour of the current page's name to a different colour. The only possible downside of doing this could be that it might distract from the user's experience of the page they are on and make it slightly less immersive.

Another improvement I could make is making photographs in the gallery pop-out of the page to fill almost fill the screen when the user clicks on them, so the user can see the full photograph in more detail. 

Currently, the images aren't as big as they could be and they are slightly cropped in order to make them fit into squares and rectangles, as you can see above. So this is another improvement that could be made.

Another suggested improvement was that I should mention, on the homepage of the site, who the target audience is for Small Machines. Since the majority of people visiting the site would be parents looking to buy toy kits for their children, I would add to the homepage something like "making toy kits for 8-80 year old kids" as Small Machines' Twitter page says.

Above is where the user thought that this information should be, to save a potential buyer from having to look around the website to find out what ages the products are suitable for. It would be clear straight away whether the product is right for them/their children.

Another improvement that I could make to the website would be to add a "reviews" section, where any buyers of Small Machines could write about what they liked about the product and what could be improved, if anything. This would benefit the site greatly because it would allow users to see what other people's views of the Machines were, maybe influencing them to buy. The only downside to a feature like this would be people leaving spam comments or leaving negative reviews just for the sake of it - however, this could be easily prevented if the reviews could only be published after I had seen them and accepted them.

Finally, based on Giles' feedback, two small tweaks I could make to the site to make it better would be changing the colour of the buttons (he believes the yellow is too contrasting with other elements of the site) and changing the background to a different type of wood (Giles believes the current background looks like laminate flooring rather than what the machines are actually made out of).

LO4: Test Plans

a) navigation
I tested navigation in my test plan by asking users to test all of the key elements of the site, such as buttons and the links in the header to all of the different pages - for example, "when you click on "more", does it show you more information about the machine?" I also asked all of the users to scroll up and down the pages, making sure that everything worked correctly.

b) internal and external hyperlinks
I tested internal and external hyperlinks by asking users to test all of the links that go to other pages of the site, as well as links that go to other websites, such as the shop. I asked questions such as "when you click on "buy", do you get taken to the part of the shop for that specific machine?"

c) page load times
To test page load times, I asked users to make sure that every page loaded within three seconds. I picked this figure because obviously loading times can depend on the speed of the internet connection - I felt that as long as a page loaded within this time, then that was reasonable.

d) performance of website when using different browsers
In order to test the performance of the site on different browsers, I made sure that all four of the most popular browsers at the moment (Internet Explorer, Safari, Chrome, Firefox) were used in my five tests.

e) consistency of house style
To make sure that my house style was consistent, I asked each of my five users what they thought about the layout, design and and colour scheme when they had finished using it.

LO3: Making the "Small Machines" Website

I decided to make my website using the Wix Website Builder, because I didn't feel confident enough in HTML / CSS to make the entire site in those. Websites made in Wix are heavily customisable so it was easy for me to make the website and arrange things how I wanted them.

Link to my site: http://10blundella.wix.com/smallmachines

Constructing the site

This is a logo that I designed for use on the home page of the site back in November. I used Photoshop to edit together the images of cogs and rulers.

Here is the background image that is used for the entire site. I used a high-definition image of wood and I made sure that the wood wasn't too dark - this would have made the text unclear.

The image above shows the home page of my website. It contains links to all of Small Machines' social media (top left), as well as images of the five different machines. You can click a button saying "MORE" next to one of the machines to read more about it on a different page of the site.

Towards the bottom of the home page, there are embedded Twitter and Facebook feeds for Small Machines (pictured above).

This is a page of the website called "Our Machines". It contains information on each of the machines (this is where the "MORE" links on the home page go to), as well as showing the prices of them and an option to buy. The "BUY" button links to an external site, https://shop.pimoroni.com, where the Small Machines can be bought.

Another page on the website is for "Royal Armouries Machines" - these are machines which were specially developed with the Royal Armouries Museum in Leeds. This page is dedicated to them, with information on them, pricing and options to buy.

The "Gallery" page showcases images of each of the five Small Machines. This page is linked to from the "Our Machines" page, if the user wanted to see more photos of the machines. It shows each machine from a range of angles, giving the user a better idea of what the machines look like and what they do.

Finally, the "About Us" page shows general information about the company and how it came about. Contact details are also shown as well as the same social media links seen on the home page.

This is the footer of the website, permanently positioned at the bottom of the site. It is visible at the end of each page, and contains a brief description of the company, contact details and a link to the shop.

Editing the site

In order to begin editing the site in any session, I signed into my account on Wix.com and clicked the "edit site" button.

In order to add a new element to a page, such as a button, a photo or a menu, I used the "add" button, which is one of the key tools on the Wix website editor.

Here, I have used the "add" button to add a new button to the screen. I am positioning it next to The Crawler, with the text "see more photos" already added.

In this screenshot, I was preparing to add a link to the "buy" button, which would take the visitor to the shop. The "link" option, shown in the screenshot, allows me to add this link.

Here, I have pasted the link to the shop in the box, and I have changed the settings to what I want - I have set the shop to open in a new tab when the button is clicked.

Here, I can be seen deleting an unwanted page from my site, which was there from the template I originally picked.

In the footer, I have placed links to four different social media sites - Facebook, Twitter, YouTube and Instagram. Here, I was about to click "set social links" in order to link the buttons to the different Small Machines social media sites.

This was the Add --> Image --> My Image Uploads page, where I selected images for use on the site. When I chose the one that I wanted to use in a particular situation, I dragged it into place.

This is an anchor that I added to the "Gallery" page. It means that when the "see more photos" link is clicked on The Crawler on the "Our Machines" page, the visitor will be taken to the specific section of the Gallery which displays pictures of The Crawler.

Finally, whenever I was finished editing the site in a particular session, I first saved the site on Wix (top left) and then published it live (top right).

House style

It is important that the website has a consistent house style across all of the pages. This is so that the website has a clear theme and the site visitors feel comfortable and confident using it. These are the key steps I took to ensure that my website has a consistent house style:

• Same wood background on every page
• Same font for the headers on each page, e.g. "Our Machines" and "Gallery".
• Same font for all regular text on the site, e.g. information about the machines
• Same yellow-and-black buttons throughout the site, turning red when hovered over
• Same header and footer seen on every page of the site

User feedback

The feedback from the people who have used my site (see my "LO4: User Testing" post) has been positive. After they had finished using the site, they were impressed that all of the buttons worked correctly and all of the pages loaded quickly. Another thing that the users liked was the layout of the site - the house style/theme of the site was consistent on every page and that made the website easy on the eye and comfortable to use. Also, they found that all of the information on the site read well and was easy to understand. Overall, the impression I got was that the users thought the site was clean, easy to use and easy to navigate.

Relation to target audience

The majority of users of this site would be parents, looking to buy Small Machines for their children as presents. Therefore, I tried to make the website clear and easy to understand, so that parents can know exactly what the machines are and what they do, as well as what the price is. I used large, interactive buttons and large text in key areas in order to do this. Also, the background is a light and unobtrusive colour so that it isn't a distraction from the text, while also adding interest to the site. On the whole, I think the site is simplistic, streamlined and easy to navigate, perfect for a parent who just wants the facts about a potential gift for their child.

Rich Media
Rich Media is any element of a website which interacts with an audience to make them feel involved, more than words and pictures on a page would. An example of Rich Media on my site are the buttons, such as "MORE", "see more photos" and "BUY". When hovered over with the mouse, they push downwards onto the page, the text goes from black to white, and the colour of the button goes from yellow to red. When the mouse is taken from the button, this process is reversed. It is interactive  for the user and adds interest to the site.

LO3: Feedback Methods

Feedback methods for my Small Machines website:

• Social media would be a good way to get feedback on my Small Machines website. For a business, social media is important in order to keep potential clients updated on what is going on within the company and to make them feel like they are involved. Therefore, asking users of the website what they thought about it on platforms such as Facebook and Twitter is likely to give me some useful responses from customers and potential customers.

• A reward-for-feedback system would also be appropriate on a website like the Small Machines one, since there are items for sale on it. There could be a section of the homepage asking viewers to take a short survey on what they think about the site, and in return they could get 10% off a purchase from Small Machines. This would be useful as it encourages viewers to make a purchase, as well as giving me information on how the site could be made better.

• In addition, looking at viewing statistics would also be a good way of getting indirect feedback for the Small Machines website. This is because I could see how many people went on the website each day, week and month, and see whether or not it grew in popularity. If it grew in popularity, I would know that people had recommended the site to others and they had viewed it. Also, I could see how long people spent on the site, which would tell me whether it kept their attention or not. In relation to repeat customers and loyalty, which is a big part of the Small Machines ethos, I could see who had viewed / bought from the site multiple times, and see whether or not they were local.

LO2: The Cookie Law

The Cookie Law is a fairly new law which states that websites must get consent from their visitors before storing or retrieving any information on their device. It was introduced to protect privacy, by making visitors to sites aware of how their information might be used, and giving them the choice whether or not to allow it. Before this law's introduction in May 2011, most websites automatically used cookies without asking for the user's consent.

LO2: Disability Discrimination Act

It is important that, if possible, a website meets disability guidelines so that someone with a disability (such as blindness or deafness) is able to use and understand the site in a similar way to someone without disabilities.

Here are the guidelines that a website creator should endeavour to adhere to, in a basic sense:

• Provide text alternatives for any non-text content in the site, such as images and videos.
• Make sure the content on your site can be presented in simpler ways, if needed, without losing structure.
• Make the site easy to read and understand - clear foreground and background, and clear text.
• Everything on the site should be able to be done on a keyboard.
• Do not add content to the site that could cause seizures (e.g. flashing lights).
• Pages of the website should appear and operate in a predictable way - nothing unexpected.

These guidelines each fall into one of four "principles" - perceivable, operable, understandable, and robust.

LO2: Data Protection Act

The Data Protection Act of 1998 is important when creating a website. It makes sure that personal information is:

• fairly and lawfully processed
• processed for limited purposes, so the website owner cannot just use it for whatever they like
• relevant and adequate, so it is not too detailed
• accurate
• up-to-date
• kept for no longer than necessary
• kept securely
• not transferred without adequate protection

Since I have decided that my Small Machines website will not contain an internal shop and instead contain links to an external one, I will not be in danger of breaching this Act. This is because my Small Machines website will not store any personal information - there will be nowhere it can be input.