Website Design Part 1
Download as PPTX, PDF1 like355 views
The document provides guidelines for effective website design. It discusses the importance of understanding your audience, focusing on usability, and measuring results. Key elements to include on pages are perceptible menus, a home button, logo, search field, and utility navigation. Headings and sections should describe information to help users. Navigation should be consistent, simple, and persistent. Images should be high quality, related to content, and feature smiling faces. Content and headers are most important. Measure website usage and test usability with users.
Website Design Part 1
- 1. Website DesignUnderstanding the Basics
- 2. Core PrinciplesKnow your audience and why they are coming to your site
- 3. Think usability above all else.
- 4. No one is reading your website.
- 5. Measure your results.The HomepageUsers spend an average of 30 seconds on your home page. Here’s what you need to communicate in that time:What site they have arrived onWhat benefits the organization offers themSomething about the organization and it’s products/servicesChoices and how to get to the most relevant section
- 6. Do you Know Where You are?
- 7. What are the benefits of this organization to you? (WIIFM)
- 8. Can you tell me something about recent developments?
- 9. Do you know how to get to relevant sections?Page Elements Basic Page Elements that Users Look For:
- 10. Perceptible menus, with some graphic or color delineation, across the top and usually on the left
- 11. A Home button in or near the menu on the far left of all pages except the homepage
- 12. A logo in the upper-left corner of all pages (clickable to the home page)
- 13. An open search field in the upper-right corner of all pages
- 14. A shopping cart icon in the upper-right corner of all pages
- 15. A login/out feature in the upper-right corner of all pages.
- 16. Utility navigation at the very top or very bottom of pages that is subtle and visually weaker than the main/global navigation
- 18. 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
- 20. 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 informationSource: Rosenfeld, L and Morville, P (2002). Information Architecture for the World Wide Web (2nd Edition) Sebastapol, CA: O’Reilly Media, Inc.
- 21. NavigationNavigation should be consistent, simple, and persistentBranding and marketing in menus confuses peopleA link is a promise. The link name sets the user’s 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
- 22. “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 engineAvoid Branding in Navigation. It doesn’t make sense to your user
- 23. 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 can’t 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
- 24. Images
- 25. 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
- 26. Smiling Face, looking at the camera
- 28. Highly related to the content
- 29. Easy to interpretCharacteristics 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
- 30. Picture does not include faces
- 31. Is not related to the program, and is not easy to interpret
- 32. Is boringGeneric and obvious stock art
- 33. No relation to the program
- 34. Faces are not looking at the camera
- 35. Picture is only slightly related to the content
- 36. Picture is boringDo’s and Don’ts of Web DesignDo make sure that links change color when visitedDo NOT have a link open in a new browser window – you’ll 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
- 37. 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
- 38. Do limit the amount your user has to scrollDo NOT use splash pagesDo make sure your content is current and valid
- 39. 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
- 40. 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.
- 41. 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. 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?