UX Usability Heuristics
Scott C. Krause | Friday, Mar 19, 2021
Pioneered by the Nielsen Norman Group, the 10 Usability Heuristics are basic observation criteria used to evaluate computer software for potential usability issues. The primary advantage of Heuristic Evaluation (HE) is that it can add value at any point in the design life cycle.
Pro ⚡ Tips
Eliminate ambiguity. Enable people to see, understand, and act with confidence.
Streamline and optimize workflows. Intelligently anticipate needs to help people shop better, smarter, and faster.
Create familiarity and strengthen intuition by applying the same solution to the same problem.
#1: Visibility of system status
The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.
#2: Match between system and the real world
The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.
#3: User control and freedom
Users often perform actions by mistake. They need a clearly marked "emergency exit" to leave the unwanted action without having to go through an extended process.
#4: Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.
#5: Error prevention
Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions, or check for them and present users with a confirmation option before they commit to the action.
#6: Recognition rather than recall
Minimize the user's memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.
#7: Flexibility and efficiency of use
Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
#8: Aesthetic and minimalist design
Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.
#9: Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.
#10: Help and documentation
It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.
Popups, Toast, Parallax, and SFX
Curated LWC Links
Indispensable Curated LWC Links
Curated Links Vue.js
Indispensable Curated Vue Links
Curated PWA Links
Indispensable Curated PWA Links
Curated Creative Links
Indispensable Curated Creative Links
Transition to TypeScript
Indispensable Curated TypeScript Links
The Clandestine Dead Drop
The Ironclad Clandestine Dead Drop
New Macbook Setup for Developers
New Macbook Config for Devs 2022
Indispensable Curated Svelte Links
UX Usability Heuristics
HE Heuristic Evaluation
Curated Blogfolios Links
Curated Emerging Tech Links
Indispensable Curated Tech Links
Cytoscape Skills Data Visualization
Persuasive Infographics & Data Visualizations
eCommerce Accessibility A11y
Accessibility Challenges Unique to eCommerce
Roll Dice in High-Fidelity 3D
Create 3D Dice with Strong Random Entropy
Produce CSV with client-side JS. Construct Blog and Download as CSV file.
PWA Add to Home Screen
Progressive Web App ⚡ Advanced Cache && Notification Patterns
Convert an HTML formatted data attrib name to a JS formatted name.
Oracle PL/SQL Stored Procedure
Vintage Stored Procedure to denormalize department codes
Dark Mode and Reduced Motion
Making Dark Mode work with both a UI switch && the OS preference.
Vanilla JS Popover Microinteraction
A popover is a transient view that shows on a content screen when a user clicks on a control button or within a defined area.
Vue.js double tap Microinteraction
Firing both a tap and a double-tap on the same element
CSS Advanced Accessibility
Motion, theme, and skip A11Y CSS solutions
JS Airport Geo-Proximity Radius
Airport geo-proximity logic that answers questions, like; “What are the three closest airports to me right now?”
Cypress E2E Quality Assurance
End to End testing 🚀 Headless browser automation
Asynchronous eCom Nav Category Count
Asynchronous recursive crawl reports the total number of products by category.
Color of the Year CSS Styles
Color of the Year 2000 thru 2021 CSS Utility classes
Solve Anagram Puzzle
Do two strings contain the exact amount of letters to form two words?
Virtual Keyboard Extention Configuration
TS Virtual Keyboard Chrome Extention
Web Music Ad Blocker Snippet
Automatically mute the Music player when Ads are playing and unmute when they are done (in Chrome).