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.

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.

Synthesiser prep

I've been doing some drawings and flash tests to try and figure out how my GUI's going to look and feel for the second project. So far I've come up with this basic configuration:



There are buttons all around the edges of the screen and clicking one causes a larger panel to pop out or collapse. I've decided to use a combination of sliders and rotatable dials for adjusting properties like colour and size etc.

In terms of tests, I've created my first actionscript class for my rotatable dials (which having it in a class means I don't have to constantly duplicate code). Here's what I've come up with so far (use the dials to change the hue of the shape):

iSketch and iScribble

The next project is a "Visual Synthesiser" and I have been toying with the idea of making a more dynamic drawing or paint program where users can draw something and watch it spring to life or move in some way.

But first I have decided to look at two online collaborative drawing communities: iSketch (http://www.isketch.net) and iScribble (http://www.iscribble.net).

Both iSketch and iScribble are flash-based sites with a focus on multi-user drawing. However, iSketch acts as more of a Pictionary-esque game while iScribble is more oriented on collaborative art.

The two sites have different goals but take similar routes to get there. Both iSketch and iScribble allow user-created and official rooms. These are accessed via a main room list menu. In iSketch this menu is quite small and dwarfed in comparison to the massive Main Chat window to the left of it (which is strange because it serves little purpose at all). This means the user has to scroll quite a lot to get through the room list. iScribble's room list is a lot larger and takes up most of the screen, requiring little scrolling to navigate. Also, the iScribble swf object as a whole is about twice the size of iSketch. iSketch's size can be attributed from the 800x600 resolution prevalence in the days of Web 1.0, but there is no excuse for this nowadays when the object barely takes up a fraction of space on modern widescreen monitors.

When it comes to the drawing GUI of these sites, iScribble is the better option for drawing. In iSketch, the colour picker and other panels are minuscule and awkward to use while in iScribble they are large, nicely spread out and easy to use. iSketch offers the user the ability to drag around panels to suit their workflow while iScribble's UI is completely static and non-customisable. In terms of features, iSketch has shape and fill tools which iScribble confusingly lacks. However iScribble offers advanced blurring and smudging tools to make up for this and users have access to 3 layers to structure their drawings (though the highlighting of the current layer could be a little more obvious - often a user will accidentally draw on the wrong layer which can at times completely ruin an image).

Anatomy of the Eye final and a review

Finally finished with my Anatomy of the Eye project. Here is the end result:



I think it worked out quite well - especially the interface.

A review of the Delicious GUI:

I have recently discovered the social bookmarking site "Delicious" (http://delicious.com/) and I am finding it quite useful for saving bookmarks for use between home and uni.
The site has a very minimalist appearance which I suppose is becoming quite the norm of web interfaces (Facebook's duo-tonal boxiness comes to mind). However, this style can - at times - remind one of the more boring days of the Internet where CSS was nowhere to be seen and sites would be formatted in pure HTML.

But thankfully Delicious is immensely easy to use and it needs to be. The site acts more as a hub for other sites so there does need to be a considerable focus on immediacy and directly people to content they may be interested in.

Indeed, it could be said that Delicious' minimalist style helps to unclutter a site of predominately text and hyperlinks. And the site's use of drop-down boxes and tab-based page hierarchy (now a standard of Web 2.0) allows easy navigation.

The only real qualms I have with Delicious' GUI is their insistence with small, easily ignored search bars. For a site where you save and browse others' bookmarks, you'd expect there to be more of an emphasis on searching tags or keywords.

Anatomy of the Eye flash tests

I've been working on my Anatomy of the Eye interface in flash. Initially I came up with this:



But I wasn't so sure about the colours, so I've decided to opt for a darker approach and less hue (going for a blue and grey/black scheme):



I will work further on this and try to get the hatches to close properly as well as working on the content. So far the only real thing frustrating me has been Flash's internal tween classes, so I'm probably going to use Tweener or TweenLite in the end.

Design for Anatomy of Eye

I've been thinking about how to make my design for the first project as user-friendly as possible.

A few ideas later and I came up with the idea of having the main navigation simply very large, screen-filling buttons. When users have their mouse in the window they will be hovering over a button, making them act less like hyperlinks and more like a touch-screen interface (ie. the iPhone's large buttons for ease of touching).

I came up with something like:




Where each corner of the screen is practically an entire button.

When you click on one, the corners will sort of "open out" like a hatch and reveal the content underneath:

iView etc

So I was catching up on some ABC this week on their "iView" video service - pretty impressive. As soon as you start you're greeted with something that seems to check your internet bandwidth and whether or not you can access their content "unmetered" or without it going to your monthly download cap.

The service has a very sleek flash interface with some impressive (albeit unneeded) use of motion-blur in scrollable areas. You can browse different channels and highlights from the homepage or search for a program in a search bar up the top. Though most of this works well and without issue, full-browser-window flash can sometimes be quite slow on some computers. But the ease of the menus and transitions and the logical structuring of content makes iView quite a breeze to use.

http://www.abc.net.au/iview/

Is it just bad or impressively bad?

This site could quite possibly be the worst designed website ever and subsequentially the most confusing and retarded GUI in the existence of mankind.

Myyyyy god. I am almost impressed by how bad it really is. I mean I didn't even know such atrocities were possible with HTML... Oh wait, I completely forgot about Myspace.

The site itself doesn't appear to have any purpose however if indeed it has a function, I believe it is probably something to do with disorientating or completely annoying the hell out of the user. In this case, one could consider this website a success. But this doesn't excuse the fact that its user-friendliness is non-existent and therefore its GUI is utter balls.

It appears to be made up of predominately overlapping imagery and text with a slew of random links here and there. It is a cocktail of bad HTML practices and GUI no-nos. Nevertheless one can marvel the effort that somebody put into this "project" - it takes some skill to make a site this bad.