LO4 - User Testing

Navigation 

Judging by my user test plans my navigation works fine, the navigation bar works correctly and can lead the user to each page that has been named on it. This includes the Home, Store, Hydraulics Range, Royal Armouries Range, YouTube, Blog, About pages, all lead to the correctly titled page with the necessary content on it. All of my links at the bottom right of of the website that lead to social media work fine, these include Twitter, Facebook, YouTube and Google Plus each ones leads to the small machines social media page for the specific site. On the YouTube page my user test plans indicate that YouTube videos play on the site as they have been embedded correctly.  

Internal and External Hyperlinks

     Each page opens on my navigation bar in a correct manner, and leads to the labeled page. Also the social media links open up other websites, to the correct social media page. Also the subscribe button at the top left of the YouTube page works in a correct manner and will either come up with a google log in to fulfil the action or it will just subscribe the user to the YouTube feed if they are already logged in. 

     Page Load Times

     My page load time doesn't seem to vary between the devices that my users tested it on. Which varied between Apple Macs and Windows Computers. All the content loads up on each of the pages. The image gallery on the About page takes the longest amount of time to load up, but they load up in a fair amount pif time that isn't time consuming in the slightest.   

     Performance of Website when using Different Browsers

      

     My website works fine on the three browsers that it was tested on including, Chrome, Safari and Firefox. There is no noticeable difference on each of the browsers which is an ideal result as Chrome and Firefox have the most users on them. 

    Consistency of House Style

    The House Style of my website is consistent between each page, with a grey and white theme throughout each page to try and give the website an appearance that looks professional and not tacky. Also the logo is consistent at the top left hand side of the page, this also links the user to the home page which is a convention of most websites. I have also used the same fonts throughout the website as well as the same style purple line that helps separate information. 
    Improvements

    Even though my feedback was all positive looking back retrospectively there are quite a few things I would do differently or change. For example I would have made the blog fit more into the house design by giving it grey or blue arrows as opposed to green. The green works fine but is just a little inconsistent compared to the other pages.
      External links, I need to remove fancy as it seems unprofessional as no other real companies use fancy.

Check List Self Assessment

Tasks	Have I done them?
LO1 LO1 – PASS 1)      Analysis of 5 websites per criteria	Yes this work has been completed.  Here is the link to each Bitesize - http://unit34jamesharthsorn.blogspot.co.uk/2015/09/a-purpose-b-visitor-needs-c-information.html Pixar - http://unit34jamesharthsorn.blogspot.co.uk/2015/09/pixar-website-analysis.html Amazon - http://unit34jamesharthsorn.blogspot.co.uk/2015/09/lo1-amazon-website-analysis.html iTunes - http://unit34jamesharthsorn.blogspot.co.uk/2015/09/lo1-itunes-website-analysis.html Facebook - http://unit34jamesharthsorn.blogspot.co.uk/2015/09/lo1-itunes-website-analysis.html
LO2 – PASS 1) Purpose paragraph – what is the purpose of the brief you are doing? 2) Audience – who is the audience for your website?  3) Content – you must have a mindmap, moodboard, wireframes  4) Production plan – use the PPT sent to help you create a Gantt chart.	I have done a purpose paragraph here is a link to it http://unit34jamesharthsorn.blogspot.co.uk/2015/09/lo2-purpose.html The audience part of LO2 has also been completed to a satisfactory standard  http://unit34jamesharthsorn.blogspot.co.uk/2015/09/lo2-audience.html The content section of my blog has got a completed moodboard on it http://goo.gl/adyDpd , my completed Unfortunately most of my wire frames have been completed but they have not been scanned and uploaded to my blog   The Production plan AKA the Gant Chart is linked here. http://unit34jamesharthsorn.blogspot.co.uk/2015/09/gant-chart.html
LO2 – MERIT 1) Full annotation of wireframes to justify choices against audience 2) Information flow – how dies the audience navigate and get to where they want to be? 3) Legal and ethical – what assets will you need? Regulatory bodies and libel copy/data protection? Intellectual property rights – do you have/need copyright clearance for all assets?	I have completed some of the wireframes, unfortunately I still have quite a few to complete and then I need to scan them all. I have completed the information flow, but still need to scan it onto my blog. I have not done the legal and ethical
LO2 –DISTINCTION 1) Relevant launch date, plan for feedback 2) Budget based on professional rates, timescales, costs such as hosting 3) Potential revenue, for example, advertising space, sponsors etc.	I haven’t done any of these

 

 

LO2 –DISTINCTION

1)       Relevant launch date, plan for feedback

2)       budget based on professional rates, timescales, costs such as hosting

3)       potential revenue, for example, advertising space, sponsors etc.

LO2 - Audience and Mood Board

The target audience for the Small Machines website will mainly be parents with male children, who are between the ages of 7-15.  They are mostly ABC1 as they need to be able to afford the products. The hobbies of the people will be people with a creative part to them that are interested in how things work as well as building the toy kits that are available for purchased.


Mood board for target audience, this shows what they are interested in already.

LO2 - Image Carousel Example

This is an example of the image carousel I want to an extent. I really want the text feature to be Links that redirect to other parts of the website. Also on this one the arrows doesnt seem to move in a way that I would like. I also like the feature that allows the user to prebiew the next site. 

http://wowslider.com/jquery-slider-noble-fade-demo.html

LO2 - Learning html

Heading Elements


Headings ah1 to h6.
re described by heading elements. There are six levels of heading elements:
The h1 element is used to describe the
main heading of the page.









            Links

The defining feata element is used to create links.
ure of the Web is the presence of links. Clicking on links leads to other web pages. The
The a element is similar to the h1 or p elements, but it has two key differences:

• First, it has an href attribute which equals the website you want to link to.
• Second, you get to choose the link text that users see on the page.
  
  
  
  
  
    Images
  
  
  
  

  <img>

  In addition to headings and paragraphs, a web page can have images. The img element is used to add images to a page.
  The img element has an attribute inside the opening <img> tag named src. The src attribute has the address of the image.
  
  
  
  
  
  
  
  
    Lists
  

  
  

  <ul> and <li>

  In addition to paragraphs and images, content can be presented as lists.
  In HTML, a bulleted list is described using a ul element. Each item in the list is placed inside an li element.
  

  
  
  
  
  
  
  
    Html & Body
  
  

  
  

  <html> and <body>

  Here's an example of a real web page:
  

  • Everything inside a web page is nested inside the html element
  • The body element contains the actual content of the web page - everything nested inside <body> and </body> shows up in the web browser

  The doctype at the start of the HTML file tells the browser which version of HTML you are using. The doctype is not an HTML element, so it doesn't have a closing tag. The doctype ensures that your web page displays consistently when its visited from different browsers.
  

  
  

LO2 - Moodboard for Small Machines

After talking to the owner of the machines brand, I soon learnt that the products he made weren't targeted towards really young children (though they do play with them). The machines he made are a little bit more cmplex with Hydrolic features to them so they could move, and the parts seemed a little complex for a young child to understand.

Logo

On my moodboard I have the small machines logo to help show what the mood board for and the company it is supposed to represented.

Pencil Crayons 

I have added these on to connote creativity which is an essential part of enjoying the Small Machines brand. Because it is all about building the models, which is quite a creative process that parents might have to teach small children about.

Wooden models 


I took these pictures off the small machines website, just to show the type of products that they specialise and try to promote to a customer. As you can see on quite a few of them there is a hydrolic function that can be used to move the models without touching them, using some form of seringe mechanism. This also shows how technical that these products can be.

Catapult


The catapult is here to show the history aspect that they are doing for a museum, with model catapults from med evil periods etc.

Warhammer40K

HTML coding, what I have learnt

We have learnt about how you use triangular brackers when filling in web coding

These are the basic tags for HTML coding -

<html>      This stands for Hyper Text Markup this is essentially the language that  is used for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.
 
<head>     This is basically the start or heading of a piece of text, this is essentially the title piece for your article or the prologue, for your text.

<style>      This is basically used to deffine style iformation and how you want your coding to render within a browser.

</style>      Anything with a slash before it means you are ending the the current tag so for style this is what you use once you have decided the style that you want your head at.

<title>        This is the title of the document

</title>       This again is the command you use once you have filled out the title tag with the information that you want.

</head>      This is for once you have finished the head, and filled out all the information that you want within it.

<body>        This is about all the other content in HTML that you want to fill in including paragraphs.

<p>      This is the start of a paragraph, between this and the next command you fill in all of the text that you would like to use.

</p>      This is the end of the paragraph and is what you use once you have finished filling in the paragraph that you have just started. This means that you are finished with the text you have filled out.

</body>       This is to show that you have finished filling in all your other content.

</html>      This is what you use once you have finished all of the HTML coding that you want which is part of the coding that you want to add.