Tuesday, 11 December 2007

Structure of topshop.com

The structure of a website is a very important factor. If a website is well structures, it is easier to use as the layout it clear. Topshop.com is a very well stuctured transactional website, as soon as you open up the home page it is clear how to find what you are looking for. Below is a screen shot of the home page:










As you can see, to the left hand side of the page there are product category links in a frame. This makes them stand out to a customer, so they know where to begin their shopping. Another good structure method of this page is that when you click on a category, a list will drop down providing you with a more advanced search in that category:




At the top toolbar there is a search facility, if you look at the picture below, you can see that it gives you a quick guideline on what to type in:







This helps the customer to find exactly what they want if they have something specific they want to buy. Below is an example of a search i did:






Step One - Type in specific product:











Here i have type in a specific dress i would like to look at. Then i clicked on go.







Step Two - The Search Results:





















The Search had been successful, it has given me three items related to my search and the first dress is the one i was looking for. Now if i wanted I could see if it is available in my size and make a purchase.
There are links throughout the website, so that you can always make you way back to the homepage, or parts that you have previously visited. If we take a look at the second half of the home page, there are lots of advertisements shown for topshop, each are linked up to relevant parts of the website, which is a good structure technique, making the website still easy to use. Below is a picture of the second half of the home page:

















Here is a part of the website which shows all the shoes that are available online with topshop:


Here I have selected to look at high heels, as you can see each item is shown with a picture, a short description and a price. They are displayed in a table format which makes each of them stand out. The left hand frame and top toolbar remain the same throughout the website, so that at any time you can go back to a different part of the website. Topshop make sure that every link made is relevant to the subject so that the customer doesnt get frustrated when it comes to finding what they want. The customers want a pleasant shopping experience, so if the site is well layed out then they can shop with ease.



Accessibilty of Topshop.com:


This site has been designed and constructed to the W3C's WAI accessibility AA rating. This means that the site can be navigated using the tab button and by pre-defined access keys.
The site can also be read by screen readers, Braille displays and other access devices. There is a list of access devices available for people with different impairments further down the page.
You can also find more information on by following the web accessibilty links shown at the bottom of the page.




Access Keys
You can access the key features of topshop.com without the need for a mouse using the following access keys:
C - Jump to main Content
N - Jump to primary Navigation
S - Skip navigation
1 - Home page
4 - Search



To activate the acces keys, just press Alt+ Access key.



Images
All content images on this site are provided with descriptive ALT attributes.
Where images contain important information, such as graphs and charts, alternative information is provided in the form of inline descriptions of tabular data.







Navigation
All pages contain a link to the home page (access key 1) and search box (access key 4).
Jump to main content (access key C) is available to users of screen readers and speech browsers, to bypass graphical and navigational elements - such as the logo and header components - and jump directly to the main navigation.
Jump to primary Navigation (access key S) is available to users of screen readers and speech browsers, to bypass graphical elements - such as the logo and header components - and jump directly to the main navigation.
Skip navigation (access key S) is available to users of screen readers and speech browsers, to bypass repeated page elements - such as the top and side navigation links - and jump directly to the page content.








The fact that topshop.com is easy to use for all kinds of people is a strong advantage. The devices listed above are used by people with certain disabilites, and topshop.com is user friendly for all of them. The website is very easy to use especially with the navigation aids and access keys.



If you dont know the URL for topshop, then you can easily seach for it through the search engine 'GOOGLE.COM' Below is an example of a search i did on google for the topshop website:







The first result I got was the exact home page of topshop.com. This shows that the site is easily accessible through other websites. To prove this I shall use another search engine 'yahoo.co.uk':
Yet again the first result is topshop's home page.

No comments: