Chapter 6

Website and Online Advertising

What will I learn:

• To think about web projects with a UX mindset 


• How to create usable, amazing and enjoyable experiences for desktop and mobile users 


• The nuts and bolts of implementing UX strategy step by step 


• About a variety of UX tools. 


Websites:

Understanding UX design:

User experience (UX) can be defined as all the experiences (physical, sensory, emotional and
mental) that a person has when interacting with a digital tool.

Other synonyms: User experience design, user-centered design, user interface, usability
• UX design,: the system designers create with the goal of having the user’s experience be
satisfying and easy.
• It typically refers to the digital design experience.

Online UX can be divided into two broad categories:

• Functional UX. This covers the elements of the user experience that relate to actually using
the tool – such as working technical elements, navigation, search and links. 
good
interaction is ensuring that every interaction is well thought through to serve the user in
the simplest and most effective way possible.

• Creative UX. This is the bigger, harder-to-define impression created by the tool – the so-
called ‘wow’ factor that covers visual and creative elements. 
this is where we get into
the brand – uncover the needs of people and to design an experience that meets those
needs in a way that is congruent with the brand.

1
Stage 1: Understand: Before you get started with any project, you need to get the basics down
first. That means understanding two crucial elements: Your user & Your brand

Stage 2: Research: Interviews, focus groups, surveys, usability testing (observe user while using
app), competition etc.

Stage 3: Analyze: personas, user journey maps, prototype decisions etc.

Stage 4: Design: wireframes (will be discussed later)

Stage 5: Launch: development team (beta launch, user testing, internal testing)

Stage 6: Validate designs: Analyze AGAIN! After this last stage, the process will restart again
depending on required changes. The whole process goes on during the entire lifecycle of the
product.

UX vs. UI

UX (user experience) and UI (user interface) are two interdependent terms.

• While UI generally deals with the interaction between users and computer systems,
software and applications, UX deals more generally with a user’s overall experience with
a brand, product or service.

• For example, user interface tends to do more with the actual features of the device,
such as the screen, buttons, scrolling features and sound; user experience is the more
general term that deals with everything a user experiences from start to finish.

• User interface is a key part of a user’s overall experience since it’s the part of a device
that a user most interacts with, but it doesn’t cover the entirety of a user’s experience
across a website or platform.

• One common metaphor for UI vs. UX is to compare them to restaurants. If UI is the

plate, silverware and napkins, UX is the lighting, music and customer service that
facilitates your dining experience.

• User interface (UI) is a more technical approach that looks at optimizing the interaction
between people and computer systems.

2
 • It relies on anticipating the needs of users and building specific inputs to get a user
where they need and want to go

• UX has a lot to do with brand building. A positive UX may outpace the competition and
corner a market. Think about Amazon Prime. The ease of next-day or two-day delivery
has made this method of shopping highly attractive to consumers. Amazon’s UI design
deals with the layout of the website, the search bar and clarity of information on
product pages.

Successful Website

• Traffic acquisition is only half the marketing equation.

3
 • In addition to bringing visitors to your website, you need to keep them there. Not only
that, you need to transform them from interested prospects into customers.

• Your website needs to move the relationship forward (and seal the deal).

• And once they complete their first transactions? You need to convert your first-time
visitors into repeat buyers.

• Conversion rate optimization (CRO) provides a significant opportunity for businesses of

any size.

• It takes a scientific approach to optimizing websites and enables businesses (and

organizations) to convert more visitors into subscribers or customers.

What are Landing Pages?

Landing pages are called that, precisely because they tend to be the first point of contact for
users with your brand. Usually, people follow a link and enter your landing page before they
(hopefully) move on to your main website or do something specific – like sign up for a service.

These pages are quite handy, because they tend to have one simple and clear goal: to convert
the user. That conversion can represent the act of signing up for something, checking out a sale
or participating in something. Ultimately, landing pages try to convince users into an action.
This contributes to the general simplicity of landing page design, keeping the focus on that one
action. One important thing to bear in mind is that landing pages have a short life-cycle. The
beauty is that if you have a specific service, event or sale going on, you can put together a
landing page as a starting point very quickly.

4
The anatomy of a post-click landing page

1. No navigation

When you create your website, you want to make it easy for your visitors to navigate. The
easier they can find their way around, the faster they’ll be able to get what they want, and the
better experience they’ll have on your website.

With that in mind, you connected all your pages to each other via the main navigation bar on
the top of your site — the homepage, your blog, checkout — they’re all separated by just one
click.

In the relationship between your website and your potential customer, the post-click landing
page is your ultimatum. It says “Make a decision: convert, or get out.”

It doesn’t need to link to any other page. It lists everything your prospects need to know about
your offer and leaves the decision to convert up to them.

2. Headline/Sub-headline

Next to your call-to-action, your headline is the most important part of your page. Without a
compelling one, most people won’t even bother to read the rest of your post-click landing page.

The secret to writing a good headline is to make sure it conveys your unique selling proposition
(USP) — the thing that sets your product or service apart from the others in your industry.

Four main types of attention-grabbing headlines that’ll help you get started pulling prospects
in.

5
1. News: These headlines introduce a new solution, like “Finally, an easier way to do your
taxes.”

2. Self-interest: These headlines appeal to prospects’ inherent self-interest, like “The

guaranteed way to get a fuller head of hair.”

3. Quick & easy: These appeal to our desire for quick fixes, like “Drop weight fast with this
miracle pill!”

4. Curiosity: These headlines pique readers’ curiosity, making them want to read more. For
example “I couldn’t believe how much money I made just a week after starting this work-from-
home program.” Or, the headline that made Caples famous: “They Laughed When I Sat Down At
The Piano, But When I Started To Play…”

3. Engaging Media

As creatures capable of processing visuals up to 60,000 times faster than text, your visitors
would much rather you show them how your product works than telling them in writing.

4. Concise, benefit-centered copy

Our attention spans have shrunk to less than 8 seconds, so when we read online, we skim.
Employ the use of numbered lists and bullet points to separate your copy into easily digestible
chunks. Don’t make your prospect read more than two to three consecutive sentences of block
text.

5. No links

Don’t link to any other pages on your post-click landing page (with the exception of your privacy
policy or terms of service if absolutely necessary).

6. Social proof

Research has shown that 92% of people value recommendations from a peer, and 70% will
trust a recommendation from someone they don’t even know. Before making a purchase,
people will ask around their social circle for recommendations from people they trust.

7. A strong call-to-action

The searching for powerful synonyms to create compelling copy, all the headline testing and
customer interviews have been done for one reason: to get your visitors to click that call-to-
action button.

6
This is the one element that jumps out at your visitors. When they reach your post-click landing
page, they should notice your CTA button immediately.

8. Minimalist footer

If your post-click landing page has a footer, it shouldn’t be like the one on the rest of your
website. It shouldn’t have a sitemap, related blog posts, or any links to your social media
accounts.

9. Contact information

Sometimes, especially if your offer is pricey or complicated, your post-click landing page visitors
are going to want to talk to a representative from your company.

There are six qualities that make up good UX:

• Findability – can I find it easily? Does it appear high up in the search results? 


• Accessibility – can I use it when I need it? Does it work on my mobile phone, or on a slow
Internet connection? Can I use it as a disabled person? 


• Desirability – do I want to use it? Is it a pleasant experience, or do I dread logging in?

• Usability – is it easy to use? Are the tools I need intuitive and easy to find?

• Credibility – do I trust it? Is this website legitimate?

• Usefulness – does it add value to me? Will I get something out of the time I spend interacting
with it?

Benefits of UX:

There are some real, tangible benefits to applying UX design to digital marketing strategies.

Good UX is an excellent way to differentiate yourself in the market and give yourself a
competitive advantage. If your online touchpoints are easy, fun, intuitive and awesome to use,
your customers won’t have any reason to look elsewhere.

Good UX research and design allows you to find the best solution for your needs. Every
business, website and online service is unique in some way, which means that the way it is set
up must be unique too.

7
Every marketer knows that the ideal customer is a happy customer. People who love the
experience you give them will become loyal clients, and possibly even brand evangelists –
people who will sing your praises far and wide.

Applying UX principles means that you can get your digital tools working earlier, with much
better functionality, at a lower cost. This is because you can cut out features and elements that
you simply don’t need, and focus on the core user experience. This optimized development
process leads, in turn, to sites that are easier and cheaper to maintain, upgrade and support
across multiple platforms.

Core principles of UX design

User-centric design
While this may seem like the most obvious point, it’s surprising how often the user is forgotten
in the user experience. Business owners, marketers and web developers frequently focus on
creating the web platforms they want and think are best, instead of really interrogating what
the user needs. Often, the performance of web assets is compromised when the design process
is driven only by internal business needs (for instance, ensuring that each department in the
company has a space that it controls on the home page) at the expense of what the user needs.

Important do’s and don’ts:

common rules or ways of displaying or structuring things on the web. Popular conventions
include:

• Links that are blue and underlined

• Navigation menus at the top or left of the web page

• The logo in the top left hand corner, which is linked to take the user back to the home page

• Search boxes placed at the top of the page, using standard wording such as ‘search’, or a
magnifying glass icon.

don’ts’ when it comes to building a user-friendly and usable website:

• Never resize windows or launch the site in a pop-up. 


• Don’t use entry or splash pages (a page that site visitors encounter rst before reaching the

8
 home page). 


• Never build a site entirely in Flash – most search engine spiders cannot effectively trawl Flash
sites, and these will not work on many mobile devices. 


• Don’t distract users with ‘Christmas trees’ (blinking images, ashing lights, automatic sound,
scrolling text, unusual fonts, etc.). 


Simplicity

In UX projects, the simpler option is almost always the better, more user-friendly one. Though
your service or product may be complex, that doesn’t mean your customer-facing web portals
need to be

Elements of simplicity:

• Lots of empty space. In design terms, this is referred to as negative or white space (though, of
course, it need not specifically be white). Dark text on a light background is easiest to
read. In general, the more effectively ‘breathing room’ is placed between various page
elements, lines of text, and zones of the page, the easier it is for the user to grasp where
everything is. 


• Fewer options. When users have to make choices, there is a lot of psychology at play – worry
about making the right choice, confusion and doubt over the options, indecision
paralysis and more. Studies have found that people faced with fewer choices generally
choose more quickly and confidently, and are more satisfied with their decision
afterwards (Roller, 2010). 


• Plain language. Unless your website is aimed at a highly specialised technical field, there’s
usually no need to get fancy with the words you use. Clear, simple, well-structured
language is the best option when creating a great UX. 


• Sticking to conventions. As we’ve said before, conventions are excellent shortcuts for keeping
things simple for users. There’s no need to reinvent the wheel and try to teach your
users a whole new way of navigating a website. 


Credibility

Credibility means how trustworthy and legitimate something looks, and is a big consideration
for web users when deciding to use your website or not. Here are some of the cues that visitors
use to determine the credibility of a website:

• Looks – does it look professional and beautiful? 


9
• Prominent phone numbers and addresses where they are easy to locate – this assures the
visitor that there are real people behind the website, and that they are in easy reach. 


• Informative and personal ‘about us’ – your customers want to see the inner workings of a
company and are especially interested in learning more about the head honchos.
Consider including employee pictures and profiles to add personality to the site. 


• Genuine testimonials – this is a great way to show potential customers what your current
customers have to say about your organization. Trust is vital, and this is one way to
encourage it. 


• Logos of associations and awards – if you belong to any relevant industry associations or
have won any awards, feature them. Not only does this go a long way towards
establishing your credibility, but it will show that you’re at the top of your game, a notch
above the competition.
• Links to credible third-party references or endorsements – this is a way to assert your
credibility without tooting your own horn.
• Fresh, up-to-date content – a news section that was last updated a year ago implies that
nothing has happened since (or that no one cares enough to update it).
• No errors – spelling and grammar mistakes are exceptionally unprofessional, and while
the large majority of readers may not pick them up, the one or two who do will question
your credibility. This also extends to broken links, malfunctioning tools, and interactive
• Elements that don’t work as advertised.

Mobile UX:

Mobile should not be an afterthought, in UX or any other digital endeavor – it should be

prioritized in strategy, design and implementation.

• Mobile users can be different from desktop users. There is an ongoing debate about whether
the mobile users’ context (for example, lounging on the couch versus rushing to a
meeting) affects the way in which they use their devices. There’s no definitive way of
defining mobile context – it all comes down to the user, brand and web asset – but it’s
important to remember that you need to take the user’s context into account, whatever
it may be. 


• Mobile users are:

• Goal orientated. They turn to mobile devices to answer a question, quickly check email, find
information or get directions. They often have a distinct purpose in mind when using
their phone. 


10
• Time conscious. There are two aspects to this. On the one hand, mobile users are often
looking for urgent or time-sensitive information (such as the address of the restaurant
they are looking for), so answers should be available as quickly as possible. On the other
hand, the mobile device is also frequently used to kill time or as a source of
entertainment (reading articles on the couch, or playing games while waiting in a
queue), so content is also crucial. User research will tell you which of these groups your
users fall and how you need to structure your site accordingly. 


• Search dominant. Even users who know what they are looking for tend to navigate there via
search (for example, typing the brand name into Google) rather than accessing the page
from a bookmark or typing the URL directly into the browser bar. 


• Locally focused. 50% of all mobile searches in 2012 were for local information (Sterling,
2012). Since mobile phones are always carried, users turn to them to find information
on things in their surroundings – from local businesses to more detail on a product they
have just seen. 


Which mobile experience should you create?

When creating a platform for mobile users to access your content and brand, you have three
options:

• Mobile website 


• Mobile application 


• Responsive website 


Mobile websites make it possible for users to access information about your brand on the move
wherever they may be, as long as their phone has a browser and an Internet connection.

Mobile websites need to be designed with the mobile device in mind. Mobile website interfaces
demand a simpler approach, and a consideration of screen size and input method.

A native mobile app is software designed to help users perform particular tasks. Examples
include a tool for checking the weather, a fuel calculator or a recipe index.

Mobile apps can be sold, or made available for free. There are many developers who create
apps in order to derive an income, while free apps that offer users value are often sponsored by
brands or advertising. An app can be an excellent tool for connecting with your customer.

The key difference between native applications and mobile websites is that websites can be
accessed using any Internet-enabled mobile device, while applications are designed for
particular handsets and operating systems and have to be downloaded to the mobile device.
That said, mobile apps generally allow for more integration with the device and hence a better

11
user experience, depending on the complexity of the functionality.

Should you wish to target Apple and BlackBerry users, for example, you will need to create two
different applications or focus on making a cross-platform application – something that can be
difficult and expensive.

It is a good idea to focus on mobile sites when targeting a broader group and building an
application when wanting to reach a niche or targeted audience.

A responsive website is a website that changes its layout depending on the device it is displayed
on – it looks one way on a desktop computer, but then adapts to the smaller screen size and
layout on a tablet or mobile phone. In this way, a single development project can cater for
multiple device form factors.

Creating a responsive website means you only need to build one website for the full range of
devices, from desktop to mobile. This can be a technically challenging exercise and will require
a lot of planning upfront to make sure that the site displays correctly on each device.

Limitations for mobile

While there are many benefits to mobile, there are also challenges that the UX practitioner
needs to overcome.

• Small screens. Even the largest smartphones are screens many times smaller than a standard
laptop (and tablets fall somewhere between the two). This, quite simply, means that the
user has a much smaller window through which to perceive and understand the
website, so 
it’s difficult to get an overall impression of where things are or what’s
important. 


• Difficult inputs. Mobile phones don’t come with full-sized keyboards and mice, so they are

12
 usually a lot more difficult to operate fluidly and accurately than desktop computers
(touchscreens may be the exception here, although they also have their own pitfalls). 


• Slow connection speeds. Many mobile phone users, especially in developing countries, are on
slow Internet connections – and even fast options such as 3G can often be more sluggish
than a desktop equivalent. This makes loading large websites or images slow and
frustrating – and also expensive in terms of data costs. 


• Slow hardware. Sometimes the slowness comes from the hardware itself – the more basic
the phone, the slower its processing components are likely to be, making the simple act
of opening the browser and loading a page time consuming. 


Phases of website creation:

• Objective behind website

• Usability: simple, elegant, straightforward design

• Accessibility: allow equal access to the info and functionality (even people with
challenges)

• Content / Information architecture

• Domain name: need to register a relevant one

• Hosting: continuous storage of files, database etc. need a supporting server to “host”
the site

Creating a website’s basic structure:

Information architecture (IA) is about managing information – taking a lot of raw data and
applying tools and techniques to it to make it manageable and usable. The purpose of this is to
make communication and understanding easier by putting information into logical, clear and
familiar structures.

The information architecture of a site is crucial to usability. Categories and pages should ow
from broad to narrow. An intuitively designed structure will guide the user to the site’s goals.

Most websites have a hierarchical structure, which means there are broad, important pages at
the top, and narrower, more specific and less important pages further down. Hierarchical
structures can either be very broad and shallow (many main sections with few lower pages) or
very narrow and deep (with few main sections and many pages below). It’s up to the UX
practitioner to find the right balance of breadth and depth.

13
Principles of website content:

1. Structure 
Content needs to be written so that users can find the information they need as
quickly as possible. The chapter on Writing for Digital will cover this in more detail. Copy can be
made more easily readable by: 


2. Hierarchy

On the page, use an inverted pyramid style for your copy. The important information should be
at the top of the page, to make for easy scanning. The heading comes first, the largest and
boldest type on the page. The subheading or blurb follows this, and then the content is
presented in a descending scale of importance.

3. Relevance

• Above all, the content on the page must be relevant to the user and the purpose of the
page itself. If a user clicks to read about a product but ends up on a page with content
about the company, their experience is going to be tarnished.

Create a sitemap

• In UX terminology, a sitemap is the visualized structural plan for how the website’s
pages will be laid out and organized.

14
 


Assemble the other elements

Once you’ve defined your content and mapped out the basic layout of each page, you need to
add in all the extra elements that your website will need – remember that the page should only
ever contain the elements a user might need to support them in their task. These can include:

• Calls to action. CTAs can take a variety of shapes and forms, from in- text links to large
buttons. 


• Forms. These are interactive fields where users can enter their contact details or other
information, for example, to sign up for a newsletter or enter a competition. 


• Search. Many sites can benefit from having a search function, both to help users navigate and

15
 to make finding specific information easier. 


Web design
Web design is the process of creating all the visual aspects of the interface. This covers the
layout, color scheme, images, logos, type, design elements (such as buttons and links), and
anything else that you can see.

The web is a visual medium, so design is a very important part of creating successful assets that
are both engaging and effective. At the same time, however,

designers need to keep in mind the technical aspects of design, as well as the all- important
human factor. Digital properties shouldn’t just be beautiful; they also need to create a good
experience for the visitor and meet business objectives.

Visual identity and designing for persuasion

The visual interface – the design of a website – is what the user sees and interacts with. It’s the
visual representation of all the hard work that goes into developing a website. It’s what the site
will first be judged by, and is the initial step in creating a delightful user experience. In case you
haven’t realized it, it matters a lot.

There is a close relationship between UX and visual design – sometimes these are even done by
the same person. At other times, the visual designer will use the documents created by the UX
designer and add the visual skin. In this case, it’s like comparing the architect (UX designer) to
the interior decorator (visual designer).

Design is not just about aesthetics, although looks are very important. Design is about the visual
clues we give users so that they know what to do next. Design is the way in which we
communicate with our users. It assures web visitors of our credibility and ability to answer their
questions, and turns them into customers.

Good interface design involves many things (including years of training and experience), but
here are a few basic considerations. These are closely linked to UX and the visual designer plays
a key role in defining them:

• Navigation: the signage of the site, indicating to users where they are and where they can go.



• Layout: how content is structured and displayed. 


• Headers: the usually consistent top part of a web page. 


16
• Footers: as you may have guessed, the usually consistent bottom part of the page. 


• Credibility: telling users that you are who you say you are. 


Consistency
• Consistency in use of visual elements is vital to your online presence – across all your
properties and channels (such as your email newsletter, Facebook page and mobile site)
– as users do not perceive differences between platforms or even on- or of line. They
perceive it as one message on multiple touchpoints. Within a website, elements should
also be consistent. Color coding, or color themes, can be used very successfully to group
areas or features on a website. For example, if the help button and help navigation are
colored yellow, then the user will quickly associate yellow with support and assistance.
This is another useful shortcut to making the site usable and intuitive.

E-Commerce
• Closely linked to UX and visual designer plays a key role in defining them:
• Navigation: signage - telling users how and where to go
• Layout: how content is structured and displayed
• Headers: usually consistent top part of web page
• Footers: consistent part of the page
• Credibility: telling users that you are who you truly are - honest e.g. USEK
enrollment rates on website
• Consistency: consistency in visual elements is a must - across all
properties and channels (user should see it as one message on multiple
touchpoint. color coding can be important on website: eg. yellow button
linked to support - every time you see a yellow button on website -
support

• E-commerce is a contraction of the term "electronic commerce”

• A business model that allows companies and individuals to buy and sell goods and
services over the Internet.
• Primarily about selling online or the ability to transact online. Technically, eCommerce
encompasses all business activities carried out via the internet. If you buy or sell
something online, then that is included in the eCommerce statistics
• Some suggest that e-commerce includes all online transactions such as responding to
an enquiry or an online catalogue search.
• E-commerce itself does not include the marketing or the back office administration
processes that are required to run a business. Digital business has a broader perspective
involving the automation of all the business processes in the value chain – from

17
 procurement or purchasing of raw materials, to production, stock holding, distribution
and logistics, sales and marketing, after sales, invoicing, debt collection and more.

History of E-commerce

• ecommerce has a history that goes back before the internet began
• Ecommerce actually goes back to the 1960s when companies used an electronic system
called the Electronic Data Interchange to facilitate the transfer of documents.
• But it wasn't until 1994 that the very first transaction. took place. This involved the sale
of a CD between friends through an online retail website called NetMarket.

• Operates in four major market segments and can be conducted over computers, tablets,
smartphones, and other smart devices.
• Nearly every imaginable product and service is available through ecommerce
transactions
• Ecommerce operates in all four of the following major market segments: (B2B, B2C, C2C,
C2B)
• Digital marketplaces such as eBay or Etsy serve as exchanges where multitudes of
buyers and sellers come together to conduct business.
Steps

• Research: market analysis, competition, audience, expected costs etc.

• Brand: come up with a name and brand identity
• Set up a legal structure, such as a corporation. get the necessary documentation
(taxpayer numbers, licenses, and permits if they apply).
• Decide on a platform and design your website (or have someone do it for you).
• Set up an ecommerce site with a payment gateway (like PayPal).

Disadvantages and Advantages

Advantages:
Convenience: E-commerce can occur 24 hours a day, seven days a week.
Increased selection: Many stores offer a wider array of products online than they carry in their
brick-and-mortar counterparts. And many stores that solely exist online may offer consumers
exclusive inventory that is unavailable elsewhere.

Disadvantages:

18
Limited customer service: Although some websites let you chat online with a staff member,
this is not a typical practice.
Lack of instant gratification: When you buy an item online, you must wait for it to be shipped
to your home or office.
Inability to touch products: Online images do not necessarily convey the whole story about an
item, and so e-commerce purchases can be unsatisfying when the products received do not
match consumer expectations. Case in point: an item of clothing may be made from shoddier
fabric than its online image indicates.

19