Contact Page

Finished the contact page, however for some reason the form doesn't actually work, even though I have used the code from a previously working contact form. I aim to get this finished then move onto the about page, and then to make the website responsive for other devices.

Artefact 3

The first aim of the artefact was to see how long it takes to find a particular item using just the websites navigation, rather than the search bar and whether each site’s navigation contains aspects that would encourage the users to use this rather than the search bar.

The initial thoughts within the focus group were that the main aims of the navigation in an e-commerce website would be for customers who are just browsing, rather than looking for any specific product.

Due to Amazon selling the largest selection of products, the initial navigation is split into different departments, with more specific items shown when hovering over. Play.com also goes for the drop-down list, however separates the list into many more items, including a ‘Music Offers’ section. Within the focus group, people thought this was a good addition as when the user is just generally browsing, they will more than likely be interested in finding any bargains.

HMVs navigation, which is a simple, horizontal navigation without any drop-down function came across as the least popular. The main problem with this would be that the user would have much more waiting time with new pages having to open up every time.

The next process was to look at the second page after the user has made their initial decision on which section of the site to visit. All three of the websites display this in a vertical side navigation with different areas to refine the items.

When browsing for music, each website has a section which refines the results from the genre of the music. The results of how many options this is split into are. . .

Amazon – 18
Play – 21
HMV – 10

The main conclusion from the focus group was that the more genres it was split into, the better. However HMV may have split the items into less sub-sections due to it being difficult to catergorise certain items and this could be the best way to enable more customers to find the correct item in the correct section.

As well as the splitting the items up into genre, each website has a selection of other ways to browse through products.



Although HMV had the least options on the initial navigation on the homepage, it was concluded that the sidebar navigation on HMVs site was the most useful and provided the most options for effective item refinement. One thing that was pointed out was that HMV was the only site that offered a ‘Price Search’, which people within the focus group thought was something that many customers would want and may encourage them to potentially buy more than they initially would if they could find a bargain.

The mind findings from the focus group were that the user would be looking for minimal mouse clicking and website loading time as well as a large selection of navigation options on each page in order to refine items and give the customer many different ways of finding particular items.

Gallery Page fully coded.

Finished coding the gallery page here. Scrapped the idea of having touching images as this didn't really look how initially thought and think it looks much more like an image gallery rather than one image the way I have done it. And finally after some confusion with uploading of files and css, I have finally got the lightbox to look how I imagined. Think it looks pretty good and goes nicely with the feel of the site.

Artefact 3 - Initial Ideas

After concentrating on the 'call to action' buttons within e-commerce websites for the first 2 artefacts, my results showed that I couldn't really go much further with this.

So, for the third artefact I will be looking at the navigation features within the same three websites, Amazon, Play and HMV. I will use these 3 websites again, as all the navigation bars are pretty different.

I will look at the advantages and disadvantages of these different forms of navigation and how long it takes the customer to find the item they are looking for as well as how many mouse clicks it takes and what each individual prefers.

Amazon - Vertical, drop-down navigation.

Play - Horizontal, drop-down navigation.

HMV - Horizontal navigation.

My results from this artefact will be gained through small focus groups which would provide for a detailed discussion in order to gain effective results on the navigation features.

Gallery Page Mock-Ups

Few ideas of layouts for the gallery page, first few would use a lightbox to view larger images, the last image would show the selected larger image beside the other images.

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.