Nice online editor

http://www.picozu.com/editor

Online editors using SVG

http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html

Could be used in a hi-fi prototype and maybe in a finished application since it outputs XML.

Feedback from Presentation

• How are we going to incorporate motivational aspects into our design? ie, what encouragement/inducement is there for the child to attempt the task
• How are we going to encourage completion of tasks?
• Introducing an element of competition?
• Reward completion of tasks (some kind of area where avatars of those completed are shown?) Reward for completing the task early?
• Encourage working as a class
• Generate some kind of end piece based on whole class' work (collage? T-shirt design?)
• How are we going to make it fun?
• Avatars? Changing based on progress?
• How are we going to facilitate the process of learning beyond what a standard application of this type does?

It was considered that we could produce a mind map to expand some of these ideas.

Also we discussed removing the 'like,' button from the entry of the person who wrote it in order that they cannot 'like,' their own work.

Hierarchical Task Analysis

Link to HTA

PACT Analysis

Key Points

1. The mental state of the students at the time of undertaking the task will affect their ability to engage with it
2. The design of the site must as far as possible minimise the potential for errors
3. The system must accommodate users who have never used an online learning tool before, as well as not getting in the way of more experienced users
4. Users who have a physical/mental impairment should be catered for
5. The physical environment will produce many distractions for the student undertaking a task
6. There will likely be many other students in the near vicinity
7. The system must remove the possibility of cyber-bullying
8. Any usernames/passwords required for the system should be recoverable
9. Communication between student and computer should as far as possible be seamless
10. Activities may be undertaken individually, by a group, or as a class.

Paper Prototype Video Final

Paper Prototype Video 3

Paper Prototype Video 2

Competitive Analysis

https://docs.google.com/file/d/0B7pUFKYLLg8YNE9hNzdLWTZTNy1ZVGsyVTdVTkhmQQ/edit?pli=1

Task Analysis

Task Analysis Conclusions and Extra Findings

Task analysis is very important in the design process and in helping the team understand what the user wants to get out of the application which we will be building. In order to understand what a user wants from an application a range of users had to be investigated. There are many different types of users who interact with learning platforms and it is important that these users are all investigated and that the team understand what the users want to gain from the learning platforms/applications. With this information our user profiles and personas could then be written, these could only be done once a task analysis was written and it was discovered what the users want to get out of these applications and the learning outcomes they need to gain.

Online learning applications were researched, there were many key points which were recorded and used to back up future design decisions. Learning platforms and social networking platforms both had main features which corresponded with the interface purpose, for example blogging is used to present an archive of textual information, it is informative with little interactivity, learning platforms have a wide range of differing interactive features but there are specific features which are used to aid student learning at specific levels. These results will be merged to obtain the most productive website which will teach students about FIRA.

Key points are needed in an online learning application:

· Interaction is key

· Children want to interact with something and have it be fun and do things when they complete things, Sam learning has animations which clap when a student submits a piece of work, congratulating the user for the interaction, users enjoy feedback and it encourages them to complete tasks and return.

· The instructions for online learning must be clear and to the point.

· Given our age group we wanted the process to be easy to navigate, if users get bored or stuck they will not want to continue to interact or do the work, so the written content must be brief and specific with clear instructions.

· Users need to be set a task with a clear understanding of what they need to achieve and learn at the end of the process.

Bloggs don’t offer much in the way of colourful designs, there can be backgrounds and headers styled using templates but blogs are used to display written content so they are kept plain and as an archive of information to be browsed through and commented on. The blogging/commenting website which the team will be creating using the research findings will be used for teaching purposes, therefore even though it is being used in a professional environment it needs to cater to its targeted audience and age group, and children at GCSE age group react well to interactivity, personalisation and colours.

Looking at the online Learning websites, they were very interactive, colourful and had the option to personalise user profiles. These features brought to attention the importance of making learning online fun. The blogging websites were plain, their main function to display written content. The team must find a medium between too colourful and interactive and too plain and textual content filled. The Bitesize online commenting feature was colour coded and this made reading the page more understandable, it is feature like this which will need to be integrated in to the final website in order to make online learning fun.

The Profile setting is a feature which student interact with first as it is a feature which they can personalise, this is a key feature on a learning website as it is a feature which gets the user involved with the webpage, once the attention of the user has been attained and the page personalised it is more likely that the users will continue to work through the content and work to a higher standard as the work submitted will have their newly styled and individualised profile information making their submitted content.

After the task analysis was completed its results were compared against the results of the personas and competitive analysis, the team decided that an online blogging type interface would be designed which would implement fun and interactive features, just like the interactive learning platforms. Researching the teaching plans showed us what features were needed to keep the students interacting with the educational aspects of online learning and what the basic requirements are for online learning, this gave the team the information required to build up the textual content in a specific layout. Aspects of the online learning platforms (large headers, interactivity) need to be integrated in to the final commenting website.

Social Networking/Blogging

Social Networking/ Blogging

Social div class="MsoNormal"> There are many different types of online blogging platform, the team has been using ‘Blogger’ which has been a simple to use interface which provides the commenting features required to store textual content and share these individual student entries.

As you can see in the image above the blogging website is kept simple because in this case it is being used to store/ share textual information. There is a basic layout of information which keeps navigation simple and easy to use, this simplicity is an attractive feature and makes blogging an easy to use platform. Simplicity is a key feature which has been made reference to in both the teacher lesson plans and when researching the online learning platforms, the information should be clear and to the point in a simple understandable layout. Bloggs provide this simple structure, design features can be added to this structure in order to make it more interactive but simple navigation must be a constant factor kept in mind.

Conclusion

When a blog is being used to store and publish textual information the design can be kept simple as it is just providing a background for the main content which is there to be read and possibly commented on. This kept the webpage simple and to the point, however the blog is there to share information it isn’t there for users to interact with it in a learning environment at a young age, teachers want the children to interact with a certain task which they have uploaded for the students to learn from and engage with.

requirements

Data Requirements:

The website must have the required textual content on it in order for it to be beneficial and considered a tool to help learning. The assignment brief/mission must be clear for the users to see. Teacher Lesson Plans and Learning guides were researched in order to get a better understanding of what type of content is necessary for specific age groups and how the content which is being taught to them should be laid out.

This was researched because as well as needing to know what it is the children want to gain from the website, it is vital to know what a teacher needs to input on to the website, how they need to lay out the work in order to make it readable and understandable for their students.

The main points gained from studying teacher lesson plans were:

· Engage your students in the writing process

· Students work well when there is a clear structure to follow

· Instructions must be clear

· Motivate the reluctant writer

· Make the learning process fun as well as educational

· Different structures apply to different subjects, the learning process is different.

· The learning process is different for different age groups, ensure the assigned work caters to the standard it is supposed to in difficulty and maturity.

· students need to be set a task with a clear understanding of what they need to achieve and learn at the end of the process.

Teaching, lesson plans were looked at from a range of different subjects, however sciences and maths were the plans which were most looked at because lesson plans differ with different subjects, therefore lesson plans which integrate online learning and technologies were studied. The plans provided aid with understanding what type of content should be presented on the website.

Functional Requirements

Non-functional Requirements

Individual Paper prototypes

First paper prototype

Technical Feasibility of Drawing on a Web Page

Introduction

There are currently several options for producing either drawings directly onto web pages, or for creating collages of images. The most recent option comes in the form on the HTML5 Canvas tag.

HTML5 Canvas

HTML5, the successor to HTML 4.01, offers new semantic elements, direct support for video and audio, built-in form validation and the canvas tag (<canvas><canvas/>), amongst other features.

The Canvas element is used to add a blank canvas to a web page. Using JavaScript it’s then possible to add all manner of interactivity to this canvas, canvas having no drawing abilities of its own. It can also be used, for example, to draw graphs, make photo compositions or create animations.

Free Drawing with Canvas

I was already aware of this having been done by "Mr. Doob", who has produced an example where a range of brushes can be used to create some very impressive effects:

Canvas drawing with multiple brush options

This was then turned into a web application version which supports multitouch. for use on mobile devices which use webkit based browsers, eg, iPhone, iPad, Android, here:

Canvas web app example

Another example can be found on the Opera Developer website:

Opera Canvas Drawing and Shapes Example

and the accompanying tutorial:

Opera Canvas Tutorial

It is possible to save work to a local machine from Canvas, so in this respect it is feasible for use in schools.

The Possibilities of Canvas & Websockets

Websockets allow bi-directional communication between web-browsers and servers, deprecating the use of technologies such as AJAX.

When used in conjunction with Canvas, the effect is the ability to allow multiple users to draw at the same time as other users, all of whom can see one another’s work.

Canvas and Websockets example
Note: I believe the UWE proxy may be preventing connection to this service.

In future, websockets could be used to create collaborative works for groups of students to work on something simultaneously. This would certainly be fun, but is currently very open to abuse.

An exmple of a task that could be undertaken simultaneously by a group is to have an image of a basic robot outline, which students can customise all together. Perhaps provide a time limit and judge whose is the most innovative.

The issue with using websockets for this purpose currently is that refreshing the browser blanks the screen, although many browsers to communicate synchronously, it does not necessarily provide backups of work being done. This is not so much of an issue as it may at first seem, however. In a group scenario, it wouldn't be an insurmountable problem if one computer crashed, because the same work would still exist on the other users' machines.

Collages and Canvas

An excellent example of using collages with Canvas can be found here:

Collages and Canvas Example

This example appears to cover most of the functionality a school would require to produce image collages for assignments or class work.

It would be advantageous if the user could add images directly off their computers, however in most cases a Google search would be used to source images, in which case the built in search feature would prove incredibly useful.

Browser support for Canvas

'The <canvas> element isn't supported in some older browsers, but is supported in Firefox 1.5 and later, Opera 9 and later, newer versions of Safari, Chrome, and Internet Explorer 9.'—Mozilla

It would be necessary for all school computers to be running the latest versions of web browsers.

Conclusion

In order to produce the applications for use in schools, someone who was familiar with the technology would likely need to be employed, unless there was a teacher who could pick it up. This would represent a considerable investment of time and money, but would result in a truly interactive and fun feature for the children's use. An accompanying module could be run in their IT lessons where they can learn how it's done for themselves.

Paper Prototype Video

Paper Prototype, first interation

Login page 

Information about robotics

Input text box and drawing space

Chat area and on the right column archive of the child's previous work. 

Storyboard

Blogging and its impact on education

key points on the good and bad factors

There are many bloggs where teachers talk to each other and share their experiences:

http://artid.com/members/teaching_kids_art/blog/feed/Drawing/

However when it comes to blogging websites, there are very few which have been found which ask children to interact in order to learn. The ulterior way of getting these children to interact on line is by getting them to go to websites such as bitesize. These websites have interactive games and are designed to aid children step by step with the learning process.

Bloggs seem to be more adult orientated, however studies have shown that children spending time online helps them become more socially aware:

http://www.macfound.org/site/c.lkLXJ8MQKrH/b.4773437/k.3CE6/New_Study_Shows_Time_Spent_Online_Important_for_Teen_Development.htm

Colour Scheme Analysis

BBC Bitesize

• Orange and blue
• Black text on white

Bitesize predominantly features orange and blue colours. Primary navigation links to the individual subject areas are teal-blue, whereas secondary links to other relevant content have an orange background and white text. For the main content black text on a white background ensures clear readability.

S-Cool

• Orange and blue/purple
• Grey text on white

This site has an orange and white primary colour scheme with headings and links purple in colour. Main text is grey (on white) rather than black which can make it hard to read. Also when the user mouse’s-over a link the text changes colour slightly to a darker shade of purple but this is not really noticeable.

Revision World

• Green, orange, and white
• Black text on white

Has a green overall page background with elements in orange. The main revision content box has a gradient background from orange fading into white with black text.

Conclusion

All of the sites reviewed include orange as part of the design in one form or another. This may be used in revision sites due to the perceived connotations the colour brings – enthusiasm, creativity, determination, success, and encouragement. These are all relevant to revision.

Most of the sites analysed made use of black text on a white background which help to present clear and readable content to users.

Most of the sites also made use of a limited colour palette helping to ensure attention is not drawn away from the revision content.