Planning an effective web presence: web interface design MGMT 230 Week 5

Midterm – Thursday October 16th Closed book test. During normal class time 30 short questions. (Multiple-choice, short answer, definitions etc) (30 marks) 4 Mini-Essay Questions (20 marks) 8 questions will be provided ahead of time (later this week). 5 of those questions will be on the paper

The midterm will cover: Required reading materials listed on the course website (Weeks 1 – 6) Material covered in lectures (your own notes plus the ppt slides) Theoretical material covered in labs (not practical techniques – these will be tested in the lab assignment next Tuesday) I will review the mini-essay questions in the lecture next week

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”) Bear71 (an interactive documentary) has a very different “use case” than Google.ca Bear71 Google.ca 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 are encouraged to focus on the CUSTOMER’S buying process and 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!” Steve Krug. Don’t make me think: a common sense approach to web usability. New Riders. 2005

From: Steve Krug. Don’t make me think: a common sense approach to web usability. New Riders. 2005

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?now 99% of people have a resolution higher than 1024 x 768 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”responsive design Avoid horizontal scrolling (unless it is a deliberate part of the design) Use whitespace

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 waybreadcrumbs

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 changesprint- ready BUT remember that people do increasingly read on screens of all sizes

Contact us? Provide lots of information 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 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.comtroygibson.com

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

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 Fields Input fields enable users to provide data or feedback Actions These are links or buttons that, when pressed by the user, perform an action, such as submitting the form. Help This provides assistance on how to fill out the form. Messages Messages 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”). Validation These measures ensure that the data submitted by the user conforms to acceptable parameters.

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 – 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 2013Most popular online activities May % of Americans perform online research using search engines before they buy product (Pew Internet: Online Product Research Sept. 2010): Online Product Research More recent research suggests that click-through rates are dropping, and that position #1 is very important 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) How do search engines work 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 - think about including key words in the alt text 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.