Planning an effective web presence: web interface design

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

2. Midterm – Tuesday October 15th • 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

3. 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 on Thursday October 10th) • I will review the mini-essay questions in the lecture next week

4. This week we will cover: • Elements of web visual, interface, and functional design: website usability • 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

5. Elements of web visual, interface, and functional design: website usability

6. A reminder of the steps in planning an effective web presence • Determine site goals • Identify the target audience and create user profiles of audience members • Conduct market research and competitive analysis • Design the site for audience, functionality, and usability

7. 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 • Think about • Function (what can the user DO) • Aesthetics (look and feel, graphic design) • Content (text and media; freshness; UGC)

8. 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

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

10. 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 most people have a resolution higher than 1024 x 768 – what difference does it make? • Think about “responsive design” so that your site looks good on all devices. Relies on use of fluid layout elements. • Avoid horizontal scrolling (unless it is a deliberate part of the design) • Use whitespace

11. 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) • Use breadcrumbs to help people find their way

12. 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?

13. 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

14. 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 • Make sure you answer - and fast

15. 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

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

17. 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 • Verification - have goals been met? • Example video of testing a careers website

18. Web form design

19. 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.

20. The 6 components of web forms • LabelsThese 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/

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

22. 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

23. 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

24. Web design for Search Engine optimization

25. 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 activitiesMay 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

26. Search engine marketing – 2 major methods Search engine marketing is the umbrella concept OBJECTIVE IS TO BE IN THE TOP FEW SEARCH RESULTS • Search engine optimization (SEO) – relies on the content of web pages plus inbound link quality – called organic positioning • Search engine advertising and paid placement (Week 8) BOTH RELY ON THE CONCEPT OF KEYWORDS / PHRASES

27. Paid listings Organic listings

28. Understanding the fundamentals of search engine optimization • 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) • The concept of the “landing page” – all pages in your site are competing, so all must be individually optimized

29. Search engine optimization • Focuses 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 • Submitting pages to major search engines • Google • Yahoo • Bing

30. Inbound links signal popularity • Strongly influences relevance ranking • Number and quality of sites that link to your pages (inbound links) • Must be content relevant (don’t spam!) • Avoid link exchanges • Thinklanding page, not just home page • remember individual pages are competing - not your entire site

31. Meta keyword and description tags • No longer useful as sole tactic to influence rankings • BUT search engines often use title and description in the listings themselves • A search on google.ca for VIUwill illustrate • keywords used in meta tags should match those in the visible body text

32. Page elements that influence rankings • 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 • Keep your code clean and simple – use external css

33. 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!)

34. SEO in your web plan: Section 4 / Subsection 3 • 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.

35. The Global Internet: Issues of Web site design

36. The Global Internet: Issues of Web site design – we will look at • The difference between globalization and localization • Issues related to an “English only” site • Strategies for “localization” • Challenges in operating in the international marketplace

37. The big picture • English used to be the number one language of web users • By 2000 web users who were non-native English speakers outnumbered English speakers

38. Going global: 2 basic choices • Globalization versus localization • Globalization: One website fits all • Localization: different website for each country or locale

39. Globalized web site Globalization - one website fits all • Often the only choice for small / medium businesses • substantial cost to localized sites • Identify target markets • Find out as much as possible about those markets

40. Globalized web site One site fits 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 • tell people what time zone you are in if you give a phone number and service hours • language issues (next....)

41. Language issues on a globalized site Globalized web site • Majority of web users do not have English as a first language • If your site is ONLY in English • keep it simple • avoid slang, figures of speech, swear words • watch out for different meanings of words • Jumper/sweater • Braces/suspenders • Shopping cart / trolley • Sedan/saloon • Football/soccer

42. Globalized web site Designing input forms on globalized (one site for everyone) sites • The following can cause problems: • Postal code/Zip code • Date formats • Pick a province or state from a drop-down menu • Pick a country from a drop-down menu • Name forms differ in different cultures • last name/first name order and format? • family name not Christian name

43. Localized web site Localization – website is tailor-made for each market • Means building a different site for each different target country (or locale) • Very challenging – Firms need lots of research and expert advice • Very expensive to do well • Only the largest eCommerce companies will localize

44. Localized web site How does the international customer get to the right site? • The .com may be the “main” site • How does the customer get to their “own” site • Do you want them • to choose eg. Cisco.com and Nike.com • multiple links to other country sites • language of country label? • flags? • to be automatically redirected eg. Google.com • detecting the language setting of the browser (try it with Google) • IP address of the computer • Can they keep that preference? (eg. with a cookie)

45. Localized web site On a localized site: all these factors will influence design • The only way to do business with other cultures is to adapt to those cultures, including: • Language • Customs and culture • Value differences • Holidays and celebrations • Uses of colours, graphics, fonts, icons • Time zones • Shipping • Weights and measures • Currency for payment • Pricing

46. Localized web site The best marketing will always takes place in the language of the target country "If I'm selling to you, I speak your language. If I'm buying, dann müssen Sie Deutsch sprechen [then you must speak German].“ Willy Brandt, the former German chancellor • Even if people speak English they prefer to buy in their own language • Language localization involves much more than simply translating English into another language • Nike football (the language tunnel)

47. Localized web site Web futures • These are just a few of the issues to deal with in a global marketplace • As more and more people go on line, web teams will be grappling over decisions about how to localize sites • Consult local experts • Conduct usability testing with people from the target market