As iTunes is such a well known product already and so popular from the get go I once again struggled to really distance myself from the current site and be as creative as perhaps I could.
My main idea for the website was to try and reduce as much navigation as possible as it seems to dominate the iTunes store at present and to also reduce the amount of visual noise which can distort and confuse the user.
It soon became apparent that reducing the amount of navigation on the iTunes store was a very difficult task and so my final product still contains quite a lot of navigation but hopefully not enough to confuse users.
Unlike the current iTunes store I tried to keep the navigation all together. Currently on the iTunes store navigation appears to be all over the place which once again is very confusing for users. I also had the navigation in the center of the site it hopefully also allows user to see all the navigation at once rather than having to scroll up and down a lot to find what they are looking for. I find that when navigation is clearly viewable all at once it allows me to scan it quicker and so I tried to bring this across onto my redesign.
I have also managed to severely limit the amount of visual noise on the website however by only showing a couple of images at the most on each page. This did include limiting the amount of flash I included on my website as I feel this can confuse the user quite often too.
Including flash on my website I think was not necessary but was a definite plus to learn as I can now say I have very basic Flash experience and is something I can improve on in my spare time also.
By using flash banners and animated gif's on my site it also allowed me to save space so that the user doesn't have to scroll as much to see important bits of information but at the same time keeps predominant ad's immediately viewable.
Looking back at my website I am now not sure if the idea to change background colours on my separate genre pages was a good idea. Although the genre's I chose had quite obvious colour schemes attatched to them not all do (such as TV and Movie soundtracks) I also think that it removes the consistency from my website which may confuse the user just as much as large amounts of navigation and lots of images.
Were I to do the assignment again then the first thing I would do is try and strip my mind of existing ideas about the iTunes store and try to create something new as apposed to thinking of what was currently on the site and how to rearrange it rather than redesign it.
I would also try and do more user testing and gain more feedback in the design process, especially towards the end as most of my feedback came from initial designs. I think that by doing some sort of user testing, even at the paper stage, would have told me if the amount of navigation I have was the right amount, or too much.
Finally I would also change the sub-genre pages as previously mentioned and make them more consistent. This would perhaps be done by keeping the same colour scheme throughout my website and adding in a few more images which were relevant to the genre. I would also perhaps change the font of the genre names to something more fitting with the theme, though again this could bring up design issues for certain genres which don't have a fitting font.
Monday 3 March 2008
Monday 4 February 2008
Screen Designs - Feedback Wanted
Below are my screen designs for the iTunes redesign. Any feedback on my final 3 would be appreciated.
Digital Design 1 - My first design is very similar to the current site. This is to not alienate existing users who may not be very web savvy and may have just gotten used to the current layout. The navigation is split down 2 sides, the music down the left and any other sections down the right.
Digital Design 2 - This screen design is once again similar to the original site but with all the navigation down the left hand side where users are used to it being. The images/banners are also smaller and so not as much in your face but this then requires more information to be on the page which could once again confuse the user.
Digital Design 3 - The third design is the most different. All the navigation is at the top of the page so that it is easily accessible, and it is also limited to the bare minimum so to not confuse the user.
Once again the banners are full length across the page to minimise the amount of information on the page so it is not as cluttered.
Completed sections of my screen designs:
Final roughs 1
Final roughs 2
Final roughs 3
Second development stage
Initial roughs
Digital Design 1 - My first design is very similar to the current site. This is to not alienate existing users who may not be very web savvy and may have just gotten used to the current layout. The navigation is split down 2 sides, the music down the left and any other sections down the right.
Digital Design 2 - This screen design is once again similar to the original site but with all the navigation down the left hand side where users are used to it being. The images/banners are also smaller and so not as much in your face but this then requires more information to be on the page which could once again confuse the user.
Digital Design 3 - The third design is the most different. All the navigation is at the top of the page so that it is easily accessible, and it is also limited to the bare minimum so to not confuse the user.
Once again the banners are full length across the page to minimise the amount of information on the page so it is not as cluttered.
Completed sections of my screen designs:
Final roughs 1
Final roughs 2
Final roughs 3
Second development stage
Initial roughs
Thursday 31 January 2008
Delivery Requirements
- 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.
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.
Subscribe to:
Posts (Atom)