Monday 30 May 2016

LO5 - Evaluation of the final Hive IT website.

Feedback

From the five people who have used my website, i noticed there were some fixes that needed to be made, but overall the feedback was extremely positive. Most people were impressed with the functionality of the site, as well as the simplicity of use. Users were also positive about the loading times and house style of the website. Testers were also impressed with the easy to access API and UI available for warnings towards your hive. Overall I believe that testers were impressed with the site and am happy with the feedback i have received. 

Evaluation
I (with the testers use in summary) have created an evaluation about the Hive IT website I have created.

Strengths:
  • The website is simple to use for all ages, including children and people not as technology aware.
  • The website uses state of the art PHP for a fast and easy display time from the user entering their Hive ID and receiving the results.
  • The house style of the site is interactive and fun to view. Information is readily available and the theme goes with the connotations of bees and hives in general.
Weaknesses:
  • I did not fully have enough time to program meta information and CSS for a completely responsive website, hence making the clouds stretch with different size browser resolutions.
  • Some of the pages are not yet complete due to the need for more information with the Hive IT website. These pages do redirect to a nice 404 page however.
  • The ID system needs a bit of work to select the most appropriate data to use for the graphs, at the moment it is picking the latest data.
Something that was desperately in need of changing was the home tab not working correctly on the 404 page. The code looked like this:

Unfortunately the function to detect the click in javascript was missing, so for that reason when the user clicked the open nav menu button then it did nothing rather than calling the css class to open the nav bar. To fix this i re-wrote the function that defined the variable 'body' as the body of the document, and then binded the click on the hamburger menu to toggle the class of menu open on the navigation bar. This triggered the menu to open through CSS transitions. Finally i retuned false to prevent anything extra from happening.


LO4 - Test Plans






a) internal/external hyperlinks

I began by asking my testers whether or not links redirected them to the right pages. If they were they would put that the links worked with no fix required, otherwise they would do the opposite. For example i asked whether a mouse click on 'home' would take you to the home page.

b) Dynamic Content testing

Next i asked if the user changeable content on the site works as expected. This included the changing of temperature warnings and selecting your hive. If the functions worked as expected, the tester would indicate this with a yes in the working box and a no in fix required. If one of two things happened (error or working) then i was happy for the result to be correct.

c) page load times

To test my site for one of the most important features, loading times, i asked the testers to record the length of time needed for the page to fully load from pressing enter to load the website. There is no indication of a pass or failure for this, and this is because there are numerous factors to it, including internet connection speed and the cache size of the website beforehand. As long as the whole page loaded below 6 seconds i deemed this enough for dynamic content.

d) performance of website when using different browsers

A website must be compatible with every mainstream browser so I got the testers to use different operating systems and browsers to check to make sure the site looked similar (if not the same) on each one but mainly if it was in a usable state. As long as only the loading times were affected, i was happy with the result.

e) consistency of house style

To ensure my website's style was consistent throughout, i got my users to test different pages for consistency in design, fonts and style. If the house style was similar on all pages then i was happy with the result, hence no fix was required.

LO3 - Making The Hive IT Website

I created my website locally using Dreamweaver CC and AMPPS. This allowed me to get the website working without the need on online hosting.

Link to the website (hosting by c9.io) : https://unit34-hiveit-matthewmilanunit34.c9users.io

Here is a video i made showing all the features of the website:




Please do note the audio is quite low for this so i would advise watching with headphones in a quiet location.

Editing the Site.



Firstly i set up my workspace to work with my layout of documents, i created the main files including 'index.php' (the initial home page) and a variety of others. Folders branching off from the root of the workspace included 'css' [which holds the styling for the website], 'assets' [which holds the includes for the pages], 'img' [which holds the images for the website] and 'js' which holds the javascript. An organised layout helps reference items later on which makes it easier to manage the website.


Following the structure i created my index.php document (which for the most part is translated across to all other pages). I started off by defining the doctype as html and then created my head section. The head section handles everything the user doesn't see, e.g the page title, and links to stylesheets and fonts which are included later on. 



Next i create my includes for the document, the navbar include is positioned at the top of the document and the footer include is positioned at the bottom. Creating an include document means the footer or navigation bar don't have to be written each time for each page, making the overall coding more efficient. 


In-between the includes comes the main html for the page. This includes the demo hive and the store. Using ul (unordered lists) I made the shop modular, meaning unlimited addons can be created by copying only one li. 


On the hive-info.php page. Before declaring the doctype begin my php tags to contain variables which are used later on. This is due to websites reading code from top to bottom (unless otherwise declared) meaning that by declaring variables at the top they are available for use later on. You can see that if a cookie (a small packet of information containing data for a site) isn't set for temp min or max then it switches to using preset amounts, otherwise it uses the temperature preset by the user.


The other important PHP section for hive-info.php was getting the data for the user. As we only know the standard ID for testing, i resorted to a static url, however the full project would have a variable after the account section to show the user their hive info. The URL is defined by the URL variable, and i then get the result of the url by passing it through the 'file_get_contents()' function which copies all the data in that page and stores it to the result variable. The false indicates i don't want to use post methods. i then decode the data which is in JSON by using the 'json_decode()' function and pass true to turn in into an associative array. Now the data is easily selectable which i use for the graphs and data.





House style
For a website to be consistent and clean, the house style for the site must stay the same as this means users can easily recognise pages as part of the website, to keep a consistent house style i did the following: 
  • Same two major divs in the code, wrapper_blue and wrapper_green. This is the green and blue sections of the website.
  • Same two fonts throughout the site, Rounded-MB and Open-Sans, which are both open source fonts.
  • Same navigation bar is consistent throughout the site, the cloud and burger bar.
  • The same footer is present throughout all the site.
  • The same yellow for text is used throughout all the site.
User feedback
I received feedback from five people who tested my site (can be seen in "LO4: user testing"). This showcases how well the site works and what needs to be changed. Initial feedback indicates the items put in that i knew about worked as expected. However people noticed that the store and other pages navigated the user to the 404 Page not found page. This is due to there being no available store for Hive IT as i don't know what kit's they use, but what it does mean is if they wanted to add the store it would be quick and simple to do. Another bonus about this is that it proves the error checking works. Due to the page not existing it redirected them to the 404.php page which is nicer than a non-styled page. In conclusion i got the impression people thought my site fit my target audience and works as expected for the most part.

Relation to target audience
The website i created had two target audiences; those looking to buy a data kit for their own hives and children who wanted to understand more about why looking after bees is so important. Due to this i decided to create the site more child friendly, as this way it would work for both audiences whereas if it had been the other way it would have been too formal for children to understand. The simplistic design makes it easy for even the most non tech-savvy viewers to navigate the site. Simple and relevant information helps keep the users where they want to be and easy notification (e.g the hive colours) make it extremely simple to view the hive condition in a glance.


Rich Media
Rich media is an element of a website which allows a user to feel more included into the site. It is different as in comparison a normal text and image website would be boring to look at, hence button and interactive / dynamic content help keep the audience on your website meaning a higher chance for accomplishing the websites purpose. On my website the dynamic hive and graph makes it fun for children to see a hives condition and what is potentially dangerous for bees. As well as this the burger navigation slide out menu keeps the site interactive with modern transitions and buttons to other pages. A really good example of Rich Media on my website is the clouds in the navigation bar. When hovered over they glow a blue stroke which is better than a standard anchor tag which does nothing.

Wednesday 3 February 2016

LO3 - Mindmapping user response feedback


Direct feedback would be the best method in the form on a survey, and also viewing user click responses on the site would be useful for repositioning elements as well, this however would cause problems in the form of having to alert the user that they are being tracked.

For my brief of Hive IT, my target audience will be middle aged men/women with a background in beekeeping. Due to the website having more functions the other target audiences would be the younger generation with interests of saving bees. Their social background can be of any type, as it is aimed for everyone to understand.

Method 1: Surveying users on their own request will be beneficial to my type of audience as it gives them the option if they think something is wrong or could be made better to express their opinion. This means that overall the user feedback would be more beneficial to the website, as only dedicated website users will express their opinion of the website, not people who would rush and hence give an invalid opinion. The survey would also be useful to the target audience of bee keepers as they would most likely have more time to complete a survey with full detail compared to that of a city working businessman.

Method 2: Using cookie tracking systems to analyse where users click on the screen would be useful as it can analyse what elements users click most or least allowing site renovation to occur to make the website better and more productive for both parties - the consumer and creator. This is also useful as user feedback is constantly updated without the needs for a user to complete a survey, so it causes no more inconvenience to users and provides the creator with high detail statistics. However a negative to this method is that a notice must be issued by law for cookie tracking to take place, which may deter some users from the site.

Method 3: Site ratings will also be useful for a simple and convenient method of receiving site feedback from all ages of users. Although it doesn't provide as much detail user ratings mean simplicity to the user and hence more feedback rating may occur. It also allows the smaller target audience to comment on the site as well by clicking on of the 5 stars then submit. The site ratings are also particularly useful as they can be used to promote the site higher in search engines like google or bing.



Wednesday 27 January 2016

LO2 - Site Plan

Site Plan for Hive IT


Certain items of this structure cannot be created - E.G The store (as the products do not exist yet) 

[EXTERNAL] - This site is not hosted by myself or programmed by myself, so hence is classed as an external link to a different page. The top row (inline with the homepage) are links and underneath is where they link to. Error pages will only be seen if an error occurs.