WEB STRATEGY & DEVELOPMENT NAVIGATION, ARCHITECTURE AND THE USER EXPERIENCE

Transcription

1 WEB STRATEGY & DEVELOPMENT NAVIGATION, ARCHITECTURE AND THE USER EXPERIENCE By Rebecca L. Cooney, MSC Clinical Assistant Professor Washington State University The good news for modern communication practitioners is that for the most part, we do not need to know much about html code, style sheets or back- end programming. We are the go- to people on the front- end individuals responsible for the user experience, content, elevating our company s brand and reaching our customers.

2 WEB SITE BASICS

3 PLAN. COORDINATE. PACE. It is not a one-person job It takes knowledge, time and patience You must have visuals and interactive features You need a mechanism for feedback and engagement You have to test your site and it MUST be mobile-friendly A website is never done it is always a beautiful work in progress A great website is an intersection of every other online initiative, including podcasts, blogs, news releases and other online media. David Meerman Scott Author, New Rules

4 Above the fold content, links, images, video that appear on screen before user has to scroll Accessibility the degree to which a system is of use to as many people as possible Alt tags associates text or title to an image CMS Content Management System Crawl Search engines such as Google have a Bot (see also GoogleBot ) which crawls web pages, following links and recording content, maintaining a searchable database of the internet. 15 CSS Cascading Style Sheets: code behind format and style of a web page Domain names a domain name is the url of a web page WEB JARGON ecommerce process of selling products online Favicon small icon that appears next to url in a web browser (often branded logo or icon) Flash vector graphics software that is animated and allows for sites to be more interactive with movement FTP File Transfer Protocol: This protocol is for transferring data between computers, so many content management systems include a FTP capability. 15 HTML hypertext markup language Get so many more at TheMaxDP.co.uk

5 WEB JARGON Infinite scrolling: term for pages with lengthy copy or content that requires the user to scroll for a long time ISP Internet Service Provider (i.e. Internet Explorer, Firefox, Chrome) JavaScript Scripting language that is embedded into html and allows for dynamic content Landing page - term for page visitors initially enter a site Meta Tags page titles that are not visible build into the code Navigation term associated with global navigation or sub-navigation or set of links at the top, side or footer of a web page Responsive webpage that adjusts in dimensions based on the device and screen size SEO Search Engine Optimization URL Uniform Resource Locator Vector graphics or visuals that include geometric shapes Get so many more at TheMaxDP.co.uk

6 WEB TEAM ROLES Integrated digital campaign teams vary in size depending on budgets and accessible resources. Some teams are configured internally, while others are a mix of company staff and third party vendors or contractors. At minimum, teams must have individuals dedicated to content management, design and analytics. This can be one person but it would be a lot to ask of any individual. A team of 6-8 individuals is ideal. Webmaster Project manager Inbound marketer Marketing specialist Tech specialist Data analyst Content strategist Social media manager Resources: 6 Roles Every Successful Web Design Project Needs by Bryce Mikkelson at SavvyPanda.com and The 5 People You Need in Your Digital Marketing Dream Team by Sujan Patel at SmallBizTrends.com INBOUND MARKETER: Responsible for long-term success of website and digital channels. Works closely with marketing specialist and content strategist in creating offers, gimmicks and other content that inspires user engagement. Responsible for ensuring conversion goals are met. Key attributes include trend-savvy, writing, resourceful, creative and experience in sales and marketing. SOCIAL MEDIA MANAGER: Creates and implements social media engagement plan in support of content strategy. Manages post calendar, adjusts strategy based on metrics, tracks user engagement. Finds new ways to inspire customer engagement, utilize advocacy partners and capitalize on the chatter by customers or connections. Key attributes include social media savvy, good writer and editor, resourceful, trendsetter, analytical. MARKETING SPECIALIST: Oversees digital outreach activities, serves as brand cop to ensure all company editorial and visual standards are met, assists in media buys and client relations. Key attributes: analytical, creative, experienced. CONTENT STRATEGIST: Responsible for developing the content strategy and overseeing or creating, maintaining and updating content on all digital channels. Develops and monitors content strategy, content matriculation and opportunities for new content. Works in real-time and adjusts as needed. Key attributes include exceptional writing and editing, detail-oriented, efficient, resourceful, creative, able to delegate and work well with others.

7 WEBSITE PLANNING

8 1. Hosting & programming: tech needs 2. Project: roles and resource assessment 3. Website profile: audience, first impressions, type of site, central messages, calls to action 4. Idea: goals, conversion points 5. Content: navigation, content areas 6. Design: brand, messaging 7. Promotion: user engagement 8. Maintenance, testing and SEO: management and metrics WEBSITE PLANNING When planning to develop a website for a company or even campaign microsite several key factors are in play. Is this a brand new site or site refresh? What is the purpose? What are the desired outcomes? How much content exists vs. need to be created? What photos and videos can be repurposed? And on it goes. The purpose of website planning is to think strategically and intentionally asking questions like how do you want it to function, what do you want users to do when they first visit the site, what calls to action will you implement to inspire engagement?

9 WEB GOALS & OBJECTIVES What are the goals for your site what do you hope to accomplish? What is the central message you want to convey through the site? What is the wish list of content, features, multimedia and engagement tools for your site? Typical site goals: o Build awareness o Sell tickets o Online orders o Connection to customers o Get donations o Get volunteers o Get participants o Persuade opinion o Inform public

10 NAVIGATION & FLOW WIREFRAME A wireframe is visual sketch that can be used in planning your website design and functionality. It typically happens prior to the actual building of the website - so that you can review and refine key decisions prior to any actual coding or creation. Brett Atwood, Clinical Associate Professor, WSU SITEMAP A sitemap is a hierarchical list of pages (with links) organized by topic, an organization chart, or an XML document that provides instructions to search engine crawl bots (Technopedia, n.d.). It looks much like an organizational chart and shows the breakdown of a website structure starting with top (global) navigation, secondary navigation and tertiary navigation. It is typically void of images or design features and focuses more on page titles and links. The main tools practitioners use to create an online architectural structure and navigational path for users include sitemaps and wireframes. Sitemaps are essentially a website s table of contents while wireframes provide the visual structure for site elements and features.

11 HOME PAGE TIPS Use things like navigation icons that stand out and convey company branding to enhance function and usability Clearly present products and value statements to immediately tell the user who the company is and what they do Use features like interactive photo banner sliders to make it easier for the user to surf the site contents Simplicity works value statement, link to social media and try it button may be enough Grids and columns help guide the eye It is OK to just showcase products and not show everything all at once Use of vibrant colors and simple navigation enhances simplicity Incorporate interactive and visual elements to enhance user experience Use of a high resolution image as background can be powerful Use of one large slideshow paired with a simple top navigation creates a targeted navigation experience HubSpot Blog (n.d.). How to design a website: 50 brilliant homepage designs.

12 WEB DESIGN

13 WEB DESIGN PROCESS Welcome to the complex (yet doable) world of web development

14 WEB DESIGN PRINCIPLES A glitzy web and unique product is not enough to be successful selling online. What it takes is superior customer service and a customer experience that provides unique value. USA Today Web Design Quick List Color palette Structured pages (templates) Simple, easy to follow Proper navigation Load-time Fonts In-brand On-message GRAPHIC: Dreamstime.com

15 Fonts: large and distinguishable Short videos: engage visitors Images: large photos best above the fold Videos: videos that play automatically can add value Semi-flat design: Flat design is any element that does not include or give the perception of three dimensions, such as shadows. Benefits: reduces site load time. Hamburger menus: take users directly where they want to go Product pictures: highlight key features Cards: small features you see in Pinterest with photo, headline and short promo copy KEY ELEMENTS IN MODERN WEB DESIGN Every year new elements and styles in website design begin to emerge. Some elements -- when incorporated thoughtfully -- help tell stories and explain your company. Other elements work to improve how content looks on a specific device. While it's not necessary to include every trend that comes about on your website, many of them have the potential to improve your visitor's experience. Jeffrey Vocell, Principal Product Marketing Manager at Hubspot Source: The 8 Elements of Modern Web Design by Jeffrey Vocell at blog.hubspot.com (Oct. 8, 2015)

16 Create content for your audience - not stakeholders WEB CONTENT BEST PRACTICES When people come to you online, they are not looking for TV commercials. They are looking for information to help them make a decision. Be the expert in your business, products and services Use examples and testimonials Who are my readers? How do I reach them? What are their motivations? What are the problems I can help them solve? How can I entertain them and inform them at the same time? What content will compel them to purchase what I have to offer? To be successful, you need to do the same thing. David Meerman-Scott, sales and marketing strategist and author Be brief, easy to scan and optimize Update content regulary and with intention -David Meerman-Scott, sales and marketing strategist and author Give them a reason to stay (and come back) with exclusives and incentives Make copy actionable so you can meet conversion goals

17 USER EXPERIENCE

18 UNDERSTANDING VISITORS As you get further in the planning and development of your website, you must consider how a typical user will spend time on your site. What do you want them to do once they arrive at your landing page? What actions do you want them to take? What path are you hoping they follow from one page or feature to the next and how can you influence that path? To best meet the needs of your site visitors, understand the ultimate goals you have for your site so you can establish content and navigation features that get them to those objectives. What is your site purpose? Is it to get them to engage fill out a form, you, visit your social channels? Is it to buy something in your online store? Whatever those ultimate goals are answers the question what do you want them to do on your site.

19 USER PATH ANALYSIS User path analysis is a way to determine the sequence of pages and sections within a website that a user follows as he or she navigates through pages and links. When structuring the desired user path, consider the following questions: What do you want users to do once they arrive on a page in your site? What actions do you want them to take? What path are you hoping they follow from one page or feature to the next and how can you influence that path? Look at the statistics: Women make 85 percent of all buying decisions that s $25 billion of purchasing power. All of a sudden, we re a really hot demographic and we don t buy the same way that men do. Karan Eriksson, CEO, Women In Technology International (WITI) Source: Host Baby Blog post by Chris Bolton May 2013

20 USER EXPERIENCE

21 VISITOR BUYING CYCLE Types of content to achieve goals differ important to create content for every stage of the buying cycle. Hubspot, Building a Killer Content Strategy Awareness New visitor is just browsing checking things out. They may have been referred to the site via search, social channel or friend. They are there because they are intrigued and want to learn more (quickly) Purchase Your visitor is ready to buy pull the switch and make the sale or officially sign up. This is a critical stage to deliver on promise and seek ways to maintain connection, loyalty and advocacy. Research/Education The visitor is at a state of consideration this is likely a return visitor who is back to learn more maybe subscribe to a blog or sign up to receive more information. They are spending more time on the site and digging deeper into the primary and secondary pages. Comparison/Validation Now that the visitor is fully vested in learning more they want to validate your company, product or service is the right one. So they are looking around at competitor sites, seeking out customer reviews, comparing prices and asking for more information from you, from the competition and from their own network.

22 MOTIVATING USER ENGAGEMENT Mars, K. (2015, Mar 20). Five (5) best practices for your website content strategy. The Rocket Blog. Formal, flowery content Lacks all humor un-fun and un-interesting Uses too many be verbs (is, are, was, were, etc.) No photos or videos (or bad ones) Copy is too long without breaks or use of style (bold, itals, section headers) The Boring Website The Engaging Website Uses informal, digestible writing style Incorporates humor (in small doses) think witty vs. cynical Uses active voice Copy is brief, intentional, relevant and useful Overall site design and copy is scannable easy to navigate and logical flow and placement of content and visual elements

23 WEB CONTENT

24 WEB CONTENT STRATEGY What specific information do you want to offer visitors? What information already exists and can be incorporated into the site? What sections and subsections do you know you want to include? What new content is required and needs to be generated? What resources, services, etc. will be offered on the site? How do you want to structure the content? Does a desired user path already exist? Navigational Structure User path analysis a way to determine the sequence of pages and sections on your website that a user follows as he or she navigates your website. Conversion Path Allow you to segment, qualify and convert online respondents from paid search, display, and other digital initiatives. Source: Hub Spot Building a Killer Content Strategy

25 WEB CONTENT PLANNING When people come to you online, they are not looking for TV commercials. They are looking for information to help them make a decision. David Meerman-Scott, sales and marketing strategist and author Be the expert in your business, products and services Use examples and testimonials Give them a reason to stay (and come back) with exclusives and incentives Create content for your audience - not stakeholders Who are my readers? How do I reach them? What are their motivations? What are the problems I can help them solve? How can I entertain them and inform them at the same time? What content will compel them to purchase what I have to offer? To be successful, you need to do the same thing - David Meerman-Scott, sales and marketing strategist and author Make copy actionable so you can meet conversion goals Be brief, easy to scan and optimize Update content regulary and with intention

26 CONTENT PLANNING EXAMPLE Process for taking a a one-page website with mostly promotional copy and creating a multi-layer, dynamic and actionable version with new copy and features AUDIENCE Q&A DECISIONS BRAND CONVERSION OPTIMIZE CREDIBILITY CONNECTION WHY? ENGAGE Most websites have multiple audiences. But there are always those that matter most. This stems back to buyer personas. So I asked myself who is my PRIMARY audience? Who else needs to be considered? After it was clear who my primary audience, I asked myself several questions - pondering what was really needed with this content what information is actually needed to meet audience expectations? Considering site goals what do I want visitors to DO when they come to the site? What is the path I want them to follow? What is their buying (or conversion) cycle? A company and product brand message and visual identity are a major element in the content planning process to ensure content stays in-brand and on-message. Referring again to site goals and conversion points I had to think about how I would showcase these calls to action and where they should be integrated into the content. Key words and phrases potential site visitors will use in organic search are critical when deciding page titles, text, alt tags and link titles so that content can be optimized and easy to find when visitors search in and outside the site Legitimizing the site is important to first-time visitors so they feel confident they are looking at something that is real and secure. Use of visible disclaimers, quotes by leadership, rankings, statistics, testimonials and social media links and feeds help legitimize a website. Sites rarely stand-alone without connection to other related sites or affiliated partners. As part of secondary navigation and within text I was intentional about establishing relevant, useful connections through links and features. As part of content planning I wanted to keep in my why the visitor was on the site. I considered the top reasons a visitor would be there and what they would want to read, do or see. When contemplating most valuable copy points, I wanted to make sure I incorporated actionable content that makes the visitor feel connected and inspired to engage via social media, completing forms or surveys, ing to learn more, registering for an event, etc.

27 SITE LAUNCH

28 Optimization: Verify search engine optimization is set up for the site and on every page. This includes title, description and key terms Design: Check design elements consistency in brand, quality of images, alt tags in photos and attribution, font and color scheme. Also verify the design is responsive and looks and functions the way you want it to on smaller screens and mobile devices. Analytics: Ensure site is set up to be tracked and monitored properly by an metrics tool like Google Analytics. Browser Testing: Check the site on all of the main browsers- Internet Explorer, Chrome, Firefox and that all aspects of the site are functioning. Browser testing also includes testing forms and that users receive auto , thank you pages, etc. Note: tools like Browserling and Browserstack are useful in testing browsers. Link Checking: Ensure that all links lead to the correct location including hyperlinks, social media links, , etc. Promote: Celebrate success and share your new site launch with internal and external stakeholders, friends, family and connections. Share on social media, whatever will best get the word out. Check your url: Ensure the published url is what you want. You may need to set up a redirect or purchase a unique (vanity) domain. WEB CONTENT PLANNING Test. Learn. Adjust. Testing on a website typically refers to A/B or multivariate test taking aspects of your site and through intention and campaign strategy, setting it up so population A receives the link to test site 1 and population B receives the link to test site 2 and analytics are tracked accordingly. Testing efforts are on a set timeline with specific assessment metrics established. Metrics and tracking is ongoing. Reporting and adjusting varies based on what the organization or campaign is trying to accomplish.