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.