Website Design

Website DesignUnderstanding the Basics

Core PrinciplesKnow your audience and why they are coming to your site

Think usability above all else.

No one is reading your website.

Measure your results.

2

The HomepageUsers spend an average of 30 seconds on your home page. Heres what you need to communicate in that time:What site they have arrived onWhat benefits the organization offers themSomething about the organization and its products/servicesChoices and how to get to the most relevant section

Do you Know Where You are?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?

Page ElementsBasic Page Elements that Users Look For:Perceptible menus, with some graphic or color delineation, across the top and usually on the leftA Home button in or near the menu on the far left of all pages except the homepageA logo in the upper-left corner of all pages (clickable to the home page)An open search field in the upper-right corner of all pagesA shopping cart icon in the upper-right corner of all pagesA login/out feature in the upper-right corner of all pages.Utility navigation at the very top or very bottom of pages that is subtle and visually weaker than the main/global navigation

Utility Navigation

Sections and Headings Save TimeHeadings that describe the information below them save users timeOffer white space, borders, and color to help users see the sections and the topicsChunk informationProvide headings for each section Be careful not to make the headings look so big or colorful that they look like an add or promotion

Interlude Sound Smart DefinitionInformation Architecture The combination of organizing, labeling, and navigation within an information systemThe structural design of an information space to facilitate task completion and intuitive access to contentThe art and science of classifying and structuring websites to help people find and manage information

Source: Rosenfeld, L and Morville, P (2002). Information Architecture for the World Wide Web (2nd Edition) Sebastapol, CA: OReilly Media, Inc.

NavigationNavigation should be consistent, simple, and persistentBranding and marketing in menus confuses peopleA link is a promise. The link name sets the users expectation for what is to comeUse the most specific words you can for links. Try to avoid using links titled more, etc.Links should change colors when clicked Use breadcrumbs

Avoid Branding in Navigation. It doesnt make sense to your userYahoo 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

Fundamental (and boring) elementsContact Us only 2% of users ever look at the contact us section of a website. However, contact adds credibility to your organization, and helps users who cant find the information they are looking forPrivacy Policy users almost never look at the privacy policy, but it adds to your credibility and should be included in the utility navigation

Images

Characteristics of Good ImagesHigh contrast and high qualityCropped, rather than overly reduced, when necessary to fit a small spaceNot excessively detailed; easy to interpretHighly related to the content on the page, excitingSmiling and approachable facesPeople looking at (or at least facing) the cameraClear instructions or information

Smiling Face, looking at the cameraMedium quality, contrastHighly related to the contentEasy to interpret

Characteristics of Ignored ImagesAre low contrast and low qualityAre too busy for the spaceLook like advertisementsAre not related to the content or only slightly relatedAre boringInclude people or objects that are generic or obvious stock artAre cold, fake, or too polished

Picture does not include facesIs not related to the program, and is not easy to interpretIs boring

Generic and obvious stock artNo relation to the programFaces are not looking at the cameraPicture is only slightly related to the contentPicture is boring

Dos and Donts of Web DesignDo make sure that links change color when visitedDo NOT have a link open in a new browser window youll only frustrate your customer (exception: PDFs and other documents)Do NOT include vaporous content and empty hypeDo make sure you content is scan able and easy to read

Do NOT use FlashDo keep videos and other multimedia elements shortDo include videos that enhance your content.Do NOT include videos simply because you can

Do limit the amount your user has to scrollDo NOT use splash pagesDo make sure your content is current and valid

Typography The BasicsUse sans serif fontsWhen in doubt, use VerdanaLimit the number of font styles (and color)For a general audience, use 10-12 point fontFor a senior audience use 12-14 point fontBlack text on white background is the most readable, followed by blue text on white background

Writing for the WebContent should be the focus of your design. Content and headers are noticed first even before images.Make sure your content is scan ableHighlight key wordsUse concise and descriptive titles and headingsUse bulleted and numbered listsUse simple, conversational languageTone down marketing hypeSummarize key points and pare down.

Measure & TestAlways measure your site and test your users against your expectationsFor 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.Conduct regular usability tests with your users. Dont 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?