Artefact 5

For the fifth artefact, I will take into consideration everything I have found out through my essay and the previous four artefacts in order to create the ideal mock e-commerce website. Through the evaluations and results I have gained from questionnaires and focus groups in the previous artefacts, I intend to put together a series of 3 mock e-commerce product image pages.

What I have previously found. .

- Brighter, contrasting colours result in the call to action to stand out more to the user, however with this artefact I will be looking mainly at the design and layout rather than colours as I believe this is more down to personal taste.

- The closer to the left side of the screen the call to action is placed, the more likely the user is to notice it initially.

- Users prefer a drop down navigation, with a large selection of sub-topics to lower the amount of clicks per page and the loading times between pages.

- A large selection of high quality images to choose from, with a variety of interactivity in order to view the product at a variety of different angles and various zoom properties.

- The user prefers adverts and promotions to be placed away from the product image and description so not to be too distracting from the information they are looking at.

- A large search bar, above the fold and close to the navigation, which is easily accessible if they can’t find the item they are looking for in the navigation bar.

Mock 1



Too many promotions in the initial view point for the user.
Call to action is probably the last thing the user sees, may lose interest.
No option to zoom on images, requires a mouse click to load up a larger image.

Mock 2



Vertical navigation seems out of place, not necessarily the first place the user will look to find it.
Sale promotion at the top is too eye-catching and may draw the users’ attention away.
Image hover results in the Call to Action being covered up.

After finding problems with the first two mock designs, I produced a list of key elements that would be required in the third mock-up. . .

- Large horizontal drop-down navigation
- Promotions and adverts after the product information / the right side of the page.
- Large choice of images and interactive elements to view the product.
- Call to action that is seen immediately.

Mock 3







Highlighted effective features pointed out in focus group. . .

- Advertising free delivery and free returns which will give customers a sense of security when ordering from the store.

- Large search bar which is easily accessible above the fold.

- Full width drop-down navigation with a large amount of sub-categories that gives the user plenty of options to find their desired item.

- Adverts and promotions placed on the right side of the screen, meaning they are still noticeable, but don’t take the users attention away from the product information.

- Large call to action button that can be seen straight away, before the product information, giving the option of a quick transaction for the user.

IE Problems

I have been encountering many problems with the client site when viewing in Internet Explorer 7 and below. However, I have now hopefully come across a solution for this, by creating a separate .css stylesheet which contains a few of the 920px rules, mainly to do with the header, specifically for IE7 and below. Although it doesn't look as good on a large resolution, I am taking it that most people still using early editions of IE will not have screens with a large resolution anyway, so the website will look just fine.



Now this is complete, I am one step closer to completing the website, just a few bits that need touching up and the website should be ready to go live in the next week after a final meeting with the client. I will then look at designing flyers and leaflets etc.

Home and About - Fully Responsive

After finishing the main site, I have now moved on to making the website fully responsive for all devices. After a few issues with the image scroller on the home page, I have finally worked around a way to make this page work down to mobile size.





When the site gets down to mobile size, I have removed the image scroller completely as I don't believe it would be required on a mobile site, and may just irritate users due to longer loading times.

With the about page, I have kept all the same information on each different size. I have just used percentage widths and a few changes of font size accordingly.

Artefact 4

For artefact 4, I will look at the way images are displayed in e-commerce websites and how a product is displayed to the customer. I will investigate into finding the optimum way to show images to give the user the closest experience to physically seeing a product.

I will focus specifically on one particular type of product over a series of different websites, which will be decided in a focus group of three people, on a product that the group thinks customers will require varying image types in order to get the most of viewing the product before buying. Each website will then be reviewed in different sections, given an agreed mark out of five, as well as evaluating pros and cons with each.

Image 1



This idea gives the user a small image, with the option to use the mouse to rollover the picture, which provides the user with a larger, high quality close up image. This gives the user a way to focus in on certain elements of a product and see each individual bit separately.

Choice of Images – 1/5
Quality of Images – 4/5
Interactivity – 3/5
Overall – 8/15

Pros – Simple to use, good quality image on zoom, gives the option to view larger image as a whole.
Cons – Lack of image choice and angles.

Image 2



This idea gives the user a choice of 4 images, all displaying the product at different angles.

Choice of Images – 5/5
Quality of Images – 1/5
Interactivity – 1/5
Overall – 7/15

Pros – Large choice of images.
Cons – Small images with no option to enlarge, confusing image scroll selection.

Image 3



This idea gives the user just one image, with the option to rotate the image manually at 360 degrees as well as being able to stop at any point and view the product at a particular angle.

Choice of Images – 1/5
Quality of Images – 3/5
Interactivity – 4/5
Overall – 8/15

Pros – Unique and interactive, lets the customer view from all angles.
Cons – Only one angle to view from, quite a small image.

Image 4



Similar to the idea in image 1, however this idea gives the choice of four images shown in a lightbox and also gives the customer the option to zoom in on the image as well as using a mouse rollover to view individual sections of the product.

Choice of Images – 3/5
Quality of Images – 5/5
Interactivity – 4/5
Overall – 12/15

Pros – Really high quality image with 4x zoom, can scroll over the images to view different sections.
Cons – Only a few images to choose from, no option to rotate.

The use, and selection of images is a really important factor when a customer is looking to buying a product, especially one such as shoes, clothes etc.

With shoes; the idea of being able to rotate around the object and view it from different angles gives the customer a sense of realism, as close as possible to them physically viewing and feeling the product.

If only one image is used, the customer may be enticed away from buying, due to not being able to see every part of a product. Thus, we believe that the larger the choice of images to choose from, the more likely a customer is to buy a product.

Also, the customer is more likely to benefit from a much larger, high quality image, with the option to zoom in and out, giving the impression of viewing the product from a distance, as well as close to the face. Higher quality images also show more clearly the material of a product, helping the user with how a product may physically feel.

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.

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.

Research Project - Artefact 1

For the first artefact, I aim to look at the 'call to action' buttons over a series of e-commerce websites and look at how different colours could be used in order to make the buttons more effective and what encourages these to stand out from surrounding content.

I will look at the same item on 3 sites, Amazon, Play.com and HMV.co.uk and experiment with different colours and conduct a questionairre to conclude what provides for the most effective call to action design.

New Mock-Up

Gantt Chart

Mock-Ups

More recent quick mock-ups. Both would contain a jQuery image changer as the main feature of the page containing striking images to draw the attention of the user. Both have a different style of navigation, personally I prefer the vertical one, which could then be used to include a vertical scrolling to certain points when a link is clicked.

Mock-Ups

Couple of mock-ups I did a while ago before a logo had been decided on, not really too keen on them anymore. .