Download pdf - USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

USER-CENTERED DESIGN

WEBSITE DESIGN amp DEVELOPMENT

User-Centered DesignPage 1

Our User-Centered Process

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

bull Who is your primary target audiencebull Why are they visiting your website What are they trying to accomplishbull How do their environment attitudes and prior experiences impact their expectations of your sitebull How do users refer to and think about your content

A deep understanding of your end usersrsquo needs will enable you to make strategic data-driven decisions about your website content navigation and design

WHATrsquoS INVOLVED IN OUR USER-CENTERED DESIGN PROCESS

While each project is unique our user-centered design process follows these basic phases

bull Discovery ndash During the discovery phase we seek to understand what both your end-users and your department requires for success

bull Conceptual Design ndash This phase focuses on creating effective and engaging content structure and site navigation to support user and departmental needs

bull Visual Design ndash We work with you to select templated design elements that support your content messaging and user tasks

bull Development ndash Staging sites are made available for your team to input and test content before launchbull Launch - Make your website live and make sure itrsquos functioning properlybull Implementation ndash After site launch we assist you in validating usability and measuring outcomes

PROJECT KICKOFFWEBSITE DESIGN amp DEVELOPMENT

Project KickoffPage 1

Project KickoffBuilding a Shared Vision

Nothing can derail a project quicker than unclear requirements and conflicting goals Thatrsquos why we kickoff all our web projects by asking our clients to answer these ten basic questions

SCOPE

bull Is this a redesign or a completely new websitebull If redesign what are the URLs for the websites which must be included in this project

GOALS amp OBJECTIVES

bull What is the purpose of your websitebull What actions do users need to perform on your site for your department to achieve its goalsbull What measurable outcomes will indicate that this project is a success (eg increased web traffic more

applications submitted more appointments made positive feedback etc)

STAKEHOLDERS

bull Who needs to be involved in this project and in what capacitybull In what capacity will or do your internal staff use this website

TARGET AUDIENCE

bull Who is your primary target audiencebull Why does this audience seek out your services

TASKS AND CONTENT

bull What are the key tasks your primary target audience wants to accomplish on your sitebull What questions or complaints do you hear the most often about your services

These basic questions act as a template to jumpstart more detailed conversations about project planning objectives target audience and content

ANALYTICS amp EXISTING DATA

Analytics and Existing Data Page 1

Analytics and Existing Data Use What You Know

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 yoursquove 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

At the beginning of each website project we ask you to look at the following to begin building a picture of your target audiencesrsquo needs and behaviors

bull Phone or emails logs bull Website feedback bull Previous user studies (interviews focus groups etc) bull Website analytics

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

WEBSITE ANALYTICS

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

Understanding your current analytics

Web analytics have their own language Here are some basics to help you interpret your site analytics

What is Bounce Rate

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

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 10000 page views but only 5000 entrances a Bounce Rate of 50 percent means that half of the 5000 en-trances immediately left your site (2500 bounces that did not view a second page on the website) and is not based on the total number of page views

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

When is a high Bounce Rate a concern

A high Bounce Rate is a concern when people donrsquot 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 arenrsquot continuing along that journey

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

What is Exit Rate

Exit Rate is the percentage of people who leave your site through a particular page

When is a high Exit Rate a concern

If someone exits above 75 percent you need to look and see if that is a terminal page for your site ndash 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 isnrsquot a concern because the page was designed to be an exit page

When is a low Exit Rate a concern

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 canrsquot 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 arenrsquot 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

USING ANALYTICS FOR SET BENCHMARKS FOR IMPROVEMENT

Once you understand how your visitors interact with your site you can use this information to set a baseline for meaningful improvement

Key Performance Indicators

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

Here are a few things to consider when deciding your KPIs

bull What actions are you encouraging end users to take bull On the flip side what user interactions would you like to see reduced (eg support emails and phone calls) bull Are you using social media If so what outcomes will prove that this is a good use of your time bull Where are users struggling in terms of understanding your services and programs

Brainstorm with your stakeholders to come up with a list We will then help you decide how you can measure these after site launch

Establish Baselines

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

COMPARATIVE ANALYSIS

Comparative Analysis Page 1

Comparative Analysis What are other universities doing

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 donrsquot 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

bull Who is the primary audience (Who are they trying to reach the most - students faculty staff public) bull What information is being provided (Content) bull How is information being provided (Text bullet points photos charts checklists forms videos infographics etc)

bull How their information is organized grouped together (Task-based audience-based organizational structure-based etc)

bull What terminology are they using (What words are they using to describe tasks etc)

It is good to write down what you think about the websites you visit You can include information about

bull specific elements you like and dislike (tool bars links photos organization text etc) bull how a website makes you feel (friendly inviting dark sad etc) bull how easily it is to navigate and find information bull things you find confusing bull forms or information you may find useful for your website

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

EXAMPLE OF A BASIC COMPARATIVE ANALYSIS FOR PRATT SILS WEBSITE REDESIGN

Pratt Sils Syracuse iSchool UNC SILS Illinois GSLIS

Navigation Contained in left sidebar site levels represented by indenting and varying text size within menu

Clear paths to information for all relevant users no clear path to degree requirements no site map

Offers clear navigation labels and clear paths for each of four user groups

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

Organization Lacks clear paths to information for prospective students current students faculty

Clearly labeled paths for all relevant users consistent features and sidebar in each section consistent and simple header

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

Straightforward structure clear path toorganization of information for prospective students paths to information for students faculty alumni less clear because put in secondary navigation under ldquoPeoplerdquo

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

Good use of white space bullets spacing text is concise and explanatory and the language used is simple

Some pages are lengthy but important information is clumped in tables and bullet points

Adequate white space and padding between different areas of content columns on homepage are vertically uneven could use more space between them

Content Text-heavy some content repeated on multiple pages spelling and grammatical errors difficult to quickly find key information

Homepage is clear concise and updated missing crucial department info but still adequate each page has clear descriptive and updated content

Content is frequently updated and appropriately highlighted

Provides information that is most important to key user groups (ie admissions requirements academic requirements course offerings) clearly labeled sections of text some pages that are text-heavy

Appearance Limited use of color use of fonts that are relatively difficult to read

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

Makes good use of photos text and layout to convey values of the program

Consistent color scheme small number of pages with overabundance of text sizes and colors good balance between text and photos on most pages

COMPARATIVE ANALYSIS WORKSHEET

COMPARISON UNIVERSITY

HOMEPAGE bull Who are they most trying to reach bull What do you like dislike Why bull What is unique bull How does it make you feel (friendly inviting disapproving reserved)

APPEARANCE DESIGN bull What is your overall impression bull What grabs your attention bull How are they using photos colors bold italics

bull What is unique

NAVIGATION bull What do you want to know do bull Did you find that information bull What do they want you to do bull How easy is it to find information bull Where did you get stuck bull What words are they using

ORGANIZATION bull How is their information organized

bull Task (what are you trying to do) bull Audience (who are you - students faculty staff)

bull Org chart (how they do things) bull Did you know where to find things

CONTENT LAYOUT bull What did they tell you bull Was that what you wanted expected were looking for

bull How did they tell you (text lists photos charts checklists videos infographics)

ADDITIONAL NOTES bull What were the strengths weaknesses of the website

bull What can they improve bull Was there something useful that you may want to use (forms infographics checklists etc)

CONTENT AUDIT WEBSITE DESIGN amp DEVELOPMENT

Content Audit Page 1

Content Audit Evaluating Your Current Content

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

Why perform a content audit Simply put simplify simplify simplify A content audit helps you determine if your content is relevant ndash both to users and to your departmental goals It also helps you answer important questions Is content accurate and consistent Does it speak in the voice you want to project Essentially a content audit helps shape your content by using the data we gathered during stakeholder interviews and user research to help you assess where your website is and where you want it to be Then simplify everything down to only what is essential

A content audit will help you

bull Create an inventory of content bull Prioritize content bull Determine which pages need copywriting editing bull Determine which pages need to be updated bull Determine which pages should be consolidated bull Determine which pages are no longer needed bull Determine if your content aligns with the needs of your users

PHASE 1 STARTING YOUR CONTENT AUDIT

First things firsthellip Therersquos nothing sexy about the content audit process But that doesnrsquot mean that itrsquos not critically important to your websitersquos success When you think about starting your content audit itrsquos easy to find yourself getting overwhelmed and procrastinating Donrsquot let yourself fall into this trap Just take it one step at a time and you will be done in no time

If you look back at the content audit example phase 1 is the first five columns of the audit sheet You should start the first phase at the beginning of the project to ensure that it is done before user research is completed

Step 1 Find your content

bull If you have a way to pull up all the published pages on your site then use this to complete the audit bull If you do not go through each page and write down that URL and the URL of every link on the page that goes to a different page on your website

Step 2 Enter all the URLs on the spreadsheet in the ldquoPage URLrdquo column

Step 3 Evaluate the content on each page

Whether reviewing current content or creating new content these questions will help you evaluate your content

bull What is the purpose of the page bull Who is the pagersquos primary intended audience bull What are the 1-2 things you want a user to do or learn after reading this page

bull Is the information valuable to the intended audience bull Does the page enable you to do something useful bull Does the page offer information not found elsewhere bull Is the information accurate and up-to-date

bull What topics are covered bull Is your content organized by related information or tasks and not by your departmental structure bull Will users think all of the content on the page is related to the task they want to perform or the information they need

bull Does the page only provide information related to a specific topic or task (donrsquot make them skim the whole book when they only want whatrsquos in one chapter)

bull If the content on your page is longer than 3-4 scrolls can you divide the information into sub-topics with their own pages

bull Can you see what information is on the page at a glance bull Can you easily find links keywords and bullet points while skimming the page bull Do you use headers to break up text into easily identifiable sections bull Does the page title describe that page and include key words or phrases

bull Is the text well-written (short easy to understand conversational ndash see ldquoWriting for the Webrdquo) bull Is the text clear and as concise as possible (how would you say it on Twitter) bull Are you using your audiencersquos language and not your own bull Are you avoiding marketing ldquofluffrdquo jargon and undefined acronyms

bull Has the content been through an editing process (at least 2-3 people should review all content) bull Is the text grammatically correct (see UO Editorial Style Guide and The Chicago Manual of Style) bull Is the text free from spelling errors bull Are the links up-to-date and working

bull What impression does the design give (chaotic focused cluttered minimalist ndash see ldquoVisual Designrdquo) bull Does the design support the pagersquos purpose and target audience bull Are the images related to the content or provide additional information about the page bull Is the look consistent from page to page

Step 4 Fill in the content type

bull Ask yourself what is the set-up of the page - Examples homepage informational text page story page (content that gets added frequently like news or blogs) list of links staff directory webform tables graphic element calendar of events photo gallery etc

Step 5 Fill in the topic

bull Ask yourself what the topic of the information is on the page mdash this helps us group pages that have related topics

Step 6 Fill in the audience

bull Ask yourself who needs this information mdash Examples current students prospective students faculty staff public alumni etc

Step 7 Fill in the purpose

bull Ask yourself why you have this page - Examples general information introduction to a program attend an event join a group fill out a form

PHASE 2 COMPLETING YOUR CONTENT AUDIT

The second phase of your content audit focuses on aligning what you have with what your end users and department needs This phase should be tackled after you have conducted user research and have a clear understanding of your project requirements

If you think of your website like a puzzle through this process you have been gathering pieces to put your website together You have come to understand your end user and departmental requirements (green pieces) and what content you currently have (yellow pieces) Now itrsquos time to start putting the puzzle pieces together ndash matching the green and yellow pieces to see where you are missing puzzle pieces to make one complete website while weeding out the pieces you donrsquot need or donrsquot fit well together

Step 1 Fill in keep revise remove or merge with

bull Ask yourself bull Does this content help your users achieve their goals quickly and easily bull Does this content push users towards the actions you require bull Of the content yoursquore keeping how important it is to your end users (prioritize) bull Did users express needs that your current content doesnrsquot support

bull Using the answers to the previous questions decide whether to keep revise remove or add content in your audit

bull Document your decisions in the last three columns of the content audit spreadsheet Yoursquoll find that you refer to this throughout the design process especially when building the framework for your websitersquos content in the next phase mdash Information Architecture

Step 2 Fill out the pagersquos priority - high medium low

bull Depending on the amount of time before you launch your redesigned website you may not have time to update everything before the launch so this step is important so that high priority pages can be completed first

Step 3 Fill in any notes you need to make about that page

bull Examples shorten content merge with xxx page add table need to get new photos etc

Content Evaluation Page 1

Content Evaluation Questions

What is the purpose of the page Who is the pagersquos primary intended audience What are the 1-2 things you want a user to do or learn after reading this page

Is the information valuable to the intended audience Does the page enable you to do something useful Does the page offer information not found elsewhere Is the information accurate and up-to-date

What topics are covered Is your content organized by related information or tasks and not by your departmental structure Will users think all of the content on the page is related to the task they want to perform or the

information they need Does the page only provide information related to a specific topic or task (donrsquot make them skim the

whole book when they only want whatrsquos in one chapter) If the content on your page is longer than 3-4 scrolls can you divide the information into sub-topics

with their own pages

Can you see what information is on the page at a glance Can you easily find links keywords and bullet points while skimming the page Do you use headers to break up text into easily identifiable sections Does the page title describe that page and include key words or phrases

Is the text well-written (short easy to understand conversational ndash see ldquoWriting for the Webrdquo) Is the text clear and as concise as possible (how would you say it on Twitter) Are you using your audiencersquos language and not your own Are you avoiding marketing ldquofluffrdquo jargon and undefined acronyms

Has the content been through an editing process (at least 2-3 people should review all content) Is the text grammatically correct (see UO Editorial Style Guide and The Chicago Manual of Style) Is the text free from spelling errors Are the links up-to-date and working

What impression does the design give (chaotic focused cluttered minimalist ndash see ldquoVisual Designrdquo) Does the design support the pagersquos purpose and target audience Are the images related to the content or provide additional information about the page Is the look consistent from page to page

Example of a Content Audit (More Info)

Page URL (More Info) Content Type (More Info) Topic (More Info) Audience (More Info) Purpose (More Info) Keep Revise Remove Merge With Priority (HML) Notes

httpsadvancementuoregoneducontenthomepage Marketing Page Homepage General Public Advancement Keep

httpsadvancementuoregoneduwhat‐we‐do Informational Page What We Do General Public Explain what Advancement does Revise ‐ Remove CMBM Make 2 Columns

httpsadvancementuoregoneduresources‐and‐publications Informational Page Resources and Publications General Public Faculty amp Staff List Advancement publications resources Revise ‐ Remove AtO OQ Style Guide

httpsadvancementuoregoneduabout‐us Informational Page About Us General Public Explain what Advancement does Revise ‐ Update copy

httpsadvancementuoregoneducontact‐us Staff List Contact Us General Public List of contacts Revise ‐ Remove CMBM

httpsadvancementuoregoneduvice‐president Profile Vice President for University Advancement General Public Faculty amp Staff Background information on VP Revise ‐ Update copy

httpsadvancementuoregoneduUOAA Informational Page University of Oregon Alumni Association General Public Faculty amp Staff Explain who Advancement is Keep

httpsadvancementuoregoneduuniversity‐development Informational Page University Development General Public Faculty amp Staff Information about what Development does Keep

httpsadvancementuoregonedugovernment‐and‐community‐relations Informational Page Government and Community Relations General Public Faculty amp Staff Information about what GCR does Keep

httpsadvancementuoregonedujordan‐schnitzer‐museum‐art Informational Page Jordan Schnitzer Museum of Art General Public Faculty amp Staff Information about what JSMA does Keep

httpsadvancementuoregoneducommunications‐marketing‐and‐brand‐management Informational Page Communications Marketing and Brand Management General Public Faculty amp Staff Information about what CMBM does Remove ‐Move to Communications

httpsadvancementuoregonedupublic‐affairs‐communications Informational Page Public Affairs Communications General Public Faculty amp Staff Information about what PAC does Remove ‐Move to Communications

httpsadvancementuoregonedudigital Informational Page Digital Communications General Public Faculty amp Staff Information about what Digital Communications does Remove ‐Move to Communications

httpsadvancementuoregonedudigitalcontact Staff List Digital Communications Staff Directory General Public Faculty amp Staff List of contacts Remove ‐Move to Communications

httpsadvancementuoregonedukwax Informational Page KWAX General Public Information about what KWAX does Remove ‐Move to Communications

httpsadvancementuoregonedumarketing‐communications Informational Page Marketing Communications General Public Information about what Marketing Communications does Remove ‐Move to Communications

httpsadvancementuoregonedubrand‐management Informational Page Brand Management General Public Information about what Brand Management does Remove ‐Move to Communications

httpsadvancementuoregonedubrand‐managementpolicy Informational Page Usage Policy Brand Management Customers Information about the Usage Policy Remove ‐Move to Communications

httpsadvancementuoregonedubrand‐managementlicensing Informational Page Licensing Brand Management Customers Information about Licensing Remove ‐Move to Communications

httpsadvancementuoregonedubrand‐managementdisplayunits Informational Page Display Units Brand Management Customers Information about Display Units Remove ‐Move to Communications

httpsadvancementuoregonedubrand‐managementtradeshow Informational Page ConferenceTradeshow Pieces Brand Management Customers Information about Conference Tradeshow pieces Remove ‐Move to Communications

httpsadvancementuoregonedubrand‐managementproducts Informational Page Products Brand Management Customers Information about Products Remove ‐Move to Communications

httpsadvancementuoregonedubrand‐managementcontact Staff List Brand Management Staff Directory General Public List of contacts Remove ‐Move to Communications

USER RESEARCH WEBSITE DESIGN amp DEVELOPMENT

User Research Page 1

User Research Understanding Needs and Objectives

Throughout this overview wersquove talked about the alignment of your end usersrsquo needs and your own departmental objectives

WORKING WITH STAKEHOLDERS

The purpose of the project kickoff meeting is to discuss project objectives requirements and departmental needs While these discussions often take place with a core website team we also like to meet with stakeholders who either interact with end users or who use the website in their own work These meetings can take many forms including

bull In-depth discussion of your departmentrsquos organizational objectives workflows messaging and desired outcomes

bull Group task analysis to help document workflows bull Development of user profiles based on stakeholder insights bull Creation of user journey maps based on stakeholder interactions

INVOLVING END USERS

The heart of a user-centered design process is engaging the audiences who currently or potentially use your services While user research can vary by project at a minimum we strive to conduct the following activities

Interviews and observations ndash Listening to your users

With your help wersquoll sit down with end users and listen them talk about why they use your services what they expect to be able to do what they actually do and where they get frustrated or confused If your website includes business workflows we will also watch users interact with your site

Personas ndash You are not your target audience

From interviews and observations we can create personas to represent the goals behaviors attitudes and frustrations of specific user groups Personas are a great way to communicate what yoursquove learned about your target audience They can also help guide decisions about content layout and design

Usability studies ndash Observing users interact with design solutions

The adage goes that what end users say they do and what they actually do can be very different Task-based usability studies allow us to not only understand what is working and not working on your current site but also to test out design solutions early on With quick iterative studies of 3-5 users you can gain valuable insights into the effectivness of proposed navigation labels content layout and features well before your site is launched

Card sortingndash Understanding usersrsquo mental models

Once you have a clear understanding of the user and business objectives your content must support wersquoll want to learn how end users expect this content to be labeled and organized Card sorting helps facilitate these activities

In a card sort we ask users to organize representative pieces of your content into logical groups and then label these groups When we conduct card sorts across multiple participants we begin to see patterns in how they expect your content to be organized and labeled This helps us determine your site structure or information architecture

This is only a small sample of the user research activities we can conduct during the discovery and concept design phases Regardless of the activity user research is key to building a usable engaging and accessible website that meets your user and departmental needs

INFORMATION ARCHITECTURE

Information Architecture Page 1

Information Architecture Building the framework for your websitersquos content

Galley kitchen or open floor plan One-story or two-story Gas or wood-burning fireplace From Bungalow to Craftsman Cape Cod to Colonial knowing what a homeowner wants and expects guides the type of home an architect designs Building a website isnrsquot exactly like building a house but understanding what your users want and expect plays a similar role in determining the structure and framework for how you design and organize the content and navigation on your website

Now that wersquove taken the time to understand how your users expect content to be organized and how they refer to that content (what terminology they use) we will use that data to create your websitersquos information architecture

WHAT IS INFORMATION ARCHITECTURE

Information architecture is the structural design of a website showing how effective organization and labeling can help users find and use your content Information architecture focuses on who your users are how they navigate through your site what technology they use and what content you provide

The purpose is to help users understand where they are on your site where to find what they are looking for what theyrsquove found what other things are on the site and what to expect from the site

Information architecture produces site maps (website structure) and wireframes (design blueprint) to convey how the site will work from a practical perspective

What is a site map and how do I read it

Through this website redesign process we will develop a working site map for your website A site map is a planning tool that visually shows how information will be grouped and labeled where content will be located and how a user will move through your website It lists the pages and content organized in hierarchical fashion that should be read from top down from left to right

HOMEPAGE

At the top of the site map is your homepage The information listed there is what will be shown on your sitersquos homepage (key messaging a brief description of your department and what it does a list of upcoming events testimonials about your department etc)

SITE MAP OF THE HOMEPAGE

BECOMES THE HOMEPAGE

PRIMARY NAVIGATION

Below the homepage information is the primary navigation (the main menu listed horizontally across the top of the site just below your departmentrsquos name) Primary navigation is the highest profile and labels the 5-8 sections of content that the users are the most interested in visiting

The primary navigation is the starting point on your userrsquos journey through your website beyond your homepage You will find the primary navigation at the top of every page it should allow the user to easily access exactly what they are looking for and remain consistent throughout your website The easier you make it for your user to understand the more likely they are to stay on your site to get the information they came for and to return

later when they need additional information

The primary navigation should be based on tasks (what am I trying to do on this website) rather than user (who am I) Users come to a website to accomplish a specific task and forcing them to self-identify first can be frustrating and deter them from accomplishing their goals The primary navigation should be read from left to right like part of a journey (getting started to getting a task accomplished to getting help for a specific problem to answering questions etc)

Five Problems with Audience-Based Navigation (from Nielsen Norman Group)

1 Users donrsquot know which group to choose Sometimes users identify with more than one audience group Other times they donrsquot identify with any of the options In some cases people donrsquot understand the labels because the audience categories are based on the organizationrsquos internal jargon The reality is that people donrsquot always fall neatly into a single category nor are they able to quickly self-identify

2 Users question whether the category will have information about that group or for that group Imagine a university website with a link in the main navigation called ldquoFacultyrdquo Would you expect to see information about the professors that teach at the university or would you expect specialized information for faculty members Based on the label alone you canrsquot tell and neither can users

3 Forcing people to self-identify creates an additional step and takes people out of their task mindset Web users are task oriented they arenrsquot thinking about who they are In audience-based navigation people must ask themselves who the site thinks they are and what type of content that type of person wants All these questions increase usersrsquo cognitive effort and people havenrsquot even made it past the navigation yet

4 Users feel anxious that the information they see might be incomplete or incorrect When users feel stuck in one group they wonder what other groups get that they donrsquot Particularly in e-commerce or B2B contexts users want to know if other audience groups have access to better options or prices

5 Websites with audience-based navigation often have overlapping content which creates a greater workload for users (and content maintainers) Often topics relate to more than one audience group So designers end up either creating two pages one for each audience (a technique that replicates content) or they use the same page with multiple links to it from different sections Most of the time this results in users questioning if the information is different in different areas of the site and people end up pogo-sticking between sections testing links to see if there is new information

Each of the primary navigation elements is a separate webpage that the user lands on when they click on the primary navigation link These landing pages will either contain all of the information about that element or be an introduction to additional pages (secondary navigation) On the site map the primary navigation elements will be labeled 1 2 3 4hellip and presented in boxes with bright colors near the top of the page The content that will appear on that specific page will be labeled 1a 1b 1chellip or 2a 2b 2chellip etc

SITE MAP OF THE PRIMARY NAVIGATION

BECOMES THE PRIMARY NAVIGATION

SECONDARY NAVIGATION

All of your content may not always fit in one large menu no matter how organized it may be It may then become necessary to use secondary navigation Any content that does not serve the primary goal of the website but that users might still want to visit should go in secondary navigation

Each of the secondary navigation elements is a separate webpage that the user lands on when they click on the secondary navigation link These will be presented in a box on the left side of the pages associated with the primary navigation On the site map these will be the boxes will be a lighter color than the primary navigation they are associated with and located under the primary navigation boxes The secondary navigation pages will be labeled 11 12 13hellip or 21 22 23hellip etc The content on these pages will be labeled 12a 12b 12chellip etc

MEET THE TRUSTEES LANDING PAGE (PRIMARY)

CHUCK LILLIS LANDING PAGE (SECONDARY)

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

2a Brief information about the next board meeting

2b Information about how to give public comment

2c Link to Upcoming Meetings 2d Link to Past Meetings

1 - MEET THE TRUSTEES

1a List of Trustees with a photo name and brief bio

1b Link to Committees page 1c Link to Invite a Trustee page

3 - GOVERNANCE

3a Brief desciption about BOT governance 3b Links to UO Bylaws Policy Library Committees

page Policy on Retention and Delegation of Authority Adopted Motions and Resolutions

4 - COMMITTEES

4a Executive and Audit Committee Brief description and list of members

4b Academic and Student Affairs Committee Brief description and list of members

4c Finance and Facilities Committee Brief description and list of members

4d Presidential Factors Committee Brief description and list of members

5 - INVITE A TRUSTEE

5a Information about how to invite a Trustee to your event

5b Link to Invitation Form

bull Overview of the Board of Trustees - What is the BOT bull Announcements (Feed of BOT stories from AroundtheO)

11 - Chuck Lillis

12 - Ginerva Ralph

21 - Upcoming Meetings

21a Dates for upcoming BOT meetings

31 - Adopted Motions and Resolutions

31a List of links to PDFs of adopted motions and resolutions in order by most recent to least recent

51 - Board of Trustees Invite Form

51a Webform for the public to invite a Trustee or Trustees to their event

13 - Connie Ballmer

14 - Peter Bragdon

15 - Rodolfo (Rudy) Chapa

22 - Past Meetings

22a List of all past meetings with links to Materials and Minutes for each

22b Separate pages based on academic year (July 1 - June 30)

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

110 - Joseph Gonyea III

111 - Ross Kari

112 - Michael Schill

113 - Helena Schlegel

114 - Mary Wilcox

115 - Kurt Willcox

GLOBAL CALLS TO ACTION bull Apply bull Visit bull Give

CONTENT CREATION WEBSITE DESIGN amp DEVELOPMENT

Content Creation Page 1

Content Creation ldquoContent there is no easy buttonrdquo mdash Scott Abel

Now that you have finished your content audit made decisions about which current content you need to keep revise remove and merge and determined your information architecture itrsquos time to start writing your content

ldquoContent precedes design Design in the absence of content is not design itrsquos decorationrdquo mdash Jeffrey Zeldman

Content creation is entirely about the written word Donrsquot get caught up in the circular argument regarding content and design You shouldnrsquot be thinking about the appearance or layout or design yet Your users come to your website for the content not the design so focus right now on telling them something they need or want to know or helping them get something done If you have great written content the design is just to help compliment that

Your content should also be written before you design your website because you donrsquot want to be forced to fit your content into a pre-determined layout And you donrsquot want to have to change your design because your content wonrsquot fit Changing a design is time consuming and may force you to push back your deadlines

ldquoAs a rule of thumb content should account for at least half of a pagersquos design and preferably closer to 80 percentrdquo mdash Jakob Nielsen

Once you move past the homepage and your primary navigation pages most of the remaining content of your website will have the same basic structure After you have a first draft of the content you can then look at how elements like calls to action images buttons can enhance the content

Like your content audit there isnrsquot anything sexy about creating most of the content your website But this may be the most critical process in determining your websitersquos success

GETTING STARTED

ldquoThe secret of getting started is breaking your complex overwhelming tasks into small manageable tasks and starting on the first onerdquo mdash Mark Twain

Having trouble deciding where to start Getting too caught up on what it will look like Escape analysis paralysis by starting with the easiest sections and then gradually building into more intricate pieces

Do this by starting at the bottom of your information architecture site map with the secondary and tertiary navigation pages (13 12 11 etc) and working up to your primary navigation pages (1 2 3 etc) Leave your homepage and primary navigation pages for the end when yoursquove established your rhythm and voice You can always come back and polish your early work But the key is getting rolling NOW

Writing simple useful web content is not an easy task so starting with the easiest content can help you ease into the process learning the art of writing specifically for the web along the way These pages will be mostly process or task-based pages that give more business-oriented information that makes their content more straight forward and easy to write

ldquolsquoContent is Kingrsquo ndash you might have a pretty web site which will catch someonersquos eye but if the content is no good you can be willing to bet that they arenrsquot going to stick aroundrdquo mdash Selene M Bowlby

While saying this is the easiest content to write donrsquot downplay the importance of the content on these pages This is the content people are coming to your website to find It is the foundation on which the rest of your website is built and if your foundation is not solid it doesnrsquot matter how pretty your website is it will still crumble and never be successful Once you have tackled those pages in the secondary or tertiary navigation you will have knocked out most of your websitersquos content and can then move on to the tone-setting pages like landing pages and your homepage You will have the ability to focus more time and attention on these page and really be able to make your content useful and persuasive

Writing your content is probably the step that will take the longest because you will probably need to write all of the content and then re-examine that content to determine what the best way to give that content to your users

WEBSITE MANUSCRIPT

Putting your content in manuscript form can often help with the writing process It makes you have to think of your content on a page-by-page basis and even section-by-section on a page It can help you divide your content and help you visualize when text is getting too long and help you break those larger blocks of text into smaller blocks that are easier for users can scan

ldquoThe journey of a thousand miles begins with one steprdquo ndash Lao Tzu

Start at the bottom of your information architecture site map with the secondary and tertiary navigation pages (13 12 11 etc) and take your website one page at a time Donrsquot think of all the pages on your website as a whole think of them all as individual pages Then work on a page or two a day ndash or more if you have the time ndash and slowly but surely you will make your way through all of it

USER-FRIENDLY CONTENT

ldquoNo I donrsquot think the Empire had Wookiees in mind when they designed it Chewierdquo mdash Han Solo

Throughout the process you will need to always ask yourself

Website Manuscript Page | 1

WEBSITE MANUSCRIPT Page Title

AUDIENCE (Who is this page for) OBJECTIVE (What do you want the reader to do learn) SOURCE CONTENT (Where is the content coming from) KEYWORDS (What words phrases will people search for when looking for this content)

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Academic Advising Website Manuscript

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

Page Title Work with an Advisor

AUDIENCE Current students OBJECTIVE Find out who to contact and how to contact them for academic advising

SOURCE CONTENT Work with an Advisor page on current site

KEYWORDS advisor undeclared contact questions appointment schedule

I Introduction

Body Copy Advisors in the Office of Academic Advising help new students make a smooth transition to the university

and assist continuing students in many ways It is a place where students can sit down with an advisor one‐on‐one and discuss their individual concerns and questions In addition advisors help students develop meaningful educational plans that are compatible with their life goals Specialized advising is available for students who are undeclared (have not chosen a major)

II Undeclared Majors

Headline Undeclared Majors

Body Copy The Office of Academic Advising works directly with undeclared majors Please call us to schedule an

appointment at 541‐346‐3211 We look forward to speaking with you

Preparing for your advising appointment

Check the FAQ page to see if you can find an answer to your question

Bring a list of questions that you want to discuss Be open to reviewing course options addressing academic problems or concerns making

decisions about the upcoming quarter and exploring majorminor options Make a list of potential courses you are interested in taking for the next quarter Explore departmental websites or review the UO Catalog for majors that you are interested in

pursuing Review your degree guide (through DuckWeb) and bring a copy to your appointment Arrive in advance of your scheduled appointment time Students arriving 10 minutes or more

past their scheduled appointment times will need to reschedule their appointments If you are

unable to make your scheduled appointment you must cancel at least 24 hours in advance

Page | 2

III Declared Majors

Headline Declared Majors

Body Copy Each student is an important new member of our student community We want each studentrsquos experience at the University of Oregon to be a successful one

Students with declared majors are assigned tomdashor choosemdashan advisor from their major department usually by the end of their first term Students can check the name of their assigned faculty advisor by

looking at the Student General Information screen of DuckWeb

For a link to departmental websites use the UO Catalog or look at our campus advisors page

Page | 3

Page Title Registration Decisions

AUDIENCE Current students OBJECTIVE Answer questions about registration

SOURCE CONTENT Registration page on current site

KEYWORDS registration register schedule classes drop change grade withdrawal

I Current Term Registration Questions

Headline Registration

Body Copy When can I see classes for the next term Class schedules are posted on Friday of week 5 (for example the winter class schedule is posted week 5 of fall term) Class schedules for summer sessions are posted in early March BONUS TIP Once the class schedule posts you may use schedule builder in DuckWeb to begin arranging possible schedules

When can I register Registration is based on credit hours earned and begins Monday of week 8 (for example winter registration begins week 8 of fall term) Summer registration begins in early May Registration priority information is posted in DuckWeb under registration menu check registration eligibility during Week 7 It can also be found at the Office of the Registrar

What classes should I register for Review your degree audit on DuckWeb and make note of areas in red that say ldquoNOrdquo These are courses you will need to incorporate into your schedule planning Things to consider include how many credits to take 12 credits is full‐time however aim to earn 45 credits per year to graduate in four years Balance your course load to account for your academic strengths and challenges and other time commitments

Who can help me with my schedule Your Advisor Speak with an advisor early about schedule planning Weeks 3‐5 are the best time to work with an advisor to discuss future schedule plans Donrsquot wait until week 6 or later when advising schedules begin to fill up

Can I add classes after the deadline Petitions to registeradd classes after the deadline can be obtained through the Office of the Registrar (220 Oregon Hall)

Can I register for more than 21 credits Students considering more than 21 credits in a term MUST speak with an advisor Advisors may give permission for up to 24 credits Students seeking more than 24 credits (NOT RECOMMENDED) must obtain a petition in the Office of the Registrar (220 Oregon Hall)

Page | 4

II Dropping Courses

Headline Dropping Courses

Body Copy Should I drop a course or courses

Students are ALWAYS encouraged to speak with an advisor before dropping courses Advisors can discuss other possible options and also make important referrals

When can I drop (withdraw from) a course

Students have until Sunday before week 8 to drop courses via DuckWeb HOWEVER there are deadlines throughout the term that will dictate how much tuition is owed Drop deadlines can be viewed by clicking

on the CRN for the course in the Class Schedule or by viewing the registrarrsquos academic dates and

deadlines calendar NOTE Summer Sessions have different deadlines due to shorter terms Be sure to

click on course CRNS to view individual course deadlines

How do I drop all my courses (complete withdrawal)

Students who drop all their courses must use DuckWeb and go to completely withdraw in the

registration menu Students have until Sunday before finals week to completely withdraw HOWEVER

there are deadlines throughout the term that will dictate how much tuition is owed on complete

withdrawal Those deadlines can be viewed by clicking on the CRNs for the courses in the class schedule

or by viewing the registrarrsquos academic dates and deadlines calendar NOTE Summer Sessions have

different deadlines due to shorter terms Be sure to click on course CRNS to view individual course

deadlines

III Change Grade Option

Headline Change grade option

Body Copy What is a change in grading option

Many courses offer the option to change your grading from a letter grade to PassNo Pass via DuckWeb It is very important to talk to an advisor before making a decision to change grading option Most courses for your major are NOT permitted to be taken PNP but you must confirm that with an advisor

When can I change my grading option

Students have until Sunday before week 8 to change grading option via DuckWeb Deadlines can always be viewed by clicking on the CRN for the course in the class schedule or by viewing the registrarrsquos academic dates and deadlines calendar NOTE Summer Sessions have different deadlines due to shorter terms Be sure to click on course CRNS to view individual course deadlines

Page | 5

IV Missed DropGrade Option Deadline

Headline I missed the dropgrade option deadline

Body Copy What can I do if I missed the drop (withdrawal)grade option deadline

If the term is still in progress (before finals week) you may obtain a petition for late drop (withdrawal) or late change in grading option in the Office of the Registrar (220 Oregon Hall) THIS IS AN EXCEPTION TO

UNIVERSITY POLICY AND MAY NOT BE APPROVED

Page | 6

Page Title Academic Honors

AUDIENCE Current students OBJECTIVE Learn how to qualify for university academic honors SOURCE CONTENT UO Catalog

KEYWORDS Deanrsquos list summa cum laude cum laude magna cum laude honors grade point average

I Introduction

Body Copy There are many academic honors and awards at the university Below are some of the more prevalent Academic Honors awarded at the University of Oregon For a full list of how to graduate with honors and other awards please visit the UO Catalog

II Deanrsquos List

Headline Deanrsquos List

Body Copy At the conclusion of each term during the academic year (fall winter and spring) undergraduate

students whose grade point average is at least 375 and who are taking 15 or more total credits are

named to the Deanrsquos List and receive a special designation on their academic records At least 12 of the

credits for the term must be taken for letter grades

III Latin Honors

Headline Latin Honors

Body Copy Graduating seniors who have earned at least 90 credits in residence at the University of Oregon and have

successfully completed all other university degree requirements are eligible for graduation with Latin

honors These distinctions are determined by the Office of the Registrar and are based on the following

percentile rankings in each graduating class

Top 2 percent ndash summa cum laude

Top 5 percent ndash magna cum laude

Top 10 percent ndash cum laude

UOREGONEDU Website Manuscript

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

Page Title Academics

I Hero Image

Headline More than 270 right directions

II Programs of Study

Headline Programs of Study

Body Copy Itrsquos your move Accounting biology or architecture Explore environmental studies and geography or mix material science philosophy and economics With more than 270 science and liberal arts options availablewe can help you prepare you for life And a lifetime of careers

Links Explore Majors Undecided on a Major

III Schools and Colleges

Headline School of Architecture amp Allied Arts

Body Copy World renowned for our groundbreaking Sustainable Cities Initiative we are among the nationrsquos finest professional schools for architecture and the arts planning public policy and design

Headline College of Arts amp Sciences

Body Copy The academic heart of the university we bring together hundreds of top‐notch faculty who are

committed to both path‐breaking research and mentoring the next generation

Headline Charles H Lundquist College of Business

1

Page | 2

Body Copy We are serious determined focused and hands on But we are not your typical business school We are a

place that does not shy away from societal issues but tackles them solves them

Headline College of Education

Body Copy Teacher education Of course we do that but we also train administrators and counselors School psychologists and family therapists Human service providers and clinicians

Headline Robert D Clark Honors College

Body Copy The Clark Honors College features small classes and close interaction among students and faculty We

foster an intense creative exchange of ideas in a tight‐knit dynamic community

Headline School of Journalism amp Communication

Body Copy We teach students the power of storytelling through ethics innovation and action in journalism and

communication We are inventing the future of media transforming ldquoWhat If into ldquoWhat Isrdquo

Headline School of Music and Dance

Body Copy We are the premier educational institution of music and dance in the Pacific Northwest We offer programs in music performance music education composition and choreography‐performance

Headline School of Law

Body Copy Rigorous and inspiring Oregon Law teaches students how to engage the law We are a preeminent public law school that shapes brilliant students into professionals

Headline Graduate School

Body Copy Over one hundred graduate options available Masterrsquos and doctoral degrees Certificates and

specializations Empowering students to take their education and careers to the next level

2

Page | 3

IV Rankings

Headline The place for green

Body Copy The University of Oregon leads the nation in finding creative solutions environmental challenges We rank

No 1 in the nation in sustainable design (according to Americarsquos Best Architecture and Design Schools 2015) The Oregon MBA is the top ranked Green MBA in the country (by the Princeton Review) We

invented green chemistry which uses chemistry research to build more environmentally sustainable

products and makes science labs more environmentally sustainable And our Sustainable Cities Initiative

lets students work with cities across Oregon to bring environmentally sustainable solutions to urban

planning

Headline One of the best at teaching teachers

Body Copy US News and World Report ranks our College of Education in the top five nationally and it ranks our special education program No 3 Our faculty members are also leading researchers and the UO is ranked

second in the country for research money per professor

At the UO we teach learn research and find a better way

Headline UO a leader in graduate study

Body Copy The UO ranks in the top 20 (or top 20 percent) nationally in such varied fields as creative writing education environmental law landscape architecture psychology sports marketing sustainable business practices and many more

Headline Highly ranked in anthropology biology literature and more

Body Copy The UO is a great place to study all kinds of things Our highly ranked programs include anthropology biology comparative literature geography geological sciences physics psychology sustainable design and special education

3

Page | 4

V Academic Resources

Headline Academic resources

Body Copy Learning extends way beyond the classroommdashand so does our support Our academic support programs and services include

Links Support Services First‐Year Programs Accessible Education Center University Counseling amp Testing Center International Student and Support Services

Study Help and Tutoring

Teaching and Learning Center UO Libraries Mills International Center Library Research Guides

Academic Advising

Office of Academic Advising

Departmental Advisors PathwayOregon

Center for Multicultural Academic Excellence

4

Page | 5

Page Title Admissions amp Financial Aid

I Page Opener

Links Apply

Requirements Financial Aid Scholarships amp Costs Majors amp Minors Law School Graduate School

II Request Information

Headline Meet us halfway to get all the way here

Body Copy Whether yoursquore applying from Oregon or from out of state as an undergraduate or a graduate we can

help you through the process Request information schedule a visit or contact an admissions counselor in

your area to find the information you need to apply

Links Request Information

Schedule a Visit Find Your Admissions Counselor

III Apply

Headline $196 Million Every Year

Body Copy Thatrsquos the amount the UO gives undergraduate students each year Our job is to keep the UO affordable About 65 percent of our undergraduates receive some type of financial aid To one of the top public research institutions in the nation

Links Costs Scholarships Other Aid

5

Page | 6

iv Learn to Fly

Headline Learn to Fly

Body Copy Reasons to come here are as varied as the opportunities yoursquoll find 3000 courses to choose from Countless chances to discover what yoursquore made of and passionate about Freedom to mix things up Combine physics with business and this with that Collaborate with others from around the world conduct real research and get a world‐class education So when you leave here youlsquoll be ready to soar

Links Why UO

UO Facts Photos amp Videos

6

Page | 7

Page Title ABOUT

I Hero Image

Headline Search and create

II Page Introduction

Body Copy Wersquore a member of the prestigious Association of American Universitiesmdashone of only 36 public universities committed to scientific exploration and interdisciplinary research Wersquore founded on and committed to a tradition of classic liberal arts education One dedicated to overcoming barriers and discovering how much there still is to discover Wersquore driven by what we donrsquot know and to finding the answers

Link Just the Facts

III Diversity

Headline Long live diversity

Body Copy Wersquove done away with diversity and replaced it with diversity equity and inclusion We decided that itrsquos not enough to just be different together We want cultural collisions that lead to happy accidents Cross‐pollination that leads to new perspectives We want thousands of brilliant students from Oregon America and around the world learning from each other Working and sharing with each other Discovery and excellence demand it So we demand it At every level We know the differences between us make us stronger and smarter together than apart

Link Inspire Inclusion

IV News

Headline Every Day

Body Copy A breakthrough in concussion research A new way to use nanoscience to protect the environment A

student wins a Pulitzer or a National Geographic competition or a Peabody Things happen here Big

things All the time See for yourself

Link See for Yourself

7

Page | 8

V History

Headline The UO and OregonmdashTogether Forever

Body Copy Throw sepia tones on an October morning in 1876 Thatrsquos when 155 students showed up for the first day

of classes at the University of Oregon They filed into a looming four‐story building in the middle of a

muddy clearing with workmen inside still hammering away on the upper floors and cattle lowing in the

pasture outside From these rustic origins grew one of the nationrsquos top research institutions Today our campus is vibrant and green and our future has never been brighter

Link Learn from History

VI Mission Statement

Headline Who we are and will continue to be

Body Copy We exist to provide access to a high quality education for those who want one Students who will help us shape the future Wersquore here to spread knowledge because knowledge is the wealth of any civilization It adds depth and meaning to the world and it can change lives on the most fundamental level for the

better And we exist to cultivate excellence in all things by preparing students to be active participants in

a global society Students who question critically think logically communicate clearly act creatively and

live ethically This is who we are Who wersquove always been And who we will continue to be

Link UOs Mission Vision and Values

VII Competitive Excellence Rooted in History Eyes on the Future

Headline The Best the Bright the Curious

Body Copy Wersquore increasing our scholarships growing our Honors College and expanding our doctoral fellowships so

we can attract students who love to create and discovermdashwho arent afraid to stumble and get back up

again Students who want to learn about dirt and bugs and fish about how our brains work about how to

design the Next Big Thing Students who grew up in Portland or Pasadena Paris Texas or Paris France Students who want to change the world

8

Page | 9

Headline Faculty Rock Stars

Body Copy Wersquore expanding the size and reach of our faculty Were hiring 150 world‐class thinkers and researchers over the next five years Were changing the way the world thinks about volcanoes childhood obesity sports products green chemistry and life at the nano‐scale Wersquore creating Clusters of Excellencemdashgroups of faculty who are experts in their fields Working together to become greater than the sum of our parts

Headline Access and Success

Body Copy Wersquore committed to giving all students the opportunity to learn Wersquore expanding Pathway Oregonmdashour benchmark program for high ability students with demonstrated financial needmdashby 65 percent Wersquore

launching programs to help students stay in school To finish what they started And wersquore creating new

assistance grants Itrsquos all about removing roadblocks to student achievement

Headline Building Boom

Body Copy Watch out for cranes on campus Were building and rebuilding Expanding and growing Wersquore

renovating the Student Rec Center and our student union Wersquore building new research labs and investing

in ldquoBig Datardquo technology infrastructure Were increasing our classroom and faculty spaces Were

renovating our residence halls and building one thatrsquos brand new

9

WRITING FOR THE WEB

Writing for the Web Page 1

Writing for the Web Creating User-Friendly Content

People read differently online than they do when they read print materials Reading long paragraphs on a screen hurts the eyes and is time consuming Web users

bull Scan pages bull Read in quick short bursts bull Pick out key words and phrases bull Are action oriented bull Search for information that will lead them towards a goal

Effective web writing involves having the content the primary audience is looking for and presenting it in a way that makes it easy to find Good web content should either tell the user something they need or want to know or help them get something done Web content should also drive actions give your users something they should do ndash click a link call a phone number make an appointment fill out a form etc

Content Drives Layout and Design

After completing your content audit based on the needs and requirements of you and your users you will write the content for your website knowing what you should keep remove add revise or merge It is important to know that your content should be written before you determine the look and feel of your website Content drives what the layout and design should be because you donrsquot want to be forced to try and fit your content into a pre-determined layout and design If you realize something is hard to describe in words and works better as an image or infographic you donrsquot want to be stuck in a text-based layout or if you find out you need something to be written out you donrsquot want to be stuck in a graphic-based layout

Writing your content is probably the step that will take the longest because you will probably need to write all of the content and then re-examine that content to determine what the best way to give that content to your users Throughout the process you will need to always ask yourself

CREATING YOUR CONTENT

Here are some easy dos and donrsquots for creating user-friendly web content

DO

Keep Content as Concise as Possible

Web users have very short attention spans and donrsquot read articles thoroughly or in their entirety They skim webpages to find the information they want They search for keywords skip around instead of reading from top to bottom and have lowered attention spans Shorter articles enhance readability Cutting half the words on a webpage can increase usability by up to 58

What you can do

bull Be accurate Be clear Be concise Read httpsbranduoregoneduusage for usage tips

EXAMPLE

DO USE DONrsquoT USE because the reason forsince due to the fact thatwhy owing to the fact that

in light of the fact that considering the fact that on the grounds that this is why in terms of with regard to

bull Get to the point as quickly as possible - Start with the conclusion follow with the details (See the inverted pyramid on page 4)

bull Cut out unnecessary information - Use half the word count of traditional writing

EXAMPLE

DO DONrsquoT Find out how to Read about how we can help you prepare for the bull Post your resume rigors of the job search with tips for posting your bull Search our jobs database resume on our website searching our extensive bull Sign up for Career Fairs database of job offerings and registering for

upcoming fall semester Career Fairs DO Apply here [with a link to application] DONrsquoT

By completing the online application available on this site you can enroll in the program

bull Avoid long paragraphs and sentences - ideally no more than 20 words per sentence and five sentences per paragraph

bull Use easy-to-understand shorter common words and phrases Be conversational

EXAMPLE

DO USE Get Before Buy Ask For Next End Use Know Help

DONrsquoT USE Obtain Prior To Purchase Request Subsequent Terminate Utilize Cognizant Facilitate

bull Avoid jargon Use your userrsquos language not yours

EXAMPLE

DO Call it financial aid if that is what your users call it

DO Oregon researchers study how patients with a minor heart condition are affected by high altitude

DONrsquoT Use ldquofinancial assistancerdquo just because that is what your department calls it

DONrsquoT Oregon researchers study the effects of patent foramen ovale in a high-altitude Bolivian setting

bull Use pronouns The user is ldquoyourdquo The department is ldquowerdquo This creates more approachable content

EXAMPLE

DO Get advice you need to write effective web copy that gets your program noticed

DONrsquoT Users should review our suggestions on writing for the web to optimize their organizationrsquos outreach efforts

bull Avoid acronyms - your reader isnrsquot necessarily familiar with the shorthand you use

EXAMPLE

DO Contact the Teaching and Learning Center

DONrsquoT Contact TLC

bull Use active voice

EXAMPLE

DO If it snows call the parking hotline before coming to campus

DONrsquoT In the event that it snows the parking hotline should be called prior to coming to campus

Use Headings to Break Up Long Articles

ldquoA wall of text is deadly for an interactive experience Intimidating Boring Painful to read Write for online not printrdquo mdash Jakob Nielsen

Internet readers inspect webpages in blocks and sections going directly to items that seem to match what theyrsquore looking for When they look at a webpage they tend to see it as chunks of information rather than as a whole One strategy is to break up long articles into sections so that users can easily skim down the page

Do not just bold text for your section headings use ldquoheaderrdquo tags (H2 for major headings H3 for subheadings) instead For screen reader users header tags are vital in giving a sense of the main topics of the page and enabling easier navigation through your content Additionally effective header tags help with search engines mdash making your site more accessible to everyone

What you can do

bull Write clear direct headlines

EXAMPLE

DO UOrsquos College of Education ranks in the top five nationally

DONrsquoT Plato Aristotle and Being No 1

bull Before writing a post consider organizing your thoughts in logical chunks by first outlining what yoursquoll write

bull Use simple and concise headings Ideally headings are 4-8 words and subheads are 1-5 words

bull Use keyword-rich headings to aid skimming as well as those that use their browserrsquos search feature

Help Readers Scan Your Webpages Quickly

Designing and structuring your webpages with skimming in mind can improve usability

What you can do

bull Use words that your target audiences use when searching bull Catch your readersrsquo attention in the first few words because users tend to read the first few words when theyrsquore scanning a webpage

bull Front-load keywords in webpage titles headings and links bull Use the inverted pyramid (right) to place important information at the top of your articles

Use Bulleted Lists and Text Formatting

Users fixate longer on bulleted lists and text formatting (such as bolding and italics) These text-styling tools can garner attention because of their distinctive appearance as well as help speed up reading by way of breaking down information into discrete parts and highlighting important keywords and phrases

What you can do

bull Consider breaking up a paragraph into bulleted points bull Highlight important information in bold and italics

Use Visuals Strategically

Photos charts and graphs are worth a thousand words Users pay close attention to photos and other images that contain relevant information Using visuals can enhance readability when they replace or reinforce long blocks of textual content But users ignore certain images particularly stock photos merely included as decorative artwork

What you can do

bull Use images diagrams or multimedia to visually represent ideas in the content bull Videos and images should reinforce the text on your page bull Always use alternative text (alt text) with images ndash or long descriptions (longdesc) for complex images like charts graphics and maps ndash for website accessibility and search engine optimization

bull Avoid stock photos and meaningless visuals

DO NOT

Do NOT welcome people to your website and explain what a website is

How many times have you seen this ldquoI would like to personally welcome you to our departmentrsquos web page We have put together a great collection of information and links to help you learn more about us I invite you to look around and click the links to the leftrdquo A website is a collection of information no need to tell your readers that

Do NOT put your mission statement on your home page

Unless this is the most important content your users search for when visiting your site it should not be on your home page Donrsquot tell people what you domdashshow them by making your most important services and content available immediately on your site Your users come to your site to do somethingmdashmake it easy for them

Do NOT organize your website and write content to reflect your organization

Donrsquot require your users to figure out your internal organization to find content on your website Present related tasks and content together on the site regardless of who does them within your organization If you were shopping for a car you wouldnrsquot expect to be sent to the website for the engine department to find out what type of engine a car has would you Likewise use language and terms that your audiences use regardless of what you call them internally

Do NOT bury important links within text

If information is important enough on your website to require a link do not bury it within your copy Users are always scanning your website for useful information or links but when links are buried within paragraphs of text they are hard to find and are easily missed or ignored

Do NOT use ldquoClick Hererdquo to label your links

Avoid using ldquoClick Hererdquo for your link label When users are scanning your website they want to see links that tell them where the information they are looking for is located If they just see a link titled ldquoclick hererdquo they are forced to read the surrounding text to find out if that is what they are looking For many users they will just skip over the link looking for better information and may miss key information In addition many screen readers allow users to jump to links and if the title of the link is ldquoClick Hererdquo it provides no context for where the link goes and what it does Links should be labeled with the most important keyword or phrase people are looking for to guide them to the information they want

Do NOT put every piece of printed content you have on your website

Large volumes of content do not necessarily make good websites If your visitors donrsquot need it do put it on your site

Do NOT use marketing ldquofluffrdquo on the web

When your readers scan your content every word is valuable Do not fill your pages with marketing ldquofluffrdquo or needless formalities Boastful exaggerated language reduces the likelihood that your content will be read or believed

Do NOT post a PDF version of a document unless absolutely necessary

Unless the format and integrity of the original document must be maintained such as a printable form do not use PDFs for the web PDF and Word documents or any other printed document type are not intended for the web and pose issues with search-ability access and readability Besides if the content was written for print chances are itrsquos not appropriately formatted for your website

When creating a PDF document to post on your website ensure that it was created from an electronic document - a Word file InDesign file etc) and not from a scanned document or an image Screen readers can usually interpret text from an original document but can not from text in images Adobe Acrobat and Adobe Reader can do an accessibility ldquoQuick Checkrdquo or ldquoFull Checkrdquo on your document Check Adobe help for your particular version of Adobe for accessibility tools

UO EDITORIAL STYLE GUIDE QUICK REFERENCE

The UO

When using abbreviations use the UO Oregon or the university not Univ of Ore U of O or the University More on abbreviations

Capitalization

Professor Bob Smith is capitalized but Bob Smith professor of sociology isnrsquot Same with president and director Department of Biology is capitalized but ldquoGo to the biology departmentrdquo or ldquoI got an A in biologyrdquo isnrsquot The University of Oregon is capitalized but ldquothe universityrdquo isnrsquot More on capitalization

Phone Numbers

With Oregonrsquos change to 10-digit dialing and just because it looks better phone number style is to use hyphens only So 541-346-5397 instead of (541) 346-5397 More on numbers

Academic Degrees

Periods in degrees are no longer used so BA MS and PhD not BA MA and PhD More on academics

Serial Comma

Use it Reading writing and arithmetic More on punctuation

WIREFRAMES WEBSITE DESIGN amp DEVELOPMENT

Wireframes Page 1

Wireframes Test Out Solutions

If your site map reflects your sitersquos organizational structure wireframes reflect page-level structure Think of wireframes as architectural blueprints No color images or special fonts Instead wireframe communicate how content blocks should be organized on a page to support your end usersrsquo and your departmentrsquos goals

Remember all that work you did with your content audit stakeholder interviews and user research This is where it all comes together

Content Audit

In your content audit you noted page types and overall purpose To provide continuity for your users yoursquoll want similar page types to have a similar layout With our templated system you can choose basic page lay-outs and then customize with your own images and text

Example ldquoNewsrdquo page type wireframe

Wireframes Page 2

Stakeholder Interviews

Calls to action messaging measurable outcomes Your stakeholders provided valuable insights into the busi-ness objectives your content must support With wireframes you can visually prioritize content to push users towards specific actions or messages

User Research and Personas

Before you sit down to wireframe a feature or page review your audience personas and ask

bull Who is primary target audience for this page bull How does this page fit into the larger context of the site Is it part of a workflow or is it a destination bull What are users trying to do when they visit this page bull What do you want them to do bull What keywords are users looking for

The answers to these questions will not only help you prioritize content blocks they will also help you design content that is usable effective and engaging

Test your pages

Wireframes and sketches are a great tool for gathering user feedback at any stage in the design process Brain-storming ideas Sketch them out and see what people think Want to test your pages to make sure users can find what they need Create a wireframe and give them some tasks

Wireframes Page 3

There are three types of wireframe tests we recommend While you may not test all stages of your wireframes we strongly recommend that test your site with end users before going live

Low fidelity

A low fidelity wireframe shows the simple page structure but doesnrsquot include a lot of content details A low fidelity wireframe will be tested early in the design process often using paper prototypes to gather feedback When testing a low-fidelity wireframe be sure to ask users about their expectations behaviors likes and dis-likes

You can use a low fidelity wireframe to get feedback on content placement navigation and labels

Medium fidelity

Medium fidelity wireframes include more content details but still no color or design Often your medium fidelity wireframes are presented as interactive PDFs or HTML prototypes allowing you to test task flows and more complex interactions While you still may ask questions during user tests you really want to sit back and watch what people do

Wireframes Page 4

High fidelity prototype

For more complex sites you might want to test a high fidelity prototype A high fidelity prototype is the closest thing to your final site in terms of design and functionality Yoursquoll most likely test with a high fidelity prototype near the end of the design phase to be sure that you have worked out all the kinks before your site goes live

VISUAL DESIGN WEBSITE DESIGN amp DEVELOPMENT

Visual Design Page 1

Visual Design Thinking Beyond Decoration

ldquoDesign is not just what it looks like and feels like Design is how it worksrdquo - Steve Jobs

Many people regard web design as decoration making a website look good However design is more about how something works than how it looks It is about both form and function

When designing a website itrsquos easy to assume that everybody is like you However this leads to a strong bias and often ends in an inefficient design You already know a lot about your services and your website But your users just want to get things done on your website They come for the content not the design

Content is by far the most important element in design A webpage with a simple structure but quality content performs much better than a nice layout with subpar text

DESIGN LAYOUT

F-Pattern

Typically for text-heavy websites the F-Pattern comes from the reader first scanning a vertical line down the left side of the text looking for keywords or points of interest in the paragraphrsquos initial sentences When the reader finds something they like they begin reading normally forming horizontal lines The end result is something that looks like the letters F or E Use the F-Pattern to enable quick scanning and encourage scrolling

Example of the F-Pattern

Eye Tracking for the Z-Pattern

Z-Pattern

Z-Pattern scanning occurs on pages that are not text heavy The reader first scans a horizontal line across the top of the page When the eye reaches the end it shoots down and left and repeats a horizontal search on the lower part of the page Use the Z-Pattern to draw your users to your ldquoCall to Actionrdquo that will be used on your homepage

Example of the Z-Pattern

USING IMAGES ON YOUR WEBSITE

Graphics and images can make a huge difference in how your site appears and how users interpret its intentions Images can help you attract attention and guide your usersrsquo line of sight They can be of great value when it comes to presenting important information

bull Image processing happens in a different part of the brain from where words are processed so putting them with your words will engage more of your viewerrsquos brain

bull Images are especially effective to activate associations If you spark an experience or memory with your image you can convey meaning that goes well beyond the picture

However you should only use images that somehow support your content For every image on your site you should be able to answer four questions

1Why did you chose that image and not a different one 2Why did you place the image where you placed it and not somewhere else 3Who is your primary target audience and what type of imagry will speak to them 4What underlying message are you trying to convey ndash Undergraduate Research wants to emphasize research outside of the science so they could use photos of students in the field and not just in a lab

Be Aware of What Appears Above the Fold

Because the area above the fold is the first part of your website people see you should use it wisely If you plan to use a large image at the top of your website make sure it doesnrsquot push more important informative or catchy content below the fold People will scroll if they feel like they will find the information they are looking for Itrsquos absolutely natural to scroll so give people a reason to scroll and look at the rest of your site

Make sure you take into account how each graphic or image alters the overall appearance of your site This includes paying attention to color scheme negative space within the image and the imagersquos actual content

The Power of Directional Cues

Use visual cues to guide users to key areas of your website Human beings have a natural tendency to follow the gaze of others and we have been coached since birth to follow arrows directing us to where we should be lookinggoing

Non-Directional Focuses only on the Face Directional Focuses on the Face and the Text

Prioritize Information on Your Pages

Different information on your site should have different levels of importance Your design should reflect their importance in the grand scheme of your site

Itrsquos important to correlate size with importance in a design Objects that are bigger demand more attention The biggest elements should be the most important in most cases the smallest elements should be the least important

Image Dos and Donrsquots

The images people look at most have the following characteristics

bull are high contrast and high quality (crisp and colorful) bull are cropped rather than overly reduced when necessary to fit a small space bull are not excessively detailed easy to interpret almost iconic bull are highly related to the content on the page bull possess magnetic features

Features that make images magnetic include the following

bull smiling and approachable faces - They make us feel like we are actually connecting with other humans not only with some coded website

bull people looking at (or at least facing) the camera bull clear instructions or information

People ignore images that have the following characteristics

bull are low contrast and low quality bull are too busy for the space bull look like advertisements - People donrsquot like ads and over the years they have successfully learned to ignore them

bull are not related to content on the page or only slightly related to it - people look for the content and ignore unrelated visual noise

bull are boring bull include people or objects that are generic or obvious stock art bull are cold fake or too polished

If you have a large international audience for your website be mindful of the size of your photos and make sure they are optimized for the web for quicker loading on slower internet connections

USING COLOR ON YOUR WEBSITE

Human visual attention first responds to contrasts in color and light then to the emotional and cultural value of a specific color Bright colors stand out from muted colors and you can exploit this to draw your userrsquos attention where you want Additionally certain colors can help set the mood of the entire site (blues are tranquil reds are aggressive etc)

Repetition assigns relative meaning to elements If all ldquoparagraphrdquo text is grey when a user sees a new block of grey text he can assume itrsquos another basic paragraph when that same user encounters a blue link or a black title he can safely assume it is different and unique from the grey text

If you have a large international audience for your website be mindful of the cultural implications of the colors and images you select

TEXT

Special type styles (bold italic ALL CAPS) should be used sparingly

Donrsquot make every other word on your site bold or italic or in ALL CAPS Only use them sparingly when you want to emphasize something important

Donrsquot use center-justified blocks of text

Text that is center-justified is fine for headlines but avoid it for paragraphs or other large blocks of text The jagged edges take longer to read and tend to interrupt the flow of the text

Donrsquot underline anything but links

People expect underlined text online to be linked to something If it isnrsquot yoursquoll do nothing but confuse your visitors

MEASURING SUCCESS

Measuring Success Page 1

Measuring Success

Once your website is launched you are ready to monitor and assess its performance

REVIEW YOUR BASELINES

First wersquoll review the baselines you established around key performance indicators Where was the old site in terms of usability accessibility and engagement What were the numbers in terms of page visits return visits and links to important calls to action like apply visit or make an appointment These are the types of metrics we will use to make sure your redesign has met your departmental goals

ESTABLISH A PLAN

Next wersquoll work with you to establish a plan to measure your KPIs at specific intervals Web analytics can be measured weekly quarterly or around specific events like the start of the term Usability studies should be conducted within six months of launch and then at regular intervals

ITERATE

The age of the grand web redesign is past Itrsquos no longer sufficient to let your website grow stale until the next major redesign project Instead think about making smaller iterative changes based on analytics and user test-ing Our team can teach you easy methods for testing out changes with end users and keeping them engaged

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
COMPARISON UNIVERSITY 1
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 2: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

User-Centered DesignPage 1

Our User-Centered Process

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

bull Who is your primary target audiencebull Why are they visiting your website What are they trying to accomplishbull How do their environment attitudes and prior experiences impact their expectations of your sitebull How do users refer to and think about your content

A deep understanding of your end usersrsquo needs will enable you to make strategic data-driven decisions about your website content navigation and design

WHATrsquoS INVOLVED IN OUR USER-CENTERED DESIGN PROCESS

While each project is unique our user-centered design process follows these basic phases

bull Discovery ndash During the discovery phase we seek to understand what both your end-users and your department requires for success

bull Conceptual Design ndash This phase focuses on creating effective and engaging content structure and site navigation to support user and departmental needs

bull Visual Design ndash We work with you to select templated design elements that support your content messaging and user tasks

bull Development ndash Staging sites are made available for your team to input and test content before launchbull Launch - Make your website live and make sure itrsquos functioning properlybull Implementation ndash After site launch we assist you in validating usability and measuring outcomes

SCOPE

STAKEHOLDERS

TARGET AUDIENCE

TASKS AND CONTENT

WEBSITE ANALYTICS

What is Bounce Rate

What is Exit Rate

Establish Baselines

bull What is unique

INVOLVING END USERS

HOMEPAGE

PRIMARY NAVIGATION

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

3 - GOVERNANCE

4 - COMMITTEES

11 - Chuck Lillis

12 - Ginerva Ralph

13 - Connie Ballmer

14 - Peter Bragdon

22 - Past Meetings

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

111 - Ross Kari

114 - Mary Wilcox

115 - Kurt Willcox

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 3: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

SCOPE

STAKEHOLDERS

TARGET AUDIENCE

TASKS AND CONTENT

WEBSITE ANALYTICS

What is Bounce Rate

What is Exit Rate

Establish Baselines

bull What is unique

INVOLVING END USERS

HOMEPAGE

PRIMARY NAVIGATION

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

3 - GOVERNANCE

4 - COMMITTEES

11 - Chuck Lillis

12 - Ginerva Ralph

13 - Connie Ballmer

14 - Peter Bragdon

22 - Past Meetings

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

111 - Ross Kari

114 - Mary Wilcox

115 - Kurt Willcox

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 4: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

SCOPE

STAKEHOLDERS

TARGET AUDIENCE

TASKS AND CONTENT

WEBSITE ANALYTICS

What is Bounce Rate

What is Exit Rate

Establish Baselines

bull What is unique

INVOLVING END USERS

HOMEPAGE

PRIMARY NAVIGATION

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

3 - GOVERNANCE

4 - COMMITTEES

11 - Chuck Lillis

12 - Ginerva Ralph

13 - Connie Ballmer

14 - Peter Bragdon

22 - Past Meetings

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

111 - Ross Kari

114 - Mary Wilcox

115 - Kurt Willcox

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 5: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

WEBSITE ANALYTICS

What is Bounce Rate

What is Exit Rate

Establish Baselines

bull What is unique

INVOLVING END USERS

HOMEPAGE

PRIMARY NAVIGATION

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

3 - GOVERNANCE

4 - COMMITTEES

11 - Chuck Lillis

12 - Ginerva Ralph

13 - Connie Ballmer

14 - Peter Bragdon

22 - Past Meetings

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

111 - Ross Kari

114 - Mary Wilcox

115 - Kurt Willcox

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 6: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

WEBSITE ANALYTICS

What is Bounce Rate

What is Exit Rate

Establish Baselines

bull What is unique

INVOLVING END USERS

HOMEPAGE

PRIMARY NAVIGATION

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

3 - GOVERNANCE

4 - COMMITTEES

11 - Chuck Lillis

12 - Ginerva Ralph

13 - Connie Ballmer

14 - Peter Bragdon

22 - Past Meetings

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

111 - Ross Kari

114 - Mary Wilcox

115 - Kurt Willcox

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 7: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

What is Exit Rate

Establish Baselines

bull What is unique

INVOLVING END USERS

HOMEPAGE

PRIMARY NAVIGATION

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

3 - GOVERNANCE

4 - COMMITTEES

11 - Chuck Lillis

12 - Ginerva Ralph

13 - Connie Ballmer

14 - Peter Bragdon

22 - Past Meetings

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

111 - Ross Kari

114 - Mary Wilcox

115 - Kurt Willcox

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 8: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

Establish Baselines

bull What is unique

INVOLVING END USERS

HOMEPAGE

PRIMARY NAVIGATION

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

3 - GOVERNANCE

4 - COMMITTEES

11 - Chuck Lillis

12 - Ginerva Ralph

13 - Connie Ballmer

14 - Peter Bragdon

22 - Past Meetings

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

111 - Ross Kari

114 - Mary Wilcox

115 - Kurt Willcox

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 9: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

bull What is unique

INVOLVING END USERS

HOMEPAGE

PRIMARY NAVIGATION

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

3 - GOVERNANCE

4 - COMMITTEES

11 - Chuck Lillis

12 - Ginerva Ralph

13 - Connie Ballmer

14 - Peter Bragdon

22 - Past Meetings

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

111 - Ross Kari

114 - Mary Wilcox

115 - Kurt Willcox

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 10: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

bull What is unique

INVOLVING END USERS

HOMEPAGE

PRIMARY NAVIGATION

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

3 - GOVERNANCE

4 - COMMITTEES

11 - Chuck Lillis

12 - Ginerva Ralph

13 - Connie Ballmer

14 - Peter Bragdon

22 - Past Meetings

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

111 - Ross Kari

114 - Mary Wilcox

115 - Kurt Willcox

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 11: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

bull What is unique

INVOLVING END USERS

HOMEPAGE

PRIMARY NAVIGATION

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

3 - GOVERNANCE

4 - COMMITTEES

11 - Chuck Lillis

12 - Ginerva Ralph

13 - Connie Ballmer

14 - Peter Bragdon

22 - Past Meetings

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

111 - Ross Kari

114 - Mary Wilcox

115 - Kurt Willcox

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 12: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

bull What is unique

INVOLVING END USERS

HOMEPAGE

PRIMARY NAVIGATION

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

3 - GOVERNANCE

4 - COMMITTEES

11 - Chuck Lillis

12 - Ginerva Ralph

13 - Connie Ballmer

14 - Peter Bragdon

22 - Past Meetings

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

111 - Ross Kari

114 - Mary Wilcox

115 - Kurt Willcox

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 13: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

INVOLVING END USERS

HOMEPAGE

PRIMARY NAVIGATION

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

3 - GOVERNANCE

4 - COMMITTEES

11 - Chuck Lillis

12 - Ginerva Ralph

13 - Connie Ballmer

14 - Peter Bragdon

22 - Past Meetings

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

111 - Ross Kari

114 - Mary Wilcox

115 - Kurt Willcox

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 14: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

INVOLVING END USERS

HOMEPAGE

PRIMARY NAVIGATION

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

3 - GOVERNANCE

4 - COMMITTEES

11 - Chuck Lillis

12 - Ginerva Ralph

13 - Connie Ballmer

14 - Peter Bragdon

22 - Past Meetings

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

111 - Ross Kari

114 - Mary Wilcox

115 - Kurt Willcox

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 15: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

INVOLVING END USERS

HOMEPAGE

PRIMARY NAVIGATION

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

3 - GOVERNANCE

4 - COMMITTEES

11 - Chuck Lillis

12 - Ginerva Ralph

13 - Connie Ballmer

14 - Peter Bragdon

22 - Past Meetings

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

111 - Ross Kari

114 - Mary Wilcox

115 - Kurt Willcox

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 16: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

INVOLVING END USERS

HOMEPAGE

PRIMARY NAVIGATION

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

3 - GOVERNANCE

4 - COMMITTEES

11 - Chuck Lillis

12 - Ginerva Ralph

13 - Connie Ballmer

14 - Peter Bragdon

22 - Past Meetings

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

111 - Ross Kari

114 - Mary Wilcox

115 - Kurt Willcox

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 17: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

INVOLVING END USERS

HOMEPAGE

PRIMARY NAVIGATION

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

3 - GOVERNANCE

4 - COMMITTEES

11 - Chuck Lillis

12 - Ginerva Ralph

13 - Connie Ballmer

14 - Peter Bragdon

22 - Past Meetings

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

111 - Ross Kari

114 - Mary Wilcox

115 - Kurt Willcox

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 18: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

INVOLVING END USERS

HOMEPAGE

PRIMARY NAVIGATION

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

3 - GOVERNANCE

4 - COMMITTEES

11 - Chuck Lillis

12 - Ginerva Ralph

13 - Connie Ballmer

14 - Peter Bragdon

22 - Past Meetings

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

111 - Ross Kari

114 - Mary Wilcox

115 - Kurt Willcox

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 19: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

INVOLVING END USERS

HOMEPAGE

PRIMARY NAVIGATION

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

3 - GOVERNANCE

4 - COMMITTEES

11 - Chuck Lillis

12 - Ginerva Ralph

13 - Connie Ballmer

14 - Peter Bragdon

22 - Past Meetings

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

111 - Ross Kari

114 - Mary Wilcox

115 - Kurt Willcox

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 20: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

INVOLVING END USERS

HOMEPAGE

PRIMARY NAVIGATION

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

3 - GOVERNANCE

4 - COMMITTEES

11 - Chuck Lillis

12 - Ginerva Ralph

13 - Connie Ballmer

14 - Peter Bragdon

22 - Past Meetings

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

111 - Ross Kari

114 - Mary Wilcox

115 - Kurt Willcox

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 21: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

INVOLVING END USERS

HOMEPAGE

PRIMARY NAVIGATION

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

3 - GOVERNANCE

4 - COMMITTEES

11 - Chuck Lillis

12 - Ginerva Ralph

13 - Connie Ballmer

14 - Peter Bragdon

22 - Past Meetings

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

111 - Ross Kari

114 - Mary Wilcox

115 - Kurt Willcox

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 22: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

HOMEPAGE

PRIMARY NAVIGATION

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

3 - GOVERNANCE

4 - COMMITTEES

11 - Chuck Lillis

12 - Ginerva Ralph

13 - Connie Ballmer

14 - Peter Bragdon

22 - Past Meetings

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

111 - Ross Kari

114 - Mary Wilcox

115 - Kurt Willcox

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 23: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

HOMEPAGE

PRIMARY NAVIGATION

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

3 - GOVERNANCE

4 - COMMITTEES

11 - Chuck Lillis

12 - Ginerva Ralph

13 - Connie Ballmer

14 - Peter Bragdon

22 - Past Meetings

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

111 - Ross Kari

114 - Mary Wilcox

115 - Kurt Willcox

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 24: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

HOMEPAGE

PRIMARY NAVIGATION

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

3 - GOVERNANCE

4 - COMMITTEES

11 - Chuck Lillis

12 - Ginerva Ralph

13 - Connie Ballmer

14 - Peter Bragdon

22 - Past Meetings

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

111 - Ross Kari

114 - Mary Wilcox

115 - Kurt Willcox

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 25: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

HOMEPAGE

PRIMARY NAVIGATION

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

3 - GOVERNANCE

4 - COMMITTEES

11 - Chuck Lillis

12 - Ginerva Ralph

13 - Connie Ballmer

14 - Peter Bragdon

22 - Past Meetings

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

111 - Ross Kari

114 - Mary Wilcox

115 - Kurt Willcox

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 26: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

3 - GOVERNANCE

4 - COMMITTEES

11 - Chuck Lillis

12 - Ginerva Ralph

13 - Connie Ballmer

14 - Peter Bragdon

22 - Past Meetings

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

111 - Ross Kari

114 - Mary Wilcox

115 - Kurt Willcox

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 27: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

3 - GOVERNANCE

4 - COMMITTEES

11 - Chuck Lillis

12 - Ginerva Ralph

13 - Connie Ballmer

14 - Peter Bragdon

22 - Past Meetings

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

111 - Ross Kari

114 - Mary Wilcox

115 - Kurt Willcox

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 28: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

3 - GOVERNANCE

4 - COMMITTEES

11 - Chuck Lillis

12 - Ginerva Ralph

13 - Connie Ballmer

14 - Peter Bragdon

22 - Past Meetings

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

111 - Ross Kari

114 - Mary Wilcox

115 - Kurt Willcox

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 29: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

TRUSTEESUOREGONEDU

2 - BOARD MEETINGS

3 - GOVERNANCE

4 - COMMITTEES

11 - Chuck Lillis

12 - Ginerva Ralph

13 - Connie Ballmer

14 - Peter Bragdon

22 - Past Meetings

16 - Andrew Colas

17 - Ann Curry

18 - Allyn Ford

19 - Susan Gary

111 - Ross Kari

114 - Mary Wilcox

115 - Kurt Willcox

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 30: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 31: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

GETTING STARTED

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 32: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 33: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

WEBSITE MANUSCRIPT

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 34: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 35: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

I Section 1

Header

Body Copy

Links

II Section 2

Header

Body Copy

Links

III Section 3

Header

Body Copy

Links

IV Section 4

Header

Body Copy

Links

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 36: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

Page Title

I Section 1

Headline

Body Copy

Links

II Section 2

Headline

Body Copy

Links

III Section 3

Headline

Body Copy

Links

IV Section 4

Headline

Body Copy

Links

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 37: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

Page | 1

ACADEMIC ADVISING

WEBSITE MANUSCRIPT

I Introduction

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 38: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

Page | 2

III Declared Majors

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page | 3

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page | 4

II Dropping Courses

deadlines

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 41: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

Page | 5

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 42: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

Page | 6

I Introduction

II Deanrsquos List

III Latin Honors

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page | 1

UOREGONEDU

WEBSITE MANUSCRIPT

I Hero Image

1

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 44: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

Page | 2

2

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 45: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

Page | 3

IV Rankings

planning

3

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page | 4

Academic Advising

4

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 47: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

Page | 5

I Page Opener

Links Apply

III Apply

5

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 48: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

Page | 6

iv Learn to Fly

Links Why UO

6

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 49: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

Page | 7

Page Title ABOUT

I Hero Image

Link Just the Facts

III Diversity

IV News

Headline Every Day

7

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 50: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

Page | 8

V History

8

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 51: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

Page | 9

9

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 52: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

WRITING FOR THE WEB

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 53: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 54: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

DO

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 55: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

What you can do

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 56: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

EXAMPLE

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 57: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

What you can do

EXAMPLE

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 58: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

What you can do

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 59: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

DO NOT

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 60: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

The UO

Capitalization

Phone Numbers

Academic Degrees

Serial Comma

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 61: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 62: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

Wireframes Page 1

Content Audit

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 63: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

Wireframes Page 2

Test your pages

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 64: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

Wireframes Page 3

Low fidelity

Medium fidelity

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 65: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

Wireframes Page 4

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 66: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 67: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

DESIGN LAYOUT

F-Pattern

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 68: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

Z-Pattern

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 69: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 70: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 71: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

TEXT

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 72: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

MEASURING SUCCESS

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2

Page 73: USER-CENTERED DESIGN - University Communicationscommunications.uoregon.edu/sites/digital2.uoregon.edu/files/design... · User-Centered Design Page 1 Our User-Centered Process The

Measuring Success

ESTABLISH A PLAN

ITERATE

APPEARANCE DESIGN 3
APPEARANCE DESIGN 4
APPEARANCE DESIGN 5
NAVIGATION 1
NAVIGATION 2
NAVIGATION 3
NAVIGATION 4
NAVIGATION 5
ORGANIZATION 1
ORGANIZATION 2
ORGANIZATION 3
ORGANIZATION 4
ORGANIZATION 5
CONTENT LAYOUT 1
CONTENT LAYOUT 2
CONTENT LAYOUT 3
CONTENT LAYOUT 4
CONTENT LAYOUT 5
ADDITIONAL NOTES 1
ADDITIONAL NOTES 2
ADDITIONAL NOTES 3
ADDITIONAL NOTES 4
ADDITIONAL NOTES 5
HOMEPAGE 1
HOMEPAGE 2
HOMEPAGE 3
HOMEPAGE 4
HOMEPAGE 5
APPEARANCE DESIGN 1
APPEARANCE DESIGN 2