Logo
Pattern

Discover published sets by community

Explore tens of thousands of sets crafted by our community.

Web Usability Guidelines

25

Flashcards

0/25

Still learning
StarStarStarStar

Guideline 10: Help and documentation

StarStarStarStar

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large. Example: FAQ sections on websites.

StarStarStarStar

Guideline 23: Clear Form Input Fields

StarStarStarStar

Forms should have clearly labeled fields with expected data formats and real-time feedback to correct errors. Example: indicating a required email format or highlighting a wrongly filled field.

StarStarStarStar

Guideline 1: Visibility of system status

StarStarStarStar

Keep users informed about what is going on, through appropriate feedback within a reasonable time. For example, loading indicators when a page is loading.

StarStarStarStar

Guideline 3: User control and freedom

StarStarStarStar

Users often choose system functions by mistake and will need a clearly marked 'emergency exit' to leave the unwanted state. Example: having a 'Cancel' button during a process.

StarStarStarStar

Guideline 6: Recognition rather than recall

StarStarStarStar

Make objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Example: breadcrumbs in website navigation.

StarStarStarStar

Guideline 11: Mobile Responsiveness

StarStarStarStar

Websites should be usable across different types of devices and screen sizes, adapting their layout accordingly. Example: responsive web design that adjusts to both mobile phones and desktop screens.

StarStarStarStar

Guideline 21: Error Tolerance

StarStarStarStar

Design interfaces in a way that is tolerant of user error, and if an error occurs, provide simple, constructive, and specific instructions for recovery. Example: confirming file deletions to prevent accidental loss.

StarStarStarStar

Guideline 14: User Engagement

StarStarStarStar

Websites should be designed to engage users, encouraging interaction and participation. Example: interactive elements like comment sections or social sharing buttons.

StarStarStarStar

Guideline 4: Consistency and standards

StarStarStarStar

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. Example: using a floppy disk icon to represent saving.

StarStarStarStar

Guideline 5: Error prevention

StarStarStarStar

Even better than good error messages is a careful design that prevents a problem from occurring. Example: form validations that prevent the user from entering invalid data.

StarStarStarStar

Guideline 8: Aesthetic and minimalist design

StarStarStarStar

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. Example: clean and simple web design.

StarStarStarStar

Guideline 9: Help users recognize, diagnose, and recover from errors

StarStarStarStar

Error messages should be expressed in plain language, precisely indicate the problem, and constructively suggest a solution. Example: 'Incorrect password. Try again or click on 'Forgot password?' to reset it.'

StarStarStarStar

Guideline 16: Color and Contrast

StarStarStarStar

Sufficient color contrast should be maintained for readability and aesthetic balance, especially for people with visual impairments. Example: dark text on a light background.

StarStarStarStar

Guideline 22: High-Quality Content

StarStarStarStar

Provide content that is relevant, useful, and high quality to ensure it meets user needs. Example: regularly updated blog posts with valuable information.

StarStarStarStar

Guideline 20: Predictive Search

StarStarStarStar

Search features should provide suggestions as users type, aiding in the discovery of content. Example: search auto-complete based on common or recent searches.

StarStarStarStar

Guideline 2: Match between system and the real world

StarStarStarStar

The system should speak the users' language, with words, phrases, and concepts familiar to the user, rather than system-oriented terms. Example: using 'Trash' to represent discarding a file.

StarStarStarStar

Guideline 25: Privacy and Security

StarStarStarStar

Ensure that users' privacy and security are protected, and communicate this to users. Example: using HTTPS, not storing sensitive data unnecessarily, and clear privacy policies.

StarStarStarStar

Guideline 12: Accessibility

StarStarStarStar

Websites should be accessible to users with disabilities, including those who use assistive technologies. Example: alt text for images to aid screen reader users.

StarStarStarStar

Guideline 18: Informative Link Text

StarStarStarStar

Links should convey clear and accurate information about the destination. Example: 'Read more about Web Usability Guidelines' instead of 'Click here'.

StarStarStarStar

Guideline 7: Flexibility and efficiency of use

StarStarStarStar

Accelerators, unseen by the novice user, may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Example: keyboard shortcuts.

StarStarStarStar

Guideline 15: Load Time and Performance

StarStarStarStar

Optimize website performance for quick loading times to prevent user frustration and abandonment. Example: compressing images and minifying JavaScript.

StarStarStarStar

Guideline 19: Consistent Iconography

StarStarStarStar

Icons should be used consistently throughout the website both in appearance and function. Example: a magnifying glass consistently used for the search function.

StarStarStarStar

Guideline 13: Clear Navigation

StarStarStarStar

Navigation should be intuitive and consistently presented across the website, allowing users to easily orient themselves and move to their desired content. Example: persistent top navigation menus.

StarStarStarStar

Guideline 17: Legible Typography

StarStarStarStar

Text should be easy to read and understand. Example: using a clear, sizeable font with appropriate spacing.

StarStarStarStar

Guideline 24: Contextual Help

StarStarStarStar

Contextual help should be available where users may need more information or assistance. Example: tooltips that explain the function of interface elements.

Know
0
Still learning
Click to flip
Know
0
Logo

© Hypatia.Tech. 2024 All rights reserved.