Research: Languages

As a BSc Student it is vital that the code of the project is clean, clear and valid therefore a substantial amount of research is needed in order to learn techniques and understanding of the process in creating the project. I have decided to commence this research now in order to be able to create practise models and gain some experience before the construction of the real project is underway. 

Below I have listed the code languages I will possible be implemeting within my project:

• SDK
• It was advised for me to use open source 

Time Plan

Below I have displayed both term 1 and term 2 time plans, regarding term one I wanted to display how I have completed all tasks and now gathering all the information to be presented on Monday. Term 2 time plan is not official although it is a rough sketch of how I would to set out my work plan and deadlines for each in order to be able to deliver a fully functional project in VIVA 2. 

Term 1: Time Plan Completed

Term 2: Time Plan

Other forms of Cloud Storage

Although most of my research has been undertaken I decided to look at other similar systems in order to see the feature that they provide and how I could apply it to my project.

Dropbox

• Saves and secures files
• Space capacity starts 2GB
• Works with a multitude of operating systems
• Continues to work when the user is offline
• Ability to share folders
• Dropbox is available on portable devices such as tablets and smartphones (supports android/iOS and blackberry)
• Editing on portable devices are available 
• Share and upload with other users
• Keeps a history of files for a month allowing users to undo changes and retrieve deleted files

Google Drive

• Store files
• Recognises objects and text within documents and retrieves them at a faster pace
• View variety of file formats on browsers
• Capacity for HD videos
• Users can work offline
• Users can connect and communicate with others and post comments
• Information can be retrieved up to 30 days
• Files and folders can be restored

Sky Drive

• Free online storage
• Access anywhere using multiple devices
• Supports Mac
• Runs Microsoft Office programs
• Share documents and files with others
• Compatible with other apps enabling users to scan documents, save sound and video files etc

Sources

Dropbox. n.d. Your files, anywhere. [online] Available at: https://www.dropbox.com/features [Accessed: 5 Dec 2013].

Google Drive. n.d. Your memories, safe & secure. [online] Available at: http://www.google.com/drive/features.html [Accessed: 5 Dec 2013].

Windows. n.d. What is SkyDrive?. [online] Available at: http://windows.microsoft.com/en-gb/skydrive/download [Accessed: 5 Dec 2013].

Photoshop Homepage Mockups and User Testing

It is important that I develop mockups of how I would like the website to look like in order to make the designing and construction process straight forward. Within this section of my research I experimented both with the layout and the colour schemes therefore bringing together the results gather from the homepage prototype and develop an interface that appeals to the students. Regarding the colour scheme I choose to experiment with several combinations within this section I reflected upon the research I gathered about colour and colour deficiencies. 

Mockup 1

Mockup 2

Mockup 3

Mockup 4

Mockup 5

User testing
Once I developed the Mockups it was important to carry out user testing to see what designs and colour schemes appealed to my target audience. Here I decided to voice record students answers as I wanted to create a discussion amongst them. Each mockup was displayed and students were asked to respond towards the layout, colour schemes used and the placement of elements. 

Results
Below I have displayed the recording from the discussion:

https://soundcloud.com/user622028656/homepagephotoshopfeedback

Mockups Produced from Results
Although any designs developed are not official until I begin creating the website I decided to enhance the mockups already created to reflect upon the feedback I gathered from the students. The various stages of creating the design will be presented at the VIVA in order to show the process and how I came to these designs. 

Mockup 1
As you can see below the display of features has changed:

• Shortened Login (user clicks and a popup window appears to login)
• Menu pages have been place in the centre of the header
• The middle background has been changed to white
• Large logo has been removed from the centre 
• Removed most of the drop shadow

Tutorial: 25th Nov

Today I had my last tutorial before VIVA 1 here I presented my blog with my research and my time plan leading up to the second VIVA. Here I discussed the last sections of research that need to be undertaken before the assessment:

• Research how the cloud will work
• Prepare for VIVA 1

The assessment will take place on 9th December therefore i have 2 weeks to prepare and practise the presentation. I will have a trial run next Monday during my project seminar therefore it is vital to have as much information in order to have an understanding of how the real presentation will turn out. 

Homepage Paper Prototype

The next step to to produce paper prototypes of the various webpages that will be used for the project, this first page I will focus on is the homepage. 

Website Heatmap

During the process of designing a rough sketch of what the interface could look like I decided to look into website heat maps in order to gather an understanding of the most important areas and features users look at.

The designs place below are very simple outlines of where I would like to place various elements on the homepage. I gathered a group of 5 participants, here I explained what this napkin test was about. The main goal was to ask them what they though of the designs, what they would like to see within the design and how they feel it can be improved. I decided to voice record this test therefore before starting I asked the participants permission to record them. 

Below is the recording of the feedback session undertaken based on the mockup layouts of the websites homepage. 

https://soundcloud.com/user622028656/homepagemockuprecording

Layout 1

• Too traditional
• Login has been placed on a random section (make users think)
• Prefer login section at the top of the page
• Not keen on the profile image section
• Logo is too big

Layout 2

• Logo is too big
• Menu could be placed at the very top providing more space for the content
• Works for an educational website

Layout 3

• Better layout
• Participants like the menu on the side and a large section for the cloud files
• Logo is too big
• If it for a dropbox style of website this one works the best out of all of them

Regarding the logo within the layout the participants all agreed that it took too much space and that a smaller size would be more beneficial as it will allow me to have more space for the rest of the content. Regarding the menu bar it is a question of carrying of various trials, the students were keen on were the menu was placed on the third layout but only if the content was the cloud content. It is too early to know how the cloud content will be placed therefore I cannot stick permanently with this design. 

Now that I have gathered the results from the user testing I need to make adjustments to the overall look based on the feedback they have provided me with. Another step I need to take is to trial colour schemes for the website. Here I need to consider the previous research based on colour and interface design although this will not be designed in large detail until the production process occurs.

Sources

Wiliam. n.d. clicktale_scrollreach. [online] Available at: http://www.wiliam.com.au/content/upload/blog/clicktale_scrollreach.jpg [Accessed: 21 Nov 2013].

Logo Paper Prototype

The design process will consist of several stages where concepts are produce and tested, as part of my research it is important to produce paper prototypes. 

At first I was unsure on what I wanted to produce for the logo I did not know if to combine the Moodle logo and alter it into my own or develop a completely new one. Since the project is my own and the the final product is unknown until the production process occurs I decided to create a different logo in case the end result has no relation to Moodle. 

The Logo Paper Prototype has been scanned and place below:

Napkin Test

After I designed a round sketch of the logos I carried out a napkin test to gather feedback. Before I carried out the test I made sure the participants gave me permission to record them whilst they talked about the designs, all particpants agreed to this therefore the test was conducted. 

User Feedback
just like the homepage I carried out the same form of discussion with the participants her I displayed various experimentations that I have done with the logo. It is not a finished piece the images are examples of what I want, the purpose of this discussion is to gather opinions of what others think of the design. 

Here is the recording from the discussion:

https://soundcloud.com/user622028656/logoprototypefeedback

Logo Page 1

Logo Page 2

The logos students preferred the most have been displayed below, it seems that although I am creating a cloud they are not bothered about the logo's design consisting of an image. The two logos below are simply looking, the students expressed how they liked the use of a different colour on the letters "ed". I'm quite happy with this outcome as I wanted to differentiate those two letters from the rest as they can represent two things; education and edit which is what the project is about. 

Logo 1

The participants liked the font used for this logo although they felt that the use of the cloud image is unnecessary. I asked them if there is a preference in terms of making it bolder but it is a question of trying it and testing the design. 

Logo 2

The logo below was the second one students liked, especially the difference within the text regarding the "ed" letters. In terms of the colour they really like the blue as it stands out and draws them to it. The participants liked the font on this logo although out of the 2 they prefer the font used in the first logo but with the colours of the one displayed below. They did mention that the blue should be changed to white if the design consists of dark colours. 

Functionality of the Database/Website

Various function are a requirement in terms of making the database user friendly some of these consist of time stamps when a file is uploaded and size restrictions in order to not overload the cloud with files. The system should also limit how long piece of work are kept on the cloud (i.e. work more than a year old must be removed, to make space for more recent documents).

Date/Time Stamp
An important factor of adding to the website is the ability to date and time stamp whenever content is uploaded is will serve for several purposes:

• If a student is submitting an assignment a date and time stamp is needed in order to register if the assignment has been handed i early or late
• Students are able to keep track of uploaded work, helps to determine if it's an old or new piece of work

In order to implement this within the website I will need to incorporate a PHP Date() function:

<?php

echo date("y/m/d)

?>

A time stamp does not need to be specified if you intend to use the current time if I find that a specific time is needed I will need to use the mktime() function which will allow me to specify the date. 

Size restrictions

The cloud space will need to be limited for all user although those such as lecturers are entitled to a larger amount in order to provide files of information to all their students.

Time uploads

Once a file is uploaded to a system it is sometimes forgotten and left without being used, the problem with this is that more and more files are uploaded and it can end up slowing down a system therefore it is vital to keep this in order. A query or some form of limitation must be used that requires the user to remove old or unwanted posts that are not relevant any more.  

Sources

w3schools. n.d. SQL Date Functions. [online] Available at: http://www.w3schools.com/sql/sql_dates.asp [Accessed: 13 Nov 2013].

w3schools. n.d. PHP Date() Function. [online] Available at: http://www.w3schools.com/php/php_date.asp [Accessed: 13 Nov 2013].

Database Tables

Here I will explain the functionality of the database and how the tables will be connected:

The user table will connect to the other tables with the userid , this table will display the users information such as their name, pnumber, subfolderid and the superuser number. The aim of the superuser is to identify whether the individual is a student or lecturer, I have implemented this feature in order to create a query where superuser 1 (lecturer) can view all student files and folders. 

The subfolder table will display information such as the folderid , folder name, the timestamp (to no overwrite any other files) and the userid that connects to the user table. The number 0 within the subfolderid will represent the root folder each student has here they can save files or create other folders to withhold them. 

The file table will store the individual files within the subfolder, the fileid and filename will identify the individual file, they will then use the userid and subfolderid to connect to the other tables. This will also save the file within the subfolder or any others within.

The permissions table is to identify what users can access a specific folder, this is mainly for lecturers to be able to see students work and for those working on group projects to be able to access the same folder.

VIVA Practice

During our project seminar today we developed a VIVA presentation on our major project idea and research gathered. This presentation was then presented by another student in the class, the purpose was to see the project from an outsiders point of view enabling myself to take notes and identify areas of improvement. Ollie presented my work today, during the process I found useful tips on how to describe and talk about some of the research I have gathered so far. This was followed by a discussion where other students ask questions and give advice on what I could implement. 

Positive

• Overall idea had positive response from students (they agree they will benefit form using this)
• No need for the use of hardware (USB/ hard drives)
• Solves the solutions of working with various computer systems as the files will be in one place

Negative

• Software used only saves the information on the cloud it does not provide an external file 
• One of the students was not keen as he prefers using a form of hardware

Further Research

• Need to look into how the cloud will work if more than one using is working on the same file
• Shotgun program

Now it is vital that I carry out some user testing and develop some paper prototypes for my logo and homepage in order to be presented in next weeks tutorial session. 

Developing the "Cloud"

The database will only store user content such as their names and customised profiles. My intention is to store files and folders within a drop box/cloud storage section, in order to develop a function like this I will need to look into developing a cloud server or program that will provide this for me. There are many forms of cloud storage to choose from that it is easy   to create your own, this seems have become a trend due to other storage devices like Dropbox being hacked. 

For my project I researched different open source materials that I could implement, I came across ownCloud.org which is a device that allows me to create my cloud. This particular one is very practical and users can share apps and programs instead of just files. Although this feature is within the system it is doubtful that I will use it as part of my project as I need to minimise the capabilities in order to keep within my timeframe. In order to use this program i first need a web host that supports PHP5 and MySQL. I will also need a copy of the ownCloud server 5 that will be implemented within the system. Since the cloud section will be accessed from several devices I need a suitable URL address.

A great aspect with this program is that it is compatible with other servers so constraints regarding compatibility issues aren't so much of an issue. 

http://owncloud.org

Before carrying out any installation or implementation of software I cam across an article which explain how to set up the cloud and the features it provides. 


Sources
Klosowski, T. 2013. How to Set Up Your Own Private Cloud Storage Service in Five Minutes with OwnCloud. [online] Available at: http://lifehacker.com/5993596/how-to-set-up-your-own-private-cloud-storage-service-in-five-minutes-with-owncloud [Accessed: 16 Nov 2013].

ownCloud. 2013. Introducing ownCloud Documents. [online] Available at: http://owncloud.org/ [Accessed: 16 Nov 2013].

Interface Design Structures

It is important to look at various requirements vital for the design structure in order to develop a successful and effective interface.

Once a page starts to load and appear the user will focus on various features which I have displayed below:

• Buttons (to click for other actions and or options)
• Clear structure with clues on what things are and what they might lead to
• Less input from the user (when a lot of input is required the user is likely to come off the page)
• Using visual elements to highlight various features will attract users into using it although it is important to keep it a minimum
• Use large/bold text to highlight important information such as menus

I looked further into requirements of an interface to see what tips and advice I could gather:

• Add Padding to a Link:

By adding padding to a link it makes it look bolder and more appealing to click on, it can also serve as a point of focus to the user.

• Use Contrasts: 

By contrasting the colour and style of the letters it draws attention to the areas the web designer wants the user to focus on. This technique also distinguishes not so important information that still needs to be included. 

• Colour to identify Features 

Colour is a great tool to use to draw the users attention to various areas that the designer wants a lot of traffic drawn into. Using warmers tone of colour such as red and orange are effective in making an element stand out to a user, it is also very likely that they click on it.

• Letter Spacing

CSS allows web designers to user letter spacing in order to make text clearer and understandable. It is advised that the technique is used mainly for headings and not the body of text.

• White Spaces

By using white spaces it allows to user to identify elements that belong together and those that do not. An example I can give is the technique for writing my blog, I have used the white spaces to separate the categories, headings and text. This technique creates a form of blocks making it easier to identify what goes with what. 

• Hover Control

Hover control is a practical way of displaying more information without de-clattering the web page. When a page is overloaded with information sets become uninterested and frustrated as there is too much to look at this is where the hover control comes in. The way this works is that the most important information is displayed for everyone to see, if they are interested in the information they will place their mouse over one of the areas, this triggers the hidden information to appear to the user allowing them to see all the features available. A great aspect of the hover tool is not no complex code is needed therefore it is simple to achieve and apply to the interface. A minor accessibility issue would be that some user may not be able to identify this feature of the interface but it is a minority therefore it is still an effective method. 

• Auto Focus

Forms are a common feature on websites intact many users searching for a specific thing will use a search form to find it directly. When designing a website it is key to identify if the form is the main feature of the website, if so the designer needs to make sure that the user instantly focuses on that input method. The use of JavaScript allows the page to focus on the input field although one issue is that the user is not able to go back to the previous page of the website as the information is deleted during the change of page process.

• Using Verbs in Labels

A proven successful method in an interface is using verbs were labels should be placed, this allows the user to make a decision without the need to read what the entire thing says. By using the verbs they know already what is being asked therefore allowing them to make a quick decision. 

• Advertising

Although most of us find adverts unappealing, if the interface provides high quality information users will stay on the page. Sometimes content overrides the look of the interface although for my project is its vital that the design is effective in order to make it enjoyable for both students and lecturers to use this is because I am trying to reduce the use of hardware for saving and resorting to.

Now that I have looked at important features to include within my interface I will start to develop a homepage paper prototype of what I would like my project to look like. 

Sources

Fadeyev, D. 2008. 10 Useful Techniques To Improve Your User Interface Designs. [online] Available at: http://uxdesign.smashingmagazine.com/2008/12/15/10-useful-techniques-to-improve-your-user-interface-designs/ [Accessed: 16 Nov 2013].

Research into User Testing

User testing is vital during the research, design ad production process as I need to make sure the project caters for my target audience and is easy to use/understand. Here I recapped on some background research using several resources such as Steve Krug's book on user testing. 

• Test a product whether it is your own or not (competitors website to see what works and what does not)
• Test consist of tasks to be completed (observer sees how the participant completes the task here they can see if the function is user friendly or not)
• Observers is there to take notes of occurrences and ask any questions if needed depends on the type pf study)
• Two forms of data types that are used within user testing

1. Quantitative

• This method is similar to scientific experiments as they are working with a hypothesis
• The format uses numbers to gather data instead of detailed information
• Once the sample of questions/tasks has been designed it cannot be changed
• This type of research requires a large sample of participants
• Those taking part have to reflect the actual users that will be using the product once it is complete or up and running
• There should be a very small amount of interaction between the observer and participant

2. Qualitative

• Method used to gather information on how to improve a product regarding it's functionality
• Easily detect errors within the system as there will always be errors and areas to improve on
• The is a more informal approve unlike the one mentioned above
• This is not a scientific method, allowing interaction between the observer and participant if needs be (test can be altered during)
• Only a small sample is need therefore it is easy to recruit participants once the target audience has been detected
• The study can be any length due to the small number of participants that are need
• A debrief session is carried after the tests have been completed, here the problems gathered are discussed and possible solutions are made
• Easy to detect errors even using a small sample
• Observing the participant helps us to understand how they navigate through a website this is helpful as then I can develop my website accordingly

Carrying out the Usability Tests

The usability tests need to be carried out on a frequent basis especially when my design and production process come to place as I need to make sure that all navigation systems are working including the database and cloud functionality. I have decided to stick to a sample of 3 participants as it is easy to recruit and is a good number to find errors within the system. The small number makes it easier to carry out longer tasks and allow the ability to debrief after. Before carrying out a usability test I need to decide on what I am actually test, what I want to find out and why? In order to do so I will need to write up a script where i introduce myself, the project and what I am testing. Within the script \i need to encourage the participant to be as honest and open with their opinions as possible. The tasks will be set in scenarios in order to make it easier to understand.

Napkin User Testing

I will start my design development using napkin test, here several different design sketches will develop and tested. The use of various styles and techniques will allow users to depict one which they prefer or the feature that they prefer. The results provide will determine the layout or feature that I will be developing on. I have chosen to use this method as it is easy and quick (can be done under 5 minutes) to undertake but still providing me with enough information to continue.

Wire frames

The following form of user testing that I will implement after the napkin tests will be the wire-frames. This will consist of creating a diagram of the website where menus, logins and functions will be tested. It is mainly to see if the placement of attributes are effective or not if so why?

After these 2 forms of testing are complete the next stage is to design and test and actual web page although this process will come in later once the design and production process is under-way.

Tasks

It is important that I test only what is need at that particular testing session because of this it is essential to create a list of what I want or need to find out first.

• important tasks (tasks that will always need to be carried out when the user visits the page
• do not allow them to use the search bar for their tasks unless you as testing the functionality of the search bar
• Create a script with the tasks they need to complete, develop them into scenarios as participants tend to work better
• Carry a pilot test before the actual user testing just in case amendments need to be made, it is a quick process allowing you to use anyone as your pilot participant (they don't have to reflect your target audience)

After any form of testing it is vital that I debrief all the errors found (Steve Krug's book recommends a free lunch but as a student this process will not take place). The best way is to list all the problems found then put them in order of how complicated they are to solve. I then need to decide what will be sorted before the next user testing, the book recommends that small errors are dealt with first. All these tests need to be recorded on tape so that it can be looked back upon and used if needed.

Although it is likely that I will encounter on many errors, I need to make sure that they are manageable in terms of fixing. I might find that due to my time frame I cannot fully fix the problem but find a way around it that will not affect the functionality as much.

• Alter features
• Change functions around

The next step is to develop a script with tasks based on the Universities Moodle website, my aim is to find out how students use the system (what is normally done first?) and any constrains that are found within he website. 

How to analyze the data gathered

It is important that once the data is gathered the results are analyzed, in order to do so it is vital to choose an appropriate method. I have looked into a variety of forms that are displayed below:

• Regression: It looked at the correlation found between both the independent variable and the dependent variable.
• Correlation: Looks into the relationship between variables
• Cross Tabulation: Method is used to find correlations between variables at the same time; the results are then divided into groups and analyzed.
• Descriptive: Charts are used to displayed results, as the data mainly gathered is quantitative. The researcher will also measure the mean, median and mode

Sources

Krug, S. 2010. Rocket Surgery Made Easy- The Do It Yourself Guide to Finding and Fixing Usability Problems. Berkeley: New Riders.

Fink, A. 2009. How to Conduct Surveys: a step by step guide. 4th ed. California: Sage.

Statpac. n.d. Correlation Types. [online] Available at: http://www.statpac.com/statistics-calculator/correlation-regression.htm [Accessed: 17 Nov 2013].