- XHTML (eXtensive Hyper Text Markup Language) Strict 1.0
This will be used to create the skeleton of the site in which all the content will be placed. It will be used on every page of the site, no matter what the extension. It will contain code which calls upon my CSS (see below) such as < div id= "___"> etc. - CSS (Cascading Style Sheets) Level 2.1
This will be used to style my pages. It will be linked to my site externally so it can be used for numerous pages not just one. I will use aspects of both level 1 and level 2.1 but will try and not use level 3 features as these are not as widely supported as earlier versions. - Flash
This will be used to create some small animated banners that will appear on the different pages of my site. The banners will be specific to the page (such as for the new releases for the genre pages or 'free track of the week' on the homepage) and there will be 1 or 2 per page.
Thursday 31 January 2008
Delivery Requirements
Target Audience Profiles
Dave is 18 years old and spends much of his time on the web discussing the latest technologies and discussing music in online forums. Because of this he is very web savvy and is using the latest popular browsers (IE 7). He also has a relatively quick connection (5Mbps) with his favourite genre being ‘Pop Punk’/’Emo’. Dave buys nearly all his music from the internet as it is cheaper and in most cases more instant than buying a CD.
Claire is 25 and quite web savvy. She uses the internet a lot at work and on weekends at home. Though it is only at home she uses it for personal use. She uses an alternative browser (Firefox 2) and has a quick connection of 8Mbps. Claire’s favourite genre is ‘Indie’. She prefers to buy some of her music from the internet as it is quicker and cheaper but she enjoys seeing album artwork and lyrics etc. also and so often buys CD's too.
Jim is 37 years old and is not very web savvy at all. He doesn’t get much time to use computers and so doesn’t know much about the latest technologies. He is still using the same browser which came pre-installed with his PC (also IE 7) and has quite a slow connection speed of 2Mbps. Jim’s favourite genre is ‘electronica’ and is used to getting all his records on CD’s so is struggling getting used to digital downloads.
Claire is 25 and quite web savvy. She uses the internet a lot at work and on weekends at home. Though it is only at home she uses it for personal use. She uses an alternative browser (Firefox 2) and has a quick connection of 8Mbps. Claire’s favourite genre is ‘Indie’. She prefers to buy some of her music from the internet as it is quicker and cheaper but she enjoys seeing album artwork and lyrics etc. also and so often buys CD's too.
Jim is 37 years old and is not very web savvy at all. He doesn’t get much time to use computers and so doesn’t know much about the latest technologies. He is still using the same browser which came pre-installed with his PC (also IE 7) and has quite a slow connection speed of 2Mbps. Jim’s favourite genre is ‘electronica’ and is used to getting all his records on CD’s so is struggling getting used to digital downloads.
Goals of Website
- To be created using valid XHTML Strict 1.0
- To be created using valid CSS Level 2.1
- To implement basic Flash
Sunday 27 January 2008
Use of Visual Cues
Visual cues are everywhere on web sites, most are so subtle that we don’t even consciously notice, some are glaringly obvious and are almost impossible to miss. But be it a conscious or unconscious clue they are very important in our every day lives, especially on the internet.
Most of the time we become so used to seeing something in a particular way if it suddenly changes we become confused. Take links on web pages for example, we have become so used to seeing a little underline telling us it is a link that if that underline is not there people become confused and begin to question whether it is actually a link.
Thankfully more and more people are becoming aware of different types of links such as when hovering over a link the colour changing or the underline appearing then instead.
Another rather important visual cue is the placement of a page name, this is common place on most web sites now a days but acts as a aid for new users to work out where they are after clicking a link. If a page name was not displayed the link could have taken the user anywhere and would disorientate them immensely.
Animation is very useful for catching the users attention. Although large flash banners can take a long time to load and annoy the user, small, simple banners, or animated gifs, can load relatively quickly and draw the users attention to a certain part of the page more so than a static image or text.
Flash banners are also useful for keeping visitors too. By using the same banner to advertise numerous products it keeps the users attention in the same spot to look for new things on return visits as well as on their first visit to the page.
As I said before though it is not necessarily points as obvious as these that users pick up on. Using a clear visual hierarchy is also very important but is usually an unconscious . It helps users to differentiate between important information and less important information (by using different sizes), it means that things related logically are also related visually and it also shows what belongs to what (again like the page name encompassing the page).
Another subconscious cue is the use of colour. Having sections of the site which are brighter or use a different colour to the rest of the site inevitably stand out and catch the users eye. This is a useful way of ‘sign posting’ useful or important information we want the user to read or look at.
The use of text itself can also act as a subconscious visual cue. If a page contains a large block of text then this is much more likely to be ignored by the user than a smaller block of text. This is down to the user wanting to quickly scan a page and pick out relevant information quickly rather than having to read loads of text and finding at the end it wasn’t relevant to them.
Text once again falls into the category of visual hierarchy. Larger text (such as text in a H1 tag) is obviously more important than smaller text (such as paragraph text).
Most of the time we become so used to seeing something in a particular way if it suddenly changes we become confused. Take links on web pages for example, we have become so used to seeing a little underline telling us it is a link that if that underline is not there people become confused and begin to question whether it is actually a link.
Thankfully more and more people are becoming aware of different types of links such as when hovering over a link the colour changing or the underline appearing then instead.
Another rather important visual cue is the placement of a page name, this is common place on most web sites now a days but acts as a aid for new users to work out where they are after clicking a link. If a page name was not displayed the link could have taken the user anywhere and would disorientate them immensely.
Animation is very useful for catching the users attention. Although large flash banners can take a long time to load and annoy the user, small, simple banners, or animated gifs, can load relatively quickly and draw the users attention to a certain part of the page more so than a static image or text.
Flash banners are also useful for keeping visitors too. By using the same banner to advertise numerous products it keeps the users attention in the same spot to look for new things on return visits as well as on their first visit to the page.
As I said before though it is not necessarily points as obvious as these that users pick up on. Using a clear visual hierarchy is also very important but is usually an unconscious . It helps users to differentiate between important information and less important information (by using different sizes), it means that things related logically are also related visually and it also shows what belongs to what (again like the page name encompassing the page).
Another subconscious cue is the use of colour. Having sections of the site which are brighter or use a different colour to the rest of the site inevitably stand out and catch the users eye. This is a useful way of ‘sign posting’ useful or important information we want the user to read or look at.
The use of text itself can also act as a subconscious visual cue. If a page contains a large block of text then this is much more likely to be ignored by the user than a smaller block of text. This is down to the user wanting to quickly scan a page and pick out relevant information quickly rather than having to read loads of text and finding at the end it wasn’t relevant to them.
Text once again falls into the category of visual hierarchy. Larger text (such as text in a H1 tag) is obviously more important than smaller text (such as paragraph text).
Audio Cues
Most sounds are seen as annoying so it is no surprise that most web sites don’t use them.
This doesn’t mean that non do however, www.valyard.ru is an example of one web site which does.
The site takes a long time to load and uses a very annoying squeaking type sound almost constantly whilst it is loading. This is followed up a lightning type sound which appears to be every time the percentage increases.
The sound, I assume, is there to make the user aware that the site is still loading as most users may open a different screen and be doing something different whilst the site is loading. Personally however I think that the visual cues of the site are enough to alert the user that the page is still loading as I think most would simply turn off their speakers after a few seconds of the very annoying sound.
Once in the website there are numerous sounds used, mostly background sounds. There is however sounds when you click on buttons. Again these sounds are quite annoying, high pitched beeps. These once again annoy the user and seem rather pointless.
An obvious example of a website that uses sound is the Playhouse Disney website. As this is a childrens website sounds are used to engage small children. This begins as soon as the site loads with a welcome message and continues with a song looping in the background. Although this song will probably become very annoying to most adults there is no doubt children love it.
Sounds are also used when navigating. As you scroll over the navigational buttons a little popping sound is made. This alerts small children to the idea that if something 'pops' it is clickable and therefore a good learning tool.
A similar thing is also used for the main navigation, however instead of a popping noise it actually reads aloud the links, again his is a good learning tool for small children.
Of course it is not only websites which use sound to convey information. Operating systems also use sound as cues.
Examples of this include starting up your computer (when the OS loads generally you will hear a sound to alert you of this fact), error messages (upon doing an incorrect action, a loud thud style noise is usually heard, this alerts the user that there action is incorrect and are usually accompanied by visual cues too). Yet another example of audio cues in operating systems is when emptying the trash can. Again this is usually accompanied by a scrunching of paper type sound which alerts the user that the trash is now empty.
Personally I feel that using sounds on my web site will be pointless. The main reason I think this is because users may not be able to hear the sounds and so anyway in which I use sounds would have to be accompanied by some sort of visual cue also which would then increase the file size making the page load time longer. Another reason is like stated before, most users find them annoying even if they can hear them.
If I were to use audio cues on my web site however I would probably use them in a couple of key places.
The first would be when a user clicked ‘check out’ to purchase their songs. This would alert the user that they were going to purchase their music instead of viewing their ‘basket’ which is also an option.
I would also include a sound for if the user entered any information incorrectly. Sometimes when entering details online the error message can appear below the ‘fold’ of the page and users (especially new users) could find this confusing.
I may also add a little bit of sound to when users click to download a song so they know it has been added to their cart instead of them having to rely on knowing where their cart is, or scrolling back up the page to see if it has been added.
This doesn’t mean that non do however, www.valyard.ru is an example of one web site which does.
The site takes a long time to load and uses a very annoying squeaking type sound almost constantly whilst it is loading. This is followed up a lightning type sound which appears to be every time the percentage increases.
The sound, I assume, is there to make the user aware that the site is still loading as most users may open a different screen and be doing something different whilst the site is loading. Personally however I think that the visual cues of the site are enough to alert the user that the page is still loading as I think most would simply turn off their speakers after a few seconds of the very annoying sound.
Once in the website there are numerous sounds used, mostly background sounds. There is however sounds when you click on buttons. Again these sounds are quite annoying, high pitched beeps. These once again annoy the user and seem rather pointless.
An obvious example of a website that uses sound is the Playhouse Disney website. As this is a childrens website sounds are used to engage small children. This begins as soon as the site loads with a welcome message and continues with a song looping in the background. Although this song will probably become very annoying to most adults there is no doubt children love it.
Sounds are also used when navigating. As you scroll over the navigational buttons a little popping sound is made. This alerts small children to the idea that if something 'pops' it is clickable and therefore a good learning tool.
A similar thing is also used for the main navigation, however instead of a popping noise it actually reads aloud the links, again his is a good learning tool for small children.
Of course it is not only websites which use sound to convey information. Operating systems also use sound as cues.
Examples of this include starting up your computer (when the OS loads generally you will hear a sound to alert you of this fact), error messages (upon doing an incorrect action, a loud thud style noise is usually heard, this alerts the user that there action is incorrect and are usually accompanied by visual cues too). Yet another example of audio cues in operating systems is when emptying the trash can. Again this is usually accompanied by a scrunching of paper type sound which alerts the user that the trash is now empty.
Personally I feel that using sounds on my web site will be pointless. The main reason I think this is because users may not be able to hear the sounds and so anyway in which I use sounds would have to be accompanied by some sort of visual cue also which would then increase the file size making the page load time longer. Another reason is like stated before, most users find them annoying even if they can hear them.
If I were to use audio cues on my web site however I would probably use them in a couple of key places.
The first would be when a user clicked ‘check out’ to purchase their songs. This would alert the user that they were going to purchase their music instead of viewing their ‘basket’ which is also an option.
I would also include a sound for if the user entered any information incorrectly. Sometimes when entering details online the error message can appear below the ‘fold’ of the page and users (especially new users) could find this confusing.
I may also add a little bit of sound to when users click to download a song so they know it has been added to their cart instead of them having to rely on knowing where their cart is, or scrolling back up the page to see if it has been added.
Competative Analysis
Nokia Music Store (http://www.music.nokia.co.uk/)
Additional facilities:
• Clips of music
• Steaming of music - monthly fee
• Search option
• View album art (front cover)
• Free track of the week
Pros
• Clean, bright colours
• Very visually orientated
• Obvious search option
• Easy to navigate - List of genres, charts, playlists, etc.
Cons
• Quite compact design - too many images together can be a bit confusing
• Could be confusing for new users
The Nokia Music Store was the first of the web sites I visited and I found it to be very good. It used very simple and bright colours on the page but at the same time used vast amounts of album artwork to bring more colour and vibrance into the site.
I found the obvious search engine to be very helpful as with the huge amounts of music available for download finding what you want merely by browsing would be a very complicated task. If a user was wishing to simply browse however the navigation of the Nokia Music Store site is very simple and uncomplicated with obvious categories.
The biggest problem with the Nokia Music Store site is the vast amount of information it packs into its pages. Although there is quite a large amount of negative space around the page the main design seems to be very cramped allowing very little room for features to breath. This can make things confusing to find as everything appears to blend together, and to a new user this may want them to click off the web site as soon as they come on it.
Mbop Megastore (http://www.mbopmegastore.com/)
Additional facilities:
• Search option
• Clips of music
• View album art (front cover)
Pros
• Clean, bright colours
• Very visually orientated
• Very spacious design (though some parts are too constrictive)
Cons
• Some text sections are forced to scroll individually in very tight boxes
• Complicated navigation - 2 separate methods of viewing genres
• Awkward for new users to understand
The Mbop Megastore web site is very similar to the Nokia Music Store site. Again it uses very clean and bright colours allowing for the album artwork to bring colour to the pages and it has a very obvious search facility for people wanting to search for exact music.
Unlike the Nokia site however, Mbop’s navigation is very complicated. The most confusing aspect I found was that there is actually 2 ways of viewing the genres on the site. This can make users very confused and make it very awkward for them to find their way around.
The navigation isn’t the worst thing about the web site however, the worst thing is the large amounts of space the site leaves but then cramps certain things up. By this I am referring to the 2 scroll boxes on either side of the page. The box on the left hand side contains important information regarding the web site such as what the site is actually about. This information should be more predominant or at the very least users should not have to scroll almost constantly to read it.
Connect (http://www.connect-europe.com/)
Additional facilities:
• Clips of music
• Search option
• View album art (front cover)
Pros
• Animated clips catch the eye
• Easy to navigate
• Clean, bright colours
• Very visually orientated
Cons
• Very cramped design
• Could be confusing for new users
The Connect website was quite different in some respects but at the same time had quite a few similarities.
Once again it was very visually orientated, probably one of the most visually orientated web sites I looked at. One of the best things about the visual aspect of this web site was it used a lot more animation than the other sites which really captures your attention.
It is also once again very easy to navigate with yet another obvious search box and obvious categories down the sides of the design, although some of the tabs can appear to be a little hidden at times and are easy to miss.
The Connect web site also once again uses quite a basic and plain colour scheme, but unlike the other web sites it adds in its own, quite bright and bold, corporate colours as headers of categories, articles etc. instead of relying solely on the album artwork.
Bleep (http://www.bleep.com/)
Additional facilities:
• Clips of music
• Search option
• View album art (front cover)
Pros
• Spacious design
• Good colour scheme
Cons
• Complicated navigation system
• Images quite small, could be difficult to see
• Text very small, could be difficult to see
The Bleep web site is very different to the other music stores I looked at. Unlike the other music stores Bleep uses quite a spacious design in comparison to the other sites. It also uses it’s own very bright and colourful colour scheme, as apposed to the very plain and somewhat boring colour schemes of the other sites.
As the Bleep site uses less album artwork than the other web sites this is not necessarily a bad thing as it brings colour to the areas of the site that are lacking, however as the images are so small on the site it could be awkward for users with disabilities (e.g. poor eye sight, colour blindness) to distinguish between the artwork and background.
I also found Bleep to have a very complex navigational system, with no set area of navigation in place. The most obvious navigational system is at the top of the page but this is even confusing in it’s self (with both a link for the FAQ and a Help section)
Additional facilities:
• Clips of music
• Steaming of music - monthly fee
• Search option
• View album art (front cover)
• Free track of the week
Pros
• Clean, bright colours
• Very visually orientated
• Obvious search option
• Easy to navigate - List of genres, charts, playlists, etc.
Cons
• Quite compact design - too many images together can be a bit confusing
• Could be confusing for new users
The Nokia Music Store was the first of the web sites I visited and I found it to be very good. It used very simple and bright colours on the page but at the same time used vast amounts of album artwork to bring more colour and vibrance into the site.
I found the obvious search engine to be very helpful as with the huge amounts of music available for download finding what you want merely by browsing would be a very complicated task. If a user was wishing to simply browse however the navigation of the Nokia Music Store site is very simple and uncomplicated with obvious categories.
The biggest problem with the Nokia Music Store site is the vast amount of information it packs into its pages. Although there is quite a large amount of negative space around the page the main design seems to be very cramped allowing very little room for features to breath. This can make things confusing to find as everything appears to blend together, and to a new user this may want them to click off the web site as soon as they come on it.
Mbop Megastore (http://www.mbopmegastore.com/)
Additional facilities:
• Search option
• Clips of music
• View album art (front cover)
Pros
• Clean, bright colours
• Very visually orientated
• Very spacious design (though some parts are too constrictive)
Cons
• Some text sections are forced to scroll individually in very tight boxes
• Complicated navigation - 2 separate methods of viewing genres
• Awkward for new users to understand
The Mbop Megastore web site is very similar to the Nokia Music Store site. Again it uses very clean and bright colours allowing for the album artwork to bring colour to the pages and it has a very obvious search facility for people wanting to search for exact music.
Unlike the Nokia site however, Mbop’s navigation is very complicated. The most confusing aspect I found was that there is actually 2 ways of viewing the genres on the site. This can make users very confused and make it very awkward for them to find their way around.
The navigation isn’t the worst thing about the web site however, the worst thing is the large amounts of space the site leaves but then cramps certain things up. By this I am referring to the 2 scroll boxes on either side of the page. The box on the left hand side contains important information regarding the web site such as what the site is actually about. This information should be more predominant or at the very least users should not have to scroll almost constantly to read it.
Connect (http://www.connect-europe.com/)
Additional facilities:
• Clips of music
• Search option
• View album art (front cover)
Pros
• Animated clips catch the eye
• Easy to navigate
• Clean, bright colours
• Very visually orientated
Cons
• Very cramped design
• Could be confusing for new users
The Connect website was quite different in some respects but at the same time had quite a few similarities.
Once again it was very visually orientated, probably one of the most visually orientated web sites I looked at. One of the best things about the visual aspect of this web site was it used a lot more animation than the other sites which really captures your attention.
It is also once again very easy to navigate with yet another obvious search box and obvious categories down the sides of the design, although some of the tabs can appear to be a little hidden at times and are easy to miss.
The Connect web site also once again uses quite a basic and plain colour scheme, but unlike the other web sites it adds in its own, quite bright and bold, corporate colours as headers of categories, articles etc. instead of relying solely on the album artwork.
Bleep (http://www.bleep.com/)
Additional facilities:
• Clips of music
• Search option
• View album art (front cover)
Pros
• Spacious design
• Good colour scheme
Cons
• Complicated navigation system
• Images quite small, could be difficult to see
• Text very small, could be difficult to see
The Bleep web site is very different to the other music stores I looked at. Unlike the other music stores Bleep uses quite a spacious design in comparison to the other sites. It also uses it’s own very bright and colourful colour scheme, as apposed to the very plain and somewhat boring colour schemes of the other sites.
As the Bleep site uses less album artwork than the other web sites this is not necessarily a bad thing as it brings colour to the areas of the site that are lacking, however as the images are so small on the site it could be awkward for users with disabilities (e.g. poor eye sight, colour blindness) to distinguish between the artwork and background.
I also found Bleep to have a very complex navigational system, with no set area of navigation in place. The most obvious navigational system is at the top of the page but this is even confusing in it’s self (with both a link for the FAQ and a Help section)
Current iTunes Store Assesment
Despite it’s huge popularity the current iTunes store is quite difficult to use at times. With so much information to convey it becomes very cramped and awkward to look at. This is not helped by the use of tabs which contain even more information.
Apple have tried to divide the content by adding boxes and not having a background colour to certain sections but as there is no pattern to the division of these sections the outcome looks rather messy.
iTunes navigation is not much better either. Due once again to the large amount of information that is shown there seems to be endless navigational lists. This would not be too bad as most are down the sides of the store but to reach some of the navigational items a user is forced to scroll quite a lot. A simple reshuffle of some of the information would perhaps solve this problem or at least go a long way to helping it.
One thing that iTunes does have going for it is it’s search feature. Not only does it give you suggestions as you type in the search box (always located easily at the top of every page) but it then gives you suggestions of popular choices once you have searched as well.
Another good thing about the iTunes store is the colour scheme. Although it is very basic the quite dark background makes the lighter sections of the store really stand out.
Apple have tried to divide the content by adding boxes and not having a background colour to certain sections but as there is no pattern to the division of these sections the outcome looks rather messy.
iTunes navigation is not much better either. Due once again to the large amount of information that is shown there seems to be endless navigational lists. This would not be too bad as most are down the sides of the store but to reach some of the navigational items a user is forced to scroll quite a lot. A simple reshuffle of some of the information would perhaps solve this problem or at least go a long way to helping it.
One thing that iTunes does have going for it is it’s search feature. Not only does it give you suggestions as you type in the search box (always located easily at the top of every page) but it then gives you suggestions of popular choices once you have searched as well.
Another good thing about the iTunes store is the colour scheme. Although it is very basic the quite dark background makes the lighter sections of the store really stand out.
Subscribe to:
Posts (Atom)