ONLINE CUSTOMER EXPERIENCE

Module IX
Introduction
• Few years managing digital experience was straightforward-
website + email
• Nowadays its more complex- to manage multiple touchpoints-
paid,owned and earned media
• Effective online presence through the website- key part of internet
marketing
• effective website- relevant content, and deliver results through the
website
• website: is an interactive experience
• important to deliver an online brand promise to the customers
Digital customer experience
• A brands total digital experience includes its presence on different platforms
incl desktop, website,mobile site and apps, ads on gaming platforms and
digital instore
• Quality of digital experience is based on combination of rational and
emotional factors of using the brand online and influences its perception
• Example : Page speed has been a large focus for Amazon.com. The time it
takes for a webpage to load can have a large impact on user experience and
sales. After analyzing the ratio of sales to website performance, Amazon
discovered that for every 100ms of page load time there was a 1% decrease in
sales. So how fast does your website need to be? Many usability experts
propose that the ideal page load time is 2 seconds or less
• CRO- conversion rate optimization is being used to contribute to online
experience
• CRO- entails improving the commercial returns from a transactional site
through increasing conversion to key goals like- sales, quotes,bookings,leads .
Combines customer and competitor research using web analytics
 Online customer experience pyramid – success factors

1. Emotional connection
2. Online experience
3. Responsive service nature
4. Trust
5. Fulfilment
Elements of creating effective online experiences
• Site design = Function + Content + Form + Organization + Interaction
• Accessibility
• User-centred design and usability
• Information architecture and findability
• Search Engine Optimization (SEO)
• Web standards
• Persuasion to deliver commercial results
• Visual design
• Digital analytics
• Legal requirements
• Digital marketing planning and improvement process
Elements
• legal requirements
• accessible site design should support visually impaired
site users and disabled users
Accessibility • Helps users accessing the site with different browsers
,using different devices
• Indirectly helps in SEO

• The extent to which a product can be used by specified users to achieve

User centred specified goals/tasks with effectiveness, efficiency and satisfaction in a
design/usability specified context of use
• Uses research to identify personas, customer journeys and relevant content

Information • incl analysis and design to create structured labelling of content in headings
and navigation to improve findability in std navigation and on site search
architecture/findability
Elements

• is required to enable robots to crawl the

SEO content

Webstandards • Complying with standards to ensure consistency in coding and

display through different browsers as required by webstandards

• design – emphasize content and customer journeys to meet its

CRO.
Persuasion • Should prioritize valuable content .
• eg pepperfry store locator
 Elements
• brand experience should be memorable and
Visual design fit with customer expectations from the
brand

Digital • Analysis of cross device and cross channel journey can help
analytics improve navigation and conversion to different site goals

Legal • should comply with laws

requirements
Digital marketing planning • Should fit with the goals and integrate with other sales
and improvement process channels
PLANNING WEBSITE DESIGN AND
REDESIGN
 Process of Website
Development
Main Site Development Key Support Activities
Activities
Marketing Register domain
Initiatio objectives
n
Process Prepare brief
es
Select agency Select ISP

Market research

Communication
Prototype Plan
Develop design
ment
Start promotion
Process Develop content
es

Test and revise

Launch site Main promotion

Example of of Website Development
 Planning website design & build
• Pre development task : domain name registration, ISP, brief of aims and
objectives, in house or outsourcing
• Analysis and design : classification of business objectives, market research to
identify audience, customer personas, user journey, information
architecture of different content types & prototyping different functional &
visual designs
• Content development & testing : Writing the html pages, graphics, database
integration, usability and performance testing
• Publishing /launching the site
• Pre launch promotions or communications : SEO, PR promotions
• Ongoing promotions : PPC, discounts
 Involvement in website project
• Site sponsors : Senior managers who are paying for the website
• Site owners : Marketing managers, Ecommerce managers
• Project manager : planning and coordination of project
• Site designer : defines the look and feel of the project
• Content developer : who develops the content of the site
• Webmaster : technical role, manages the quality of the website
• Digital experience analyst- identify site effectiveness and run CRO experiments
• Stakeholders : Impact of website on other member of the organizations such as
employees
Website Prototyping
• Prototypes are trial versions of a
website which are gradually refined
thro an iterative process to reach the
final version
• Wireframe: a simplified outline of a
single page template used to define
new layout or functionality for a part
of website for discussion, iteration
and then a brief for implementation
• initial –paper protoypes-
wireframe/screen layout with key
visuals of static pages
• then HTML code is developed and
reviewed by the resp.ppl
• helps in faster design time
4 stages

• Analysis : understanding the requirement of the audience and the

requirements of the business as defined by the strategy
• Design : specifying different features of the site that will fulfil the
requirements of the users and the business as defined by the analysis
• Develop : creation of the web pages and dynamic content of the website
• Test and review : Structured checks are conducted to ensure the web site is
as per the original plan
• Decide for hard launch/soft launch
• Hard launch: site launched once fully complete with full promotional effort
• Soft launch: a trial version with limited publicity
Initiation of website project
• Management and staff commitment to the project
• Objectives are clearly defined
• Cost and benefits are reviewed in order that the appropriate amount of
investment in the site occurs
• Project will follow a structured path with clearly defined responsibilities for
different aspects such as project management, analysis, promotion
• Implementation phase of project will ensure that important aspect of
project such as testing and promotion are not skimped
 Domain name registration

• Url : Uniform Resource locator : A web

address used to locate a webpage on a
web server
• Domain names are registered using an
ISP or direct with one of the domain
name services such as :
• InterNIC : registration for the .com,
.org and .net domains
• Nominet : registration for the .co.uk
domains
Selecting an ISP(internet service provider)

• Company that provides home or business users with connection to access the internet,
also hosts websites and webservers
• Two important factors : Performance of website and Availability of website
• Performance of website : Speed of website download
• Apart from other factors such as site design and no. of users accessing website the speed
of website also depends on the bandwidth of ISP
• Availability of website is an indication of how easy it is for user to connect to it
• Marketing campaign and ecommerce purchases should not get impacted due to website
failures
• Failure of ISP can lead to website overloads and crashes
Researching site user’s requirement
• Analysis involves different mkt research techniques to find the needs of the target audiences
• These needs – can be used to drive design and content of the website
• Analysis and design overlap and try to ans the foll questions
• Who are the audiences for the site? (personas)
• Why should they use the site? (decide the appeal)
• What should the content of the site be? Which services will be provided? (value proposition)
• How will the content of the site be structured? (information architecture)
• How will the navigation around the site occur? (findability)
• What are the main marketing outcomes we want the site to deliver? (main persuasion
outcomes, CRO)
• Can be achieved through focus groups, questionnaires and in depth interviews
User centred design
• A design approach which is based on the research of user characteristics
and needs.
• Web designers need to include- usability, accessibility and persuasion
marketing .
• Persuasion mktg- use design elements such as layout, copy, typography
with promotional messages to encourage site users to follow particular
paths and specific actions rather than giving them complete choice in
navigation (marketing led site design)
Marketing led site design
• Site design elements are developed to achieve customer acquisition,
retention and communication of marketing messages.
- Customer acquisition : appropriate OVP, permission based marketing
tools used
- Customer conversion: engage first time visitors. Should have CTA,
retention offers and fulfilment of offers should be communicated to
avoid attrition
- Customer retention: appropriate incentives, content,customer service
to encourage repeat visits
- Service quality of website
- Branding
 Usability
• Extent to which a product can be used by specified users to achieve specified goals with effectiveness,
efficiency and satisfaction in a specified context of use
• Usability- has 2 key activities- expert reviews and usability testing
• Expert reviews: performed at the beginning of the redesign project to identify problems with the
previous design
• Usability testing- involves :
• Identifying representative users of the site and identifying typical tasks
• Asking them to perform specific tasks such as finding a product or completing an order
• Observing what they do and how they succeed
• Foll user tasks need to completed to be successful
• Effectively – web usability specialists measure task completion, for example only 3 out of 10 visitors to
a website may be able to find a particular piece of information
• Efficiently : Web usability specialists also measure how long it takes to complete a task on-site or the
number of clicks it takes
Different potential audiences for a
website
Customers Vary by Staff Third Parties
New or existing prospects New or existing New or existing
Size of prospect companies Different departments Suppliers
Market type Sales staff for different markets Distributors
Location Location Investors
Members of buying process Media
(decision makers, influencers,
buyers)
Familiarity with using the
website or the company,
products
 Web accessibility
• Allowing all users of website to interact with it regardless of disabilities they
have or web browser/platform they use to access the site
• Web accessibility refers to the inclusive practice of removing barriers that
prevent interaction with, or access to websites, by people with disabilities.
When sites are correctly designed, developed and edited, all users have equal
access to information and functionality.
• An approach to site design intended to accommodate site usage using
different browsers and settings particularly required by the visually impaired
• In many countries it’s mandatory for website to be accessible under the legal
act
• Common accessibility problems
- Images without alt text, misleading use of structural elements of page,
uncaptioned video, tables which are diff to decipher,sites with poor color
contrastExamples of web accessibility: Alt text for images,keyboard
inputs,transcript for audios
Techniques to improve accessibility

• Choose a content management system that supports accessibility

• Use headings correctly to organize the structure of your content
• Include proper alt text for images
• Give your links unique and descriptive names
• Use color with care
• Design your forms for accessibility
• Use tables for tabular data, not for layout
• Ensure that all content can be accessed with the keyboard alone in a
logical way
• Use ARIA (Accessible Rich Internet Applications) roles and landmarks
• Make dynamic content accessible
Example
• Lee is colorblind and encounters barriers when shopping online. He has one of the most common
visual disabilities that affect men: red and green color blindness. Lee frequently shops online and
sometimes encounters problems on websites and with apps where the color contrast of text and
images is not adequate and where color alone is used to indicate required fields and sale prices.
When red and green color combinations are used, Lee cannot distinguish between the two, since
both look brown to him. It is also very difficult for him to make product choices when color swatches
are not labeled with the name of the color.

• Lee has better experiences with online content and apps that use adequate contrast and allow him
to adjust contrast settings in his browser. He is also better able to recognize when information is
required when asterisks are used. Lee can more easily identify the products he would like to
purchase, especially clothing, when the color label names are included in the selection options
rather than color swatches alone.
• Customized fonts and colors - changing the font types, sizes, colors, and spacing to make text easier
to read. Customization involves browser settings and, for more advanced users, cascading style
sheets (CSS) to override the default appearance of web content.
• Color is not used as the only way of conveying information or identifying content;
• Default foreground and background color combinations provide sufficient contrast;
Localisation
• Tailoring website information for
individual countries
• A website may need to support
customers from a range of countries
with
• Different product needs
• Language differences
• Cultural differences
Level of localisation
• Standardised websites (not localised) : a single site serves all customer
requirements (domestic +international)
• Semi localised websites – a single site serves all customers , contact
information available for international customers
• Localised websites : country specific websites with language
translation options
• Highly localised websites: includes other localisation efforts in terms of
time, date, postcode, currency etc eg dell
• Culturally customized websites: websites reflecting complete
immersion in culture of target customer segments .
Reviewing competitor’s websites
• Benchmarking of competitor’s websites is vital in positioning your website
to compete effectively with competitors
• Benchmarking criteria should include those that define the companies
marketing performance in the industry and those that are specific to web
marketing as follows
• Financial performance, Market place performance, Business and revenue
models, Marketing communication about value proposition, Services
offered, Implementation of services such as aesthetics, ease of use,
personalisation, navigation, availability and speed
Integrated design
Web sites must integrate with all other communications tools, both online and offline
Online value distribution and inbound communications
Mixed-mode buying/multichannel behaviour
 4 types of web purchasing decisions by users

Why/when type
What type questions? questions?
- What are your competitive - How do you get to me
advantages? what
- What makes you a I need quickly?
superior choice - Do you offer superior
- What makes you a credible service
company? - Can I customize your
Product/service?
Who type questions?
How type questions?
- How will your product
- What are the details?
make me feel ?
- Whats the fine print
- Who uses your
- How does this work?
product/services
- Who are you?Show me
Your staff/bios
Integrated design
• An integrated database can personalize the experience and make
relevant offers that match the needs of customer types
• A planned user-centred design approach
• Active involvement of users and a clear understanding of user and
task requirements
• Appropriate allocation of function between users and technology
• Iteration of design solutions through prototyping and user review
• Multi-disciplinary design
• Web activities on their own won’t work. isolated web sites are
ineffectual. they need to be integrated at several different levels:
1 .Communications – consistent communications whether online or
offline

2 .Buying modes – marketers must facilitate customer transitions

between online and offline information sources during the buying
process
3.databases – customer databases must be integrated to achieve a
consistent view of the customer, understand intent and lead score in
order to build long-term relationships and trigger email and phone
contact after site interaction.
Integrated design

37
Online value proposition
You need to find a proposition that explains what your organization or site is offering
that:
• Is different from your competitors
• Is not available in the real world
• Makes a difference to your
customers’ lives
The value proposition describes
the total customer experience
with the firm, rather than (being
limited to) that communicated
at the point of sale.
Molineux (2002)
38
Customer orientation

Four stages of research that help achieve customer orientation

Rosenfeld and Morville (2002)
1. Identify different audiences
2. Rank importance of each to the business
3. List the three most important information needs of
each audience
4. Ask representatives of each audience type to develop
their own wish lists

39
Dynamic design and personalization
Personalization helps to Sell, Serve, Speak and Sizzle

• Customer or company name

• Country
• Customer preferences
• Recommendation algorithms
Options for
• News and events
personalization • Viral personalization
• Referrer string
• Location
• Multivariate, real-time, conversion-optimized
personalization

40
Dynamic design and personalization
Personalization helps to Sell, Serve, Speak and Sizzle

• Expanding navigation through synonyms

• Applying faceted navigation or search approaches
Online retail • Featuring the best-selling products prominently
merchandising • Use of bundling
• Use of customer ratings and reviews
• use of product visualization systems

41
Designing the information architecture

• Information architecture is the combination of organization, labelling and

navigation schemes constituting an information system
• Creating a site structure like site map
Components
• Organization Schemes and Structures: How you categorize and structure
information
• Labeling Systems: How you represent information
• Navigation Systems: How users browse or move through information
• Search Systems: How users look for information
Benefits of creating information architecture

• Defined structure and categorisation of information will support usability

• Increase flow on the site like a user’s mental model of where to find the
content- findability
• Search engine optimisation
• Integrating offline communications such as ads or direct mail can be linked
to product or campaign landing page
• Related content can be grouped to measure the effectiveness of a website
as part of design for analysis
Card sorting
• method used to help design or evaluate the information architecture of a site.
• In a card sorting session, participants organize topics into categories that make sense to
them and they may also help you label these groups.
• To conduct a card sort, you can use actual cards, pieces of paper, or one of several online
card-sorting software tools.
Benefits
• Build the structure for your website
• Decide what to put on the homepage
• Label categories and navigation
Card Sorting
• The process of arranging a way of organizing objects on the
website in a consistent manner
• Extremely useful when website is designed from the perspective of
the designer rather than the information user leading to labels,
subject grouping and categories that are not intuitive to the user
• Do the users want to see the information grouped by subject, task,
business or customer groupings or type of information?
• What are the most important items to put on the main menu?
• How many menu items should there be and how deep should it go?
• How similar or different are the needs of the users throughout the
organization?
Card Sorting
• Selected groups of users will be given index cards with the followings written
on them
• Types of documents
• Organizational keywords and concepts
• Document titles
• Description of documents
• Navigation labels
The user groups then may be asked to
• Group together cards that they feel relate to each other
• Select cards that accurately reflect a given topic
• Organize cards in terms of hierarchy from high level terms to low level terms
At the end the analyst finds the most popular terms, descriptions and
relationships and maps the results into a spreadsheet
Blueprint/Sitemaps
• Shows the relationship between pages and other content
components and can be used to portray organization, navigation
and labelling systems
• Often rereferred as site maps or site structure diagrams
• Sitemaps are a hierarchical diagram showing the structure of a
website or application.
• used by User Experience Designers and Information Architects to
define the taxonomy through grouping of related content.
• important step of the user centred process as they ensure content
is in places users would expect to find it.
• used as a reference point for wireframes, functional specifications
and content maps.
Sitemaps
• show how the navigation should be structured
• help identify where content will sit and what needs to be produced
• help show the relationship between different pages
• provide a structure upon which to begin estimates for development
• first tangible deliverable showing what you will be creating
Wireframe
• a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a
website
• Known as ‘Schematics’
• depicts the page layout or arrangement of the website’s content, including interface elements and
navigational systems, and how they work together
• usually lacks typographic style, color, or graphics, main focus lies in functionality, behavior, and
priority of content.
• Blueprint illustrates how the content of website is related and navigated while a wireframe focuses
on individual pages
• Process of reviewing wireframes is referred to as storyboarding
• At the wireframe stage emphasis is not placed on the use of color or graphics which will be
developed in conjunction with the graphic designers and integrated into the site after the wireframe
process
Storyboarding
• the use of static drawings/screenshots of the different parts of a
website to review the design concept with the user groups
• Used to develop the structure – an overall map with individual
pages shown separately.
• Often applied to review creative ideas than formal design
structures
Aim of wireframe
• Integrate consistently available components on the web page eg. Navigation,
search boxes
• Order and group key types of components together
• Develop a design that will focus the user on to core messages and content
• Make correct use of white space to structure the page
• Develop a page structure that can be easily used by other web designers
• Navigation in columns on left, right and at top or bottom
• Header areas and footer areas
• Slots or portlets – these are areas of content such as an article or list of articles
placed in boxes on the screen.
• Slots on homepage may be used to – summarize the online value proposition,
show promotions, recommend related products, feature news, contain ads
Landing page
• Traditional marketing –place for conversion- offline store where purchases
would take place
• Digital world- activated leads should be directed to the firms homepage of
the firms website
• Website-primary conversion tool – webpages with homepage- crucial for
first look and leads to overall navigation for the site
• Landing page/lead capture page/lander- a single webpage customized to
receive and convert visitors on specific objectives from multiple media
channels-search campaigns/social media/emails.
• Should be a natural extension of the advt or link
Definition
• An entrance page to the site when the user clicks on the ad or other
form of link from a referring site
• Can be a home page – typically a landing page is a page with the
messaging focussed on the offer in the ad
• used to maximise conversion rates and brand favourability
Elements of landing page

• Headline –is the first thing users will see-relevant to the link from the email,/ ad, or search term used. Should be
clear
• Image –referred to as a “hero shot,” the image on a landing page depicts what is being marketed or offered.
image is relevant (e.g. if you’re offering a whitepaper, show a graphic of the whitepaper, not a stock photo of a
skyscraper).
• Signs of trust or credibility – Privacy is of the utmost importance to your prospects and customers. Make it clear
on your website that your company is serious about privacy, and people will be more likely to do business with
you.
• Body text – This section is your opportunity to convince prospects, in a clear and concise way, the reasons why
they should engage with you.relevancy of content is imp here Customize the body copy as much as possible by
addressing the industry, function, and/or business challenges of your target audience. Also, keep in mind that
your landing page has a single goal or call to action, so keep all of your copy on track with that objective in mind.
• Call to action – The call to action is what you want the user to do on the landing page, whether that action is
“download,” “submit,” “join today,” or “call now” (to name just a few). While the call to action text is most
frequently on a button graphic to encourage click-throughs, try to weave the same language into the body text
when appropriate, and use hyperlinks that will allow users to respond in this way if they choose.
Difference between landing page and homepage
Home page
• Proactively visited by individuals
• Regular visitors visit out of personal
discovery/wom /other sources
• Direct visitor to relevant content
• Traffic sources- varied
• Full navigation options
• Content is overall
Landing page
• Customized pages within the website
where nurtured leads are redirected for
specific conversion
• Visitors need to be convinced and
provided with takeaway/positive
experience to be converted or revisit
the website again
• Evolving into marketing apps
• Relevant content improves ranking
• Deliver request content
• Traffic sources- for specific campaigns
• Minimal navigation options
• Content is specific to the campaign
Importance of landing pages

• Some pages exhibit lower conversion rates

• Some pages have high bounce rates
• Some pages have visitors spend less time
• Pages not working properly
LPO techniques

• Landing page optimization (LPO) is the process of maximizing conversion

rates from online landing pages
1. Generate response (online lead/call back)- does the page have a
prominent CTA
2. Engages different audience types- use prominent headlines,images
offer to communicate correct information
3. Communicate key messages effectively- OVP,messages,testimonials
and ratings
4. Answer visitor questions – reduce bounce rate and increase conversion
rates – persona matching
5. Showcase range of offers- cross sell opportunities and
recommendations
6. Atrract visitors through SEO
ROI
• Click-through rate/ratio
• Page views
• Cost per click
• Conversion rates
• Overall decrease in sales cycle duration for qualified leads
DESIGNING USER EXPERIENCE
Design phase

• Design- critical to successful website and good user experience- ease of

finding information, graphics, layout, structure and menu choices
• Design phase- defines how the site will work in key areas of website
structure ,navigation and security
• Design prototyping done in two ways- early design- paper based –
mockups drawings-storyboarding
• Dynamic workups- users can select diff menu options- lead to skeleton
pages (without content)
Developing customer oriented content

• Websites have to meet the needs of the intended users – this can be achieved by
following user centred design
• It’s the design based on optimising the user experience acc to all factors like user interface
etc
• it starts with understanding the nature and variation within the user groups-consider
issues like – who are imp users, purpose for visiting the site, frequency ,experience
,nationality, type and use of information ,browsers, use of devices etc
• Identify diff audiences, rank importance to each business, list 3 most imp business needs,
and ask each of audience types to develop their wish list
• Evaluation of site design: Dependent on effectiveness, productivity and satisfaction
• In marketing led site design –elements are developed to achieve customer acquisition,
retention and communication of marketing messages
Elements of site design
• Site design and structure- the overall structure of site
• Page design- the layout of individual pages
• Content design- how the text/graphics on each page is designed
Site design and structure

• Structures for websites will depend upon the purpose and its intended
audience
• Design factors which influence a consumer for e commerce site
- coherence- simplicity ,ease of read, categorisation, no overcrowding
- complexity- different categories of text
- legibility- mini home page on every subsequent page, same menu on
every page, site map
Aesthetics
Aesthetics = Graphics + Colour + Style + Layout and Typography

Personality is the unique, authentic, and talkable

soul of your brand that people can get passionate
about.
Site personality
Personality is not just about what you stand for, but
how you choose to communicate it. It is also the way
to reconnect your customers, partners, employees,
and influencers to the soul of your brand in the new
social media era.

68
• Site style/site personality: style which is communicated through
use of images, colour, typography and layout.
• Style : elements combined to develop a personality for a style eg
formal/fun
• Consumer sites- graphically intensive
Retro templates
Formal
 Aesthetics
Aesthetics = Graphics + Colour + Style + Layout and Typography

Schemes that need to be right Information-intensive sites

for: Graphics-intensive sites
- A personality which fits the
target audience
- Brand fitting
- Usability and accessibility

Watch out for design constraints

• Modems and download time • Plug-ins and download time
• Screen resolution • Font sizes
• Number of colours • Platform
• Browsers

72
Factors influencing Graphic design

• Speed of downloading graphics

• screen resolutions- design for diff screen resolutions
• no of colors on screen
• type of browser used- show content differently
• Give users a choice- high tech/low tech
• adaptive web design : this design technique delivers different layouts and
features according to what is supported by browser and screen resolution
of the device
Mobile experience design
Increase in mobile use Mobile first design philosophy

Mobile marketing options Mobile design requirements checklist

Thurner (2012)
1. SMS User experience is fundamental
2. Quick response codes (QR codes)
Use handset detection software
3. Bluetooth
4. Mobile applications Ensure that all other media channels drive
5. Mobile site traffic to your site
6. Mobile site and app advertising Use personalization
7. Location-based advertising Evaluate payment options and optimize
8. Social network-based advertising checkout
Test! Test! Test!
Monitor!

74
Site organisation

• Information organization schemes: the structure chosen to group and

categorise information
• Various information organisation schemes
- exact: information is naturally indexed- alphabetical by author/title,
chronological etc
- ambiguous- using real world metaphors- files/folders/trash/basket/carts
- hybrid- mix of exact and ambiguous
Navigation
• Navigation- describes how users move from one page to another using navigational tools
like menus, and hyperlinks –
• Based upon hierarchical site structure
• Scheme: tools provided to the user to move between different information on a website
• Rule of 3 clicks: 3 clicks should be sufficient to enable the user to find the area of interest.
• Flow: is a concept that describes the degree of control/power a consumer has over the
site.
• 3 rules for navigation:
- consistency: consistent user interface. Eg if menu options on left side in home page- same
on support page as well
- Simplicity- limited options in the menu- 2-3 levels
- Context: use of signposts to show location in the site
Navigation and structure
Ease of use = Structure + Navigation + Page layout + Interaction

Flow control
Information architecture Rules
Card sorting Keep it simple
Web classification Be consistent
Three clicks rule Signposts

Types
Global navigation
Local navigation
Contextual navigation
breadcrumbs

77
Navigation and structure

Using interactivity to move customers through the buying process

1. Learning
2. Deciding
3. Buying

78
Types of navigation
• Global navigation /Main navigation :
represents the top-level pages of a
site’s structure—or the pages just
below the home page.
• The links in the main navigation are
expected to lead to pages within the
site and behave in a very consistent
way
• Local navigation : is the links within
the text of a given web page, linking
to other pages within the website
Types of navigation
• Contextual navigation : navigation
specific to a page or a group of pages
which may be in the body copy or in
slots such as related products
Types of navigation
• Breadcrumb navigation :A
“breadcrumb” (or “breadcrumb
trail”) is a type of secondary
navigation scheme that reveals the
user’s location in a website or Web
application.
• In their simplest form, breadcrumbs
are horizontally arranged text links
separated by the “greater than”
symbol (>); the symbol indicates the
level of that page relative to the
page links beside it.
Types of navigation system

• Narrow and deep: fewer choices on narrow broad

page, easier for users to make
selection, but more clicks to reach
to a info
• broad and shallow: more choices,
fewer clicks to reach required
content- design cluttered
• Rule of thumb: 3 clicks to reach any
piece of information
• Broad and shallow- large sites
• Deep linking: redirected from other
websites
 Deep hierarchy
The website for University of Florida Health,
in contrast, shows specific disease information only
at lower levels of the site hierarchy,
beneath Patient Care, then Medical Care, and then
Specialty Care.
Only 3 levels down do you finally arrive at a page
that lists (still fairly broad) treatment areas
such as Cancer Specialties, Heart Care Services,
and Women's Services.
Requiring users to click through so many levels to
get to specific content usually doesn't work well.
Users easily become lost, distracted, or simply
decide it's too much work and give up. So, for
deeper hierarchies it's critical to provide alternative
navigation options: shortcuts that lead directly to
lower levels. UF Health does this in the drop-down
menu from the global navigation, where users can
browse alphabetically for information about a
specific disease, or choose one of the Most Viewed
Conditions & Services.
broad
Interactive navigation Side bar static navigation
Hamburger menu Multimedia based menu
Centred layout dropdown
Labelling
• Clear succinct stds: widely used stds – home, main page, search,
find, browse, FAQ, help, about us etc
• To support navigation- one needs menu options
Menu options

Text
Rollover Positioning
menus,buttons,images
• User selects menus by • Term used to describe • Menus can be
clicking on diff objects color changes – where positioned at any edges
• Use of text menus-make the color of the menu of the screen –
a site look primitive and option changes when left/bottom/top
reduce its graphic the user positions the • Position – consistent
appeal mouse over and then between different parts
• Rectangular/oval changes again of the site
buttons or images – • useful that they help
highlight menu options achieve the context in
• Icons- not language the previous section by
dependent highlighting the area of
the site user is in
• Use both text and
button options
Menu options

Frames No of levels No of options

• Feature of HTML- • E commerce site • Have limited no of

Enable menus to menu at 4 levels choices within
be positioned at • Level 1: drink menu
one side of the • Level 2: spirits
screen in a small
• Level 3: whisky
area (frame), while
content of page is • Level 4: Brand A
displayed in the
main frame
• Difficulty in
indexing ,poor
display speed
Icons and template options
Dropdown menu Avoid Dropdown menu with more than
2 levels impacts usability
Hover effect rollover
Frames- difficult for SEO
Page design

• Involves creating an appropriate layout for each page.

• Main elements: title, navigation and content
• Page elements: consider the proportion of page devoted to content
compared to header,footer etc
• Use of frames: discouraged it makes diff for printing and
bookmarking
• Resizing- shd allow the users to change the site of the text or work
with diff monitor resolutions
• Consistency- should be similar for all areas
• printing – provide for printing
Content design

• Use of information cues like performance of the product, content,

price/value, Implicit comparison, availability, quality offers etc
• Copywriting approaches
- Writing concisely
- Chunking /breaking text into 5-6 lines which allows users to scan text
- Use of headlines with large fonts
- Too much text
- Use hyperlinks to decrease page sizes, achieve copy flow
Page design
Content Management Systems (CMS) used as page templates

• Home page
• Product or service pages
• Product category and sub-category
pages for sites with multiple products
Key page types • On-site search results page
• Landing pages for bought media
• Content marketing pages
• Social hub page
• Blog page
• Utility pages
Page design
Content Management Systems (CMS) used as page templates

• Company name and logo for identity

Common • Menu (and sub-menu) for navigation
layouts across • Footer for reference to copyright and
privacy information
sites • Page title for content

99
Page design
Content Management Systems (CMS) used as page templates

• An aesthetic, visually pleasing layout

• Clear emphasis of different content types
• Visual hierarchy showing the relative
Good page importance of different content through
template design 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

100
Content strategy and copywriting
The management of text, rich media, audio and video content
aimed at engaging customers and prospects to meet business
goals published through print and digital media including web
and mobile platforms which is repurposed to different forms
of web presence such as publisher sites, blogs, social media
and comparison sites.
CONTENT STRATEGY
1. Content engagement value
2. Content media Elements of content
3. Content syndication management that need to be
4. Content participation planned and managed
5. Content access platforms

101
Content strategy and copywriting
COPYWRITING Gerry McGovern’s top ten rules
Chunky 1. Be honest
2. Be simple, clear and precise
Relevant
3. State your offer clearly
Accurate 4. Tell them about your products’ limitations
Brief 5. Have a clear call to action
Scannable 6. Tell them quickly if they’re not customer
you can supply
7. Edit! Edit! Edit!
8. Give them details
9. Write for the web
10.Leave it at nine!

102
Success factors in website design

• Home page essentials: STP play an imp role- who we are,what we

offer,whats inside and how to contact us
• cater to the needs of the anticipated users: website shd be quick to
download, easy to navigate.
• update the website frequently to encourage repeat visitors and
keep customers informed about the new products
• gathering customer information- website should be used as a part
of push mktg strategy to gather customer information and better
targeting of direct mktg media