User Testing

The project still needs a lot of work although it is almost the end of term and I have barely done any user testing apart from myself trying to detect errors and glitches. I decided to carry out some user testing where participants use the system to register, login and upload files onto their user account.

Overall I had seven participants who took part and test my website below are the results of this user testing:

• Logout should be enabled on all pages not just the index page
• Login error message should be displayed underneath login submit button
• Progress bar to show upload file process
• User page needs security from others viewing files 

Uploading Files to the User Page

Now that I managed to upload image files to a folder I need to enable the system to allow other file formats to be uploaded. This process was not as challenging as I thought simply because I had a working model already all that was needed was to remove the restrictions I had allocated within the PHP.

The query inserts the file information onto the database and then saves the actual file within the path folder i created.

 Sources

Thompson, P. 2012. Change file permissions upon file upload--PHP? - Stack Overflow. [online] Available at: http://stackoverflow.com/questions/11089654/change-file-permissions-upon-file-upload-php [Accessed: 25 Mar 2014].

Register Page Continued

The queries within the adddata.php were encountering some issues when information was entered within the register form and submitted only the login details seemed to be stored within the database and echoes out on the following page. 

I realised that there were variables that were not labelled properly therefore I adjusted them and attempted to submit the form again. Unfortunately the problem was not solved there seemed to be an undefined variable within the code that code not transfer or receive the information that was being inserted into the register page. After checking and trying to test the code multiple times and discussing the issue with Colin it was suggested that the name "user" for the table might be conflicting with the code. Although I previously checked that the name "user" was not predefined and was appropriate to use it seemed to be the only conflict encountered.

To solve the issue that was occurring within the query I created new columns within the database that stored some of the fields formerly placed within the user table. I also added the fields first name, surname and pnumber to the query and echoes section of the PHP code. This process was a success as the information entered within the register page was transferred and stored within the database. 

The details entered into the form have been echoed out within the joined.php page.

Although the issue was solved I decided to keep the original code for the time being, I commented the PHP code so that it does not interfere with the rest.

Register Page

Register page is important for adding new users to the system this option will be available within the login drop down where the user will be directed to the enterdata.php page. I had already began on the functionality of this page although I left it to work on more important sections of my project although this is still undergoing I felt that it was important to finish off this stage. Within the previous form I only aimed to stored the users full name and pnumber, this time I have added a username and password to the form that will be added to the login table within the database. 

Once I clicked on the submit button I was directed to another page (joined.php) where the information entered within the form will be echoed out unfortunately as you can see for the image below this is not the case. 

Ok so after trying multiple times to add users to the database and not experiencing an actual addition I realised that part of the insert query of the register form was actually working. The user personal details were not being stored into the user page although their chosen username and password was being stored onto the login database table. therefor my task is now to attempt to fix the first query in order to produce a fully functional register page.

Renovating the Design

One of the main areas that needs to be adjusted is the design of the interface, it needs to be appealing to the user and at the moment the layout is awful. After numerous times of adjusting the CSS code within the login box I managed to display it underneath the login header within the nav bar. 

Regarding the layout of the website I decide to look at various website templates to see what designers are creating. My first attempt consisted on implementing a black header bar at the top of the page where I could add some separate links or bits of information. I enlarged the nav bar to a larger height and overlapped the centrepiece div tag. 

Although part of the design issue was the layout and positioning of elements the colour scheme also played a major role. I decided that adding another colour to various sections such as the nav bar headings will help to make the interface more attractive. I used the website www.colorcombos.com to find colours that work well with the shade of blue. At this point I would like to still stick with blue as from the research carried out in first term it is the colour that is least common within people who suffer from colour deficiency. The colour orange was used within the text of the nav bar as you can see the text already appears clearer than before when it had a dark blue shade. 

Apart from experiment with the shade of orange on the text i also decided to test it on the header bar to see which shade looked best as a whole. This idea came from the research into effective website only using two shades, I came across the website Notable where the designer has used orange and white as the colour scheme. A benefit to using the orange header background was that the original logo could be seen clearer than with the blue background although this is not a major issue as the colour of the logo could be altered. 

Website: www.notableapp.com

Below is the third colour scheme I attempted where I used a dark green/blue shade and combined it with the shade of white and lime green. I implemented the colour white to the nav bar text when it is visited although once the user hovers over the word the colour changes to lime adding that extra shade in a subtle form makes the interface less busy. I am aware that the logo is not clear with this dark background but it is not a major issue as I purposely created a simple design so that it could undertake quick changes. 

Within the body tag I centred the main content leaving blank spaces on each side of the page. These spaces will either be kept blank or filled in with relevant information further down the line. Each of the web pages will contain their own heading such as the one below, I also added an underline separating the heading from the main content.  I took this idea from the website www.newslinkuk.co.uk where the design has divided the headings from the content. 

Website: www.newlinkuk.co.uk

Below is how I have structured the layout so far at this moment I am keeping the main content within the centre of the page only using up around 500px this size will increase once their is more content being echoed out and displayed. 

The changes I have made will be tested on the target audience (media students) so that I can gather feedback and suggestions to implement this will be undertaken this week. 

Sources

Hornor, T. and Hornor, T. n.d. 30 Beautiful Three-Colors Websites For Your Inspiration. [online] Available at: http://www.hongkiat.com/blog/three-color-websites/ [Accessed: 11 Mar 2014].

Nclud.com. n.d. nclud – a creative web design agency. [online] Available at: http://nclud.com/ [Accessed: 11 Mar 2014].

Newslinkuk.co.uk. 2013. Case studies | NewsLink. [online] Available at: http://newslinkuk.co.uk/category/case-studies/ [Accessed: 11 Mar 2014].

ZURB, I. Z. N. A. I. Z. 2014. Notable - Better Interfaces Through Faster Iterations. [online] Available at: http://www.notableapp.com/ [Accessed: 11 Mar 2014].

Getting the User Profile Image Upload to Function

One of the function troubles I was experiencing was the ability to display the profile image that was uploaded onto the folder on the user page. The popup window, ability to upload and store the file was functioning therefore I only needed to focus on displaying the content. 

The code below is meant to echo out the image from the folder but at this moment only an image icon is being displayed. I am not sure if their is code missing or incorrect at this point in time therefore I will need to look farthing into PHP uploads and echoing the uploaded document. 

Logging In and Out

I have already sorted out some of the login process within my project but I needed to finish of various sections for it to function. I created another table within the database called login here the users login details will be stored so that the system recognises them. 

Now that i had implemented usernames and passwords to the existing users within the database I decided to enable the session start on all the website pages. I also change the number of the rows to 0 now that i was going to test the functionality. 

Unfortunately the session has an error at this moment it does not seem to be able to identify the name of the field within the database. To try and solve this I change the userid name to usersid that is found on the login table but unfortunately it still does not seem to work. Since I need to carry out user-testing soon I decided that I would comment out the session and test the login manually. 

Within the login field I typed the username and password I had allocated for user 1 if the details match those within the database it would redirect the user to another page where a home button would be displayed. This button enabled them to direct to the homepage and use the website. After testing this function I removed the link to another page and made the code redirect to the same page in order for the user to be able to continue on what they would like to do. 

Within the PHP code I wrote a section that identifies the user when they log in and provides them with various actions. At this point I added a link to heir user profile and a log out function for when they have finished using the system. As you can see below the system has identified the user and displayed their username on the screen, it has also provided them with the links I mentioned previously. 

If the information does not match an error message will appear instead of the username and links to other pages. 

For security reasons it is important that I enable users to log out of the system once they finished using it. To be able to log in I included a session start for the users therefore the log out process will need to destroy this session. Below I have provided the code for this function instead of creating a new page with a message informing the user that they have logged out I decided to redirect them to the index page where they will be able to log in again. This logout session destroys the existing one already created beforehand therefore preventing others from using it. 

Sources

Stackoverflow.com. 2011. php - Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in - Stack Overflow. [online] Available at: http://stackoverflow.com/questions/5473981/warning-mysql-fetch-array-expects-parameter-1-to-be-resource-boolean-given-i [Accessed: 5 Mar 2014].

CSS Debugging

A major issue that I am facing at this moment is CSS conflicts within the design I noticed that some of the problems came from classes not labelled properly. I also found that I had a lot of unnecessary CSS that would have contributed to the conflicts found. I noticed that within my HTML page my nav bar had a class assigned to it but within the CSS stylesheet the class name had not be included. This resulted in changes implemented within this section not working at all.

By altering the name of the class within the CSS code to match the HTML the header background colour changed to white.  This change was due to other colours that had been added to the cde but not change due to it not functioning at first. I made some alterations and added the actual background colour to the overall header so that it includes everything within the header tag.

I adjusted the placement of the Google Map within the Index although the login section is still a working progress that needs to be finished. At the moment I am having difficulty in how to move the box to be displayed just underneath the login section. 

I also managed to fix the placements of the upload and profile section of the website now that the rest was functioning correctly. I decided not not add a lot of design at this moment as I want to keep it simple enough to be able to continue with the implementation of the PHP code.



After managing to sort out CSS conflicts within the code I decided to experiment with other design colours that compliment the shade of blue. The image below displays the header bar where i attempted to add a bright colour as the overall colour scheme of blues blend in altogether.

Sources

Colorschemedesigner.com. n.d. Color Scheme Designer 3. [online] Available at: http://colorschemedesigner.com/ [Accessed: 4 Mar 2014].

Homepage Map Implementation

I decided to take a break from implementing the PHP code and apply some jQuery to make the design more appealing to the user. The homepage is quite dull at the moment this is because there really isn't much need for any PHP apart from the login form therefore adding jQuery will help to fill up the page. 

In order to implement a map from Google I needed to login into my account to be allowed access to do so. I used the Map Engine Lite to customize the map to my preferences and specifically to what i need to display. 

Once I customized the map to my own preferences I had to share and make it public in order to embed it within my website. 

Once it did this I selected the option to embed the map onto my website and was provided with an iframe embedding code.  

After I embedded the map onto the code I saved my index.php document and previewed the page on the web browser. As you can see from the image below I need to re-size the map and place it onto one side. I made several CSS requirements such as the size and positioning of the map but found that the code was not changing anything within the page. 

I noticed that one of the reasons why my code was not functional was because within the HTML code of the iframe I had already embedded a width and a height. I removed the CSS within the HTML and found that the code started to respond to the CSS stylesheet although this still was not fully functional. 

I viewed the source code on the web browser in order to attempt to find conflicts that result in the absence of the CSS code. I found that the CSS on the iframe was not fully loaded through therefore the style is not being added to the map. Since i am having trouble with this section I will email my lecturers and arrange a date and time where they can help me with this issue.

Sources
Developers.google.com. 2013. Google Maps Tutorials — Google Developers. [online] Available at: https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map [Accessed: 2 Mar 2014].

Stylesheet, .. 2013. .loading css doesn't work from external stylesheet - Stack Overflow. [online] Available at: http://stackoverflow.com/questions/15694190/loading-css-doesnt-work-from-external-stylesheet [Accessed: 3 Mar 2014].

Yates, I. 2013. Quick Tip: Embedding New Google Maps - Tuts+ Web Design Tutorial. [online] Available at: http://webdesign.tutsplus.com/tutorials/quick-tip-embedding-new-google-maps--webdesign-15366 [Accessed: 3 Mar 2014].

Tutorial: 3rd March

Today I had my second last tutorial before my next VIVA here I presented my progress and the constraints that I have encountered so far. It was advised that i start to focus on the design section of my project as there is not much time left and the design is not the most interesting to look at. I will meet up with John during the week to discuss some design implementations and how to enhance the appearance it. The short amount of time to the next VIVA means that I will need to work on mulitple sections at once. I have decided to focus on various sections of the project making sure that they are functional and appealing to look at:

• index page
• profile page
• upload page

Im am hoping to have sorted these pages out by the beggining of next week in order to be able to add other sections to my website. I would like to have atleast attempted the cloud page where all the users files and folders will be stored and accessible to them.