Group Work

Document Sample
Group Work Powered By Docstoc
					ANNOTATED SCREENSHOTS

We wanted to create a sleek cutting edge website that had a good design but
still was accessible and usable to all users. I will discuss all of the aspects of the
website going each section of the website talking about ideas and the reasoning
behind them.

Header & Footer

The header and footer are some of the most important elements within a
website, edgfurn’s are of even greater importance because the header contains
the main navigation and the footer contains a sub navigation.

Header




Logo and Navigation (Normal & Hover states)




Edgefurn’s header consists of the logo and the navigation. The logo needed to
stand out but remain sleek and professional. We decided to keep the logo as a
plain text, being mostly white with a silver gradient and dark tight drop
shadowing. Having the white text meant that it stood out against the dark
background of the header.

The navigation is a very important part of any site and we wanted to make as
easy as possible for the user to navigate the site and to get to were they want to
be as quick and easy as possible. We decided to split the site into the main five
departments and have a link to each as the main navigation for ease of use.

The navigation is simply large, readable white text. Each word is given a large
margin and a dark background hover state. This makes it easy for users with
eyesight problems to view the site while still being aesthetically pleasing.

When the user is a departments page the corresponding link in the navigation is
stays highlighted informing the user as to what page they are on.
Footer

The footer is often a overlooked element in a website even though it is an
important part of any website. In edgefurn’s case it is a vital element, it contains
the sub navigation to the site. It again contains the links to the department but it
also has other links to about us pages and helpful guides etc. We have split the
links into three categories for ease of use. We have also split each of the links
into alternated blocks to make them stand out.




Home Page

The main element of the home page is the media/advert slider, this displays the
latest deals and offers to the customer. We wanted this to stand out from the
rest of the page and really catch the customer’s eye, thus hopefully increasing
sales.

The advert is brightly coloured with large text to stand out to the customer. Each
slide is a different colour to allow the customer to differentiate between each
advert.




                           Advert Navigation Buttons
The user navigates through each advert using either the forward and back
buttons located on the left and right of the advert, or using the direct links
located at the bottom.




For usability each button has a normal and selected state, this helps users
understand which deal/offer they are looking at.

Example of alternative advert




This advert has a bright purple background that stands out on the white
background, the large title shows the user exactly what edgefurn are offering
and the large pictures of the sofas and price show exactly what is being sold and
for what price.
Product Search




The product search page is where the user refines the sofa they are looking for.
When they click one of the department links in the main navigation they will be
taken to this page with appropriate basic search properties. In this case we have
clicked on Living Room.
At the top of the page are the department’s bullet points, each department can
be refined to certain products, in this case it is such things as Sofas & Arm
Chairs, Storage, Chairs etc.




Once the user has selected a sub category the type of the selected item is
displayed, in this example the user chose Sofas & Arm Chairs and the sub
category is shown with products such as Fabric Sofas, Leather Sofas etc. Clicking
these bullet points will update the selection of sofas the user sees, they then
have further options to refine their search even more.

The user can define their own price range, they can choose the minimum they
want to pay and the maximum they want to pay. In this example the minimum is
£300 and the maximum is £2,000.




There is also a basket that displays how many products you have bought and the
total cost. The user can checkout from here at any time.
The user can also sort the products by price, either highest to lowest or lowest to
highest depending on their preference.




If the there a lot of products on display the website will only display a certain
amount at once. When there are a lot of pages a page bar will be displayed so
that the user can browse through all the products.

Each product is displayed in its own block; it contains a large clickable image, the
products title, its price and a large button that links to the products page. We
wanted a large image so that the user sees the product clearly while still
browsing all of the products. The simple title and emphasis on the price is to try
and attract the customer to want to view more information about the sofa and
the large button linking to the information is conveniently right next to the
information.
Product Page

The product page is where the user can look at more images of the product,
product details and reccomendations; these are generally other products in the
product set.




The main focal point of the produt page is alternative images. The user can scroll
through the image using the forward and back buttons. We wanted to make
viewing the images as simple as possible, this is because the user will make most
of their decesion based on what the sofa looks like, so it is obvious to provide a
lot of images and to make it as easy as possible to view the images.




Below the product are the reccomended products, these are often products that
relate to the main product, in this example they are the other products in the
set.

They are simply images that contain the title, an image of the product a price.
They link to the products page for ease of use.
Feedback

Group 10

Which test?                      Yes   No                Comments
Visibility of System Status                 Yes, page is highlighted when
Do you know where you are?
Could you navigate away?
                                           selected. Bolder choice of colour.
User control and freedom                    Only method returning is back to
Are actions undoable? Can you
choose different item after                home pages, breadcrumbs would
                                            solve.
viewing it? Selecting it?
Consistency and standards                   Similar layout, menu and colour
Are the pages consistent?
Are headings all the same?                 scheme throughout.
Are the colours consitent? etc
Error prevention
Does the site contain errors?          
Recognition rather than                     Radio buttons show location/item
recall                                      type.
What page are you on? Does
it clearly show the items? The
                                 
item catergory?
Flexibility and efficiency of               Simple navigation
use
Is the site easy to use?
                                 
Aesthetic and minimalist                    Sleek look throughout
design
Does it look good?               
Easy to read text?
Help users recognize,                       No error/error feedback
diagnose, and recover
from errors
Are there good error                   
messages? Does the website
“fall over”?
Help and documentation                      Yes
Is the buying process easy to
find/do?
                                 
Group 6

Which test?                      Yes   No                Comments
Visibility of System Status                 Not all navigation worked
Do you know where you are?
Could you navigate away?
                                 
User control and freedom
Are actions undoable? Can you
choose different item after      
viewing it? Selecting it?
Consistency and standards                   Really well laid out & good
Are the pages consistent?
Are headings all the same?                 consistency
Are the colours consitent? etc
Error prevention
Does the site contain errors?          
Recognition rather than                     Living Room
recall
What page are you on? Does
it clearly show the items? The
                                 
item catergory?
Flexibility and efficiency of
use
Is the site easy to use?
                                 
Aesthetic and minimalist                    Very eye catching & looks
design
Does it look good?                         proffesional
Easy to read text?
Help users recognize,
diagnose, and recover
from errors
Are there good error                   
messages? Does the website
“fall over”?
Help and documentation
Is the buying process easy to
find/do?
                                 
No Group Numbers Left

Which test?                      Yes   No                  Comments
Visibility of System Status                 Could see where we were okay. But
Do you know where you are?
Could you navigate away?
                                           was a little to small
User control and freedom
Are actions undoable? Can you
choose different item after      
viewing it? Selecting it?
Consistency and standards                   Similar to other websites out there.
Are the pages consistent?
Are headings all the same?                 What you would expect.
Are the colours consitent? etc
Error prevention
Does the site contain errors?          
Recognition rather than
recall
What page are you on? Does
it clearly show the items? The
                                 
item catergory?
Flexibility and efficiency of
use
Is the site easy to use?
                                 
Aesthetic and minimalist                    Looks nice but would not be to
design                                      accessible as there are so many
Does it look good?
                                            images. Also, would the use of flash
Easy to read text?                         degrade well. Is it necessary. Could
                                            be done with html css using hidden
                                            divs.
Help users recognize,                       No errors
diagnose, and recover
from errors
Are there good error                   
messages? Does the website
“fall over”?
Help and documentation
Is the buying process easy to
find/do?
                                 
Which test?                      Yes   No        Comments
Visibility of System Status
Do you know where you are?
Could you navigate away?
                                 
User control and freedom
Are actions undoable? Can you
choose different item after      
viewing it? Selecting it?
Consistency and standards
Are the pages consistent?
Are headings all the same?       
Are the colours consitent? etc
Error prevention
Does the site contain errors?          
Recognition rather than
recall
What page are you on? Does
it clearly show the items? The
                                 
item catergory?
Flexibility and efficiency of
use
Is the site easy to use?
                                 
Aesthetic and minimalist
design
Does it look good?               
Easy to read text?
Help users recognize,
diagnose, and recover
from errors
Are there good error                   
messages? Does the website
“fall over”?
Help and documentation
Is the buying process easy to
find/do?
                                 

Comments: add some accessibility features, i.e font size, colour.
Feedback Summary

Visibility of System Status

Users were able to see where they were on the website, they thought the
navigation was good but the font size needed to be bigger and the hover colour
needed to be darker or the header lighter.

User control and freedom

Users mostly thought that the control and freedom was good although some
thought adding breadcrumb navigation would benefit them.

Consistency and standards

Users all thought that the consistency and standards were good throughout the
site.

Error prevention

The site contained no error prevention.

Recognition rather than recall

Users mostly agreed that they could tell which page they were on thus not
having to “remember” where they were. Users thought radio buttons were good
and showed exactly what items they were looking at.

Flexibility and efficiency of use

All users agreed the site was easy to use and navigate.

Aesthetic and minimalist design

Users all agreed that the design was aesthetically pleasing and was a good
design. One user commented that the use of images would not be totally
accessible and that the flash could be changed as it too would not be accessible.

Help and documentation

All users agreed that the website helped them through the website, be it through
helpful titling, page names etc.
Changes that could be made?

Having feedback from the users allows us to make changes for the better.
Getting feedback from a lot of users allows us to make better decisions as we
get a larger scope of opinion on what is good and bad.

If we were to do the project again there would be some changes made in mostly
every aspect of the website, not a complete change but tweaks to provide a
better user experience.

Visibility of System Status

The navigation colours would be changed to allow users to see the links more
clearly. The navigation background could be changed to a darker colour so that
the text stood out more. Users also wanted the hover colour to be darker, this
would again allow the user to see the link being hovered over more clearly.

User control and freedom

From the feedback given it was clear that the user knew where they was, what
page, what item they were looking at but they wanted to be able to see where
they had come from. Implementing a breadcrumb navigation would allow the
users to not only see what item, they could go back to the main category etc.
This would give them a lot more control.

Consistency and standards

Users though that the site was consistent throughout so there isn’t anything to
change apart from carrying on the consistency into other pages.

Error prevention

There was no error prevention at all in the site as it was still only a non working
prototype. If the site was to become functional we would error control in place to
stop the website falling over and giving out technical error messages. The
messages would be a friendly message given to the users and the technical be
placed in a log for the administrator to look at.

Recognition rather than recall

Users thought that the site showed them where they were on the website and
did not need to remember anything. One point to improve on this would be to
include the breadcrumb navigation as mentioned earlier.
Aesthetic and minimalist design

Although the design was good there were some accessibility issues that were
raised. One is the use of images in the navigation and in some of the content.
Changing the navigation to pure html and css would improve the accessibility but
degrade the aesthetics of the site. One way to overcome this would be to make
the navigation with images as accessible as possible and test several different
approaches.

The use of flash was also commented on; using flash creates some accessibility
problems for user using screen readers etc. Flash is becoming better at providing
accessibility but again it would a while to get right. Another option would be to
create it using html/css/JavaScript. It would work basically the same and provide
better accessibility; this would be a better option if we were to do the site again.

Help and documentation

There were no problems with the help provided on the website so there is
nothing to drastically change, but we would provide more help such as tool tips
and better descriptions of what each category offers etc.

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:4
posted:3/19/2011
language:English
pages:14
Lingjuan Ma Lingjuan Ma
About