Planning an effective web presence: web interface design

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

2. This week we will cover: • Elements of web visual, interface, and functional design: website usability • Designing web sites for global audiences

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

4. Website usability

5. Customer-Centric Web Site Design and Usability • Ecommerce sites are encouraged to focus on the CUSTOMER’S buying process and goals rather than the company’s perspective and organization. • 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”) • Jonathan Yuen’s site has a very different audience and purpose than Cheap CDs • Think about • Function (what can the user DO) • Aesthetics (look and feel, graphic design) • Content (text and media; freshness; UGC)

6. Aims of design for usability • Understand user’s goals • Anticipate them • Make it easy to accomplish them

7. Some best practices in web design: 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

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

9. 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 (1920 x1080, 1024 x 768, 960 x 640 or what?) • Fixed or liquid layout? • Avoid horizontal scrolling (unless it is a deliberate part of the design) • Use whitespace

10. 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 (example from Non-Linear Creations) • Use breadcrumbs

11. 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 • Left hand navigation bar?

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

13. Contact us? • Email addresses • Phone and fax numbers - for customer groups / product groups • Physical address • Names are nice • Not just fill-out forms • A good example of a contact page (Impact Visual) • Make sure you answer - and fast

14. 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. Peapod (use 06415 as zip code) versus Quality Foods • 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

15. Using media: Adobe Flash • Skip intro: avoid the Flash entry page • Problems with Flash-only sites • Browser or device incompatibility/plug-in needed • slow loading pages • difficult navigation (Yuen) • may not be accessible to visually impaired or on handhelds • Some good uses for Flash • Rich media advertisements – examples • Embedded video

16. Simple usability tips • Video from CanadaHelps.org • 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 from Steve Krug (watch from 8:12-13:30 minutes while the user tries to figure out the cost of using ZipCar)

18. The Global Internet: Issues of Web site design

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

20. 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 • CIA World Factbook Statistics: Internet Users – Country comparison

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

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

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

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

25. 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 • family name / Christian name

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

27. 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)

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

29. 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)

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