Planning an effective web presence: Part 2 Web interface design and usability. Basic search engine optimization MGMT 230
This week we will cover: Elements of web visual, interface, and functional design: website usability (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
Customer-Centric Web Site Design and Usability Usability doesn t just mean easy to use - it means usable by the site s target audience for their purpose in using the site (the use case ) Amazon.com has a very different use case than Google.ca or Twitch.tv or VIU.ca Think about Function (what can the user DO) Aesthetics (look and feel, graphic design) Content (text and media; freshness; UGC)
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. 3 rd ed. New Riders. 2014 https://www.sensible.com/dmmt.html
Work well on all devices Put content that is important to the user above the fold How do you know what is important? Use server logs Be mobile friendly: 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 Use whitespace Why use responsive design?
Make sure your site loads fast https://www.thinkwithgoogle.com/intl/en-gb/advertising-channels/mobile/mobileexperiences-should-be-priority-for-marketers/
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 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, customer type etc) Telus organizes their navigation by customer type 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 printready 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 account for DM / Facebook Messenger Real-time chat Employee names are nice to have (if appropriate) Not just fill-out forms (but well designed forms are very important) Make sure you have the resources to answer give your visitors a time frame for a response
12 reasons I won t buy from your website: the mistake list (from JeffBullas.com includes examples) Low quality visuals The site doesn t appeal to the target audience Content is stale and boring Under-estimating the importance of the About Us and Contact Us pages The shopping cart doesn t work properly Your trust indicators are missing Bad SEO Not being mobile friendly Not having video to illustrate products Not having a clear value proposition Cheesy stock images No available calls-to-action
Simple tips for web usability and engagement 7 principles that make your website more engaging (Dr. Susan Weinschenk) (5 minutes) Fix Your Funnel: 15 Things To Remove From Your Website Immediately (Orbit Media Studios) 18 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
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? Eg. Nike.com Automatic redirect?
WEB DESIGN FOR SEARCH ENGINE OPTIMIZATION
Organic listings Paid 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 The Internet: How Search Works (Code.org) 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 because an inbound link is a form of endorsement The more relevant and authoritative the site that is linking to yours, the more value that link has in terms of SEO Number and quality of sites that link to your pages (inbound links) Must be content relevant Avoid link exchanges Google regularly penalizes web sites with spammy link strategies
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 descriptive (never click here!) 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!)