1 / 54

Web Site Design

Web Site Design. Connie Hancock University of Nebraska - Lincoln Extension Educator chancock1@unl.edu. The only reason your Web site exists is to solve your customers’ problems!. Why people come to your site? They want/need information They want/need to make a purchase/donate

jael
Download Presentation

Web Site Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Site Design Connie Hancock University of Nebraska - Lincoln Extension Educator chancock1@unl.edu

  2. The only reason your Web site exists is to solve your customers’ problems!

  3. Why people come to your site? • They want/need information • They want/needto make a purchase/donate • They want/need to be entertained http://webpagesthatsuck.com

  4. HOME RUN High-quality content Often updated Minimal download time Ease of Use Relevant to users’ needs Unique to the online medium Net-centric corporate culture Designing Web Usability – Jakob Nielsen

  5. Activity 1 • http://abc.go.com/ • http://www.amctv.com

  6. ASK YOURSELF • What do you like and dislike about this web page? • What information does this page share? • Does it appear to be easy to find important or pertinent information? • Is the information well presented?

  7. Three Parts of a Web Site • Information • Interaction • Presentation Web Page Design – Stubbs, Barksdale, Crispen

  8. Information Message Audience Purpose Background Structure Interaction Organization Navigation Interactivity Presentation Color scheme Font Selection Graphics selection Multimedia effects Arrangement www.webguild.org

  9. Information Design • Message • Audience • Purpose • Background • Structure

  10. Activity 2 • http://www.senate.gov/

  11. ASK YOURSELF • What is the primary message of the Web page? • Whom do you think message is directed to? • Why do you think they want to share this information? • Did you already know about them before you visited this Web site? • Is the message easy to read and follow?

  12. Hints for “Old Sites”

  13. Content rich sites • More likely to remain on site • More likely to return Content is the focus • Reason why people go online • First thing they look for • Must provide fast answers

  14. Web Site Content • Beginning – grabs attention • Middle – value added portion • Ending – payoff or call to action

  15. Do you have “Heroin” Content ? The best content is content people want to see over and over again! http://websitesthatsuck.com

  16. Does it solve problems? • Does it match target market expectations? • Do you know the purpose of your site? • Do you know target customer? • Would it cause people to re-visit? • Is it technically correct? • Is the content current and updated? • Can people find what they are looking for?

  17. Page Content • Keep Text Short • Bullets • Structure articles with headings • Use highlighting • Plain Language • One idea per paragraph • Start each page with a conclusion - Most important first • Page Chunking • Copy Editing

  18. Message • Think about what you want to tell • Whom you’re going to tell it to • What do they already know • How will information be put together Example – http://www.irs.gov

  19. 4 Seconds • To download Home page • To figure out your message

  20. What about your Web site • What is your Web site’s message? • Who is your audience? • What is the purpose and scope of your Web site? • How is the message structured?

  21. Interaction Design • Organization • Navigation • Interactivity

  22. Activity 3 • http://go.com/

  23. ASK YOURSELF • Which web site’s organization did you like best? • What navigation tools did they use? What do they have in common? • Which of these two sites has you participating or making the most decisions? What kinds of decisions or interactions are expected?

  24. Hints for “Old Sites”

  25. Organization = Uniform Context • Now where do you go? • Where are you going? • Knowing where you are

  26. Organizing the message • Random • Linear • Hierarchical • Mixed

  27. Navigation • Home Page – Welcome Page • Site identity/mission • Site hierarchy • Search • Teases • Timely content • Deals • Short-cuts • Registration Don’t Make Me Think – Steve Krug

  28. It also has to • Show me what I’m looking for • …..and what I’m not looking for • Show me where to start • Establish credibility and trust Don’t Make Me Think – Steve Krug

  29. All web 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? Example: http://sethgodin.typepad.com/

  30. “Mystery Meat” Navigation • Mouse-over “buttons” to know where to go • Graphics that are usually blank Example - http://slashdot.org/

  31. What about your site? • How is your site organized? • Does your home page do it’s job? • Can people find their way around your site easily? • Are you asking them to take action?

  32. Presentation Design • Color scheme • Font selection • Graphics selection • Multimedia effects • Arrangement

  33. Looks of the House are important • People don’t care what “tools” were used to build it • Don’t want design elements that get in the way

  34. Activity 4 • http://disney.go.com

  35. ASK YOURSELF • What colors, written text, hyperlinks were chosen? • Is the font easy to read? • Describe the graphics. • Are there any special effects? • Are all the elements arranged on the page in such a way that each element adds to the page?

  36. Hints for “Old Sites”

  37. Must inspire confidence • Must appear you understand • Must show your share their values • Must show your product/service will solve THEIR problem

  38. Don’t confuse web design with a magic trick! Which one is the real dentist? http://websitesthatsuck.com

  39. Human Factors • Brain is built for recognition • Brain likes 7 • Brain thrives on contrast • Brain likes to find patterns Marketing on the Internet – Jan Zimmerman

  40. Design Elements • Background – colors/images • Foreground – content/links • Other – buttons, hyperlinks, search, navigation bar, table of content, etc…..

  41. Organizing space • Unity • Balance • Proportion

  42. Misusing Graphics and Flash • Tools to explain your message • Example – Flash • Example – Graphics http://websitesthatsuck.com

  43. What about your Web site? • Are your colors inviting? • Is the text/font easy to read? • Do the graphics add to the message? • Are the elements arranged to add to the page?

  44. Krug’s Laws of Usability • Don’t make me think!! • It doesn’t matter how many times I have to click • Get rid of half of the words on each page, then get rid of half of what’s left Don’t Make Me Think –Steve Krug

  45. Accessibility • Visually impaired use special readers for text. • Blinking text can trigger seizures . • Poor color choices may render text unreadable to color blind visitors. • Mouse-dependent site navigation can be difficult for visitors with physical limitations. • Information contained in sound clips is inaccessible to hearing-impaired visitors.

  46. Text only default

  47. www.cast.org/bobby Check out a website http://bobby.watchfire.com/bobby/html/en/index.jsp

  48. CERN Usability Guidelines – http://www.w3.org/WAI • Microsoft Usability Guidelines – http://msdn.microsoft.com • Philip Greenspun – http://www.arsdigita.com/books/panda

  49. Everybody test • Ask visitors what they think of the content and imagery of your page. • Let them express their opinions • Then show them you value their opinions and comments and make the positive changes they suggest

More Related