Footer Landscape Analysis
Visual reference of usage across government sites + private org sites
- #1: Visibility of system status
- #2: Match between system and the real world
- #3: User control and freedom
- #4: Consistency and standards
- #5: Error prevention
- #6: Recognition rather than recall
- #7: Flexibility and efficiency of use
- #8: Aesthetic and minimalist design
- #9: Help users recognize, diagnose, and recover from errors
- #10: Help and documentation
[NNG] https://www.nngroup.com/articles/ten-usability-heuristics/
The footer provides copyright, licensing and other information about your service and department.
Types
- Default Footer
- Footer with Secondary Navigation
- Footer with links to meta information
- Footer with secondary navigation and links to meta information
Eight key characteristics of good website footer design. This is the most important information to include in your footer:
- Logo
- Navigation
- Contact details
- Support
- Copyright, terms of service, privacy policy
- Company info (i.e. Careers)
- Social media icons
- Call-to-action
A page footer organism, containing common links to complement primary navigation. The optional elements are: logo, footer-sections (with links), language selector, and social media icons.
Footers can be found at the bottom of almost every web page, and often take many forms, depending on the type of content on a website. Regardless of the form they take, their presence is critical (and highly underrated).
- Act as a guide for users
- Footers serve as an important reference point.
- Footers can serve as a second change for validation
- Increase discoverability
- Last chance for user to see important content
- Builds credibility to reinforce awareness of brand/agency
- Purposely go to footer to start search
Footer Elements
- Utility links
- Doormat navigation
- Secondary-task links
- Site map
- Testimonials or awards
- Brands within the organization
- Customer engagement (email newsletters and social media)
Though it’s the last place, you should avoid:
- Put EVERYTHING in the footer / avoid turning into dumping ground
- Going more than two levels deep in the IA structures
- Vague link titles
Recommended stick with two extremes. This helps show the essential info and the core functionalities.
- Fundamental info
- Extraneous information
A footer serves site visitors who arrive at the bottom of a page without finding what they want.
Content Info Landmark A contentinfo landmark is a way to identify common information at the bottom of each page within a website, typically called the "footer" of the page, including information such as copyrights and links to privacy and accessibility statements. HTML Techniques The HTML footer element defines a contentinfo landmark when its context is the body element. ARIA Technique If the HTML footer element technique is not being used, a role="contentinfo" attribute should be used to define a contentinfo landmark.
- Most pages have a visual structure with a block of content (typically logo, navigation, search, etc.) at the top, a main content area, a footer, and sometimes sidebars with related information.
- Page regions such as header, nav, main, aside, and footer programmatically define the essential semantic structure of a page.
- Screen reader users can easily navigate among these major page areas.