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.