Image Bank Menu

The image bank menu (shown below) I created using Photoshop and through sketches I had drawn and scanned into the computer then manipulated using Photoshop.  The arrows and cross I again had drawn and scanned in then manipulated them in Photoshop.  The user will use the arrows to scroll through the categories which have been split up into three like shown in the image below, animals, animals 2, animals 3.  This allows the user to scroll through a smaller number of images rather than having to go through all twenty at once.  A roll over effect is applied to the category boxes, they outline enlarges.

Below shows the images layout, which co-insides with the image bank menu.  Having consistency throughout the menus is important to the look and design of the site, all are fluid going from one to another with just the contents changing.  The outline of the menu and the cross stay in the same position as the previous menu, the arrows are now located on the sides allowing the user to scroll right and left throughout the images. The box outline enlarges when roll over providing the user with more interactivity.

When you select the image you want the following message appears warning the user of what will happen and do they wish to continue.  Again I have been consistent with the design and menu never actually changes just the contents. 

Step by Step

The step by step option was originally located under the assistance tool when the user selected the assistance it then appeared underneath the tool.  We altered this due to the fact that we wanted the step by step function to be available to the user at all times when they were drawing as this is the main feature of the site, allowing the user to draw in six easy steps that they are comfortable with.  We added a nice animation to the steps so that once the user selects an image to draw they appear at the bottom of the drawing area one by one as if they are walking on to the screen.  As you can see there are two other buttons located either side of the steps, these are an exit button allowing the user to remove the image they are drawing for good and will be prompted by a message to warn them.  The other on the left hand side is a re-size tool for the image, this allowing them to make the image they are drawing smaller being able to place it in a corner or to the side so they can draw the illustration without tracing it.  As you can see there is a slight tint/glow to the buttons so if they appear on the background due to the size of the users screen resolution.

Evaluating / testing

Through our testing sessions in schools we had gained some valuable feedback from users as to what their thoughts were about the product.
The following users had tested the product -
Primary School Children
Secondary School Children
Adults
Teachers
College Pupils

The evaluating and testing of the product from other users has been extremely valuable throughout the production of the product.  Its played a vital role in how the product has been shaped along the way with the feedback always took on board and worked on as to how we can alter, modify and improve the areas that we have been made aware of.

This testing session involved 10 pupils half from Secondary School and the other from College pupils also an ICT Teacher from the Secondary School.

Feedback:

It was mentioned the site could have an exciting start up rather than just everything in place.  We will look into creating some animation of the site for when appearing on the homepage.  Panels and buttons flying into place possibly.

Animation of the menu was brought up as not much really goes on. We will look to incorporate some roll over effects to the menus and images.

The children liked being able to alter the colours of the panels, having the freedom to do that gave them a feeling of being in control, that they could be different from their friends having a different colour.

The ICT Teacher thought the product worked really well allowing the pupils a way of learning how to draw in a pace that suits them.  The grid tool was something that he liked being able to resize the picture and using the grid area to draw like you do when painting by numbers.

The feedback in general for this session was a major improvement on our previous testing.

Background and drawing stage

The drawing stage we decided would be restricted to a size of 800x600 allowing us not to worry about the re-sizing issue that we came across.  We wanted a background to the stage so that if the users had the browser maximised then it wasn't just white/blank where they couldn't draw on or interact with so we decided to incorporate a background.  Nothing too extreme or fancy as we didn't want it drawing the users attention away so we used the Skoodle logo and put it on an angle as you can see below.  It works really well with the colour of light grey behind it.  We added a shadow to the drawing stage which provided a look that worked really well as if it was raised.

Completion of all Illustrations

All illustrations have been completed, each one consists of six images which when all are drawn they complete a full illustration.  There are sixty images, with six drawings to each making 360 in total.  To add to these I have also included a smaller version of the final drawing which will be used in the image bank menu where users choose the one they want to attempt to draw.  This has been a lengthy process but I'm extremely pleased with the final outcome of all the drawings.

Information Page

For the information page I wanted create something different so it wasn't just text that appears like any other site.  As the page opens I wanted it to stand out and provide some anticipation even though it is only text appearing.  I wanted to keep the amount of text to a minimum on the site so I wanted something that would excite or engross our target audience as the site required an information section.  I produced this using Adobe After Effects.

Testing/Evaluation

I had organised an hour at a local Secondary School where I could test the product with several pupils and staff members allowing us to gain feedback that we could use to our advantage to improve the product.  I showcased the product with pupils from years 10 & 11, allowing them the opportunity to play with the site and give us some much needed feedback as to how we could improve it and what features worked well.
The feedback from the pupils was mainly positive yet some areas they came across that they felt we could improve on.

Animation was an area that was mentioned, not enough interactivity though we had added more from our previous testing. (Logo, eyes following you and the eyebrows and mouth jump when rolled over. Also the tools were interactive when rolled over)

The trace tool took away the learning aspect of drawing.  This will now be removed due to users pointing this out as something they wouldn't use.


The step tool wasn't needed in the assistance area. The step by step tool will now be placed at the bottom of the screen.


Feedback on the design and layout were good, even though I was still unhappy with the appearance of certain buttons no negative feedback was received.