USER-CENTERED DESIGN - University Communic Design Page 1 Our User-Centered Process The UO Digital Communications team follows a user-centered design process that

Download USER-CENTERED DESIGN - University Communic  Design Page 1 Our User-Centered Process The UO Digital Communications team follows a user-centered design process that

Post on 06-Feb-2018




0 download

Embed Size (px)


<ul><li><p>USER-CENTERED DESIGN </p><p>WEBSITE DESIGN &amp; DEVELOPMENT </p></li><li><p>User-Centered DesignPage 1</p><p>Our User-Centered Process</p><p>The UO Digital Communications team follows a user-centered design process that seeks to engage end-users in all stages of design and development. From understanding requirements to testing out designs, we work with you, your users, and stakeholders to find answers to the following questions:</p><p> Who is your primary target audience? Why are they visiting your website? What are they trying to accomplish? How do their environment, attitudes, and prior experiences impact their expectations of your site? How do users refer to and think about your content?</p><p>A deep understanding of your end users needs will enable you to make strategic, data-driven decisions about your website content, navigation, and design.</p><p>WHATS INVOLVED IN OUR USER-CENTERED DESIGN PROCESS?</p><p>While each project is unique, our user-centered design process follows these basic phases:</p><p> Discovery During the discovery phase, we seek to understand what both your end-users and your department requires for success.</p><p> Conceptual Design This phase focuses on creating effective and engaging content structure and site navigation to support user and departmental needs.</p><p> Visual Design We work with you to select templated design elements that support your content, messaging and user tasks.</p><p> Development Staging sites are made available for your team to input and test content before launch. Launch - Make your website live and make sure its functioning properly. Implementation After site launch, we assist you in validating usability and measuring outcomes.</p></li><li><p>PROJECT KICKOFFWEBSITE DESIGN &amp; DEVELOPMENT</p></li><li><p>Project KickoffPage 1</p><p>Project KickoffBuilding a Shared Vision</p><p>Nothing can derail a project quicker than unclear requirements and conflicting goals. Thats why we kickoff all our web projects by asking our clients to answer these ten basic questions:</p><p>SCOPE</p><p> Is this a redesign or a completely new website? If redesign, what are the URLs for the websites which must be included in this project.</p><p>GOALS &amp; OBJECTIVES</p><p> What is the purpose of your website? What actions do users need to perform on your site for your department to achieve its goals? What measurable outcomes will indicate that this project is a success? (e.g. increased web traffic, more </p><p>applications submitted, more appointments made, positive feedback, etc.)</p><p>STAKEHOLDERS</p><p> Who needs to be involved in this project and in what capacity? In what capacity will or do your internal staff use this website?</p><p>TARGET AUDIENCE</p><p> Who is your primary target audience? Why does this audience seek out your services?</p><p>TASKS AND CONTENT</p><p> What are the key tasks your primary target audience wants to accomplish on your site? What questions or complaints do you hear the most often about your services?</p><p>These basic questions act as a template to jumpstart more detailed conversations about project planning, objectives, target audience and content. </p></li><li><p>ANALYTICS &amp; EXISTING DATA </p><p>WEBSITE DESIGN &amp; DEVELOPMENT </p></li><li><p>Analytics and Existing Data Page 1 </p><p>Analytics and Existing Data Use What You Know </p><p>You probably already know a lot about your target audiences. Perhaps you speak with your users on a daily basis, answer phone calls, emails or form submissions. Maybe youve conducted focus groups to gain deeper insights into their thoughts and behaviors. Regardless of the approach, this information is invaluable when it comes to understanding what users want and expect from your services. </p><p>At the beginning of each website project, we ask you to look at the following to begin building a picture of your target audiences needs and behaviors: </p><p> Phone or emails logs Website feedback Previous user studies (interviews, focus groups, etc.) Website analytics </p><p>This information allows you to establish a baseline against which to measure the future performance of your website, and build an understanding of who is visiting your site, what they are trying to achieve, and how you can design your site. </p><p>WEBSITE ANALYTICS </p><p>Many UO websites have analytics set up to monitor visitor traffic. Examining your analytics data at the be-ginning of a project allows you to understand basic user behavior such as where users enter your site, which pages they visit and how long they stay. </p><p>Understanding your current analytics </p><p>Web analytics have their own language. Here are some basics to help you interpret your site analytics. </p><p>What is Bounce Rate? </p><p>Bounce Rate is when visitors to the website enter through a page and then exit from that same page without visiting a second page. Bounce Rate is calculated by dividing bounces (exiting without viewing a second page) into entrances. Examples: When a user types a different URL, hits the back button out of your site, closes the window, or clicks on an external link. </p><p>The Bounce Rate relates directly to the entrances to that page. To be considered a bounce, someone has to go directly to that page and directly leave your website without going to another page. So if your webpage has 10,000 page views but only 5,000 entrances, a Bounce Rate of 50 percent means that half of the 5,000 en-trances immediately left your site (2,500 bounces that did not view a second page on the website) and is not based on the total number of page views. </p><p>An excellent Bounce Rate is considered to be 25-55 percent, a good Bounce Rate is from 56-70 percent, and ones to investigate are over 70 percent. </p></li><li><p>Analytics and Existing Data Page 2 </p><p>When is a high Bounce Rate a concern? </p><p>A high Bounce Rate is a concern when people dont spend much time on a page compared to the amount of information on it, or when the pages link to on-site webpages or are intermediary pages and people arent continuing along that journey. </p><p>If webpages with a high Bounce Rate have all the information someone needs, especially about very specific information, or lots of links out to off-site webpages, then it may not be a concern. </p><p>What is Exit Rate? </p><p>Exit Rate is the percentage of people who leave your site through a particular page. </p><p>When is a high Exit Rate a concern? </p><p>If someone exits above 75 percent you need to look and see if that is a terminal page for your site it gives them the final information they need and they have no need to continue on from there on your site. If it is not and you want people to continue looking through your site, it can be a concern. If it is a terminal page, then it isnt a concern because the page was designed to be an exit page. </p><p>When is a low Exit Rate a concern? </p><p>If someone exits less than 30 percent of the time, then you need to look and see if they are getting the infor-mation they need on that page or if they are being forced to continue on the site because they cant find what they need. If you think the page should provide all the information people need and there is no need to contin-ue looking through the website but people arent exiting the site, then that could be a concern. If a page links to several on-site webpages or is an intermediary page and has a low exit rate it can be good. </p><p>USING ANALYTICS FOR SET BENCHMARKS FOR IMPROVEMENT </p><p>Once you understand how your visitors interact with your site, you can use this information to set a baseline for meaningful improvement. </p><p>Key Performance Indicators </p><p>The first step is to identify the key performance indicators (KPIs) that will indicate whether or not your project is a success. What you choose as KPIs depends upon how your department measures success. Some indicators will be tied to website interactions. Others will be tied to metrics like reduced support calls or increased name recognition. Whatever you decide, make sure your KPIs are actionable and measurable. </p><p>Here are a few things to consider when deciding your KPIs: </p><p> What actions are you encouraging end users to take? On the flip side, what user interactions would you like to see reduced (e.g. support emails and phone calls). Are you using social media? If so, what outcomes will prove that this is a good use of your time? Where are users struggling in terms of understanding your services and programs? </p></li><li><p>Analytics and Existing Data Page 3 </p><p>Brainstorm with your stakeholders to come up with a list. We will then help you decide how you can measure these after site launch. </p><p>Establish Baselines </p><p>Once you know your KPIs, we can help you establish baselines of current performance around these metrics. This can be done by looking at your analytics data, conducting usability studies, and analyzing other data points like conversions, emails, and call logs. </p></li><li><p>COMPARATIVE ANALYSIS </p><p>WEBSITE DESIGN &amp; DEVELOPMENT </p></li><li><p>Comparative Analysis Page 1 </p><p>Comparative Analysis What are other universities doing? </p><p>Something that can be useful in this process is comparing what you are doing and what you would like to do with what other universities are doing. When choosing which websites to compare, consider Pac-12 institutions, AAU institutions, and flagship universities, but dont leave out smaller or private universities. It is always good to get a broad look at what others are doing. Some of the things that you should look for when looking at other schools are: </p><p> Who is the primary audience? (Who are they trying to reach the most - students, faculty, staff, public) What information is being provided? (Content) How is information being provided? (Text, bullet points, photos, charts, checklists, forms, videos, infographics, etc.) </p><p> How their information is organized, grouped together? (Task-based, audience-based, organizational structure-based, etc.) </p><p> What terminology are they using? (What words are they using to describe tasks, etc.) </p><p>It is good to write down what you think about the websites you visit. You can include information about: </p><p> specific elements you like and dislike (tool bars, links, photos, organization, text, etc.); how a website makes you feel (friendly, inviting, dark, sad, etc.); how easily it is to navigate and find information; things you find confusing; forms or information you may find useful for your website. </p><p>Once you have completed your comparative analysis, we will meet with you to review your observations and determine what information and ideas will be valuable as we move forward in this process, including an understanding of why you may like or dislike some websites, what may or may not be working on your comparison websites, and what may or may not work on your website. We will also need to test the features that you are considering adopting to ensure it meets your projects goals and is useful to your end users. </p></li><li><p>Comparative Analysis Page 2 </p><p>EXAMPLE OF A BASIC COMPARATIVE ANALYSIS FOR PRATT SILS WEBSITE REDESIGN: </p><p>Pratt Sils Syracuse iSchool UNC SILS Illinois GSLIS </p><p>Navigation Contained in left sidebar; site levels represented by indenting and varying text size within menu. </p><p>Clear paths to information for all relevant users; no clear path to degree requirements; no site map. </p><p>Offers clear navigation labels and clear paths for each of four user groups. </p><p>Clearly labeled navigation menu at top of each page; dropdown menus with large number of subsections; links to student, faculty, etc., pages not in top-level navigation; left sidebar navigation on individual pages. </p><p>Organization Lacks clear paths to information for prospective students, current students, faculty. </p><p>Clearly labeled paths for all relevant users; consistent features and sidebar in each section; consistent and simple header. </p><p>Has clear structure that seems to match user needs; makes use of persistent links in headers and footer; featured news section is a starting place for casual readers. </p><p>Straightforward structure; clear path to/organization of information for prospective students; paths to information for students, faculty, alumni less clear because put in secondary navigation under People. </p><p>Readability Fonts and large amount of text make pages difficult to read; lack of clear headings to separate sections of content; inadequate space between text and photos. </p><p>Good use of white space, bullets, spacing; text is concise and explanatory, and the language used is simple. </p><p>Some pages are lengthy, but important information is clumped in tables and bullet points. </p><p>Adequate white space and padding between different areas of content; columns on homepage are vertically uneven, could use more space between them. </p><p>Content Text-heavy; some content repeated on multiple pages; spelling and grammatical errors; difficult to quickly find key information. </p><p>Homepage is clear, concise and updated; missing crucial department info, but still adequate; each page has clear, descriptive and updated content. </p><p>Content is frequently updated and appropriately highlighted. </p><p>Provides information that is most important to key user groups (i.e. admissions requirements, academic requirements, course offerings); clearly labeled sections of text; some pages that are text-heavy. </p><p>Appearance Limited use of color; use of fonts that are relatively difficult to read. </p><p>Site uses consistent styles that render on multiple browsers; images are attention-getting, high-res, and illustrative; appearance conveys quality of program, but not facilities. </p><p>Makes good use of photos, text and layout to convey values of the program. </p><p>Consistent color scheme; small number of pages with overabundance of text sizes and colors; good balance between text and photos on most pages. </p></li><li><p>COMPARATIVE ANALYSIS WORKSHEET COMPARISON UNIVERSITY </p><p>HOMEPAGE Who are they most trying to reach? What do you like /dislike? Why? What is unique? How does it make you feel (friendly, inviting, disapproving, reserved)? </p><p>APPEARANCE / DESIGN What is your overall impression? What grabs your attention? How are they using photos, colors, bold, italics? </p><p> What is unique? </p><p>NAVIGATION What do you want to know / do? Did you find that information? What do they want you to do? How easy is it to find information? Where did you get stuck? What words are they using? </p><p>ORGANIZATION How is their information organized? </p><p> Task (what are you trying to do)? Audience (who are you - students, faculty, staff)? </p><p> Org chart (how they do things)? Did you know where to find things? </p><p>CONTENT / LAYOUT What did they tell you? Was that what you wanted / expected / were looking for? </p><p> How did they tell you (text, lists, photos, charts, checklists, videos, infographics)? </p><p>ADDITIONAL NOTES: What were the strengths / weaknesses of the website? </p><p> What can they improve? Was there something useful that you may want to use (forms, infographics, checklists, etc.) </p></li><li><p>CONTENT AUDIT WEBSITE DESIGN &amp; DEVELOPMENT </p></li><li><p>Content Audit Page 1 </p><p>Content Audit Evaluating Your Current Content </p><p>A content audit is the cornerstone of your content strategy. It is a qualitative analysis of all of the published content on your website and allows you to catalog and analyze that content, assessing its strengths and weaknesses, on a page-by-page basis. </p><p>Why perform a content audit? Simply put: simplify, simplify, simpl...</p></li></ul>