Client - Home page, near enough completed.

Screenshot of the home page I have coded so far. Added a few shadows from the original mock-up I designed, which I think helps as it gives it a bit of depth and stands out a little bit more. However, this doesn't work at all in IE, so I'm looking at solving this issue pretty soon.

The text also doesn't appear as smooth as i'd want, but I decided against using an image for the text as this would increase loading times and SEO effectiveness.

Next step is to mock up About, Gallery and Contact pages and work out how to have each wordpress page different, as currently I have 4 homepages and the blog page.

Artefact 2

The aim of my second artefact is to try and see how the positioning and layout of objects can affect a viewer’s attention on certain points of a website. I intend to try and get the ‘call to action’ button to be the first thing that the user notices when on a product description page.

Artefact 1 showed that Amazon’s original homepage had the least people being drawn to the ‘call to action’, so this is the image I will alter through the second artefact.


Original




Alternate 1




Alternate 2




Alternate 3




Results + Evaluation



I conducted the above questionnaire to the same ten people as my first artefact in order to gain fair results.

Alternate 1 – In this image I simply altered the size of certain objects, by making the product image and description slightly smaller, and the ‘call to action’ larger. This gained 2 more people’s attention, but was still not very effective.

Alternate 2 – This image, I moved the call to action to within the text. This took the viewers’ attention away from the product description; however the majority of people were still drawn to the product image.

Alternate 3 – By swapping the position of the product image and the ‘call to action’ from the original image, which was done in this image, it stood out to a lot more people and drew the majority of people’s attention away from the product image.

Through this research artefact, it seems that most people are drawn to the left side of the screen and if a product is bold enough it will initially stand out to them above other content. This could be due to what they are used to, and reading from left to right. Artefact 1 did show that users’ attention was also gained through bright contrasting colours but this also relied on layout and positioning. In artefact 3, I will look at designing new call to action buttons, and how this design is effective in the content of existing websites.

Client Project Update

I have began coding the website using wordpress. Initially I set out by editing a current theme, but couldn't get sections to look exactly how I wanted. However, thanks to a website that Tom gave me (http://www.blogger.com/img/blank.gifhttp://webdesignerwall.com/tutorials/building-custom-wordpress-theme) I found out it was much easier to create the website the normal way and then add the required bits of PHP in wordpress after that.

The blog page is almost complete, just need to see what the client thinks, then I will move onto the separate pages.



http://www.amitchelldesign.com/vintagevixen/blog/?page_id=22

I have been creating it on my server so when it's complete I can copy everything over for the client.

Artefact 1 Results + Evaluation

I surveyed 10 people when conducting my questionnaire as I believed this would be sufficient to get the results that I was after.

The first question aimed to see what the first thing that stood out to the viewer was when viewing the initial homepage of e-commerce websites:

Amazon – Shows that even when the call to action button is altered, the majority of people are initially drawn to the product image. Maybe due to the positioning of the ‘add to basket’ button, which will be researched through Artefact 2.

HMV – With the original homepage, many people first noticed a promotion offer of ‘DVDs for £2.99’. Maybe this is something that HMV wanted to attract the users’ attention in order to encourage more sales. However when the call to action button was changed to a blue colour, contrasting to everything else on the page, this gained more people’s attention than the original.

Play – The majority of people were initially drawn to the call to action button, even with the original colours. Changing the colour still managed to draw a few people’s attention away from the product image and to the ‘buy’ button.

Question 2 shows that the original homepages from the three websites are the most visually attractive. Perhaps the company put aesthetics before trying to grab the customers’ attention.

Question 3 shows that very few people find the original call to action button to stand out most effectively and that this button is most attention grabbing when changed to a completely contrasting colour that is not found elsewhere on the page.

Artefact 1

The following three images show the initial screen as the user enters the item description page in order to purchase the item. I used the same DVD product page so not to get biased results when conducting the survey. For the first artefact, I aim to look at just the colour of the 'Call to action' buttons in order to find what looks better on both an aesthetic level as well as which colour encourages the button to stand out from the surrounding content.

Original Images







By using Adobe Kuler to create colour swatches, I altered the call to action button in 2 different ways for each of the 3 websites. From the original colour of the button, I used the opposing colour to create a complimentary hue and a triad colour, at right angles on the colour wheel. By doing this it gives two completely different colour combinations in which I will create a short questionairre to find out which of these creates a better impression on the user.

Alternate 1







Alternate 2

Splash Page idea

Another Mock-up idea.

Really quite happy with this idea of combining a summary of the shop alongside a jquery image slider makes the homepage feel a lot fuller, but with not too overwhelming. This idea would still have an 'about' page for more information on the store.