Wednesday 10 February 2010

Designing for the User

Week 1:

For week 1 in 'Designing for the user' we had a lecture which included a video which gave me an idea of what sort of website that I shouldn't be creating. I felt this gave me a good knowledge as this video showed that the use of far to much Flash can make a website pretty horrendous. We received a task from our tutor James to look at two Flash websites for our next week and compare them by finding one that has the right use of Flash and one that has the wrong use of Flash. Things we had to consider were such things as, design, use of flash, target audience etc.
Week 2:


For week 2 we had a lecture to discuss our two Flash websites, good or bad. For my websites I chose to pick a website called www.gettheglass.com which I felt was a fantastic use of Flash but also due to the factor of going a bit over the top with the amount of Flash they used this made it my bad website. It was very well designed but the whole layout didn't really have good navigation and as the user I struggled to really gain what this websites purpose was. My second website was called www.okaydave.com which I felt was a good basic website that used Flash to a good effect and didn't bore the user with a lot of loading time. This website was easy to navigate through which I felt helped as my first website didn't. Due to this I listed this website as my good website as you knew what the website was just by looking at the opening page and it also had the navigation bar which my first website didn't have.


Week 3:

For week 3 we had a lecture which was based on showing us how we should prepare for creating a website or any other piece of work. This came with ten steps which I feel will help me a lot in the future, they are listed below:




Step 1 - Research

  • Needs of the client - This website is aimed at advertising ski resort holidays for young adults.
  • Specific industry/product/service
  • Target Audience (from client or brief) - The target audience for this website is young adults who have an interest in ski resort holidays.
  • Market Research (competitive analysis - compare other websites, focus groups) - I have looked at a few websites that are based specifically on ski resort holidays. These websites usually show information such as text, images and videos. A lot of these websites are basic HTML as well. The websites I have looked at are: lineskis.co.uk, ifyouski.com and skiclub.co.uk

Step 2 - Brainstorming

  • Start getting all ideas down on paper - I came up with a few names for my website these were: Skiplus/Ski+, Skiforyou/Ski4u and Ski 18-30.
  • Any expected content
  • Content will eventually inform the design


Step 3 - Technical Requirements

  • This website has to be made in Flash. This is the main objective of Designing for the user. With having to use Flash I think it is apparent that this website needs some sort of animation in it. When viewing other Flash websites I have noticed that they tend to have the main animation at the start of the website so I feel I may do this by having some sort of person skiing down a slope then the main part of the website opens.
This is what I have come up with up to now.

Week 5:

In this task we had to carry on with planning our website and I came up with a few ideas which was based at the target audience. This is what I wrote below:

I need to look at what will attract young adults to my website and keeping them interested while viewing the website. I have to think about layout, content, colour scheme etc.

Websites such as
bigskyresort.com show what I should be adding i.e. content into my site. This site shows pages such as Winter Skiing, Summer Skiing, Events, Booking etc. I think I need to add content like this as I think advertising an actual resort will be a more worthwhile idea and better than advertising a handful of resorts.

I feel that advertising this website this website in the right way will decide whether a young adult audience would want to carrying on viewing my site or wanting to leave it. I feel by doing this we need to add something into the website that will really attract them and make them want more. I feel advertising the resort as like a package holiday were you can obtain accommodation, equipment, food and drink etc will really lure the young audience in as a lot of young adults prefer to save money rather than spend big.



This week was a very important time when thinking about the design of the website. The designs that I came up with were all well designed in my opinion and had the right sort of content in them. When looking at my designs I then thought about adding them into flash. The design was changed a few times when creating the actual website. It went from having a black background with white font but this didn't really portray a ski resort. After considering this I went with a design that was a photograph of a ski mountain. This photograph was very eyecatching and had such things as sunshine, trees and snow which made the website design look very different but in a good way.
Week 7:
After adding the content I felt that this image was taking up far to much space and I could not really fit any content in what so ever. This was making my website look quite basic. When thinking of how I could create more space I went upon the idea of using images such as the facebook logo, msn logo, twitter logo, a housing logo, a food logo and a skiing logo. These at first looked very good but once they were reduced in size that is when the design started to look a lot worse. These images were gonig to be used as links but they were to big when full size and too small when minimised. After having a look at other websites and haing a discussion with Jay he recommended that instead of using images as links maybe use writing but having a question as the link. For instance something like "Where do we sleep", "Where do we eat", etc. I felt that this was a good idea and after adding this my website was looking a lot more clearer.
During this week I also joined a Ski Forum to see what people who are interested in Skiing would like on a website. The link for the forum I joined and for the answers I recieved on my topic is:
http://http//www.j2ski.com/ski-chat-forum/posts/list/8335.page
The replies I recieved were very helpful as a lot of people told me they look at accommodation, bars/pubs, equipment, webcams and weather reports. After considering all of these options I felt this helped me when coming to add my content in the future.
Week 8:
During this week I changed my complete layout of my flash site as I didn't like the way the photograph cluttered the rest of m website. After browsing a few other flash websites I went with a fairly basic design of white but the background had little squares within it, which after adding other images such as snowboard, skiis etc it looked really presentable.

Once I added this background I then started to add different links. I went with the same idea of having the questions as the links but I also added an image on to them as well. I made sure that when the image is rolled over it changes to a different colour which is also the same with the text.

Week 9:
This week was very important as I had to make sure all of the content was added. I had the content which was such things as updates and images on the homepage, which also had a link to Ski Plus' Twitter and Facebook page. The accommodation page which had information on how to book a chalet with images. The eat/drink page which gave information about the catering at Ski Plus Resort and also on the equipment page about all the equipment that is on offer.
After looking at my website I felt that it lacked a lot of animation and so with this I decided to add a flash music player in the homepage. This would act as a way for the viewer to click on the player and hear what people who have visited the resort have said about it.
After looking at my website I felt that it didn't really have much focus on the actual ski slopes but it mainly was focused on the actual resort. I was unsure as to whether this needed to be added as I felt that everything that was in my website covered the criteria very well.
User Testing
For my User Testing I asked a varied audience between the ages of 17-35 which in my eyes would be the audience I was aiming it at with the target being young adults.
I asked my friend Steph who is aged 18, my uncle Steve who is aged 33 and my other friend Craig who is aged 20.
The questions that were asked where to people who had different knowledge of web design. The questions are as followed:
Does this website fit its purpose content and design wise?Steph: Yes this website is about a ski resort and is shown well.Steve: Yes.
Craig: Yeah when looking at the website you tend to guess what its for.

Would you make any improvements to this website?Steph: Not really there seems to be enough information.
Steve: The content added is all right but could of added other things.
Craig: No the website looks very eyecatching.

Did the content make sense?Steph: Yes I could understand everything.
Steve: All the information that was used was easy to read and understand.
Craig: Yeah very simple but effective.

Does the music player work properly?Steph: Yes it plays and stops when the buttons are clicked on.
Steve: Yes
Craig: Yeah it works without any problem.

Is the navigation clear and easy to use?Steph: Yes I like the way the text changes colour.
Steve: Yes but I think once the pages have been clicked on the image should change colour or something like that.
Craig: Yes it is easy to use and works fine.

After reading through my user testing I changed the website so that the images would change when a page was clicked on and now they have a colour scheme for each page. After all of this my website is now completed so feel free to have a look around it :)
Evaluation
I feel that this task was very enjoyable and went very well. The overall website I feel had enough uses of flash within the site to be a succes. The pieces of flash that I used were the navigation that changed on every page and when the text was scrolled over, the other piece of flash was the audio player which was created by using the hand out recieved in one of the flash workshops over this semester. I tried adding a video into my website also but after trying to add a video from Youtube the code I used didn't seem to work so instead I just used a print screen of the chosen video and added a link. The overall design was a success I felt as every person I asked said they were impressed especially the target audience it was for as the layout was very similar to a lot of other websites that the young adults would look at. Overall the website was a success in my opinion.

Week 6:



Step 1 - Research

  • Needs of the client
  • Specific industry/product/service
  • Target Audience (from client or brief)
  • Market Research (competitive analysis - compare other websites, focus groups)

Step 2 - Brainstorming
  • Start getting all ideas down on paper
  • Any expected content
  • Content will eventually inform the design

Step 3 - Technical Requirements

  • Factors to consider - budget, timeframe, target audience, feel of product
  • HTML

  • CMS
  • Flash
  • Hybrid

Step 4 - Written Outline

  • Get your idea down on paper formally
  • List each selection of the site/product
  • Description of what content exists on each page/selection
  • Product features such as; user accounts, commenting, social networking intergration, video, newsletter etc

Step 5 - Wireframes

  • Simple line drawings of site/pages/sections layout
  • Focus on placement of elements (rather than colours, fonts etc)
  • Determine what content needs most focus on each page
  • Provide framework design
  • Easy to change

Step 6 - Design

  • Static designs/screen mock ups
  • Design presents the product content
  • Do not over power the user
  • Design consistent navigation
  • Clean use of type and sparing use of fonts
  • Use placeholder content if need be

Step 7 - Construction

  • Turn designs and mock ups into actual pages of HTML of Flash scenes

Step 8 - Development

  • Link pages/sections together
  • Implement consistent navigation and navigational awareness devices

Step 9 - Reevaluate Design

  • Based on issues encountered by your test users
  • Categorise the seriousness
  • Tackle problems with critical functionality first
  • Re-test the product to see if you have it right this time

Step 10 - Promote

  • Get your product out there

Week 4:
In this session we mainly carried on with our planning for our Designing for the user website. I started this by using my planning a website technique as shown above.