Measure your results.</li></li></ul><li>The Homepage<br />Users spend an average of 30 seconds on your home page. Here’s what you need to communicate in that time:<br />What site they have arrived on<br />What benefits the organization offers them<br />Something about the organization and it’s products/services<br />Choices and how to get to the most relevant section<br />
What are the benefits of this organization to you? (WIIFM)
Can you tell me something about recent developments?
Do you know how to get to relevant sections?</li></li></ul><li>Page Elements <br />Basic Page Elements that Users Look For:<br />Perceptible menus, with some graphic or color delineation, across the top and usually on the left<br />A Home button in or near the menu on the far left of all pages except the homepage<br />A logo in the upper-left corner of all pages (clickable to the home page)<br />An open search field in the upper-right corner of all pages<br />A shopping cart icon in the upper-right corner of all pages<br />A login/out feature in the upper-right corner of all pages.<br />Utility navigation at the very top or very bottom of pages that is subtle and visually weaker than the main/global navigation<br />
Sections and Headings Save Time<br />Headings that describe the information below them save users time<br />Offer white space, borders, and color to help users see the sections and the topics<br />Chunk information<br />Provide headings for each section <br />Be careful not to make the headings look so big or colorful that they look like an add or promotion<br />
Interlude – Sound Smart Definition<br />Information Architecture – <br />The combination of organizing, labeling, and navigation within an information system<br />The structural design of an information space to facilitate task completion and intuitive access to content<br />The art and science of classifying and structuring websites to help people find and manage information<br />Source: Rosenfeld, L and Morville, P (2002). Information Architecture for the World Wide Web (2nd Edition) Sebastapol, CA: O’Reilly Media, Inc.<br />
Navigation<br />Navigation should be consistent, simple, and persistent<br />Branding and marketing in menus confuses people<br />A link is a promise. The link name sets the user’s expectation for what is to come<br />Use the most specific words you can for links. Try to avoid using links titled “more”, etc.<br />Links should change colors when clicked <br />Use breadcrumbs<br />
“Yahoo” Style navigation may satisfy your various coworkers, who all think their stuff belongs on the home page, but there is a reason why Google is the preferred search engine<br />Avoid Branding in Navigation. It doesn’t make sense to your user<br />
Characteristics of “Good” Images<br />High contrast and high quality<br />Cropped, rather than overly reduced, when necessary to fit a small space<br />Not excessively detailed; easy to interpret<br />Highly related to the content on the page, exciting<br />Smiling and approachable faces<br />People looking at (or at least facing) the camera<br />Clear instructions or information<br />
Easy to interpret</li></li></ul><li>Characteristics of Ignored Images<br />Are low contrast and low quality<br />Are too busy for the space<br />Look like advertisements<br />Are not related to the content or only slightly related<br />Are boring<br />Include people or objects that are generic or obvious stock art<br />Are cold, fake, or too polished<br />
Picture is only slightly related to the content
Picture is boring</li></li></ul><li>Do’s and Don’ts of Web Design<br />Do make sure that links change color when visited<br />Do NOT have a link open in a new browser window – you’ll only frustrate your customer (exception: PDFs and other documents)<br />Do NOT include vaporous content and empty hype<br />Do make sure you content is scan able and easy to read<br />
Do NOT use Flash<br />Do keep videos and other multimedia elements short<br />Do include videos that enhance your content.<br />Do NOT include videos simply because you can<br />
Do limit the amount your user has to scroll<br />Do NOT use splash pages<br />Do make sure your content is current and valid<br />
Typography – The Basics<br />Use sans serif fonts<br />When in doubt, use Verdana<br />Limit the number of font styles (and color)<br />For a general audience, use 10-12 point font<br />For a senior audience use 12-14 point font<br />Black text on white background is the most readable, followed by blue text on white background<br />
Writing for the Web<br />Content should be the focus of your design. Content and headers are noticed first – even before images.<br />Make sure your content is scan able<br />Highlight key words<br />Use concise and descriptive titles and headings<br />Use bulleted and numbered lists<br />Use simple, conversational language<br />Tone down marketing hype<br />Summarize key points and pare down.<br />
Measure & Test<br />Always measure your site and test your users against your expectations<br />For measuring, use Google Analytics or a similar program to find out what pages are being most looked at, how long people are spending on each page, and where they are coming from.<br />Conduct regular usability tests with your users. Don’t simply rely on surveys. Ask your users to conduct certain tasks/find certain information and watch how they go about doing it. Is your site set-up to be usable?<br />
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.