The document outlines 10 key design and layout principles to enhance website effectiveness, including the importance of visual calls to action, organized layouts, and accessibility features. It emphasizes the need for clear navigation, user assistance, and suitable graphics to improve user experience and satisfaction. Overall, the principles advocate for simplicity, clarity, and engagement to help users interact more effectively with the website.

1. 10 Design & Layout Principles Guaranteed to Improve Your WebsiteLauren Martin www.sitemotif.com

2. Get your visitors attention on your website’s goal.1. Visual Call to Action

3. Visual Call to ActionOne primary action you want your visitors to take.Use contrast and size to catch attention.The action text should be clear and obvious.Located near the top of page above the fold.

4. Below fold, hard to read, unclear action.Page Fold

5. “Click to Play!” doesn’t have nearly as much contrast as the 5 other buttons lower on the screen which compete for your attention.

9. Importance based structure and scan-ability.2. Organized Layout

10. Organized LayoutConvey information about what’s important.Lead the user into content there looking for.Improves scan-ability.Use header tags (h1, h2, h3, etc…) appropriately.Provides visual breaks, groups, and chunks.Use alignment, date, subject, etc to create sections.Size and color to convey priority and importance.

11. Nothing really stands out, the section headers are hard to read and fade into the background, most of the text is the same size, I’m not sure where to look.

14. 508 Compliance = websites should work for everyone, that includes people with disabilities.3. Accessibility

15. AccessibilityUse ALT tags on images for screen readersEnsure HTML is ordered by hierarchy.Improve readability for those with low-vision through size and contrastOptions to increase font sizeAvoid pop-upsUse proper input-field/labeling Don’t use color as a sole indicator for differentiationDesign for smaller screen sizes, then scale.

16. Small, light blue text, on a lighter blue background. Very hard to read.

17. Extremely small and hard to read. The text bar also only appears when you over the area, so the page appears empty otherwise.

18. Indicate where you can take an action.4. Affordances

19. AffordancesLinks should not be the same color as your textButtons should appear beveled or have a hover to differentiate them from plain graphics.Form items should be grayed out if they are not clickable.Mouse icon should change to indicate when something is clickable.Textures and patterns can imply grips when things can be dragged.

20. The only reason I even thought to see if “CONTACT ME” was a button, is because the text was a verb. There is no hover effect either.

21. While the yellow chalk arrows appear to be part of the background, they are actually the only way to interact with this gallery.

22. Which things are clickable? I’ll give you a hint… “Featured Work” is not a button, and “Web Design” is not a link.

24. Don’t leave me hanging, give me some help.5. Assistance

25. AssistanceProvide an FAQ or help sectionTry to avoid allowing errors, but when they occur explain:What’s wrongWhat you need from the userHow they need to do itInstructions should be clear, specific and to the point.Provide good defaults and constant feedback.

27. We throw things away in the trash, we do not re-allocate disk space.6. Real-World Mental Model

28. Real-World Mental Model Avoid fancy, industry, or techie terms. Use Layman’s terms.When you buy things in a store you put them in a cart, use a “cart” icon to represent selected items for purchase.Design concepts to be consistent with how they work in everyday life.Similar in functionality, language and appearance.

30. The simplest explanation or strategy tends to be the best one – Occam’s Razor7. Keep it Simple

31. Keep it Simple80/20 RuleAvoid excessive text or explanationForms shouldn’t ask for unnecessary\additional information.Reduce clutter, and appreciate white space like a pause in a sentence.Be upfront, clear, and to the point. The rest is unnecessary.Focus on the core goals and tasks.

32. I’m not sure where to look, how to interact with it, or what it’s for. So… I left (as soon as I took this screen shot)

33. There is simply WAY too much text on this page.

36. We tend to look at smiling faces, and products. Our eyes seem to jump over the rest resulting in just more stuff on the page we have to get past.8. Suitable Graphics

37. Suitable GraphicsPut thought into your graphics. Stick to a color scheme.Avoid overly generic clip art just to add to the page.Every image and graphic should have a specific purpose.Stick to a theme or consistency in appearance. (all sketchy, or all photos etc)Focus on your product or offering.

38. There is no connection with this background graphic and the content, not to mention it kills the readability of the page.

41. Where am I? Where can I go?9. Navigation

42. NavigationTake advantage of standards, and place the navigation near the top, or down the left side.Clean, clear, simple labels, easy to read and see.Highlight the visitors current location vs. other locations.Provide feedback when in sub-levels as to the visitors location and how to get back.Should be easy to see how much information the site offers, how deep each level is.

43. See if you can find the navigation…

44. Aside from the fact that I had to scroll forever, you can’t tell what’s clickable or where you can go. Is there only a home page?…After much further investigation, I found there is more content…Page FoldPage FoldPage FoldPage Fold

48. There’s just something fun about this.10. Delight

49. DelightOnce you have everything else figured out, add a smile.Niceties that are un-expected, a cute line of text, a compliment when a photo is uploaded, etc.Little fun interactions used sparingly.Take the user away from the mundane. Pleasant surprises.