Educational software - some ideas

Our next project is to make an "Educational Software" or website of sorts. I'm looking toward making something again in flash (as website design bores me). I don't have a lot of ideas yet but I'm definitely going to do something to do with Astronomy. Though I did have an idea of making a slightly more fictional, futuristic educational software that teaches users about farming on other planets, like in future off-world colonies (Astrofarm?). I made this to show the kind of style I'm thinking of going with:



Today I'm reviewing a flash educational software called Nerve Signaling (http://nobelprize.org/educational_games/medicine/nerve_signaling/game/nerve_signaling.html).

I must say, I do like the style of this piece of software, though I am confused at how a desk with a notebook, pens and scrunched up pages has anything to do with nerves or nerve signalling (maybe the desk of a neuroscience student?)

The software goes for a timeline/page-based approach with each of these pages detailing different facets of the nerve signaling topic. The navigation works reasonably well as there are convenient pop-ups telling you exactly what's on each page, though I must say the buttons are very small (though nicely implemented into the appearance of a nerve cell).

On each page there is a box on the left that displays a short video detailing a discovery or observation of the nerve cell. These videos work reasonably well but they're over a little too fast. On the right side there is a box with raw text, explaining in detail each facet. I personally find this large, bland block of text to be a little confronting and not very user-friendly. Perhaps they could have implemented it into the videos and included video bookmarks and/or a slider bar.

At the bottom of each page there is a tab of image thumbnails. Clicking on one makes a larger window appear over the content, showing you a larger version of the image with a short description. This works quite well.

There is one last issue I had with the Nerve Signaling software: the scrollbars. Specifically the scrollbars for the video footnotes (under the video). These are very small and it is unwieldy and difficult to grab a hold of the scroll marker.

Final synthesiser and a review

I've finally finished my visual synthesiser, Temporal Paint. I have uploaded it on this page here: http://taraxanoid.deviantart.com/art/Temporal-Paint-140537874

Today I've decided to review a video site I have just been introduced to: Vimeo (http://vimeo.com/).

Vimeo is, to put it frankly, a javascript-heavy site. The side animations function purely on javascript (quite like actionscript but usable by browsers). But turning off javascript barely hinders the design at all and still keeps most of the clean, illustrative scenery around and at the bottom of the page. This clean imagery continues on and into the GUI of the site. There are large "Join Vimeo" and "Sign up for Vimeo" links, and large, friendly Welcome text detailing the site's features if you're not logged in.

In terms of navigation, Vimeo has some of the nicest-looking drop-down navigations around. Everything flows very well and the rounded-rectangle aesthetic continues into the Flash videos themselves. The videos have very nice, clean blue and black buttons for "liking", "sharing" and of course, playing. The play/pause button is quite large (in contrast to some video sites like youtube where the play/pause button is small but aligned in height with the time slider). In fact, its one of the better Flash video interfaces I've seen. Everything just works and doesn't get in the way of video content.

When searching for videos, Vimeo takes a bit of a step back. In a lot of video sites nowadays (YouTube and DailyMotion come to mind), videos can sort of be "previewed" before actually following a link to them. By hovering over the thumbnail of the video, a few frames will be presented to the user from different points of the video, showing the user a summarised view. Vimeo simply does not have this feature at all (though it might be understandable due to Vimeo's HQ/HD-heavy video content.

Report and Review

So far I'm making more panels for my visual synthesiser and ironing out the kinks of the "canvas" area. I've decided to name it Temporal Paint because it acts like a paint program that has animatable and manipulable lines and shapes.

There's been some coding difficulties in terms of synchronisation with the preview movieclip as the preview movieclip needs to have the same properties altered only in a much more immediate way. This causes the preview to look odd when changing values of say, spin or rotation.

I've also decided I'm going to have multiple tools, including: a paintbrush tool (draw shapes repetitively and smoothly) and an eraser tool (erase a radius of shapes according to current shape size - still working out the code for that).

As for the review today I've decided to do something a little different. It's a website we are all probably familiar with - eBay.com

For the purposes of this review I will be looking at the GUI of the Australian version of eBay (http://www.ebay.com.au).

As soon as you load eBay you're met with, well, stuff. There's so much stuff, in fact, that it is difficult to find exactly where you want to go unless you're familiar with the site. In terms of learnability, eBay doesn't exactly ease you in. A registration link for new users is easily overlooked (it's on the right side of the page in an area you're almost expecting to be an advertisement). In fact, the advertisements are very large on the eBay homepage which does hinder its immediacy as it pushes the most important links (login and register) to the side.

Those qualms aside, eBay has a lot of links. The problem is - and this could be quite pedantic on my part - that there is little to no rollover feedback to give you some idea about what you might be clicking on (more of a problem in the "Be Inspired" area).

When it comes to product searching, eBay seems to order results quite orderly. In fact, you can choose to view results in a list, a "gallery" and "window shopping" in a small drop-down box up the top of the results box. For the most part, list works well enough, though all options are plagued with what seems to be a Web 2.0 trend - popup javascript "bubbles" that show you a slightly larger version of the thumbnail when you hover over. This would work well if it didn't pop up nigh instantly and usually by accident, covering content you might have been looking at. Plus a lot of the time it pops up with no larger image but simply a message saying "We're unable to display this image. Please try again" in a box far too big.

These issues aside, eBay has a reasonable interface. The problems start to arise with hyperlink saturation and advertisement placement. But these are somewhat understandable for a site that has been described as "the world's biggest garage sale".

Synthesiser review and tests

Currently I'm working on Project 2's interface and refining some of the panels. This is an example of what I've been working with (click the Colour button to reveal the colour panel):



I have been using the TweenLite tween class as it is about 100x better than Flash's in-built Tween classes (and faster). I have also created a Swatch system in the colour panel where users can save colours if need be.

Recently I stumbled upon ze frank's gyro flash toy (http://www.zefrank.com/gyro.html) and it is quite amazing to make some amazing gyroscopic generative art with, but not so amazing to actually use.

"gyro" has a control panel accessible from a rather small link up the top of the window (perhaps he should have made this more noticable). The real problems occur inside this control panel, where there are simply way too many sliders for one window. This instantly causes confusion and there is no numerical output of each slider either, making it difficult to pinpoint exact slider positions. In addition to this, there is effectively no "hover" feedback for any of the buttons or sliders, making the interface feel clunky. Also, I would have liked the shape preview squares to have been larger or more prominent and the radio-button selection method is, well, odd. Why not just make the preview boxes clickable?

All of this being said, gyro can still produce some amazing artworks (some great ones here: http://www.zefrank.com/gallery/gyro/gyro.html) but I do think its GUI needs a major overhaul.