Transcript lecture 30.pptx

E-Marketing
Lecture 30
Site Design
Instructor: Hanniya Abid
Assistant Professor
COMSATS Institute of Information Technology
Objectives
By the end of this lecture you will:
 Know what makes an excellent web site
 Be able to review the components of a site
Introduction to web site design
 Web site design = Function + Content +
Form
+
Organization + Interaction
 Combining these elements web site design presents a challenge
few have mastered since success requires a range of skills.
Companies need to harness internal skills and/or use specialist
agencies on all of the success factors for web site design which
we will review.
Aesthetics
Aesthetics = Graphics + Colour + Style + Layout and Typography
 Effective web site design includes both form and function.
 Form means the aesthetics created by the visual design and
function means interaction, navigation and structure.
 A site with powerful aesthetic appeal can help communicate a
brand ’ s essential values. The use of graphics, colour, style, layout
and typography create aesthetics. Together these create a
personality for the site.
Aesthetics
 Site Personality
Words we could use to describe site personality are just as for
people: formal, fun or engaging, entertaining or professional
and serious. These should be consistent with brand. Emotional
response testing can be completed by comparing well-known
sites in a category against existing or proposed site sections as
part of user-centred design.
Figure 6.13 Cisco B2B site – networking products ( www.cisco.com )
Figure 6.14 Egg B2C site – financial products ( www.egg.com )
 Contrast and think about how their personality and
emotional response will be consistent with their
audience.
 Note that since the first edition, the two sites have
become more similar with less use of imagery on the Egg
site and more on the Cisco site.
 This is part of a process that has been referred to as ‘web
site undersign’. Increased use of text at the expense of
graphics has been driven by a wish to improve usability,
accessibility and search engine optimization.
Aesthetics
 However, with increased broadband usage, sites like Cisco are
making more use of rich media in a hybrid design which has
Flash elements in the main container on the home page and
use of video and audio within its interaction network.
 Note how both sites use the right sidebar for their navigation.
This is unconventional, but will have the benefit that
promotions in the centre and left of screen will be viewed
since this is where visitors naturally look.
Aesthetics
 Site Style
Some sites are information intensive and other sites are
graphics intensive.
Information intensive sites may appear cluttered because of
the amount of text blocks, but the intention is to make best
use of screen real estate and project an image of information
depth and value to the visitor.
Retail sites often fall into this category..
Aesthetics
 Tests by Amazon have shown that they generate best
average order value with a design with many
containers in left and right sidebars and with the
option to scroll several times – there is simply more
opportunity to connect a diverse audiences with
relevant products and promotions as they scan and
scroll.
Aesthetics
 With graphics-intensive sites there is relatively little text;
graphics and animations are used to create an
impression. FMCG brand sites often use this approach
with an introductory graphical screen or splash screen.
Aesthetics
 What are the Design Constraints?
There are many design constraints or challenges under which
web designers operate. Unfortunately the list of constraints is
long and sometimes neglected, to disastrous effect:
1 Modems and download time. .
Good designers optimize graphics for fast downloading and
then test using a slow modem across phone lines. Remember
the top sites download in less than a second.
Also remember the eight second rule of thumb that shows
the majority of initial visitors to a site will not hang around to
wait for it to download if it takes longer than this.
Aesthetics
2 Screen resolution. Today a relatively small proportion of
users have lower screen resolutions of 640 * 480 or 800 +
600 pixels; the majority have 1024 + 768 pixels or greater.
But if designers use resolutions much greater than the average
user, the screens may be difficult to read for the majority.
Fluid designs may be best for retail sites where the design
maximizes the space on the screen – fitting more above the
fold on higher screen resolutions. However designers of brand
sites often prefer fixed designs where they have more control
over the visuals. Some site designs such as Kelkoo give users
the choice.
Aesthetics
3
Number of colors. Some users have monitors capable of
displaying 16 million colors giving photo-realism while
others may only have the PC to set up to display 256 colors.
Aesthetics
4 Browsers. Different types of web browsers such as Microsoft
Internet Explorer, Mozilla Firefox and Apple Safari and different
versions of browsers such as version 6.0 or 7.0 may display graphics
or text slightly differently. An e-commerce site tested under one
browser may fail completely under another. Make sure your
designers test their designs against different versions of web
browsers using a tool like Browser cam ( www.browsercam.com ).
Many don’t but should!
5 Plug-ins and download time. If the site requires plug-ins that the
user doesn ’t have you will be cutting down the size of your audience
by the number of people who are unable or unprepared to download
these plug-ins. Only use standard plug-ins such as Macromedia Flash
or Windows Media Player which are pre-installed on PCs.
Aesthetics
6 Font sizes. Choosing large fonts on some sites causes unsightly overlap
between the different design elements. The facility for the user to
change font size is required for accessibility, so test tolerance of a
design for text resizing.
7 Platform. Sites are increasingly viewed via mobile phones or handheld
devices like the Play Station Plus. Different stylesheets can be
provided for different platforms or view modes such as printing or
without images. But effectively, web pages have to be repurposed for
mobile use.
 As a result of these constraints, design of web sites is a
constant compromise between what looks visually appealing
and modern and what works for the older browsers, with
slower modems,
 Visual Design
As the e-marketing insight box below shows, first
impressions are important whether it ’ s meeting in the real
world or via a web site. The visual design of a site is
important to establishing trust and sets the tone for the
future experience.
Aesthetics
The biggest error with visual design is getting the balance
wrong. Designers need to create a balanced visual design
which is visually appealing, but also works for accessibility,
usability, persuasion and branding!
One way to help achieve this is to use different parts of the
screen to achieve these elements. It used to be said by Jakob
Nielsen himself that ‘Flash is 99% bad, but it is increasingly
common to use Flash elements to engage an audience and to
show the brand experience’
Aesthetics
 Take a look at sites from chocolate brand
www.divinechocolate.com, Business software companies like
www.salesforce.com or www.microstrategy.com which use a
Flash banner, or PR company Ketchum (www.ketchum.com)
which has an overlay of a team member literally engaging the
audience. However, using a site which is 100% Flash is still
rarely a good idea since there is little content for search
engines to crawl except for niche entertainment sites such as
games.
Aesthetics
 Color
The combination of colors used is important since they create a
feeling about the site and brand. Color schemes need to be right,
i.e.
o Right for a personality which fits the target audience
o Right for a color scheme that fits the brand
o Right for usability and accessibility
Aesthetics
Complementary colors which are opposite each other on the color
wheel need to be used carefully and may cause problems with
accessibility. The primary complementary colors are: red and
green; blue and orange; and yellow and purple.
Contrasting colors which are not necessarily opposite each other
on the color wheel tend to produce a vivid (if not garish) effect.
When considering text on a background color, for accessibility,
high contrast is positive and tinted background boxes are also
useful for highlighting content you want visitors to read such as a
call-to-action
Aesthetics
Another issue to consider is white space (or background
tints). White space can increase the visual appeal of a page
and increase usability. However, it is again a balance since
the site visitor will need to scroll down more for content.
Aesthetics
 Typography
The power of typography in adding to the visual appeal and persuasive
power of a website is often underestimated.
Checklist For Excellence InWeb Typography
 1 Never use underline in body text as a reader will think it ’ s a
hyperlink.
 2 Avoid extensive use of italics as it is difficult to read on screen, but
they can add variety.
 3 Agree a standard for capitalization of headlines and link text.
Generally, sentence case: ‘Amazing new product released ’ is best
since it is most scannable. Title case ‘Amazing New Product released ’
and all caps is ugly (and more difficult for readers to scan). However,
all caps can be attention grabbing if selectively used.
Aesthetics
 4 Headlines longer than three or four words may work best for SEO
purposes, so ensure font type size is not too large to support this or
allow the design to support wrapping or sub-headlines.
 5 Remember that many web browser users will increase their type
sizes, so check that the design renders gracefully as type is enlarged (at
least by a small amount).
 6 The difference between heading point sizes has a distinctive effective
on design. Use a small difference between them for a smooth effect
and a large difference for a more distinct design.
Aesthetics
 7 Where possible, avoid pages where the text content stretches across
the full width of the browser, especially in fluid layout designs.
Splitting the content into columns will vastly increase readability and
is more in line with how people read articles and content in
newspapers and magazines
 8 Standard fonts should be specified, which allows a
designer/developer to specify the font order in which the web
browser should try and render the size.
Page Design
Page layouts are implemented within Content Management
Systems as page templates. Typically the design will be more
effective if there is a different page template for different site sections
which have different objectives. But it is necessary for different layouts
to be consistent, so following throughout a website for consistency are
usually:
• Company name and logo for identity (this should link to
homepage).
• Menu (and submenus) for navigation.
• Footer for reference to copyright and privacy information (usually
in small text).
• Page title for content, e.g. product information.
Page Design
 A good page template design will achieve:
• An aesthetic, visually pleasing layout
• Clear emphasis of different content types
• Visual hierarchy showing relative importance of different
content through size
• Prioritization of marketing messages and calls-to-action for
different audiences and products for persuasion purposes
• Clear navigation options to a range of content, services and
visitor engagement devices.
Page Design
 Wireframes are used by web designers to indicate the eventual layout
for web page templates by showing where navigation elements and
different types of content will appear on the page.
 The wireframe is so called because it just consists of an outline of the
page with the ‘wires ’ of content separating different areas of content
or navigation shown by white space.
 Wireframes are essential for agencies and clients to discuss the way a
web site will be laid out without getting distracted by color, style or
messaging issues which should be covered separately as a creative
planning activity.
Figure 6.16 Example wireframe.
Page Design
Wodtke (2002) describes a wireframe (sometimes known as a
schematic) as:
‘a basic outline of an individual page, drawn to indicate
the elements of a page, their relationships, and their
relative importance ’
Page Design
 As well as the position of navigation, wireframes should
also consider announcements or special offers, which can
be more effective if they occupy a consistent position on
screen. Examples include: links to product and service
information; special offers or promotions; incentives to
register; contact phone numbers; company news and
PR.
 The limited space on a page requires: concise writing
(more so than brochures); chunking or breaking text
into units of five to six lines at most; use of lists with
headline text in a larger font; generally never including
too much on a single page.
Figure 6.17 Example eyetracking
Copywriting
 Copywriting for the web is an evolving art form, but many of the
rules for good copywriting are as for any media. This section
explores the basic rules.
 Possibly the most important rule is don ’t assume your visitors have
full knowledge of your company, its products and services.
Copywriting
 A simple mnemonic for web copywriting is CRABS; aim for
Chunking, Relevance, Accuracy, Brevity and Scannability.
 Chunking, Brevity and Scannability go together. Many
visitors briefly scan pages looking for headlines, followed by
short, brief, digestible chunky paragraphs of five or six lines
maximum which can be hyperlinked to further detail for
those that want to ‘drill down ’ for more information. Other
visitors scan, move on and quickly find what they need
elsewhere on the site.
Copywriting
 In addition to chunky, brief and scannable, the copy must be
relevant and useful to the target audience. This is where ‘content
is king’ becomes ‘context is king ’ – relevant information
available at the right time in the right place. The copy must satisfy
their needs and not yours, i.e. start with benefits instead of
features. You can create benefits out of features by adding the
three magic words:‘which means that . . . ’ after a feature.
 Remember that you are copywriting not only for your human
audience, but also the search engine spiders or robots which read
(index) the words you use in your copy. So words used should
include key phrases that users are likely to search on within
search engines.
Copywriting
 And as with any genuinely good writing, it must be accurate to win
credibility and loyalty in the long term. Don ’t promise what you
cannot deliver. Do not cheat customers. It kills repeat business as well
as new, referred business.
 So, use CRABS (chunky, relevant, accurate, brief and scannable) to
write good web copy. And remember, don ’t leave the best until last
because, first, readers who scan will miss it, and, second, some
readers won ’ t scroll.
 And last but not least – don ’t forget nomenclature, or names, used
for headings and sign-posting. Different nametags and signposts can
give a very different feeling. Eyetracking research ( www.poynter.org
) suggests that on the web, customers ’ eyes are drawn first to the
headings rather than the graphics. Test different headings to see which
give the best click through.
Navigation and structure
Ease of use = Structure + Navigation + Page layout + Interaction
 Ease of use is number two of the key factors that make customers
return to web sites. To achieve ease of use we need to structure our
site so that users can easily navigate. Navigation describes how users
move from one page to the next using navigational tools such as
menus and hyperlinks. We also need a suitable page layout that makes
it easy for visitors to find information on the page and the right types
and amounts of interactivity, as described in separate sections.
 This section examines structure and navigation to ensure that first, all
sections of your web site are easily accessible, and second, visitors
enjoy the satisfying experience of finding what they want.
Navigation and structure
 Site Structure
 Web site structure is the big picture of how content is grouped
and how different pages relate to others. Without a planned
structure, a site can soon end up as a ‘spaghetti site’ . This may
leave visitors dazed, disorientated, confused and frustrated. If
they cannot achieve flow control , they may not return.
 A planned site structure with clear hierarchies will allow the
user to build up a ‘mental map ’ of the site. As we will see later,
this can be reinforced by clear sign-posting and labeling.
Navigation and structure
 There is a formal process that professional site designers use to
create an effective structure known as an information architecture.
Rosenfeld and Morville (2002) point out the importance of
designing an information architecture when they say:
‘ It is important to recognize that every information system, be
it a book or an intranet, has an information architecture.“Well
developed ” is the key here, as most sites don ’t have a planned
information architecture at all.They are analogous to buildings
that weren‘t architected in advance’ .
Navigation and structure
They describe an information architecture as:
1 ‘The combination of organization, labeling and navigation
schemes within an information system.
2 The structural design of an information space to facilitate task
completion and intuitive access to content.
3 The art and science of structuring and classifying web sites and
intranets to help people find and manage information.
4 An emerging discipline and community of practice focused on
bring principles of design and architecture to the digital
landscape’.
Rosenfeld and Morville (2002)
Navigation and structure
 They are often thought of, and referred to, as site maps
or site structure diagrams and have much in common
with these, except that they are used as a design device
clearly showing grouping of information and linkages
between pages, rather than a page on the web site used
to assist navigation.
 The depth of the site is one aspect of creating an
information architecture. This is important since it will
determine the number of clicks a user has to make to
find the information they need. The balance is between
shallow and deep.
Navigation and structure
 Achieving Flow
 Good web designers try to enable ‘ flow ’ . Flow is a
concept that describes the degree of control or power a
consumer has over the site. If customers can easily find the
information they want through clicking on menu options
and graphics they will feel in control and this will be an
enjoyable experience. We can use buttons and hyperlinks
within copy to help achieve flow, but this is often neglected.
Navigation and structure
 Site designers need to provide a choice for site visitors in
browse mode or search mode. Many retail sites now use
faceted navigation. Retail sites also invest in search
analytics to assess and improve the conversion rates from
searches to sale. They will assess, for example, how many
searches result in zero results following different types of
product searches.
Navigation and structure
 Navigation Rules
Here are three navigation rules for a navigational template that is
used throughout the site:
1 Keep it simple. Not too many buttons. Psychologists who
have analyzed the behavior of computer users in labs say the
magic number is seven (or fewer). Any more than seven
and the user will find it difficult to choose. Seven or less
keeps it simple.You can use nesting or pop-up menus to
avoid the need for too many menus or too many menu
items. Simplicity is necessary to avoid confusing the user.
Navigation and structure
2 Be consistent. Consistency is helpful since we want to
avoid a user seeing different menus and page layouts
as they move around the site. For example, the menu
structures for customer support should be similar to
those for when browsing product information.
3 Signposts . Signposts help visitors by telling them
where they are within the web site.
Navigation and structure
 Navigation Types
Most web sites have several types of navigation. These include:
 Global navigation – These are site-wide navigation schemes.
Examples for a B2B site are: Products, Solutions, Clients,
Support. They often occur at the top or bottom of a site, but
may occur down the side.
 Local navigation – More detailed navigation to find elements
in an immediate area – for example, Products may be
broken down further.
Navigation and structure
 Contextual navigation – Navigation specific to a page
or group of pages which may be in the body copy or in
slots such as Related products.
 Breadcrumbs – Used to indicate where the visitor is on
the site. As you navigate around this site you will see,
just below the top menu, a list of pages showing where
you are and allowing you to easily visit a higher point
in the structure. These are so named from the trail of
breadcrumbs Hansel and Gretel left in the forest to go
back to their house.
Navigation and structure
On a customer-facing web site, there are a number of alternative
approaches to navigation. The most important are:
 Product-based
 Organization-structure based
 Visit-based: first time/repeat visitor
 Task-based or need related
 Relationship-based: customer/non-customer
 Customer type based
 Company need
– calls-to-action
– campaign related
– branding.
Interaction
 Interaction helps to engage web site visitors by giving them
some two-way communications plus greater involvement and
control over their web experience. This section explores the
types and benefits of interactions.
 Different Types of Interaction
We can identify several basic interactive mechanisms:
• A simple mouse click on an image or an arrow to find more
information or to look at the next item in a sequence (mouse
event).
• Placing the mouse over a text menu option may give feedback
by changing the color of the text (mouse rollover).
Interaction
• Selection from drop-down boxes.
• Drag and drop.
• Typing requirements into a box and then searching
through a catalogue.
• Slider, same choice: small, medium or large.
Interaction
 Remember also that there are many other types of interactions
that add value to the user experience such as simulations,
calculators, crosswords, quizzes, helpful information and
turbine optimizers.
 Good interactions reinforce brand values – like Fedex ’s
delivery update service. In addition to all of these automated
interactions, web sites can also have real staff interaction, e.g.
where call-back technology invites a customer to request
phone contact, live chat sessions or co-browsing involving a
real-time web dialogue.
Interaction
 Using Interactivity to Move Customers Through the Buying Process
Now consider how interactions and two-way communications can help
move a customer through several stages of the buying process,
1 Learning. Help customers learn about you – your company, your
products, features and their benefits. Interaction helps a customer to
learn because involvement deepens the learning process. Interactive
techniques include:
o Simulations or interactive demonstrations of products, e.g. the
National Instruments Product advisor ( www.ni.com/advisor ).
o Animations that explain different features or benefits of a product
(e.g. www.nike.com ).
o Tailoring – by product category or segment, e.g. Dell asks users
to state whether they are a small, medium or large company. The
site tailors itself accordingly ( www.dell.com ).
Interaction
o Selection choice – online toy e-tailers allow selection by age
of child, by type of toy and by brand (for example,
www.fisherprice.com ).
o Downloads of detailed technical sheets often presented as
PDF files, e.g. Business-to business resources libraries with
whitepapers to support different people involved in the
buying decision for a complex product.
o Testimonials or case studies, e.g. www.accenture.com has
client successes for each of its offerings.
o ‘ E-mail a friend ’ facility. This can be used to alert a
colleague or make them aware of a product or service.
Interaction
2 Deciding. There are many kinds of interactions that can help
customers to choose your product. Here ’ s a small selection:
o An interactive product selector or sales adviser. This will
help customers choose between different options if it is welldesigned.
o Call-back facility. Human advice may be helpful in guiding
the user through selection. To achieve this, some sites include
call-back facilities where a customer types in their name and
phone number and specifies a time when the company
should ring back.
Interaction
 Chat facility. Some companies also include chat facilities
where a human customer service representative types an
immediate response to the customers ’ queries. This
approach is more efficient than bouncing e-mails
between suppliers and customers over a long period.
LivePerson ( www.liveperson.com ) illustrates this type
of interaction. Co-browsing or screen-sharing can also
help.
Interaction
o On-site search engines. These help customers find what they
’re looking for quickly. They are popular features and some
companies have improved conversion to sale greatly by
improving the clarity of the results they return. Site maps are a
related feature.
o ‘E-mail a friend ’ facility. This can be used to alert a colleague
or friend or to help accelerate a shared decision on a purchase
within an organization. Offering an incentive to ‘buy now’.
Interaction
3 Buying. Leading the customer through the purchase
can help break down reluctance to buy online or
shopping cart abandonment. Established e-tailers use
techniques such as:
o Leading the customer through the purchase in
clearly numbered stages.
o Minimizing the number of stages.
Interaction
o Understanding purchasing objections and information needs
at each stage of the checkout
o process and providing appropriate information within the
checkout area.
o Location selection tool – find your nearest dealer by typing
in a postal or ZIP code.
o Voucher systems that are printed out on a customer ’ s
printer, then redeemed in store.
Interaction
o Including a phone number on site to encourage
purchase by phone where the customer prefers this.
o Detailed content to reassure about security and
privacy.
This remains an important, but hugely challenging, area
despite the use of techniques such as usability analysis and
web analytics.
Interaction
4 After-sales support . After-sales support techniques for interactive
support include:
o Searchable FAQs – easyJet ( www.easyJet.com ) have worked at
improving their FAQs by analyzing online and offline customer
service queries and then presenting FAQs when the customer selects
the ‘Contact us ’ option.
o Interactive support tools – Epson allow customers to diagnose their
problems with printers by prompting them to select their problem
from pre-configured choices and then suggesting solutions (
www.epson.co.uk/support ).
Interaction
o Customer feedback – After customers have used the
interactive support tool they have the option of
interacting via a questionnaire on how useful the support
was.
o The methods used for product selection, namely callback, chat or community discussion forums, can also be
used. Some companies such as Cisco have found that
customers can help solve other customers ’ problems.
Summary
 Web site design = Function + Content + Form +
Organization + Interaction
One last thing for you to do…
 Find out about Google’s products related to website
development