DrunkDuck and Astronomy

I've used a site in the past called DrunkDuck to host some comics I did a while back but only now have I realised how cluttered everything really is.

DrunkDuck (http://www.drunkduck.com/) is a webcomic community where users can upload comics in a series and discuss/critique them with other users. The problem is, the site's GUI is confronting and cluttered. The homepage is full of links to different comics, advertisements and news, completely alienating the new user. There's a large box for new user registration on the right but for some reason they've used barely 1/3rd of it with information and a link.

Hovering over thumbnails for comics in the Browse page causes a large javascript speech bubble to popup above other content, ala eBay, in true Web 2.0 convention. I have expressed my dislike of these before, but thankfully DrunkDuck's popups aren't quite as annoying as they could be.

Another problem with the site is the style itself. Everything is very bland and there is not a lot of contrast or separation between different content areas, making all images and links seem as if they've just been thrown onto a blank page. Even the forums are bland and boxy (and not in the stylistic way of Delicious) and have links that are way too small for their containers.

Overall, DrunkDuck gets the job done, but I believe it needs a major GUI overhaul or two before I can begin to use the site without getting a headache.


I am still working on the style of the educational software and writing the content. I'm thinking of structuring the software like this:

First page: Introduction
This page will introduce the user to the software and tell them how to use the navigation bar.

Second page: Goals
This page will showcase what the software is intended to achieve.

Third page: Planets
This page will feature an interactive solar system where people can hover over planets and moons and learn more about each. Upon clicking on a celestial body the user can see further information about it and compare each of their gravity in a simulation which features an animation of a man in a space suit jumping

Fourth page: Transportation
This page will feature a video which can be controlled using a slider bar and play/pause buttons and will teach people more about the history of my sci-fi universe i've created in addition to vehicles and ships that have been used over the fictional years.

Fifth page: Quiz
This page will basically just be a 5-10 question quiz (randomly selecting from a bank of questions) where users are tested their knowledge of Astronomy and this fictional universe from the information provided.

So far the style of my software is looking like this:

http://taraxanoid.com/flash/guiSpace.swf

The main content screen is a little buggy in that, but I quite like the background and overlay scheme I have going at the moment.

In terms of content, I've been getting a lot of information from NASA fact sheets at: http://nssdc.gsfc.nasa.gov/planetary/factsheet/
Which are useful for finding out gravity, redius, mass and other information on planets and moons.

Flickr

Today I'm looking at Flickr - the photo sharing community (http://www.flickr.com)

Flickr has a very simple design that reminds me of Delicious and its GUI is easy to use and quite responsive. On the homepage, Flickr displays large links for registration to make it easier for new users to join, and presents a large search bar for people just to search for images.

Navigation links are tab and drop-down based and relatively easy to use and links highlight in characteristic boxes which gives users ample feedback.

In terms of educating users to use their site, Flickr presents a unique highlighted step approach. This can be seen in Flickr's upload tool where there are multiple steps starting from Step 1 and each step is highlighted and further described when the user gets to one.

I don't have any particular qualms about Flickr's GUI though I do believe it lacks a certain contrast in some areas with lighter text (being that Flickr's background is eggshell white).


My educational software (Introductory Astronomy - might change the name) is coming along reasonably, I'm actually looking into ways of making the content and sidebars dynamically align to areas of the screen so people can have a maximised browser window and not have the content stretch too much. This can be done with Actionscript 3 and I've got an example of it here (try changing the size of the browser window):

http://www.taraxanoid.com/flash/test.swf

Introductory Astronomy research

Over the break I did some designs and research for my educational software. I've decided to go for a more retro feel - harkening back to old 60s cartoons like The Jetsons and Roger Ramjet, in addition to ancient astrological woodcuts:




The twist is, I want to tie in my software with the sci-fi universe of my MMD major project, so I've decided to make the majority of the information in the software half fact, half fiction. Fiction I believe to be relatively plausible for the time period the educational software/package will apply to (around the year 2130). The software will not only delve into facts about the solar system but also a bit on the backstory of the future space program and SmartCorp - the mega corporation of my MMD project.

In terms of GUI design, I've drawn this:



The basic idea is to have three main components. The center is the main content (where images, video and text will be displayed), the right sidebar will be the main sidebar (for universal page navigation) while the right sidebar will be for page-specific navigation. This is to try to unclutter a potentially long-winded navigation and make sure that the navigation is sort of dynamic to the page you're on, rather than being there when unneeded.

The main content area will have clickable buttons as well, but less navigation-oriented. The sidebars will also be collapsible by the user by using arrow buttons.