Technology Training 1

    2

 Is more than “looking good”  Satisfies at least one of four user needs:  They want/need information  They want/need to make a purchase/donation.  They want/need to be entertained.  They want/need to be part of a community.

Preplan Plan & Organize DesignRevise From site structure to front-end design 4

Who? What? Where? Why? And How? 5 PurposeUsersFormatContent

 Why a website?  Share information (photo albums, profiles, calendars)  Gather data, materials, or money (surveys, forms, shopping carts, etc)  Facilitate collaboration, discussion, and creation of ideas (wikis, blogs, forums) Purpose

 Who are they and why would they use your site?  They want/need information  They want/need to make a purchase/donation  They want/need to be entertained  They want/need to be part of a community Users

 What is your content?  “Heroin Content”  Web writing basics ▪ Shorter is better ▪ Use search keywords ▪ Drive user action ▪ Proofread  Get a second opinion Content

 How will you deliver your content?  Dictated mostly by Purpose and Content  Happens mostly in Plan and Organize phase  Blogs, surveys, Google Calendar, YouTube, social networking (Facebook, Twitter, etc.) Format

Common Mistakes Site Maps Print vs. Web Marketing

Lack of purpose Too much material Navigational failure Print-to-web Common Mistakes

 Site maps show site architecture  Group pages » Categories » Primary Navigation  Organize material based on users’ needs  No dead-end pages

 All navigation must answer:  Where am I?  Where have I been?  Where can I go next?  Where's the Home Page?  Where's the Home Home Page?

PRINT Linear Non-linear WEB Author- driven Reader- driven

 How will users learn about your site?  How does website tie into marketing plans?  Social networking?

Mockups, Layout, and Accessibility

Elements that get in the way Mystery Meat Navigation Not enough contrast Visual elements vs. text Common Mistakes

 (Mis)Using visual elements instead of text  Limits accessibility of screen readers  Not search-engine friendly  Increases page size and load time  Harder to edit

Graphical mockup Use graphics editor to test design and layout Functional prototype/wireframe Link pages together to test navigation

Heavy vs. light elements Balance Dark vs. light, large vs. small, smooth vs. rough Contrast Create visual hierarchy Emphasis Patterns and consistency Rhythm Group like-elements together Unity

Disability Device Independence Usability 27

WEB CONTENT ACCESSIBILITY GUIDELINES  Text Alternatives  Alternatives for Time- based Media  Well-timed  Adaptable  Distinguishable  Keyboard Accessible  Avoid Seizures  Navigable  Readable  Predictable  Input Assistance  Compatible 28

Validators, Simulators, and Guinea Pigs

QUANTITATIVE  Validators  Check for broken links  Compare to web standards  Simulators  Mobile device simulators  Search Engine Optimization Tools (SEOs)  Cross-platform check  Firefox, Safari, IE, Opera, Chrome, etc.  Mac OS X, Vista, XP, Linux, etc. QUALITATIVE  Friends  Colleagues  Designers/Developers  User testing  Focus groups  Surveys

 Create/find new content regularly  Replace images  Verify external links are active  Look for broken links  Solicit user input  Check marketing outlets

Technology Training scu.edu/training 32