A14 Section of website

My A14 section (and the assignment up to date) can be found at:

http://thecraigdomain.co.uk/a14/

Please feel free to comment over there.

Final Evaluation

When I first received this assignment, I knew it was one of the most interesting ones that we had received on the course, and I was looking forward to getting started with it. 6 weeks later, and I think this has been one of the most enjoyable assignments I have completed on the course.

For this assignment, I decided to take a different approach to how I usually build websites and tried a fully scalable, liquid design. I had never previously built a fully percentage-based design before, so I thought this would be quite an interesting challenge to provide myself with.

However, building a liquid design caused me a lot of problems. Early on after building the first iteration of the site, I discovered that my site didn’t work very well in any version of Internet Explorer. To fix the design in IE took me a very long time of researching into browser issues with percentage designs, but I did eventually fix the problems by providing an alternate style sheet for my iTunes store. Obviously this isn’t the ideal situation, but it became apparent that this was the only solution that I could work with to make sure the site worked correctly.

Although I did invest a lot of time in making the design work across all browsers, I don’t regret choosing to do a liquid design because it has provided me with a lot more knowledge of percentages layouts and how to build them. Building a percentage layout might have been extremely challenging at times, but it exactly the kind of challenge I needed to keep my development skills fresh.

One area that I think I lacked this assignment was the development process. I did a development process for both the new logo I was going to use and the design, but because I had been thinking about the design whilst writing my reports at the beginning of the assignment, I already had quite a good idea as to what design I was going to go for. Usually I would see this as a negative, but I believe this was one of those times when your best idea comes to you first. I did explore other ideas, but as soon as I had got this idea down on paper I knew it was the one.

I think I could have been a bit more objective during the development process to combat this issue of settling on one idea early on, and this is something that I will take on for my final assignment. Admittedly this is never an issue I have come across before, but now it has arisen I must create an action plan to put this right if this happens again. In future, I will try to be more objective at the development stage, and try not to go in with any pre-conceived ideas. If I do come up with a good idea early on, I must remember that it is important to still explore a range of other ideas.

Collecting feedback is another area that I feel I could have improved upon in this assignment, by collecting feedback on more stages than just near the end. For this assignment I only asked people’s opinions at one stage – after finished screen designs – so I could have asked at an earlier stage. It is a difficult balance to achieve as if you ask for feedback too early people can’t see enough of your idea to understand it, but if you ask too late your design is likely to be too far down the road to completion to act on it. In future assignments I believe I will ask for feedback during the initial roughs stage just to get a general feeling for what kind of things that people think might work, then ask after digitised screen designs, and then once more after the site has been made into a website.

I also believe I haven’t done as much evaluative work in this assignment as I would have liked to, and I think this could have been because of all the evaluative work I was doing for the self-managed learning plan during this assignment. For the final assignment I plan on doing a weekly project evaluation so I can see how the assignment is panning out. In future too, I will evaluate my professional progress on a monthly basis.

Overall, the assignment has gone smoothly and I haven’t experienced many problems that have caused me great difficulty. Even though we were technically just creating a website again, this process has felt a lot different to previous assignments, and I have enjoyed it. I feel I have learned a few valuable skills with my decision to try a percentage-based design, and I have some solid improvements that I can make for any future assignments, and ultimately my professional career.

Areas to improve upon:

• Collect more evidence of feedback at more stages of the development process
• Write regular evaluations of how the assignment is progressing
• Try to be more objective during the development process, and try not to focus on one idea too much
  

Word count: 811

Digital Screen Designs

I've just finished some digital versions of my screen designs for my iTunes redesign, and I'd welcome some constructive feedback on what I have. I'll just explain a few things first:

I've simplified the whole iTunes store to make it very user-friendly and easy-to-use. As the iTunes store currently is I think it's far too busy, and my design reflects this issue.

My redesign also includes a slightly redesigned logo, where I've taken the very first apple logo and made it slightly transparent. Each page has a context-sensitive version of this logo. The new corporate colour scheme for my iTunes redesign is a refreshing green, taken from the top colours of my logo.

Homepage design:


Top songs page design to explain my concept a bit more:


A propose genre page design (likely to change):


Any comments are greatly appreciated (apologies for the low-res screenshots).

Competitive Analysis

Bleep

Tasks performed and results

Since Bleep did not have a genre search feature available to me, I couldn’t test the usefulness of it. I did test sorting the search results, but couldn’t achieve any sort of sorting. Search results appeared organised by releases and tracks, with no option to edit the sorting features.

Areas of difficulty

Very sluggish to browse music. Slow scrolling. All links are too small to click easily. Everything is too tightly packed in causing difficulty to see things and differentiate. Overall, the design is far too small and could be stretched out considerably.

Visual cues and their effects

1. Charts list / middle column
   Charts list has been placed in a prominent place, but the list itself suffers from a lack of strength due to its size and colour. This design is better than the iTunes design due to it having a clear focal point, and only having one selected release instead of overloading the user with too many albums is a wise design decision.
2. Left column / new releases
   The albums in the left column clearly have less prominence than the centre column due to it’s size. Because of this, it is clear to the user where they are meant to look first. Although it is quite untraditional to put important information in the middle section instead of the left column, this design works. The left column has a good amount of small images for new releases and various other sections, but the only problem is lack of text on the releases. It is not instantly clear upon one glance what these albums are, so users will not be interested. It is important to make the homepage as clear and accessible as possible, and I don’t believe the left column achieves this.
3. Right column / checkout
   Whilst it is a good idea to be able to see the checkout at all times, I think too much of this design has been wasted on the checkout column. When the website first launches (a time when nobody could have anything in the basket), there is a whole third of the design dedicated to the empty basket. I don’t think that the checkout needs an entire column for the site, and just a subtle link to the checkout on the homepage would have sufficed. I plan on implementing a link into my design, rather than showing the checkout at all times like on the Bleep website.

Effects and usage of colour

The light green on grey design works effectively, but it is the subtler shades of green inside the website design that suffer because of low contrast. These low contrast areas are arguably some of the most important headers and pieces of information too - put there to lead the user around the design. When I come to choosing colour for my design I will make sure I have high-contrast colours over the entirety of the design, paying particular attention to the headers and most important information.

Audio Jelly

Tasks performed and results

I performed the genre list test, but found out that Audio Jelly also only provided a 1 level genre list search. However, the genre list was a little more comprehensive than iTunes store. Audio Jelly didn’t fare as well when I searched for music as all that the search results produced was a list that wasn’t sorted in any way. It wasn’t possibly to sort the search results in any way.

Areas of difficulty

The lack of ability to search by artist is a massive oversight, and seriously hinders the value of the search feature on this site. With only a 1 level genre list search and limited search features, Audio Jelly becomes very difficult to search for anything.

Visual cues and their effects

1. Centre top section (animated banners)
   It is clear that the Audiojelly design has taken a lot of influences from the iTunes Music Store, and has a very similar layout; albeit better implemented. The top three banners are there to advertise the newest music, and they also slowly rotate like the iTunes Music Store. They rotate at a nice speed, making sure the user doesn’t have to wait a long time to see more of the images. On some of the images they have written text underneath them, which is a similar idea I would like to implement. However, in this design the text is too small for most people to read comfortably, so I must make sure I make the text slightly bigger, and implement the ability to be able to resize the text without breaking the design.
2. Extras and account information box
   One of the best features of this design is the information box at the top of the website that allows you to perform certain common tasks. Unfortunately the text is a little bit small on the buttons and the headers, but it is a good feature to implement nonetheless. I do feel however that it detracts from the logo, and if I was to implement a similar feature I would make sure that I would separate the box from the logo so the logo is still the first visual cue that a user sees without any distractions. I think that a ‘My Account’ box is a very important feature to implement into the design, and is one I shall be featuring prominently in my design.
3. Music Player
   The third that would catch a user’s eye quickly is the music player on the right hand side. It is given prominence in the design by making it larger than the rest of the features, but seems pointless to be so large, other than to be able to see the tracks you have queued up for playback. I will be implementing a music player into my design, but I will not be making it so prominent.

Effects and usage of colour

Audio Jelly have used a lot of grey in their design and as such gives the website quite a dreary feel. You don’t feel excited when first visiting the website as so little is in colour. I understand the reasons behind this - it allows the music covers to stand out more and other banners - but I feel that too much grey has been used.

Even the logo blends into the background and completely loses its focus from being in another shade of grey. I would have considered having the logo in full colour at least.

Comments on audio cues

After searching extensively for examples of online stores for examples of the use of sound cues, I have to report that to the best of my knowledge, one doesn’t exist on the Internet. To find examples of sound cues on the internet, I had to search wider to incorporate any website that uses sound cues.

Japan.illbe.net uses a very basic sense of audio cues for two purposes: when the mouse is placed over a link, and when the link is clicked. These sound cues work well as they are subtle, and the website also has background ambient sounds to go with the audio cues. The inability to turn off the sounds while you are viewing the website can become annoying after repeated visits. In this example, the sound cues are quite important as some of the links are visually slightly too subtle, so this helps the user identify what is a link, and what isn’t.

Dirk Lambrechts provides sound in their design too, but sound cues are used on this website to give the user feedback when the loading has completed. I think this is a good implementation of sound cues as some users may click away to look on a different website if the loading times are long, so if they leave this website open in the background they can come back to it once they have received audio feedback that the web page has loaded. Similarly to the illbe.net website this design also provides feedback when hovering over and clicking links, but in this design it serves little purpose. It is obvious where the links are, but it is difficult to turn the sound off on this website as the volume control doesn’t look like a volume control and is very small at the bottom of the page.

Of the three designs that I decided to look at for audio cues, Design Charts seemed to have the most grating audio cues. Every time a link is hovered over a small clicking noise can be heard, then a slightly quieter clicking noise is played when you click a link. Once again, there is no ability to turn the sound off, which is very poor usability and just annoying for any users that would like the sound off.

Current iTunes Store Design

Tasks performed and results of tasks
I first performed a genre search test on the iTunes store, which involved me seeing how deep the genre search list allowed me to go. In the iTunes store, it is only possible to go 1 level deep through the genre list, and the categories that it specifies are too vague. This is a major area I could and should improve on with my design, so I will make sure I implement a deeper genre list search that is also more comprehensive. The second task I performed with the iTunes store was to see how I could sort my search results. The iTunes store had by far the strongest sorting feature of all the music stores I tested and I must make sure at least match the wide range of sorting options in my design. Although I will not be able to implement them, I still feel it is important to show that I have thought about things like this.

Areas of difficulty with the design
I found the iTunes music store to have an extremely cluttered design, and one that didn’t expand well when viewed full size on a 20-inch monitor. The initial landing page has no area of prominence, resulting in the user’s eyes not knowing where to look when the store first boots up. The internal search function can be very hit and miss, sometimes completely ignoring artists you are trying to search for.

Visual cues in the design

1. Revolving images on top of the page (animated images)
   Images are too close to the top of the page to notice them effectively. The eyes tend to scan too fast to notice things at the top middle of a page, and the images revolve too slowly to be noticeable. User would have already clicked off by the time they had rotated.
2. Middle album icons box
   This box is right in the user’s eyesight as soon as the store loads up, and makes this a very effective position to have the new releases box in. However, the box is poorly highlighted and too full of new releases. This overloads the user and makes the box largely ineffective. A choice few new releases would have been better, and no more than 3-4. This would save the user from being overloaded with information.
3. Smaller promotional images
   These images seem to be very haphazardly placed, with not much thought gone into them to emphasise them. When viewed at full size (as in the example), the images separate from each other considerably, making them seem very disjointed from each other. There is no title to the section to tell you what these images are for. These images would have better to have been nearer the top.
4. List boxes
   No box is given emphasis over the others, and some seem unimportant. Potential promotions such as “Albums under £5” are not easy to see, and are lost in a sea of text information. Genres - one of the most important parts of a music store - is buried near the bottom. Text boxes need more emphasis on them, with the less important ones being smaller, and possibly near the bottom.

Effects and usage of colour
The pale darkish blue gives off a very bland feel to the design, and is used copiously due to the large amount of background space. It was a good decision to use a very restricted colour pallete of white and blue, but the colourful promotional images are placed so poorly that the effect has been lost.

My suggestions to improve the design would be to give the most important parts of the design brighter colours to stand out against the background, and possibly have some things in a completely different colour to draw attention to the big promotions.

The current iTunes design suffers from no clear focal point due to its lack of colour and several other contributing factors.

Delivery Requirements

Technologies needed to create website:

• XHTML Strict Level 1.0
• CSS Level 1 and widely implemented features of Level 2

Tools used to implement technologies:

• Komodo Edit (XHTML and CSS)
• Adobe Photoshop (Image manipulation)
• Adobe Illustrator (Any vector / logo work)
• Canon EOS 400d DSLR (Any photography requirements)
• Cyberduck (Mac) and Filezilla (PC) to upload website

Tools used to test implementation:

• Firefox 2
• Safari 2
• IE 5.5 +
• Opera 9
• Web Developer’s Toolbar plugin (Firefox)
• Lynx Text Reader plugin (Firefox)
• W3C Validator
  

Target Audience

Regular Users
Regular users are likely to be between the ages of 16 – 45, and spend up to £15 a week on the iTunes music store. They visit the iTunes music store up to 5 times a week. As they are using iTunes, they could be literate with both Mac and PC platforms. They will be very computer literate, and capable of using the iTunes music store with ease. They are using the Firefox 2 or Internet Explorer 7 browser.

Occasional users
Occasional users are likely to be between the ages of 16 – 45, and spend around £15 a month on music in the iTunes music store. They may visit the iTunes music store 3 – 4 times a month, and might not be as capable as using the store as regular users. They are likely to working on a Windows platform, on Internet Explorer 6.

New users
New users are likely to be between the ages of 16 – 55, and may be using the store after receiving iTunes store vouchers. As they are new users, they are unlikely to be familiar with the layout and may also need to set up an account to purchase through iTunes. They are more likely to be working on a Windows platform, but could also be working on a Mac platform. They are likely to be using Internet Explorer 6.