Lockheed Martin Systems Integration - Owego Web Page Design Design guidelines for successful web site development Eric Hards Senior Web Designer Lockheed

Lockheed Martin Systems Integration - Owego

Web Page DesignWeb Page DesignDesign guidelines for successful web site Design guidelines for successful web site

developmentdevelopment

Eric HardsEric HardsSenior Web DesignerSenior Web Designer

Lockheed MartinLockheed Martin

[email protected]@lmco.com


Top 13 Rules to Follow for Web DesignTop 13 Rules to Follow for Web Design

• Keep these rules in mind when creating your web Keep these rules in mind when creating your web sitesite

• All are based on information web sites, not All are based on information web sites, not commerce or entertainmentcommerce or entertainment


Rule 1: Define your goalsRule 1: Define your goals

• Without a clear set of goals your site will failWithout a clear set of goals your site will fail• Define:Define:

• Target audienceTarget audience• ObjectivesObjectives• PurposePurpose• Content OutlineContent Outline


Rule 2: ContentRule 2: Content

• Nothing is more important than the content of the Nothing is more important than the content of the sitesite

• Content should be:Content should be:• InformativeInformative• AccurateAccurate• TimelyTimely• ReadableReadable

• Don’t design your site without the contentDon’t design your site without the content


Rule 3: Keep It SimpleRule 3: Keep It Simple

• Just because you can add something to the page doesn’t mean you shouldJust because you can add something to the page doesn’t mean you should• Things that get over used:Things that get over used:

• Excessive graphics, animated graphics or blinking textExcessive graphics, animated graphics or blinking text• FramesFrames• Background imagesBackground images• Bevels and other graphic tricks Bevels and other graphic tricks • Java applets, ActiveX controls, plug-insJava applets, ActiveX controls, plug-ins

• Ask yourself:Ask yourself:• What value am I adding with this technique?What value am I adding with this technique?• Is this the best way to communicate what I want to say?Is this the best way to communicate what I want to say?


Rule 4: Simple Not BoringRule 4: Simple Not Boring

• Don’t confuse fancy effects with effective Don’t confuse fancy effects with effective communicationcommunication

• Think about how people will be using your pagesThink about how people will be using your pages• Split your information into logical sections Split your information into logical sections • When the final design seems too simple for the When the final design seems too simple for the

amount of work you've put in, then you know amount of work you've put in, then you know you're doneyou're done

Clean Design + Good Use of Technology = A Good Web Site


Rule 5: Three ClicksRule 5: Three Clicks

• Get as much information to the users as possibleGet as much information to the users as possible• Never have information more than three clicks awayNever have information more than three clicks away• Remember, if someone is visiting your site they are looking for informationRemember, if someone is visiting your site they are looking for information

• Make it easy to findMake it easy to find• Ask yourself what they might be looking forAsk yourself what they might be looking for• Give contact informationGive contact information


Rule 6: Words MatterRule 6: Words Matter

• If content is King it must sound goodIf content is King it must sound good• Be sure to use correct grammarBe sure to use correct grammar• Spell check and proofreadSpell check and proofread• In some cases you may need a writerIn some cases you may need a writer


Rule 7: LinksRule 7: Links

• Create descriptive linksCreate descriptive links• 7 to 10 words in length7 to 10 words in length• Avoid “click here”Avoid “click here”• Use natural text in contextUse natural text in context

• Add descriptive “alt” tags to all graphicsAdd descriptive “alt” tags to all graphics• Offer multiple navigationOffer multiple navigation


Rule 8: GraphicsRule 8: Graphics

• Avoid overuse of graphicsAvoid overuse of graphics• In information sites graphics should only be used In information sites graphics should only be used

for information purposesfor information purposes• Charts or diagramsCharts or diagrams• Maps and drawingsMaps and drawings• Product imagesProduct images• NavigationNavigation

• Well designed sites don’t always need graphicsWell designed sites don’t always need graphics


Rule 9: ConsistencyRule 9: Consistency

• Use a consistent layout for your entire siteUse a consistent layout for your entire site• Break sections up with colorBreak sections up with color• Use consistent navigationUse consistent navigation• Makes changes easierMakes changes easier


Rule 10: Keep It FreshRule 10: Keep It Fresh

• Keep your site currentKeep your site current• Think about monthly or bi-monthly updatesThink about monthly or bi-monthly updates• Users will only return if they think content is newUsers will only return if they think content is new


Rule 11: Avoid Under ConstructionRule 11: Avoid Under Construction

• If the content is unavailable don’t put it on your If the content is unavailable don’t put it on your sitesite

• Web sites are supposed to change all the timeWeb sites are supposed to change all the time• Follow Rule 10 and add the items when they are Follow Rule 10 and add the items when they are

availableavailable


Rule 12: LayoutRule 12: Layout

• Use tables to maintain layout controlUse tables to maintain layout control• Scrolling pages are OK (within reason)Scrolling pages are OK (within reason)• If pages are not printable offer a printable versionIf pages are not printable offer a printable version• Give file sizes for embedded (downloadable) filesGive file sizes for embedded (downloadable) files• Use descriptive titlesUse descriptive titles• Offer contact informationOffer contact information


Rule 12: Layout (continued)Rule 12: Layout (continued)

• Not everyone has a 17” monitor (maybe)Not everyone has a 17” monitor (maybe)• Design for 600x320 or 723x390Design for 600x320 or 723x390• Use web-safe colorsUse web-safe colors• Printable?Printable?

• Make sure your starting page is attractive and Make sure your starting page is attractive and well plannedwell planned

• Try to have a consistent theme throughout the Try to have a consistent theme throughout the entire site entire site

• Try to use colors, styles and fonts that Try to use colors, styles and fonts that complement each othercomplement each other


Rule 13: Have Someone Look at ItRule 13: Have Someone Look at It

• Watch one of your users use the siteWatch one of your users use the site• Not a co-workerNot a co-worker• Someone who will use the information Someone who will use the information • Ask your boss to look at it (they can be ruthless)Ask your boss to look at it (they can be ruthless)

• Read itRead it


E-commerce DesignE-commerce Design

• Top obstacles to increased e-commerce salesTop obstacles to increased e-commerce sales• slow response timeslow response time• lack of user friendlinesslack of user friendliness• poor web site designpoor web site design

• The primary factor in determining e-commerce The primary factor in determining e-commerce user loyaltyuser loyalty• user friendly and easy to navigateuser friendly and easy to navigate• good previous experiencegood previous experience• fast response timefast response time• relevant, frequently updated content.relevant, frequently updated content.


Importance of human interface design Importance of human interface design

• "If the point of contact between the product and "If the point of contact between the product and the people becomes a point of friction, then the the people becomes a point of friction, then the industrial designer has failed. If, on the other industrial designer has failed. If, on the other hand, people are made safer, more comfortable, hand, people are made safer, more comfortable, more eager to purchase, more efficient -- or just more eager to purchase, more efficient -- or just plain happier -- the designer has succeeded".plain happier -- the designer has succeeded".

Henry Dreyfuss - 1950Henry Dreyfuss - 1950


Importance of human interface designImportance of human interface design

• Know the userKnow the user• Minimize memorizationMinimize memorization• Optimize operationsOptimize operations• Engineer for errorsEngineer for errors• SimplicitySimplicity• NaturalnessNaturalness• Ease-of-useEase-of-use


Why is design missing in e-commerce web Why is design missing in e-commerce web sites?sites?

• Rapid growth of web-based applicationsRapid growth of web-based applications• Rush to e-market.Rush to e-market.


Importance of UsabilityImportance of Usability

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

Jakob Nielson Jakob Nielson



Human Interface DesignHuman Interface Design

• Gain the user's attentionGain the user's attention• Orienting the user to the business that will be Orienting the user to the business that will be

transactedtransacted• Retain the user's attentionRetain the user's attention• Achieve active participationAchieve active participation






How do we do this?How do we do this?

• Understand the user's conceptual modelUnderstand the user's conceptual model• Consistent information consistent with the user's Consistent information consistent with the user's

conceptual modelconceptual model• Feedback in response to user input.Feedback in response to user input.


Conceptual ModelConceptual Model

• The human mind processes new information The human mind processes new information based on observations and inferences based on observations and inferences

• Design a model and a system image that are Design a model and a system image that are consistent with the user's model of the web site.consistent with the user's model of the web site.


Conceptual ModelConceptual Model

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


Information PresentationInformation Presentation

• e-commerce web site should be based on user e-commerce web site should be based on user requirementsrequirements

• Page layout and navigation should be as intuitive Page layout and navigation should be as intuitive and easy as possibleand easy as possible

• A flat hierarchy of informationA flat hierarchy of information• Color choices should be pleasing to the eye and Color choices should be pleasing to the eye and

should stimulate the user's interestshould stimulate the user's interest


Analogous ColorsAnalogous Colors


FeedbackFeedback

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

Donald NormanDonald Norman


OrdersOrders

• All totals, shipping and other charges should be All totals, shipping and other charges should be presented before a credit card is givenpresented before a credit card is given

• Completed orders should be acknowledged Completed orders should be acknowledged quicklyquickly

• Users are quick to attribute meaning to events. Users are quick to attribute meaning to events. • Feedback should not distract the user. Feedback should not distract the user.




ReferencesReferences

• Dreyfuss, H. Designing for People. Simon & Schuster, New Dreyfuss, H. Designing for People. Simon & Schuster, New York, 1955.York, 1955.

• Nielson, J. Designing Web Usability: The Practice of Nielson, J. Designing Web Usability: The Practice of Simplicity. NewRidersSimplicity. NewRiders Publishing, Indianapolis, 2000. Publishing, Indianapolis, 2000.

• Norman, D.A. The Design of Everyday Things. Doubleday, Norman, D.A. The Design of Everyday Things. Doubleday, New York, 1994.New York, 1994.

• Shneiderman, B. Designing the User Interface:Strategies Shneiderman, B. Designing the User Interface:Strategies for Effectivefor Effective Human-Computer Interaction.Addison-Wesley Human-Computer Interaction.Addison-Wesley Publishing Company, New York,Publishing Company, New York, 1997. 1997.

• Sklar, J.Principles of Web Design. Thomson Learning, Sklar, J.Principles of Web Design. Thomson Learning, Cambridge, MA, 2000. Cambridge, MA, 2000.


Web Page DesignWeb Page DesignDesign guidelines for successful web site Design guidelines for successful web site

developmentdevelopment

September 18, 2001September 18, 2001

Eric HardsEric HardsSenior Web DesignerSenior Web Designer

Lockheed MartinLockheed Martin

[email protected]@lmco.com

Documents

Lockheed Martin Systems Integration - Owego Web Page Design Design guidelines for successful web site development Eric Hards Senior Web Designer Lockheed