1 / 38

Web Page Design

Web Page Design. Design guidelines for successful web site development Eric Hards Senior Web Designer Lockheed Martin eric.hards@lmco.com. Top 13 Rules to Follow for Web Design. Keep these rules in mind when creating your web site

myron
Download Presentation

Web Page 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 Page Design Design guidelines for successful web site development Eric Hards Senior Web Designer Lockheed Martin eric.hards@lmco.com Lockheed Martin Systems Integration - Owego

  2. Top 13 Rules to Follow for Web Design • Keep these rules in mind when creating your web site • All are based on information web sites, not commerce or entertainment Lockheed Martin Systems Integration - Owego

  3. Rule 1: Define your goals • Without a clear set of goals your site will fail • Define: • Target audience • Objectives • Purpose • Content Outline Lockheed Martin Systems Integration - Owego

  4. Rule 2: Content • Nothing is more important than the content of the site • Content should be: • Informative • Accurate • Timely • Readable • Don’t design your site without the content Lockheed Martin Systems Integration - Owego

  5. Rule 3: Keep It Simple • Just because you can add something to the page doesn’t mean you should • Things that get over used: • Excessive graphics, animated graphics or blinking text • Frames • Background images • Bevels and other graphic tricks • Java applets, ActiveX controls, plug-ins • Ask yourself: • What value am I adding with this technique? • Is this the best way to communicate what I want to say? Lockheed Martin Systems Integration - Owego

  6. Rule 4: Simple Not Boring • Don’t confuse fancy effects with effective communication • Think about how people will be using your pages • Split your information into logical sections • When the final design seems too simple for the amount of work you've put in, then you know you're done Clean Design + Good Use of Technology = A Good Web Site Lockheed Martin Systems Integration - Owego

  7. Rule 5: Three Clicks • Get as much information to the users as possible • Never have information more than three clicks away • Remember, if someone is visiting your site they are looking for information • Make it easy to find • Ask yourself what they might be looking for • Give contact information Lockheed Martin Systems Integration - Owego

  8. Rule 6: Words Matter • If content is King it must sound good • Be sure to use correct grammar • Spell check and proofread • In some cases you may need a writer Lockheed Martin Systems Integration - Owego

  9. Rule 7: Links • Create descriptive links • 7 to 10 words in length • Avoid “click here” • Use natural text in context • Add descriptive “alt” tags to all graphics • Offer multiple navigation Lockheed Martin Systems Integration - Owego

  10. Rule 8: Graphics • Avoid overuse of graphics • In information sites graphics should only be used for information purposes • Charts or diagrams • Maps and drawings • Product images • Navigation • Well designed sites don’t always need graphics Lockheed Martin Systems Integration - Owego

  11. Rule 9: Consistency • Use a consistent layout for your entire site • Break sections up with color • Use consistent navigation • Makes changes easier Lockheed Martin Systems Integration - Owego

  12. Rule 10: Keep It Fresh • Keep your site current • Think about monthly or bi-monthly updates • Users will only return if they think content is new Lockheed Martin Systems Integration - Owego

  13. Rule 11: Avoid Under Construction • If the content is unavailable don’t put it on your site • Web sites are supposed to change all the time • Follow Rule 10 and add the items when they are available Lockheed Martin Systems Integration - Owego

  14. Rule 12: Layout • Use tables to maintain layout control • Scrolling pages are OK (within reason) • If pages are not printable offer a printable version • Give file sizes for embedded (downloadable) files • Use descriptive titles • Offer contact information Lockheed Martin Systems Integration - Owego

  15. Rule 12: Layout (continued) • Not everyone has a 17” monitor (maybe) • Design for 600x320 or 723x390 • Use web-safe colors • Printable? • Make sure your starting page is attractive and well planned • Try to have a consistent theme throughout the entire site • Try to use colors, styles and fonts that complement each other Lockheed Martin Systems Integration - Owego

  16. Rule 13: Have Someone Look at It • Watch one of your users use the site • Not a co-worker • Someone who will use the information • Ask your boss to look at it (they can be ruthless) • Read it Lockheed Martin Systems Integration - Owego

  17. E-commerce Design • Top obstacles to increased e-commerce sales • slow response time • lack of user friendliness • poor web site design • The primary factor in determining e-commerce user loyalty • user friendly and easy to navigate • good previous experience • fast response time • relevant, frequently updated content. Lockheed Martin Systems Integration - Owego

  18. Importance of human interface design • "If the point of contact between the product and the people becomes a point of friction, then the industrial designer has failed. If, on the other hand, people are made safer, more comfortable, more eager to purchase, more efficient -- or just plain happier -- the designer has succeeded". Henry Dreyfuss - 1950 Lockheed Martin Systems Integration - Owego

  19. Importance of human interface design • Know the user • Minimize memorization • Optimize operations • Engineer for errors • Simplicity • Naturalness • Ease-of-use Lockheed Martin Systems Integration - Owego

  20. Why is design missing in e-commerce web sites? • Rapid growth of web-based applications • Rush to e-market. Lockheed Martin Systems Integration - Owego

  21. Importance of Usability • "Usability rules the Web. If the customer can't find a product, then he or she will not buy it. The Web is the ultimate customer empowering environment. He or she who clicks on the mouse gets to decide everything. It is so easy to go elsewhere; all the competitors in the world are but a mouse click away" Jakob Nielson Lockheed Martin Systems Integration - Owego

  22. Lockheed Martin Systems Integration - Owego

  23. Human Interface Design • Gain the user's attention • Orienting the user to the business that will be transacted • Retain the user's attention • Achieve active participation Lockheed Martin Systems Integration - Owego

  24. Lockheed Martin Systems Integration - Owego

  25. Lockheed Martin Systems Integration - Owego

  26. Lockheed Martin Systems Integration - Owego

  27. Lockheed Martin Systems Integration - Owego

  28. How do we do this? • Understand the user's conceptual model • Consistent information consistent with the user's conceptual model • Feedback in response to user input. Lockheed Martin Systems Integration - Owego

  29. Conceptual Model • The human mind processes new information based on observations and inferences • Design a model and a system image that are consistent with the user's model of the web site. Lockheed Martin Systems Integration - Owego

  30. Conceptual Model • Walk into an unfamiliar supermarket, and one can make reasonable guesses about where to find the meat department, dairy case, courtesy desk, and check outstations. Specific details found in the supermarket such as aisle signs provide confirming information. In effect, the shopper parses a supermarket and uses the local information together with a conceptual model to navigate the store. So it is with an e-commerce web site. Lockheed Martin Systems Integration - Owego

  31. Information Presentation • e-commerce web site should be based on user requirements • Page layout and navigation should be as intuitive and easy as possible • A flat hierarchy of information • Color choices should be pleasing to the eye and should stimulate the user's interest Lockheed Martin Systems Integration - Owego

  32. Analogous Colors Lockheed Martin Systems Integration - Owego

  33. Feedback • "feedback—sending back to the user information about what action has actually been done, what result has been accomplished--is a well known concept in the science of control and information theory. Imagine trying to talk to someone when you cannot even hear your own voice, or trying to draw a picture with a pencil that leaves no mark: there would be no feedback" Donald Norman Lockheed Martin Systems Integration - Owego

  34. Orders • All totals, shipping and other charges should be presented before a credit card is given • Completed orders should be acknowledged quickly • Users are quick to attribute meaning to events. • Feedback should not distract the user. Lockheed Martin Systems Integration - Owego

  35. Lockheed Martin Systems Integration - Owego

  36. Lockheed Martin Systems Integration - Owego

  37. References • Dreyfuss, H. Designing for People. Simon & Schuster, New York, 1955. • Nielson, J. Designing Web Usability: The Practice of Simplicity. NewRiders Publishing, Indianapolis, 2000. • Norman, D.A. The Design of Everyday Things. Doubleday, New York, 1994. • Shneiderman, B. Designing the User Interface:Strategies for Effective Human-Computer Interaction.Addison-Wesley Publishing Company, New York, 1997. • Sklar, J.Principles of Web Design. Thomson Learning, Cambridge, MA, 2000. Lockheed Martin Systems Integration - Owego

  38. Web Page Design Design guidelines for successful web site development September 18, 2001 Eric Hards Senior Web Designer Lockheed Martin eric.hards@lmco.com Lockheed Martin Systems Integration - Owego

More Related