Sunday, 3 July 2011

They think it's all over...

...and with final hand in looming it really is. That's right, eight weeks are over, a website has been developed, and a lot has been learnt. It's been a steep curve from complete Photoshop and Dreamweaver novice to someone with a bit of skill, it's been rewarding, but it's also been a lot of hard work and much frustration.

My site is not the most advanced of the bunch, it doesn't have the most content or the most pages, but what it does have is a well thought through design, simplistic usability and good functionality for it's audience. There is room for development, and expansion - Ideally the home page would become a house, allowing the user to select the room (or garden) that they want to do experiments in, and then give the room to explore. There is nothing else like this site currently available for fun experiments, with easy to follow instructions and a visual (rather than text) medium, so it would be nice to continue to develop it and actually put it live. One day.

Over the last eight weeks I have tried to take you on a journey through my design, background thinking, planning and use of technology. In terms of evaluation let's just recap on the main points:

1. Evidence of original, innovative and imaginative concept.
Searching the web does not reveal any other sites like this one, only text heavy home experiments. From my own experience as a teacher this type of fun resource is not easy to come by.
2. Ability to write for the web: 
content, images, accuracy, currency, scannability, organisation.
The site aims to be very simplistic. Most of the text is reduced to images making cartoon style instructions for the experiments. The pages that do contain text have been carefully thought through to keep words to a minimum. All the experiments have been tested (when photographed) and do work.
3. Awareness of website planning and architecture.
I have tried to consider the architecture of the site through wire frames and flow diagrams. These tools helped me to design the layout and interaction of pages.
4. Awareness of web design principles of interface design, layout, navigation, usability, 
readability and accessibility.
It was important that this site was very easy to use as it has a child / family audience. Therefore the web interface and layout are simple and do not involve a lot of site exploration to get to the information. It also utalises external sites for further research allowing users to use the site either for entertainment ideas or to find out more science. The 'about' page gives some tips on navigation to ensure an easy to use experience.
5. Ability to utilise and integrate different software programmes to produce a small scale website.
I have learnt how to use Photoshop and Dreamweaver in the production of this site. I have also created a blog using an online service, created simple images using Paint and Microsoft picture editor.
6. Successful uploading the website on the university or personal server.
My site can be found at https://www.imperial.ac.uk/humanities/webdesign/2011/eleanorsaunders/

1. Evidence of research and engagement
A lot of my knowledge for this sites theme, content, and subject come from my work as a secondary school teacher. I did research other sites, and looked for experiments that would be easy to put into simple, visual, steps. I also thought about how children like to learn, and how learning can occur through exploration and practical activities. This site will particularly appeal to visual and kinesthetic learners.
2. Process: 
Planning and Working out ideas (artistic, creative, conceptual) include outlined proposal.
My initial planning can be found in my blog - http://copiouscascades.blogspot.com/2011/06/all-signs-of-s-serial-killer.html
3. Awareness of technology (useful links, problems encountered, independent learning, the use of software to explore and present ideas).
My site uses existing material by linking to BBC bitesize. This is a well accepted resources by teachers and gives credibility and authority to the site.
I encountered many design problems, and have learnt a lot about image manipulation and CSS for web design. This has all been new to me and required considerable amounts of time researching how to best use these technologies. I found user help videos on Youtube, Adobe help, and w3schools to be invaluable resources.
4. Demonstration of self evaluation and critical reflection.
As I have developed the site I have evaluated the functionality and changed elements, I also took on board feedback to make changes and improve the site.
5. Demonstration of skills of problem solving.
Restricted by my limited skills in web design I had to overcome many issues translating my ideas into online elements that I actually had the skill to build. This has meant that some of my ambitious ideas for a very professional look to the site have been downgraded by my use of Photoshop, however by using an 'arts and crafts' style to the site this has negated the need for a very clean finish. One of the biggest changes I made tot he site was the reduction of 'Draw AP Div' elements. These were not aligning properly and made the site open very differently in different browsers. Learning how to use hotspots, and developing better base images in PhotoShop allowed me to work around this and greatly increase the usability of my website.

So there, that's it. I'm sure I could and should say a lot more, but really this whole experience has just been a whirlwind for me. It has been unexplainably difficult to try and learn a lot of the techniques and programmes I used essentially on my own. Working full time meant that I had limited access to working with others and I have have spent a lot of lonely evenings in the translation lab. But it has been totally worthwhile, I wanted to know how to build basic websites, and now I do. My next project is to develop my site for my own business, onwards and upwards as they say.

Over and out.

Comments please

Having presented my site to the web design class (and made a few amendments at their suggestion) I decided to sent it out to the great unwashed for some impartial, potential user, feedback. As the site is aimed at children, and home activities I sent it to a 10 year old boy who I am in regular e-mail contact with (it's ok, he's related to me), and two different parents with children aged from 8 to 14. This blog is their feedback, in full, followed by what I will take as action points, and what comments I have chosen not to act on.

Feedback from my first cousin once removed, age 10:
I love your website and I thought the idea of a lab Kitchen was a really terrific idea.

I liked the egg test best and the speed boat test was interesting!
The only thing that I thought was to complicated was the "Whats the silence" I couldn't understand it very well.

I hope you apreshiate my feed back 
Karate Boy KickKarate Boy KickKarate Boy KickKarate Boy KickKarate Boy KickKarate Boy Kick

PS I had summer dance day yesterday, it was great!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!Wink
Action points: Have an option after 'what's the science' of either Primary or GCSE, this could also be done by adding some direction in the 'About' page encouraging discussion of ideas.

Feedback from parent A:
Very good, I''m sure that it will impress!
You asked for comments so here are my impressions. As usual I'm being picky.
Safety page:
If  colour of the brown paper background was a little less strong it would make the type easier to read. (Also applies to Science and About pages.)
The first line implies that being dangerous is fun.
Perhaps “Science is fun but it can also be dangerous” would be better.
About page:
Re navigation tips – ingredients pics are not roll overs they are click ons.
Roll overs are when a pop-up appears as you hover over an area as on the other pages.
Eggs page:
Something wrong here – All pictures vanish unless I hover over the first picture: 
Speed boat page:
I don’t feel that density and pressure is an explanation for surface tension in liquids.
Told you I was being picky!
Action points: Change safety page text as suggested, change the link on the speed boat page.

Other comments:
Changing the background / text contrast in the text pages - I am not going to do this as I do not want black text, this is a style preference, and I am using a dark background as this is a freely available image. If I had time to take my own images I would use a lighter brown paper sample.
Eggs page - for some reason the main page image is not loading, just the roll over image, I'm not sure how to fix this, but it seems to load fine generally so maybe a firewall issue with this user?

Feedback from parent B:

Here's my comments on your website so far. However I have only looked at it for a short time, say 20 minutes, on my mobile (incl diverting to BBC science). Plus a quick look here on laptop, to see if it looks different. 

THE LOOK
Overall my impression is of a site that would be very attractive in a playful / learning setting. It would certainly attract kids and their parents and other associated adults. It would also be a nice resource for teachers, playgroup leaders, grandparents and responsible babysitters. I love the style with its brown paper background, roughly drawn arrows, watercolour sketch and handwriting font: they clearly set the work in the "fun arts & crafts" arena. Actually, I saw you mention this in your blog but would beware of using the words "craft" or "crafty" rather than "arts & crafts". as they convey different meanings. The look should appeal to children and learners of any age. It would be nice to test this. The fact that kids are learning during a fun interactive experience is the big plus for adults. 

I really like the sparse use of text. The excellent design means it's not needed and the result is a very user friendly experience.  
Your site loaded fine on my mobile and would make a very nice APP. (IDEA: commercialise the work! Optimise for both i-phone and android. Google.com has an "App Developer" section and lets you upload for free while sharing any profits! It could be a link on MUMSNET. Call it KIDSFUN?)

I liked the visual "post-its" for the menu. They added to the non-serious feel. I liked the arrows instead of sequence instructions like "next" or "step two".

I liked the simple english which made it easier to read. 

I liked the "Kids Cookery Recipes" style too. Its one kids are familiar with and they know that the results equal fun. Brown paper, as often used instead of greaseproof paper, reinforced that look. 


THE CONTENT

I found the site really high on design and appropriately low on content given the intended audience. 

Re Titles
The experiment titles are nice and snappy. But for consistency and sense, would "Celery Straws" work better for #3? I expected it to make straw at first!

Re (lack of) Instructions.
I thought some pop-ups would be good to give quantities of ingredients, time for boiling etc. But I see you have now added rollovers. Anyone who wants more content can use the rollovers on the "ingredients" pics or use the links. Perhaps how to find the rollovers could be mentioned on the "About" page?

Re "Sivery Eggs"
On my mobile I thought that the bowl of water picture actually showed a broken egg with its yolk!

Perhaps a final link to "additional experiments if you liked this one" would be nice.  

Re "ABOUT" Page
Should the "About" page mention suggested ages? Perhaps a "Recommended Age" tag could be added to each experiment. I think that a form like "All ages from n yrs" would be more likely to encourage teenagers or other late learners, like me.

RE "The Science" Link on Silvery eggs
The point of the "Emulsifers" link provided, may be that the carbon residue has oil in it which repels the water - but I did not really get it. How does the mirroring effect happen? Is this the right page to go to? 

Re "RAINBOW WATER"
I liked this experiment that produced a "ph indicator", although I only worked out what it offered when I read "The Science". The illustration of the result did not quite live up to the expectations of the title as I could not see the different colours clearly on my mobile or laptop monitor screen. I could only see they were red, green and purple when I zoomed in. Could you include a yellow result liquid for a clearer rainbow result? 


THE FUNCTIONALITY

Could "ABOUT" mention using the "Back Button" on one's browser to get back to the experiments from extrenal links? 

As the site is all about communicating science and stimulating learners to search / discover answers to their questions, should "The Science" mention that kids could ask the adults present, including teachers, to provide them? Or could you suggest another way to "collective discovery" like kids using networking and "collected cleverness" (nice phrase from blog) in classroom brainstorm sessions? Perhaps these group situation ways of getting answers is not the intent, but it probably could be included.  

THE RESULT

I learnt a lot and definitely wanted more! I'm going to do all these experiements as soon as I have time. The beetroot growing in the graden will provide the "Indicator" water when its ready. I found myself exploring the BBC science website you provided for further detail. This was a good consequence of the learning trick you are pulling. However, the bad side is that it's easy to leave the experiment, and very possibly not return or find one's way back! An extra help to solve getting lost elsewhere could be the use of a memorable name for the site like KIDSFUN repeated on every page so that you could always google your way back. Losing readers online is always an issue when adding links.

At first I wanted you to add byelines to each experiment title saying for instance "Rainbow Water - How to make a homemade acidity indicator" - but I guess that would have taken the old fashioned teaching route of providing answers first. Your approach takes more time but is actually more interactive and engaging. 

I think your visual and interactive site will communicate the science learning much better than the pure text based approach. The fact that learners will actually use their hands, feel and smell the results will reinforce what they learnt from their reading. The low text content of the site especially helps it to work well for people without much reading experience, like younger children, immigrants and slower learners.
Action points: Make all suggested changes to 'about' page, change link on eggs experiment, add some text suggesting discussion of science with adults, teachers, or other children.

Other comments:
Change to Celery experiment title - due to the way I have built this image, and my limited time I will not change this at the moment, but may do when I have more time in the future.
Additional experiments if you liked this one - A great idea for when the site grows, possibility to link up similar experiments.
Results picture on 'rainbow water' - This image is poor quality as I had to use my phone for the photography. I cannot get a better home image before hand in, but it is something to change in the future.
App idea / commercialization - Nice idea, maybe a thought for the future.