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.
Friday, October 23, 2009
Saturday, October 17, 2009
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
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
Saturday, October 10, 2009
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.
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.
Saturday, September 26, 2009
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.
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.
Monday, September 21, 2009
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.
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.
Friday, September 11, 2009
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".
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".
Saturday, September 5, 2009
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.
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.
Subscribe to:
Posts (Atom)
