Planning an effective web presence: web interface design and usability

MGMT 230Week 4

This week we will cover:

• Elements of web visual, interface, and functional design: website usability (you will need this for your web project plan)

• Web form design (you will need this for your web project plan)

• Search engine optimization (you will need this for your web project plan)

• Designing web sites for global audiences

ELEMENTS OF WEB VISUAL, INTERFACE, AND FUNCTIONAL DESIGN: WEBSITE USABILITY

A reminder of the steps in planning an effective web presence

1. Determine site goals

2. Identify the target audience and create user profiles of audience members

3. Conduct market research and competitive analysis

4. Design the site for audience, functionality, and usability

Customer-Centric Web Site Design and Usability

• Usability doesn’t always mean “easy to use” - it means usable by the site’s target audience for their purpose in using the site (the “use case” or “usage occasion”)

• Amazon.com has a very different “use case” than Google.ca or thewitcher.com

• Think about– Function (what can the user DO)– Aesthetics (look and feel, graphic design)– Content (text and media; freshness; UGC)

Some best practices in web design for eCommerce sites:

Ecommerce sites selling goods and services are encouraged to focus on the CUSTOMER’S GOALS rather than the company’s perspective and organization.

Q: What’s the most important thing I should do if I want to make sure my web site is easy to use?

A: “Don’t make me think!”

From: Steve Krug. Don’t make me think: a common sense approach to web usability. 3rd ed. New Riders. 2014https://www.sensible.com/dmmt.html

From: Steve Krug. Don’t make me think: a common sense approach to web usability. 3rd ed. New Riders. 2014https://www.sensible.com/dmmt.html

Managing Layout and Whitespace• Put content that is important to the

user “above the fold” • How do you know what is important?

Use server logs • Think about screen resolution –

now 99% of people have a resolution higher than 1024 x 768 – what difference does it make?

• Use “responsive design” so that your site looks good on all devices. Relies on use of fluid layout and image elements – screen resolution is detected by CSS “media queries”

• Avoid horizontal scrolling (unless it is a deliberate part of the design AND it will work on mobile)

• Use whitespace

Why use “responsive” design?

Navigation labels and functionality• Use the language of the user to label your content, not

the language of the organization– what is appropriate depends on your primary target

audience – eg. on a gardening site• scientific name for diseases or common names?• Latin or English names of plants for a gardening site?

• Avoid ambiguities in labeling• Think about how people want to access your content

(by product, by task, by part number etc)• On more complex sites use breadcrumbs to help

people find their way

Consistency

• Make sure that the navigation of the site is consistent– Use colour / graphics to help user keep a sense of

where they are

• Follow web conventions (where audience appropriate)– eg. making the logo (top left?) clickable back to

home page– Links underlined or not?

Write for the web?• It depends on your audience, and the nature of the

content• People tend to scan rather than read on a screen• More white space, bullets, shorter paragraphs, are

often recommended for content that is likely only to be read onscreen

• Longer or more dense material should be “print-ready” and allow font size changes

• BUT remember that people do increasingly read on screens of all sizes

Contact us? Provide lots of information

• Email addresses• Phone and fax numbers - for customer groups / product

groups• Physical address• Twitter feed• Real-time chat• Employee names are nice• Not just fill-out forms (we look at form design in detail next

week)

• Make sure you answer - and fast

Things that really, really annoy potential customers

• No shipping cost information until I get to the end of the checkout procedure

• Asking for personal information too early in the process.

• Not telling me an item is out of stock until I get to the checkout (don’t waste my time)

• Clunky navigation and selection process (one click too many) troygibson.com

Simple tips for web usability and engagement

• 7 principles that make your website more engaging (Dr. Susan Weinschenk) (5 minutes)

• This video summarizes some of the things we have been talking about with respect to usability– Video from CanadaHelps.org (7 minutes)

Usability testing• Can be done with html prototypes, paper prototypes,

or with a fully-functioning version of the interface• Testers selected from target audience• Usually task oriented• Overt or covert observers• Types

– Diagnostic - to spot problems early on– Comparative - select among alternate designs (A/B testing)– Verification - have goals been met?

Building a global website: 2 basic choices

1. Globalization: One website fits all

2. Localization: different website for each country or locale

Globalized web site: Same site for all

• Some things you can do to help users• Keep the site as simple and non-specific to one

culture as possible– make clear what currency your prices are in

• add a link to a currency converter?

– tell customers which international markets you will serve– give international shipping information– pay attention to language issues as your site will be used

by non-native speakers– keep the language simple– avoid slang, figures of speech, swear words– watch out for different meanings of words

Globalized web site

Localization – website is tailor-made for each market

• Means building a different site for each different target country (or locale) in the local language

• Very challenging – Firms need lots of research and expert advice

• Very expensive to do well

• Only the largest eCommerce companies will localize• You then need to solve the problem of getting people to

the correct site for their country / language• Let them choose from a list?• Automatic redirect?

Localized web site

WEB FORM DESIGN

Creating forms for a web page

• For your web project you have to design a form for inclusion on your web site (Section 2 of your web plan).

• We will use Google Docs to provide the technology, but for your plan you need to know the basics of good form design

• Forms are used to collect information of various types from users and as a way of receiving feedback or orders.

The 6 components of web forms• Labels

These tell users what the corresponding input fields are for (what content should be in them)

• Input FieldsInput fields enable users to provide data or feedback

• ActionsThese are links or buttons that, when pressed by the user, perform an action, such as submitting the form.

• HelpThis provides assistance on how to fill out the form.

• MessagesMessages give feedback to the user based on their input. They can be positive (such as indicating that the form was submitted successfully) or negative (“The user name you have selected is already taken”).

• ValidationThese measures ensure that the data submitted by the user conforms to acceptable parameters.

http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/

http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/

4 Form elements (input fields). You will need to include at least 3 in your web

project form

• Text boxes – for single line entry • Text area – for multi line entry (creates a large

text field for comments etc)• Check boxes – when multiple answers are

possible• Radio buttons (multiple choice) – when only

one answer is possible• Sample form created using Google Docs

Making forms better for your users

• Text boxes– how big should they be? Should you constrain the number of characters?

• Names (first, last, family etc) – not all names fit neatly into boxes!

• Labels – make them clear and useful• Phone numbers, postal codes – show an example of

format• Required fields (indicate clearly and don’t make it

required unless you really do need the data)• Submit / Reset buttons

WEB DESIGN FOR SEARCH ENGINE OPTIMIZATION

The importance of search – some research findings

• 91% of online adults use search engines to find information on the Web, and this is the most popular online activity (Pew Internet: Most popular online activities May 2013

• 58% of Americans perform online research using search engines before they buy product (Pew Internet: Online Product Research Sept. 2010)

• More recent research suggests that click-through rates are dropping, and that position #1 is very important– CRT for the #1 position in the organic rankings at Google is 18.2% and the #2

position gets 10.05% CTR

Search engine marketing – 2 major methods

Search engine marketing is the umbrella concept

OBJECTIVE IS TO BE IN THE TOP FEW SEARCH RESULTS

1. Search engine optimization (SEO) – relies on the content of web pages plus inbound link quality – called organic positioning

2. Search engine advertising and paid placement (Week 8)

BOTH RELY ON THE CONCEPT OF KEYWORDS / PHRASES

Paid listings (advertisements)

Organic listings

Understanding the fundamentals of how search engines work

• Keywords / phrases are the search terms people type into search engines

• Search engine indexing and relevancy ranking explained– How do search engines work? (Google video 3

minutes)• Relevancy ranking algorithms change almost

constantly• The concept of the “landing page” – all pages in your

site are competing, so all must be individually optimized

Search engine optimization• Focus on:

– ensuring that you have high quality, relevant content on your pages that matches what people are searching for

– having high quality inbound links– making sure that the elements that are indexed by

search engines are all optimal for your key words• called organic or algorithmic search results

• Never attempt to “game” a search engine by using deceptive practices – the site will be removed from Google’s index

Off-page optimization: Inbound links signal quality

• Strongly influences ranking

• Number and quality of sites that link to your pages (inbound links)– Must be content relevant (don’t spam!)– Avoid link exchanges– Google regularly penalizes web sites with spammy

link strategies

• Think landing page, not just home page– remember individual pages are competing - not

your entire site

On-page optimization: Select your Keywords / keyphrases• This is the most important concept to grasp in

search marketing

• What are members of your target market actually typing into search engines?– Also called “search terms”

• Those are the keywords/keyphrases that you must optimize for

On-page optimization: Page elements that influence rankings

• Your key words should appear in the following HTML page elements (but not in a spammy fashion)– Title tag– Headings (H1 + tags) - include keywords that describe the

overall theme of the page– Hypertext links to other parts of your site

• make them keywords (never “click here”!)• make it easy for spiders to follow links

– Alternate text - include key words in the alt text descriptions for your logo and other images

– File names and URLs - may include keywords

Page copy - keyword density• Page copy - make sure your keywords are well

represented– Higher in the page the better – Search engines reward sites that have valuable information

• create content your target audience is genuinely interested in

– not all marketing copy uses the words that your customers use

• Relationship of a keyword phrase to the total number of words on a page = keyword density– Higher is not always better (boring for users and penalized

as spam!)

SEO in your web plan: Section 4 / Subsection 4

• Include information about your SEO "keywords/phrases" in a two column table. In the first column list the title of the page and in the second column write the keywords / phrases that the page is optimized for. Think about what people might type into a search engine to find a page with that type of content - those are your keywords / phrases. You will include these keywords / phrases in headings, subheadings, and in the text itself when you write your page copy.