# UI - UX

> When the point of contact between the product and the people becomes a point of friction, then the industrial designer has failed. On the other hand if people are made safer, more comfortable, more eager to purchase, more efficient – or just plain happier -by contact with the product, then the designer has succeeded. — Henry Dreyfuss in Designing for People

> "Done" is not when you ship, but when a person uses it successfully. — Adam Silver

> Does the product intuitively help me achieve a task, quickly, when I’m up against a deadline?

* RAIL is a user-centric performance model [The RAIL Performance Model | Web Tools - Google Developers](https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail?hl=en)

> An app shouldn’t keep the user guessing — it should tell the user what’s happening

### Resources

* [UX Movement - Articles on User Experience Design](http://uxmovement.com/)
* [HHS.gov Web Standards](http://guidelines.usability.gov/)
* [LukeW | Writings on Digital Product Strategy & Design](http://www.lukew.com/ff/)
* [Introducing RAIL: A User-Centric Model For Performance – Smashing Magazine](http://www.smashingmagazine.com/2015/10/rail-user-centric-model-performance/)
* [UI Design Do's and Don'ts - Apple Developer](https://developer.apple.com/design/tips/)
* [Archive - Articles - Baymard Institute](http://baymard.com/blog/archive)
* [Centered Logos Hurt Website Navigation](https://www.nngroup.com/articles/centered-logos/)
* [SVG Stencils for Your Wireframes](http://littleplaneapp.com/)
* [Consistency: Key to a Better User Experience | UX Booth](http://www.uxbooth.com/articles/consistency-key-to-a-better-user-experience/)
* [Design Principles FTW](http://www.designprinciplesftw.com/)
* [DoisJeUtiliser.fr | Des contre-exemples ergonomiques illustrés](https://doisjeutiliser.fr/)
* [Golden Rules of User Interface Design](http://babich.biz/golden-rules-of-user-interface-design/)
* [Pompage.net - L’étude de l’expérience utilisateur : et en français, ça donne quoi ?](http://www.pompage.net/traduction/expliquer-etude-experience-utilisateur-aux-clients)
* [PortKit: UX Metaphor Equivalents for iOS & Android](http://kintek.com.au/blog/portkit-ux-metaphor-equivalents-for-ios-and-android/)
* [Ten skills you need to be a UX unicorn – Medium](https://medium.com/@uxmuch/ten-skills-you-need-to-be-a-ux-unicorn-f7ec555981b0)
* [UX & Usability Articles from Nielsen Norman Group](https://www.nngroup.com/articles/)
* [UX — Wikipedia](https://en.wikipedia.org/wiki/UX)
* [Why Performance Matters, Part 3: Tolerance Management – Smashing Magazine](https://www.smashingmagazine.com/2015/12/performance-matters-part-3-tolerance-management/)
* [macOS Human Interface Guidelines: App Styles and Anatomy](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/OSXHIGuidelines/index.html)
* [Design Principles - Overview - iOS Human Interface Guidelines](https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/)
* [Website Tools and Applications with Flash | Free NN/g Report](https://www.nngroup.com/reports/website-tools-and-applications-flash/) - tips for creating interactive web-based applications, including accessibility considerations (not specific to Flash)
* [Refactoring UI](https://refactoringui.com/)
* [Checklist Design - best UI elements for the best UX practice](https://www.checklist.design/)
* [The UI & UX Tips Collection: Volume One. | Marc Andrew](https://web.archive.org/web/20201201074935/https://marcandrew.me/ui-ux-tips-collection-vol-one/)

From [GoodUI](https://web.archive.org/web/20201108132942/https://goodui.org/):

* [A One Column Layout instead of multicolumns.](https://web.archive.org/web/20201108132942/https://goodui.org/#1)
* [Giving a Gift instead of closing a sale right away.](https://web.archive.org/web/20201108132942/https://goodui.org/#2)
* [Merging Similar Functions instead of fragmenting the UI.](https://web.archive.org/web/20201108132942/https://goodui.org/#3)
* [Social Proof instead of talking about yourself.](https://web.archive.org/web/20201108132942/https://goodui.org/#4)
* [Repeating Your Primary Action instead of showing it just once.](https://web.archive.org/web/20201108132942/https://goodui.org/#5)
* [Distinct Clickable/Selected Styles instead of blurring them.](https://web.archive.org/web/20201108132942/https://goodui.org/#6)
* [Recommending instead of showing equal choices.](https://web.archive.org/web/20201108132942/https://goodui.org/#7)
* [Undos instead of prompting for confirmation.](https://web.archive.org/web/20201108132942/https://goodui.org/#8)
* [Telling Who It's For instead of targeting everyone.](https://web.archive.org/web/20201108132942/https://goodui.org/#9)
* [Being Direct instead of indecisive.](https://web.archive.org/web/20201108132942/https://goodui.org/#10)
* [More Contrast instead of similarity.](https://web.archive.org/web/20201108132942/https://goodui.org/#11)
* [Personality instead of being generic.](https://web.archive.org/web/20201108132942/https://goodui.org/#12)
* [Fewer Form Fields instead of asking for too many.](https://web.archive.org/web/20201108132942/https://goodui.org/#13)
* [Exposing Options instead of hiding them.](https://web.archive.org/web/20201108132942/https://goodui.org/#14)
* [Suggesting Continuity instead of false bottoms.](https://web.archive.org/web/20201108132942/https://goodui.org/#15)
* [Keeping Focus instead of drowning with links.](https://web.archive.org/web/20201108132942/https://goodui.org/#16)
* [Showing State instead of being state agnostic.](https://web.archive.org/web/20201108132942/https://goodui.org/#17)
* [Benefit Buttons instead of just task based ones.](https://web.archive.org/web/20201108132942/https://goodui.org/#18)
* [Direct Manipulation instead of contextless menus.](https://web.archive.org/web/20201108132942/https://goodui.org/#19)
* [Exposing Fields instead of creating extra pages.](https://web.archive.org/web/20201108132942/https://goodui.org/#20)
* [Transitions instead of showing changes instantly.](https://web.archive.org/web/20201108132942/https://goodui.org/#21)
* [Gradual Engagement instead of a hasty sign up.](https://web.archive.org/web/20201108132942/https://goodui.org/#22)
* [Fewer Borders instead of wasting attention.](https://web.archive.org/web/20201108132942/https://goodui.org/#23)
* [Selling Benefits instead of features.](https://web.archive.org/web/20201108132942/https://goodui.org/#24)
* [Designing For Zero Data instead of just data heavy cases.](https://web.archive.org/web/20201108132942/https://goodui.org/#25)
* [Opt-Out instead of opt-in.](https://web.archive.org/web/20201108132942/https://goodui.org/#26)
* [Consistency instead of making people relearn.](https://web.archive.org/web/20201108132942/https://goodui.org/#27)
* [Smart Defaults instead of asking to do extra work.](https://web.archive.org/web/20201108132942/https://goodui.org/#28)
* [Conventions instead of reinventing the wheel.](https://web.archive.org/web/20201108132942/https://goodui.org/#29)
* [Loss Aversion instead of emphasizing gains.](https://web.archive.org/web/20201108132942/https://goodui.org/#30)
* [Visual Hierarchy instead of dullness.](https://web.archive.org/web/20201108132942/https://goodui.org/#31)
* [Grouping Related Items instead of disordering.](https://web.archive.org/web/20201108132942/https://goodui.org/#32)
* [Inline Validation instead of delaying errors.](https://web.archive.org/web/20201108132942/https://goodui.org/#33)
* [Forgiving Inputs instead of being strict with data.](https://web.archive.org/web/20201108132942/https://goodui.org/#34)
* [Urgency instead of timelessness.](https://web.archive.org/web/20201108132942/https://goodui.org/#35)
* [Scarcity instead of abundance.](https://web.archive.org/web/20201108132942/https://goodui.org/#36)
* [Recognition instead of recall.](https://web.archive.org/web/20201108132942/https://goodui.org/#37)
* [Bigger Click Areas instead of tiny ones.](https://web.archive.org/web/20201108132942/https://goodui.org/#38)
* [Faster Load Times instead of making people wait.](https://web.archive.org/web/20201108132942/https://goodui.org/#39)
* [Keyboard Shortcuts instead of buttons only.](https://web.archive.org/web/20201108132942/https://goodui.org/#40)
* [Anchoring instead of starting with the price.](https://web.archive.org/web/20201108132942/https://goodui.org/#41)
* [Upfront Progress instead of starting with a blank.](https://web.archive.org/web/20201108132942/https://goodui.org/#42)
* [Progressive Disclosure instead of overwhelming.](https://web.archive.org/web/20201108132942/https://goodui.org/#43)
* [Smaller Commitments instead of one big one.](https://web.archive.org/web/20201108132942/https://goodui.org/#44)
* [Softer Prompts instead of modal windows.](https://web.archive.org/web/20201108132942/https://goodui.org/#45)
* [Multifunctional Controls instead of more parts.](https://web.archive.org/web/20201108132942/https://goodui.org/#46)
* [Icon Labels instead of opening for interpretation.](https://web.archive.org/web/20201108132942/https://goodui.org/#47)
* [Natural Language instead of dry text.](https://web.archive.org/web/20201108132942/https://goodui.org/#48)
* [Curiosity instead of being reserved.](https://web.archive.org/web/20201108132942/https://goodui.org/#49)
* [Reassurances instead of assuming all is fine.](https://web.archive.org/web/20201108132942/https://goodui.org/#50)
* [Price Illusions instead of just plain prices.](https://web.archive.org/web/20201108132942/https://goodui.org/#51)
* [Thanking instead of simply confirming completion.](https://web.archive.org/web/20201108132942/https://goodui.org/#52)
* [Useful Calculations instead of asking to do math.](https://web.archive.org/web/20201108132942/https://goodui.org/#53)
* [Reaffirming Freedom instead of implying it.](https://web.archive.org/web/20201108132942/https://goodui.org/#54)
* [Variable Rewards instead of predictability.](https://web.archive.org/web/20201108132942/https://goodui.org/#55)
* [Attention Grabs instead of neglect.](https://web.archive.org/web/20201108132942/https://goodui.org/#56)
* [Friendly Comparisons instead of confusion.](https://web.archive.org/web/20201108132942/https://goodui.org/#57)
* [Set Collections instead of independent items.](https://web.archive.org/web/20201108132942/https://goodui.org/#58)
* [Expectation Setting instead of being ignorant.](https://web.archive.org/web/20201108132942/https://goodui.org/#59)
* [Humor instead of being so serious.](https://web.archive.org/web/20201108132942/https://goodui.org/#60)
* [Providing Feedback instead of silence.](https://web.archive.org/web/20201108132942/https://goodui.org/#61)
* [Anticipating Intent instead of shortsightedness.](https://web.archive.org/web/20201108132942/https://goodui.org/#62)
* [Extra Padding instead of overcrowding elements.](https://web.archive.org/web/20201108132942/https://goodui.org/#63)
* [Storytelling instead of listing just the facts.](https://web.archive.org/web/20201108132942/https://goodui.org/#64)
* [Authenticity instead of faking it.](https://web.archive.org/web/20201108132942/https://goodui.org/#65)
* [Progressive Reduction instead of being static.](https://web.archive.org/web/20201108132942/https://goodui.org/#66)
* [Putting Others First instead of self-centeredness.](https://web.archive.org/web/20201108132942/https://goodui.org/#67)
* [Explaining instead of assuming the obvious.](https://web.archive.org/web/20201108132942/https://goodui.org/#68)
* [Concise Copy instead of using unnecessary words.](https://web.archive.org/web/20201108132942/https://goodui.org/#69)
* [Responsive Layouts instead of static ones.](https://web.archive.org/web/20201108132942/https://goodui.org/#70)
* [Visual Clarity instead of ambiguity.](https://web.archive.org/web/20201108132942/https://goodui.org/#71)
* [Enabling Corrections instead of rigidness.](https://web.archive.org/web/20201108132942/https://goodui.org/#72)
* [Social Commitments instead of solitude.](https://web.archive.org/web/20201108132942/https://goodui.org/#73)
* [Retries And Redos instead of single chances.](https://web.archive.org/web/20201108132942/https://goodui.org/#74)
* [Less Choice instead of giving too many options.](https://web.archive.org/web/20201108132942/https://goodui.org/#75)
* [Gradual Reassurance instead of ...](https://web.archive.org/web/20201108132942/https://goodui.org/#76)
* [Giving The Best Price instead of ...](https://web.archive.org/web/20201108132942/https://goodui.org/#77)

```js
copy(Array.from(document.body.querySelectorAll(".ideas h2")).map(title => `- [${title.textContent}](${title.querySelector("a").href})`).join("\n"))
```

Tools:

* [UX Project Checklist](http://uxchecklist.github.io/)
* [Home - Pencil Project](http://pencil.evolus.vn/)

Patterns:

* [BBC GEL | Design Patterns Index](https://www.bbc.co.uk/gel/guidelines/category/design-patterns)
* [Design - Service Manual - GOV.UK](https://www.gov.uk/service-manual/design)
* [Patterns : Designing Interfaces](http://designinginterfaces.com/patterns/)
* [Qt Quick Controls 5.7](http://doc.qt.io/qt-5/qtquickcontrols-index.html)
* [YUI Library](http://yuilibrary.com/)
* [12 Standard Screen Patterns](http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns)
* [15 Common Component Patterns](http://designingwebinterfaces.com/15-common-components)
* [30 Essential Controls « Theresa Neil](https://theresaneil.wordpress.com/2009/02/04/30-essential-controls/)
* [43 Essential Controls for Web Applications | UX Booth](http://www.uxbooth.com/articles/essential-controls-for-web-applications/)
* [Golden Rules of User Interface Design](http://babich.biz/golden-rules-of-user-interface-design/)

> Too Many Messages Equals No Message
>
> — Peep Laja

### Majority of users are not high end user

Aka user are not smart

Users are not skilled

* [The Distribution of Users’ Computer Skills: Worse Than You Think](https://www.nngroup.com/articles/computer-skill-levels/)
* [Il ne faut pas prendre les gens pour des cons mais ne jamais oublier qu’ils en sont | Sam & Max](http://sametmax.com/il-ne-faut-pas-prendre-des-gens-pour-des-cons-mais-ne-jamais-oublier-quils-en-sont/)
* [Vos pires expériences avec les utilisateurs informatique : france](https://www.reddit.com/r/france/comments/5vpeg6/vos_pires_exp%C3%A9riences_avec_les_utilisateurs/)

### Seamless transitions

Aka animated transitions

* [Callum Hart | Front-end Fanatic](http://www.callumhart.com/blog/using-animation-to-design-better-user-experiences)
* [How Functional Animation Helps Improve User Experience – Smashing Magazine](https://www.smashingmagazine.com/2017/01/how-functional-animation-helps-improve-user-experience/)
* Animations are culture dependent: shaking could say no, and yes in other cultures: [Your App Login is Boring, Bring it to Life with Motion - The Kinetic UI](http://thekineticui.com/your-app-login-is-boring/)
* See [Animation](https://github.com/mems/calepin/blob/main/User%20Interface%20and%20experience/Animation/README.md)
* [Designing For Animation](http://www.smashingmagazine.com/2015/06/practical-techniques-on-designing-animation/?utm_content=bufferfd51e\&utm_medium=social\&utm_source=twitter.com\&utm_campaign=buffer)
* [How To Integrate Motion Design In The UX Workflow – Smashing Magazine](https://www.smashingmagazine.com/2016/03/integrate-motion-design-animation-ux-workflow/)
* [Use Your Interface](http://uyi.io/) see also the older website [Use Your Interface](http://useyourinterface.com/)
* [De l'intérêt des transitions pour concentrer l'attention - InterfacesRiches.fr](http://www.interfacesriches.fr/2013/07/22/de-linteret-des-transitions-pour-concentrer-lattention/)
* Remember… things… load… [“God is in the details.” – Prevue App – Medium](https://medium.com/prevue-app/god-is-in-the-details-bc3a9a9a5d88#620f)
* Use subtle animation [“God is in the details.” – Prevue App – Medium](https://medium.com/prevue-app/god-is-in-the-details-bc3a9a9a5d88#cbc8)
* [Improve the payment experience with animations – Design Insights from Bridge – Medium](https://medium.com/bridge-collection/improve-the-payment-experience-with-animations-3d1b0a9b810e) see [Improve the payment experience with animations](https://mmems.gitbook.io/calepin/user-interface-and-experience/ui-ux)
* [Transitional Interfaces – Medium](https://medium.com/@pasql/transitional-interfaces-926eb80d64e3)
* [Making a Difference with Animation - Steven Fabre](https://github.com/mems/calepin/blob/main/User%20Interface%20and%20experience/Making%20a%20Difference%20with%20Animation%20-%20Steven%20Fabre%20\(720p\).mp4)
* [What does Disney know about interface animation anyway? – Medium](https://medium.com/@vlh/what-does-disney-know-about-interface-animation-anyway-86b32d01bc4a)
* [Stop Gratuitous UI Animation – Medium](https://medium.com/@sophie_paxtonUX/stop-gratuitous-ui-animation-9ece9aa9eb97)
* [Your UI isn’t a Disney Movie](https://medium.com/startups-venture-capital/your-ui-isn-t-a-disney-movie-703f7fbd24d2)
* [Transitional Interfaces – Medium](https://medium.com/@pasql/transitional-interfaces-926eb80d64e3)
* [Invisible animation – Medium](https://medium.com/@stevenfabre/invisible-animation-ffa27d0b77e5)
* [Smart Transitions In User Experience Design – Smashing Magazine](https://www.smashingmagazine.com/2013/10/smart-transitions-in-user-experience-design/)
* [Enhance Your User Experience with Animated Transitions - Marvel Blog](https://blog.marvelapp.com/enhance-user-experience-animated-transitions/)

### Widgets

* popover
* accordion: only one panel should be open at a time
* expandable panels

### Wording

* "Your xxxx", "My xxxx" or "xxxx" [Is this my interface or yours? – Medium](https://medium.com/@jsaito/is-this-my-interface-or-yours-b09a7a795256)
* [Making a case for letter case – Medium](https://medium.com/@jsaito/making-a-case-for-letter-case-19d09f653c98)
* Terminology and Wording: [OS X Human Interface Guidelines: Terminology and Wording](https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/TerminologyWording.html#//apple_ref/doc/uid/20000957-CH15-SW1)

Sign-in, log-in, signin, signup, signup, etc.:

* [Sign Up, Sign In, Sign Out](https://web.archive.org/web/20221006234936/https://thoughtbot.com/blog/sign-up-sign-in-sign-out)
* [Why ‘Sign Up’ and ‘Sign In’ Button Labels Confuse Users](https://web.archive.org/web/20230108060731/https://uxmovement.com/buttons/why-sign-up-and-sign-in-button-labels-confuse-users/)

### String troncation

Character counts for subject lines is important, especially on small screens (mobile)

See !\[Subject ended with "Anal..."]\(Subject max length is important.jpg)

### Ask users to create account at the end of checkout process

### Open in new windows

* <http://www.smashingmagazine.com/2008/07/01/should-links-open-in-new-windows/>

### To force or not to force user to download

...instead of view the a PDF file in capable browsers

TL;DR: **Don't do that!**

* [website design - Force a PDF download vs allowing the user to view in browser first - User Experience Stack Exchange](http://ux.stackexchange.com/questions/38574/force-a-pdf-download-vs-allowing-the-user-to-view-in-browser-first)

### Unusable UI because of ads and banners

![Every Website By Jarkko Tuunanen](https://github.com/mems/calepin/blob/main/User%20Interface%20and%20experience/Every%20website%20by%20Jarkko%20Tuunanen.jpg)

* [Let me read your article](https://letmereadyourarticle.tumblr.com/)

### How to ask to rate your app

> No one likes your pop up
>
> * Don’t interrupt someone’s experience.
> * Don’t ask for an app rating after your app has crashed. That’s just stupid.
> * Do delay asking for a rating until there’s a likely moment of constructive feedback (as you’ll read later), or a positive rating.
>
> — <https://medium.com/circa/the-right-way-to-ask-users-to-review-your-app-9a32fd604fca>

### A good UI don't need a tutorial

> A user interface is like a joke. If you have to explain it, it’s not that good.
>
> — Martin LeBlanc

> If you have to draw me a picture to "show" me how to use your UI, you're doing it wrong

* [HTeuMeuLeu on Twitter: "Oh le vilain écran pseudo didactique dès l'arrivée sur le nouveau site de la Fnac. http://t.co/ZDUvfhcaYX http://t.co/PyJhXj3AFq"](https://twitter.com/HTeuMeuLeu/status/613626231360237568/photo/1)

### Feedback

* Visually confirm interactions [“God is in the details.”. In design, the details are the last 1%… | by Buzz Usborne | Medium](https://web.archive.org/web/20201108125142/https://medium.com/@buzzusborne/god-is-in-the-details-bc3a9a9a5d88)

#### Triggered success instantly

For simple tasks, where 97 to 99% will be sucess.

> communicate it as soon as possible so that our optimism does not become a lie.

* [True Lies Of Optimistic User Interfaces – Smashing Magazine](https://www.smashingmagazine.com/2016/11/true-lies-of-optimistic-user-interfaces/)

### Buttons and links

* [A Quick Guide For Designing Better Buttons – Smashing Magazine](https://www.smashingmagazine.com/2016/11/a-quick-guide-for-designing-better-buttons/)
* [buttons - Should "Yes, delete it" be red, or green? - User Experience Stack Exchange](http://ux.stackexchange.com/questions/49991/should-yes-delete-it-be-red-or-green/)
* [Buttons in UI Design: The Evolution of Style and Best Practices](https://medium.com/uxplanet/buttons-in-ui-design-the-evolution-of-style-and-best-practices-56536dc5386e)
* [Hyperlink Usability: Guidelines For Usable Links - Usability Geek](http://usabilitygeek.com/hyperlink-usability-guidelines-usable-links/)

#### Action buttons

* [Icon](#icon)
* [Primary & Secondary Action Buttons](https://web.archive.org/web/20200129193925/http://babich.biz/primary-secondary-action-buttons/) and [Primary & Secondary Action Buttons | by Nick Babich | UX Planet](https://web.archive.org/web/20201112013615/https://uxplanet.org/primary-secondary-action-buttons-c16df9b36150?gi=e8e6eac8a32e)
* (ghost button are best used for secondary or tertiary actions) [Ghost Buttons in UX Design](https://web.archive.org/web/20200417132330/http://babich.biz/ghost-buttons-in-ux-design/)

#### Modal buttons

Aka dialog buttons

Use a meaning label instead of "OK" ex: "Save" / "Save the file", "Print", "Open"

* [OK-Cancel or Cancel-OK?](https://www.nngroup.com/articles/ok-cancel-or-cancel-ok/)
* [macOS Human Interface Guidelines: Dialogs](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/OSXHIGuidelines/WindowDialogs.html#//apple_ref/doc/uid/20000957-CH43-SW5)

#### Buttons shouldn't have a hand cursor

> `pointer`: The cursor is a pointer that indicates a link
>
> — <https://www.w3.org/TR/css-ui-3/#propdef-cursor>

* [Buttons shouldn’t have a hand cursor — Simple = Human — Medium](https://medium.com/simple-human/buttons-shouldnt-have-a-hand-cursor-b11e99ca374b)
* [Bootstrap 4 removes hand cursor on buttons](https://github.com/twbs/bootstrap/commit/232e86d0b4e1a4ff0dc3aa4e6d75c14a54fa8ac8), [Remove `cursor: pointer;`](https://github.com/twbs/bootstrap/pull/21812) and [Bootstrap 4 removes hand cursor on buttons : webdev](https://www.reddit.com/r/webdev/comments/5qx6zd/bootstrap_4_removes_hand_cursor_on_buttons/)

#### Buttons vs links

See [Buttons vs links](https://github.com/mems/calepin/blob/main/User%20Interface%20and%20experience/HTML/README.md#buttons-vs-links)

#### Size of touch screen interactive element

> Apple recommends a minimum target size of 44 pixels wide 44 pixels tall. Since physical pixel size can vary by screen density, Apple’s pixel specifications apply best to the iPhone’s 320 by 480 pixel, 3.5 inch display. Google has following recommendations for touch targets — they should be at least 48 x 48dp. In most cases, they should be separated by 8dp of space or more to ensure balanced information density and usability. A touch target of 48 x 48dp results in a physical size of about 9mm, regardless of screen size. Touch targets include the area that responds to user input. Touch targets extend beyond the visual bounds of an element: an element like an icon may appear to be 24 x 24dp but the padding surrounding it comprises the full 48 x 48dp touch target. Sufficient spacing between touch targets. The main reason to have a minimum distance between touch targets is to prevent users from touching and invoking the incorrect action. This becomes extremely important in scenarios where you have icons like “Save” and “Cancel” right next to each other. Using at least 2 mm of padding between targets is extremely important in this case. — [Tips for Using Icons in Your App](https://uxplanet.org/tips-for-using-icons-in-your-app-541a6728e7d4)

* [usability - What is the optimum button size of touch screen applications? - User Experience Stack Exchange](https://ux.stackexchange.com/questions/39023/what-is-the-optimum-button-size-of-touch-screen-applications)
* [overflow - Smallest button size and spacing for a touchscreen - User Experience Stack Exchange](https://ux.stackexchange.com/questions/1226/smallest-button-size-and-spacing-for-a-touchscreen)
* [Recommandations de taille pour les éléments d'interfaces mobiles - SimpleWeb.fr](http://www.simpleweb.fr/2013/03/29/recommandations-de-taille-pour-les-elements-dinterfaces-mobiles/)
* [Size Tap Targets Appropriately   |   PageSpeed Insights   |   Google Developers](https://developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately)
* [The Opposite of Fitts' Law](https://web.archive.org/web/20201111213942/https://blog.codinghorror.com/the-opposite-of-fitts-law/)
* [Targeting - Target sizes](https://msdn.microsoft.com/en-us/windows/uwp/input-and-devices/guidelines-for-targeting#target-sizes)
* [We've updated the radios and checkboxes on GOV.UK - Design in government](https://web.archive.org/web/20201108120336/https://designnotes.blog.gov.uk/2016/11/30/weve-updated-the-radios-and-checkboxes-on-gov-uk/)

!\[image]\(Finger size.png)

```
9.2mm x 0.0393701inches/mm x 326dpi / 2dppx ~= 59pt = 59 CSS px (59 logical pixels = 118 physical pixels @2pddx)
```

* [DPI love ♥ Easily find the DPI/PPI of any screen](https://dpi.lv/)
* <https://stackoverflow.com/questions/14360647/define-and-calculate-apples-definition-of-the-unit-point>
* [Targeting - Measurements and scaling](https://msdn.microsoft.com/en-us/windows/uwp/input-and-devices/guidelines-for-targeting#measurements-and-scaling)
* [System icons - Material Design](https://web.archive.org/web/20201111173232if_/https://material.io/design/iconography/system-icons.html#grid-and-keyline-shapes) - See "Space": "Adequate space should surround system icons to allow legibility and touch. Icons of 24dp can use a touch target of 48dp"
* [Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes – Smashing Magazine](https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/)

#### No hover with touch

* [Hover is dead. Long live hover.. During February 2013, the web underwent… | by Jordan Staniscia | Medium](https://web.archive.org/web/20201116185613/https://medium.com/@jordance/hover-is-dead-long-live-hover-37a89d3795df)

### Colors

* [Color Theory for Designers, Part 1: The Meaning of Color — Smashing Magazine](https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/)
* [Color Theory by Communicator](https://www.communicatorcorp.com/sites/comms/files/colour-theory-01-\(2\).jpg)
* [Recalling Color Theory Keywords: a way to refresh your memories! | Interaction Design Foundation](https://www.interaction-design.org/literature/article/recalling-color-theory-keywords-a-way-to-refresh-your-memories)
* [A lesson in design: colour theory | Communicator](https://www.communicatorcorp.com/blog/lesson-design-colour-theory)

### Icon

> The best icon is a text label — [Thomas Byttebier - The best icon is a text label](http://thomasbyttebier.be/blog/the-best-icon-is-a-text-label)

> Don’t Carry Over Platform-specific Icons – [Tips for Using Icons in Your App](https://uxplanet.org/tips-for-using-icons-in-your-app-541a6728e7d4#8d52)

* [Tips for Using Icons in Your App](https://uxplanet.org/tips-for-using-icons-in-your-app-541a6728e7d4)
* [How to Conduct Icon Usability Testing (and Do Icons Even Improve Usability?)](https://conversionxl.com/icon-usability-testing/?ref=quuu\&utm_content=buffer182c0\&utm_medium=social\&utm_source=plus.google.com\&utm_campaign=buffer)
* [UX Considerations for Web Sharing | CSS-Tricks](https://css-tricks.com/ux-considerations-for-web-sharing/#article-header-id-2)
* [The Iconography of Sharing - Microsoft Design - Medium](https://medium.com/microsoft-design/the-iconography-of-sharing-183a1ad9c6f1)

### Font size

* [Your Body Text Is Too Small – Medium](https://medium.com/@xtianmiller/your-body-text-is-too-small-5e02d36dc902)

### Similar element need context

Ex.:

TextMate Recent Elements. If both files have the same name, the folder is also displayed:

* 📄 script.js
* 📄 README.md — 📁 Project 1
* 📄 README.md — 📁 Project 2
* 📄 index.php
* 📄 index.html

### Loading

* < 1s: nothing
* 1- 4s: spinner
* > 4s: progress bar

Loading progress Loading and splash screen

* [Responsiveness](#responsiveness)
* [Skeleton screens](#skeleton-screens)
* [Best Practices For Animated Progress Indicators – Smashing Magazine](https://www.smashingmagazine.com/2016/12/best-practices-for-animated-progress-indicators/)
* [Triggered success instantly](#triggered-success-instantly)
* [Progress Bars vs. Spinners: When to Use Which - UX Movement](http://uxmovement.com/navigation/progress-bars-vs-spinners-when-to-use-which/)
* [How To Make Users Think Your App Loads Faster](http://babich.biz/how-to-make-users-think-your-app-loads-faster/)
* [Splash Screens are Evil, Don't Use Them! - Cyril Mottier](http://cyrilmottier.com/2012/05/03/splash-screens-are-evil-dont-use-them/)
* [Do not let your user see spinners](https://stanfy.com/blog/do-not-let-your-user-see-spinners/)

### Skeleton screens

…improve perceived performance over loading spinners/loaders.

* [Skeleton Screen with CSS](http://codepen.io/oslego/pen/XdvWmd)
* [hannahatkin › Skeleton Screens](http://hannahatkin.com/skeleton-screens/)
* [Everything you need to know about skeleton screens | by Bill Chung | UX Collective](https://web.archive.org/web/20230221234627/https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a?gi=b2c53277c330)

### Empty state

Aka skeleton screen, no content to display, empty list, offline mode

* [Design the Details: Empty States by @hamishmcneill — Realmac Blog](http://wayback.archive.org/web/20150526075208/http://realmacsoftware.com/blog/design-the-details-empty-states)
* [Designing For The Empty States](http://tympanus.net/codrops/2013/01/09/designing-for-the-empty-states/)
* [desktop application - Getting "empty" views right - User Experience Stack Exchange](http://ux.stackexchange.com/questions/16362/getting-empty-views-right)
* [Empty states - Patterns - Material design guidelines](https://material.google.com/patterns/empty-states.html)
* [Empty States](http://emptystat.es/)
* [First Time User Experiences](http://firsttimeux.tumblr.com/)
* [Getting Real: The Blank Slate (by 37signals)](https://gettingreal.37signals.com/ch09_The_Blank_Slate.php)
* [Empty States - Mobile Design Patterns](http://pttrns.com/?scid=30)
* [Tips for Creating a Blank Slate - Treehouse Blog](http://blog.teamtreehouse.com/tips-for-creating-a-blank-slate)
* [UI Design for Empty States, Zero Data, and Onboarding - Rareview](http://rareview.com/ui-design-for-empty-states-zero-data-and-onboarding/)

### Burger menu

Hamburger menu, Kebab menu, Döner menu, Bento menu, Metballs menu

> The mystery meat of mobile navigation — Luke Wroblewski

* [The best icon is a text label](#icon)
* [The Hamburger Menu Doesn't Work - Deep Design](http://deep.design/the-hamburger-menu/)
* [Making A Case For The Desktop Hamburger Menu - Usability Geek](http://usabilitygeek.com/making-case-for-desktop-hamburger-menu/)
* [Don't ever say you don't have choices on mobile.](https://twitter.com/lukew/status/591296890030915585)
* [Do Users Understand Mobile Menu Icons?](http://sitesforprofit.com/mobile-menu-icons)
* [Mobile Menu AB Tested: Hamburger Not the Best Choice?](http://sitesforprofit.com/mobile-menu-abtest)
* [navigation - Should we use the 3x3 9-dots icon as an apps menu? - User Experience Stack Exchange](http://ux.stackexchange.com/questions/82391/should-we-use-the-3x3-9-dots-icon-as-an-apps-menu/82395#82395)
* [Hamburger button — Wikipedia](https://en.wikipedia.org/wiki/Hamburger_button)

### Carousel / slideshow

Aka carrousel (FR)

> You might want to use a slideshow for a gallery of photographs or a presentation perhaps. Maybe a step by step. In the right circumstance it makes a lot of sense.

Alternative Idea: Complex Grids

> Scrolling has become a dominant feature of website navigation, especially on mobile where to click/tap interactions aren’t as reliable. Grids allow the user to scroll and scan through content quickly while being subjected to a mixture of text and images. Our brains tend to feel more familiar with this type of concept because we navigate our social media feeds in the same way. — [5 Fancy (But Useless) Web Components You Should Avoid](http://www.sitepoint.com/5-fancy-useless-web-components-avoid/#alternative-idea:-complex-grids)

* [Should I Use A Carousel?](http://shouldiuseacarousel.com/)
* [Why you shouldn't use a slideshow on your website](http://www.fldtrace.com/why-you-shouldnt-use-a-slideshow-on-your-website)
* [Auto-Forwarding Carousels, Accordions Annoy Users & Reduce Visibility](http://www.nngroup.com/articles/auto-forwarding/)
* [Carousel Interaction Stats | Erik Runyon](http://erikrunyon.com/2013/01/carousel-stats/)
* [DON'T Use Automatic Image Sliders or Carousels, Ignore The Fad](https://conversionxl.com/dont-use-automatic-image-sliders-or-carousels-ignore-the-fad/)
* [Homepage Sliders: Bad For SEO, Bad For Usability](http://searchengineland.com/homepage-sliders-are-bad-for-seo-usability-163496)
* [Rotating Banners: Why Image Sliders Kill Conversions](http://marketingland.com/rotating-banners-image-sliders-kill-conversions-89984)
* [Our themes don't have sliders... Because sliders suck. • Yoast](https://yoast.com/opinion-on-sliders/)
* [Why Users Aren’t Clicking Your Home Page Carousel - UX Movement](http://uxmovement.com/navigation/why-users-arent-clicking-your-home-page-carousel/)
* [The cure for the common image slider carousel](http://www.jacksonwynne.com/image-slideshow-alternatives/)
* [Ergonomie des carrousels : 10 principes à respecter](https://yellowdolphins.com/2012/01/ergonomie-des-carrousels-10-principes-a-respecter/)
* [Slideshows In Web Design: When And How To Use Them – Smashing Magazine](http://www.smashingmagazine.com/2009/03/09/slideshows-in-web-design-when-and-how-to-use-them/)

### Pagination

Aka paging

* [Pagination - Development](https://mmems.gitbook.io/calepin/user-interface-and-experience/broken-reference)
* [Infinite scroll](#infinite-scroll)
* [Pagination Best Practices](http://babich.biz/pagination-best-practices/)

About paging with deletable items:

> Ways of handling lists with deletable items in web apps:
>
> (1/3) Netflix “My List”: scrolls to the beginning after a deletion. Makes it difficult to delete multiple items at the end.
>
> (2/3) Amazon Video watch list: the item stays but is grayed out. A simple solution that has the side benefit of making undo elegant.
>
> (3/3) YouTube lists: Deleted items are hidden; scrolling is handled well.
>
> — [Axel Rauschmayer on Twitter: "Ways of handling lists with deletable items in web apps: (1/3) Netflix “My List”: scrolls to the beginning after a deletion. Makes it difficult to delete multiple items at the end." / Twitter](https://twitter.com/rauschma/status/1343351568398168064)

### E-commerce

* [UX Research: 3 Key Design Principles for Product Listing Information - Articles - Baymard Institute](https://baymard.com/blog/list-item-design-ecommerce)

#### Use product filters instead of categories

Categories are mutually exclusive (cannot be combined)

* [Over-Categorization: Avoid Implementing Product Types as Categories (56% Get it Wrong) - Articles - Baymard Institute](http://baymard.com/blog/ecommerce-over-categorization)

#### Pricing plans

1. Highlight a recommended option
2. Allow users to switch currency (€/$/£)
3. Allow users to switch pricing monthly/yearly
4. Keep the entire pricing plan area clickable
5. Use slider to calculate how much a user would save
6. Provide free first month for good engagement
7. Prominently highlight testimonials prominently
8. Repeating call to action on top and bottom
9. Sell benefits instead of features
10. Indicate that users can cancel any time
11. Indicate what group each pricing plan is for (e.g. freelancers)
12. Avoid mentioning “account” anywhere (nobody *wants* to create an account)
13. On mobile, turn pricing plans into accordions (e.g. Slack)
14. Small commitments are better than big ones
15. Allow users to switch table/slider views
16. Highlight selected/tapped row/column in a table
17. On mobile, keep the pricing and figures as a fixed bar
18. Allow users to select features of interest
19. Allow users to configure their own pricing plan
20. Allow users to compare all features in a full screen mode
21. Potentially use tabs at the top/bottom for comparison
22. Make sure each section drops a bit of delight
23. Provide a way out if a user isn’t interested (“buy our books instead”)
24. In a form, display at most 5–6 input fields at a time

* [Pricing Plans Design Checklist](https://gist.github.com/vitalyfriedman/a79d7b72860fbf8d3a12c3aa24af7891)

### Form

Ask wisely the user informations, especially his/her name and address (data format):

* [Better Web Form Names & Addresses - David Michael Ross](http://web.archive.org/web/20150911164611/https://davidmichaelross.com/blog/better-name-address-inputs)
* [Forms | CUSU LGBT+](http://www.lgbt.cusu.cam.ac.uk/campaigns/think/forms/)

See also [Person](https://github.com/mems/calepin/blob/main/User%20Interface%20and%20experience/Person/README.md) and [Location (geography)](https://github.com/mems/calepin/blob/main/User%20Interface%20and%20experience/Location%20\(geography\)/README.md)

Advices, see [Design Better Forms](https://medium.com/uxdesign/design-better-forms-96fadca0f49c):

* use one column only
* top align labels
* group labels with their inputs
* avoid all caps label (or any other things)
* show all selection options if under 5. See [Select](#select)
* resist using placeholder text as labels. See [Form labels](#form-labels)
* place checkboxes (and radios) underneath each other for scannability
* make CTAs descriptive. Use "Sign Up" instead of "Submit"
* specify errors inline. "There is already an account with this email" instead of "1 error found"
* use inline validation after the user fills out the field (unless it helps them while in the process).
* don’t hide basic helper text. Explicit show info, don't hide in a tooltip
* differentiate primary from secondary actions. "Sign Up" vs "Cancel"
* ditch the \* and denote optional fields. Use "Label - *Optional*" instead of "Label\*"
* group related information
* omit optional fields
* [Designing Efficient Web Forms: On Structure, Inputs, Labels And Actions – Smashing Magazine](https://www.smashingmagazine.com/2017/06/designing-efficient-web-forms/)
* [Form Validation UX in HTML and CSS | CSS-Tricks](https://css-tricks.com/form-validation-ux-html-css/)
* [Which Input When? — Morgan Carter — Product Designer](http://morgancarter.com.au/design-solutions/which-input-when)
* [Two-column forms are best avoided -](http://www.effortmark.co.uk/two-column-forms-best-avoided/)
* [Better Form Design: One Thing Per Page (Case Study) – Smashing Magazine](https://www.smashingmagazine.com/2017/05/better-form-design-one-thing-per-page/)

Input placeholder: instead of `Search` use something like `Search "Austin"` (add search hints). <https://twitter.com/lukew/status/798244097265782784>

#### Don't submit when selection is made

Don't submit when the user use a select or a checkbox/radio, change value in input text, etc.

Input and submission should be separate

#### Select

Aka dropdown

It's hard to use the keyboard with it.

Don't use select if you have less than 5 choices or more than 15 choices or choice label is more that 30 chars. Use instead:

* stepper (number input) for small adjustments (like number of passengers for flight booking)
* radio groups or segmented controls for all in one place (like class of travel) or few quantities (filter: any, 1+, 2+, 3+, 4+, 5+)
* slider for range (like min / max price)
* date input for dates / years
* autocomplete (if too many choices)
* [Stop Using ‘Drop-down’ | Adrian Roselli](https://adrianroselli.com/2020/03/stop-using-drop-down.html)
* [Dropdown alternatives for better (mobile) forms | by Zoltan Kollin | Medium](https://medium.com/@kollinz/dropdown-alternatives-for-better-mobile-forms-53e40d641b53)
* [SXSW Keynote - "You Know What? Fuck Dropdowns." - YouTube](https://www.youtube.com/watch?v=hcYAHix-riY)
* [The problem with dropdown fields (and what you should use instead) | Design Smarts](https://designsmarts.co/the-problem-with-dropdowns/)
* [Dropdown alternatives for better (mobile) forms – Zoltan Kollin – Medium](https://medium.com/@kollinz/dropdown-alternatives-for-better-mobile-forms-53e40d641b53)
* [UX Design: Drop-Downs in Forms](http://babich.biz/ux-design-drop-downs-in-forms/#selectmenuandanumberofoptions)
* [Redesigning The Country Selector – Smashing Magazine](https://www.smashingmagazine.com/2011/11/redesigning-the-country-selector/)
* [Misusing the select control | Adam Silver | UX design, Front-end Engineering and Strategy | London, UK.](http://adamsilver.io/articles/misusing-the-select-control/)
* [Don’t Use Split Buttons for Navigation Menus](https://www.nngroup.com/articles/split-buttons-navigation/)
* [Dropdowns: Design Guidelines](https://www.nngroup.com/articles/drop-down-menus/)

#### Multiple choice select

If you have too many checkboxes, use a multiple choice select.

**Note: Multiple choice select is not easy to use and users don't know how to select multiple choices in a select.**

* [WebAIM: Creating Accessible Forms - Accessible Form Controls](http://webaim.org/techniques/forms/controls#select)
* [Why Users Abandon Forms with Select Menus - UX Movement](http://uxmovement.com/forms/why-users-abandon-forms-with-select-menus/)

#### Binary choice

Aka checkbox vs radio buttons

* ["Yes or No?" — One Checkbox vs Two Radio Buttons.](https://web.archive.org/web/20201122093811/https://www.sarasoueidan.com/blog/one-checkbox-or-two-radio-buttons/)

#### Checkboxes

If the scenario is “I’m under 18” and “I’m over 18” and you don’t want to set a default to create passive choice: Use a checkbox “Are you over 18”. Use case: person should confirm that he or she is 18+ to proceed to the flow

* [Radio Buttons UX Design](http://babich.biz/radio-buttons-ux-design/) and [Radio Buttons UX Design — UX Planet](https://uxplanet.org/radio-buttons-ux-design-588e5c0a50dc)
* [When to Use a Switch or Checkbox - UX Movement](http://uxmovement.com/buttons/when-to-use-a-switch-or-checkbox/)
* [Steve Schoger on Twitter: "🔥 Get creative with radio button interfaces — don’t be limited by the typical list-of-options approach. For example, using selectable cards gives you the freedom to present the options in a more exciting way:… https://t.co/wEp6x7lCCB"](https://twitter.com/steveschoger/status/1024720091546562560)

#### Login form

* [The God Login](http://blog.codinghorror.com/the-god-login/)
* [Most Common Log-in Problems and Solutions](http://babich.biz/most-common-log-in-problems-and-solutions/)
* [Designing UX Login Form and Process](http://babich.biz/designing-ux-login-form-and-process/)

#### Form validation

> Don’t disable buttons. If a user makes a mistake it won’t be clear what they’ve done wrong.
>
> Always let users click the button, and show an error message if you need to.
>
> * [Adam Silver on Twitter: "Don’t disable buttons…" https://t.co/i5nU1LbU1o"](https://twitter.com/adambsilver/status/1170954800374173696?s=12)

**Avoid message under fields.** See [Avoid Messages Under Fields | Adrian Roselli](http://adrianroselli.com/2017/01/avoid-messages-under-fields.html)

Show validation error(s) only after the user enter input (after focus blur), update it then remove it when the error(s) is fixed:

> …give users a fair chance to enter a valid input before showing an error message (a conclusion we can often only draw once the user leaves the field), yet that same error message must be updated and removed instantly upon the user fixing their input (i.e. at each and every keystroke). – [Usability Testing of Inline Form Validation: 40% Don't Have It, 20% Get It Wrong - Articles - Baymard Institute](https://baymard.com/blog/inline-form-validation#pitfall-1-premature-inline-validation)

> * `onsubmit`, i.e. when the user tries to submit the form.
> * `onblur`, i.e. when the user leaves a form field.
> * `onkeypress`, i.e. whenever the user changes the value of a form field. (And remember this may occur ten or twenty times before the user is done filling out the field.) \[...] show the error messages next to the fields they apply to, and to show them immediately when the user is done filling out the fields. In other words, the onblur timing is best. \[...] users are best served by persistent error messages, i.e. messages that don’t disappear after a while. \[...] error messages should be shown above the form field, and not below, because on a tiny mobile phone screen a message below the field could be covered up by the software keyboard or other UI elements. \[...] The counter-argument is that by now users have grown used to error messages next to or below the form field. Since the screen may not be wide enough, placement next to the field is a big no-no on mobile. Error messages below the form do not have that problem. \[...] So although the error message placement is not entirely clear, the timing has to be onblur, i.e. when the user indicates she’s ready by moving away from a form field. Also, there should be an easy way to add custom error messages to individual form fields. \[...] The user does not need to know about the state of her value every step along the way; one crisp, clear message when she’s finished is quite enough. \[...] Telling the users they’ve made a mistake before they even had a chance to interact with the form is bad UX. — [Native form validation — part 1 – Samsung Internet Developers – Medium](https://medium.com/samsung-internet-dev/native-form-validation-part-1-bf8e35099f1d)

See also [Error messages](#error-messages)

**Duplicate form fields**

**Don't duplicate form fields**

Like for email or password verification / confirm

User often duplicate (copy/past) values.

User can fill confirm field then original field, often anti-copy mecanism not work that way

* [LukeW | Email Entry in Web Forms](http://www.lukew.com/ff/entry.asp?941)
* [Why the Confirm Password Field Must Die - UX Movement](http://uxmovement.com/forms/why-the-confirm-password-field-must-die/)
* [A vouloir faire les malins… | CommitStrip](http://www.commitstrip.com/fr/2016/09/23/outsmarted/)

**“Invalid Username or Password”: a useless security measure**

See [“Invalid Username or Password”: a useless security measure](https://github.com/mems/calepin/blob/main/User%20Interface%20and%20experience/Security/README.md#invalid-username-or-password-a-useless-security-measure)

**Password interaction**

* Don't disable paste on password fields. It discourages strong, generated passwords. [Troy Hunt: The “Cobra Effect” that is disabling paste on password fields](http://www.troyhunt.com/2014/05/the-cobra-effect-that-is-disabling.html)
* Don't force user password pattern [Password Requirements Shaming](http://password-shaming.tumblr.com/), show a password strength meter instead
* Don't ask the user password twice
  * [login - Why should we ask the password twice during registration? - User Experience Stack Exchange](http://ux.stackexchange.com/questions/20953/why-should-we-ask-the-password-twice-during-registration)
  * [Case Study - small changes to sign up form lead to 55% more conversions](http://www.formisimo.com/blog/case-study-small-changes-lead-to-a-55-increase-in-conversions/)

See [Password rules](https://github.com/mems/calepin/blob/main/User%20Interface%20and%20experience/Security/README.md#password-rules)

#### Form field label

* [Why Infield Top Aligned Form Labels are Quickest to Scan - UX Movement](http://uxmovement.com/forms/why-infield-top-aligned-form-labels-are-quickest-to-scan/)
* [Placeholders are problematic | Adam Silver | UX design, Front-end Engineering and Strategy | London, UK.](http://adamsilver.io/articles/placeholders-are-problematic/)

**Placeholder as label**

**Don't use placeholder as label**

* [Don’t Put Hints Inside Text Boxes in Web Forms :: UXmatters](http://www.uxmatters.com/mt/archives/2010/03/dont-put-hints-inside-text-boxes-in-web-forms.php)
* [Don’t Put Labels Inside Text Boxes (Unless You’re Luke W) :: UXmatters](http://www.uxmatters.com/mt/archives/2013/02/dont-put-labels-inside-text-boxes-unless-youre-luke-w.php)
* [HTML - Placeholder as label](https://github.com/mems/calepin/blob/main/User%20Interface%20and%20experience/HTML/README.md#placeholder-as-label)
* [10 reasons why placeholders are problematic — Simple = Human — Medium](https://medium.com/simple-human/10-reasons-why-placeholders-are-problematic-f8079412b960)
* [Always use a label — Simple = Human — Medium](https://medium.com/simple-human/always-use-a-label-a39ceab554e6)
* [Alternatives to Placeholder Text](https://uxdesign.cc/alternatives-to-placeholder-text-13f430abc56f)

**Floating label**

* [Are Float Labels Really That Problematic After All?](https://medium.com/@mds/are-float-labels-really-that-problematic-after-all-da7ffe7d5417)
* !\[Floating labels animated example]\(Floating labels/form-animation-*gif*.gif)
* !\[Floating labels for password animated example]\(Floating labels/floatlabels-25.gif)
* [Float Labels with CSS | CSS-Tricks](https://css-tricks.com/float-labels-css/)
* [Interactive float-labels — Adrian Zumbrunnen](http://azumbrunnen.me/blog/interactive-float-labels/)
* [How the Float Label Pattern Started](http://mds.is/float-label-pattern/)
* [Text fields - Components - Google design guidelines](http://www.google.com/design/spec/components/text-fields.html#text-fields-floating-labels)
* [Adaptive Placeholders | The Circle Blog](http://blog.circleci.com/adaptive-placeholders/)
* [Float Label Pattern | Brad Frost](http://bradfrost.com/blog/post/float-label-pattern/)

**Auto fill based on others inputs**

**Problem: assumption can be wrong.** Exemple: autofill city and state input based on postal code, will fill wrong city if multiple cities share the same code. See [Location (geography)](https://github.com/mems/calepin/blob/main/User%20Interface%20and%20experience/Location%20\(geography\)/README.md)

* [Checkout Usability: Auto-Detect 'City' and 'State' Inputs Based on the User's Postal Code (60% of Sites Don't) - Articles - Baymard Institute](http://baymard.com/blog/zip-code-auto-detection)

#### Slider

* [Mobile UX Design: Sliders](http://babich.biz/mobile-ux-design-sliders/)

#### CAPTCHA Effectiveness Test

1. Test should be administered where the human and the server are remote over the network.
2. Test should be simple for humans to pass. Humans should fail less than 0.1% on the first attempt.
3. Test should be solvable by humans in less than a several seconds.
4. Test should only be solvable by the human to which it was presented.
5. Test should be hard for computer to pass Correctly guessing the answer should be less than 1 in 1,000,000, even after 24-hours of analysis.
6. Knowledge of previous test questions, answers, results, or combination thereof should not impact the predictability of following tests.
7. Test should not discriminate against humans with visual or hearing impairments.
8. Test should not possess a geographic, cultural, or language bias.

#### Input format

Credit card, date

Chars pattern can changes based on locale, country, (card) type, etc. Ex: YYYY-DD-MM, DD/MM/YYYY, etc.

* [The 'Credit Card Number' Field Must Allow and Auto-Format Spaces (80% Don't) - Articles - Baymard Institute](http://baymard.com/blog/credit-card-field-auto-format-spaces)
* [Credit Card IIN Ranges and Spacing Patterns - Checkout Usability - Baymard Institute](http://baymard.com/checkout-usability/credit-card-patterns)

#### WYSIWYG

* [Yoshiki 義樹 on Twitter: "WYSIWYG document editors hide the structure underlying your content from you in order to show you what the result looks like, but along the way valuable cues for editing are lost. I've been thinking what the spectrum between "just structure" and "just the result" looks like. https://t.co/Ol5NwBC5d8" / Twitter](https://twitter.com/yoshikischmitz/status/1198096409087463424)

### Step progress tracker

* [Progress Trackers in UX Design](http://babich.biz/progress-trackers-in-ux-design/)

### Don't rewrite native logic

**Don't break user habits**

> If you let the browser handle it, the experience will be consistent and familiar to everyone which ever site they visit.

> can introduce more problems than it solves

> false positives and quirky bugs

Reduce learning curve by use common usage the user already know (with her/him tool, platform etc.)

And what about forward compatibility: you ovewrite the current logic not the future one (design or features could change)

* [Paint the Picture, Not the Frame: How Browsers Provide Everything Users Need · An A List Apart Article](https://alistapart.com/article/paint-the-picture-not-the-frame)
* [Fixed Positioning in Mobile Browsers | Brad Frost](http://bradfrost.com/blog/mobile/fixed-position/) - tried to be set fixed element by overriding default scroll behavior
* [Principle of least astonishment — Wikipedia](https://en.wikipedia.org/wiki/Principle_of_least_astonishment)
* [“God is in the details.” – Prevue App – Medium](https://medium.com/prevue-app/god-is-in-the-details-bc3a9a9a5d88#041a)
* [Mobile Input Types](http://mobileinputtypes.com/)
* ![Input date difference on mobile](https://github.com/mems/calepin/blob/main/User%20Interface%20and%20experience/input%20date%20difference%20on%20mobile.png)
* [The disadvantages of single page applications | Adam Silver | UX design, Front-end Engineering and Strategy | London, UK.](http://adamsilver.io/articles/the-disadvantages-of-single-page-applications/)
* [CodePen - Scrolljacking is interfacejacking](http://codepen.io/gunderson/full/GJJPpV/)
* [Interface Hall of Shame - Visual Elements](https://web.archive.org/web/20021009021738/http://www.iarchitect.com/visual.htm)
* [You can't capture the nuance of my form fields](https://web.archive.org/web/20220303122823/https://drewdevault.com/2021/06/27/You-cant-capture-the-nuance.html)

#### Scroll and zoom

Scroll native behaviors:

* native performances, hardware acceleration: iPad Pro get Apple's ProMotion technology: "delivers refresh rates of up to 120Hz for fluid scrolling, greater responsiveness and smoother motion content \[...] automatically adjusting the display refresh rate to match the movement of the content."
  * [iPad Pro, in 10.5-inch and 12.9-inch models, introduces the world’s most advanced display and breakthrough performance - Apple](https://www.apple.com/newsroom/2017/06/ipad-pro-10-5-and-12-9-inch-models-introduces-worlds-most-advanced-display-breakthrough-performance/)
  * [Apple's ProMotion is going to change how we use our devices | iMore](https://www.imore.com/promotion)
* smoothing or not (can be configurable - or not - by the user at OS or browser level) impacted by touch pad for ex.
* out bounce (ex.: iOS)
* (touch) touch to scroll, pinch to zoom
* (iOS) scroll to top by touching the status bar
* (iOS) scroll expand/collapse toolbars (minimal-ui, fullscreen)
* use keys up, down, spacebar, page up, page down, home and end to navigate (scroll) in page
* mouse wheel to scroll (vertical and/or horizontal)
* focus change auto scroll (take account virtual keyboard)
* caret browsing (IE, FF) `F7`
* content selection (text & images) auto scroll
* scrollbar appareance (can not visible on some OS, can be configuratble - or not - by the user at OS level)
* horizontal gesture (touch) or scrolling horizontal (wheel) for change prev/next pages
* scroll bar interaction (often on desktop)
* (Chrome and Safari desktop) search results/markers are shown on scrollbar track
* on OSX click on track will scroll page up/downscroll, but if do it in combination with opt/alt key, will jump to that position, on Windows
* some platform have both up/down scrollbar button grouped
* history (reload, prev/next) autoscroll
* hash/document fragment autoscroll
* (webdev tools) scroll into view (for element)
* native layout: (HTML/CSS) position fixed and sticky, resize/user interaction/change font-size/etc. will auto-reflow
* (if scroll swipe simulated with mouse) select content
* (app specific) pull to refresh (Android, Chrome Android)
* subcontent scroll (html: textarea, iframe, select)

> In Safari, Mail, Contacts, and many other apps, tap the status bar at the top of the screen — which displays the network information, time, and battery level — to scroll quickly to the top. — [Apple - iPhone - Tips and Tricks](http://web.archive.org/web/20110328034937/http://www.apple.com/iphone/tips/)

* [Scrollbar - Wikipedia](https://en.wikipedia.org/wiki/Scrollbar)
* [Jump to parts of file in scrollbar - User Experience Stack Exchange](https://ux.stackexchange.com/questions/79862/jump-to-parts-of-file-in-scrollbar)
* [Baseline Rules for Scrollbar Usability | Adrian Roselli](https://adrianroselli.com/2019/01/baseline-rules-for-scrollbar-usability.html)

#### Focus ring

> Removing focus outlines entirely is like setting `cursor: none` \[eg. invisible cursor]. Aka a terrible idea. — Hugo Giraudel @HugoGiraudel

#### Form inputs

Text input:

* <https://en.wikipedia.org/wiki/Caret\\_navigation>
* [Modifier le comportement du clic droit, une mauvaise idée ? » UXUI](http://uxui.fr/2014/11/modifier-le-comportement-du-clic-droit-une-mauvaise-idee/)

#### Video player

Video player controls:

* space/enter = play/pause
* m = mute/unmute
* up/down arrows = increase/decrease volume
* right/left arrows = seek backward/forwards
* shift+right/shift+left = faster/slower
* 0-9 = seek to X\*10% of duration
* f = enter/exit full screen
* esc = exit fullscreen
* double clicking video turns on fullscreen
* indivdual buttons are keyboard tab-able (uses `<buttons>`)

### Text size and zoom

* [Don’t Re-Create Browser Features | Adrian Roselli](http://adrianroselli.com/2016/12/dont-re-create-browser-features.html)
* [Don’t use iOS meta tags irresponsibly in your Progressive Web Apps – Medium](https://medium.com/@firt/dont-use-ios-web-app-meta-tag-irresponsibly-in-your-progressive-web-apps-85d70f4438cb)

### Scroll and zoom

> It's not OK to change scroll dynamics, the same way it's not OK to change mouse dynamics. – [Scrolljacking is interfacejacking](http://codepen.io/gunderson/pen/GJJPpV)

> Overriding the browser’s default scrolling behavior introduces a whole lot of complexity, and that has implications.

And it's not 100% forward compatible. Native user experience can or native UI change, a new browser version can be broken with this script

See also

* [Javascript#Scroll](https://github.com/mems/calepin/blob/main/User%20Interface%20and%20experience/Javascript/README.md#scroll)
* [Don't override native logic](#dont-override-native-logic)
* [5 Fancy (But Useless) Web Components You Should Avoid](http://www.sitepoint.com/5-fancy-useless-web-components-avoid/#2.-the-scrolljacker)

Scrolls and zoom is an option:

> Unfortunately, it’s a common mistake to purposefully design a website in a way to avoid scrolling — [Your Body Text Is Too Small – Medium](https://medium.com/@xtianmiller/your-body-text-is-too-small-5e02d36dc902#b90d)

* [Everybody Scrolls.](http://www.hugeinc.com/ideas/perspective/everybody-scrolls)
* [Your Body Text Is Too Small – Medium](https://medium.com/@xtianmiller/your-body-text-is-too-small-5e02d36dc902#0def)
* [CSS snap point design guidelines - Graphic Design Stack Exchange](http://graphicdesign.stackexchange.com/questions/71834/css-snap-point-design-guidelines)

#### Infinite scroll

Use "Load more" button, and a transient message "Loading more posts"

* [Pagination](#pagination)
* [Stop building websites with infinite scroll!](https://logrocket.com/blog/infinite-scroll/)
* [Infinite Scrolling, Pagination Or “Load More” Buttons? Usability Findings In eCommerce – Smashing Magazine](https://www.smashingmagazine.com/2016/03/pagination-infinite-scrolling-load-more-buttons/)
* [Why Infinite Scrolling is probably a bad idea | Adam Silver | UX. Engineering. Design. Strategy. Making things simple and human. Based in London.](http://adamsilver.io/articles/why-infinite-scrolling-is-probably-a-bad-idea/)
* [Infinite Scrolling vs. Pagination](http://babich.biz/ux-infinite-scrolling-vs-pagination/)
* [Infinite Scrolling Best Practices — UX Planet](https://uxplanet.org/infinite-scrolling-best-practices-c7f24c9af1d)
* [7 reasons why Infinite Scrolling is probably a bad idea – Simple = Human – Medium](https://medium.com/simple-human/7-reasons-why-infinite-scrolling-is-probably-a-bad-idea-a0139e13c96b)

### Gesture

* [High quality Hand Gesture Multi-Touch - Agence digitale Paris, design et developpement application web et mobile](http://www.octaveoctave.com/mag/interface-utilisateur/high-quality-multitouch-gesture-for-devices)

### Simple

Aka simplicity

> single escalators have a higher capacity than double escalators, because passengers don’t dither trying to work out which escalator to take — Jack May [If we want to increase escalator capacity, why don’t we just run the things faster? | CityMetric](http://www.citymetric.com/horizons/if-we-want-increase-escalator-capacity-why-don-t-we-just-run-things-faster-1844)

* [When Simplicity Is the Solution - WSJ](http://www.wsj.com/news/articles/SB10001424127887324000704578386652879032748)
* [Sentence length: why 25 words is our limit | Inside GOV.UK](https://insidegovuk.blog.gov.uk/2014/08/04/sentence-length-why-25-words-is-our-limit/)
* [Neglected Design - Chris Wright](https://chriswrightdesign.com/articles/neglected-design/)

### Meaning of symbols

#### `[X]` to close or exit

Batsu (x) is the symbol for incorrect, and can represent false, bad, wrong or attack, while maru (o) means correct, true, good, whole, or something precious.

Maybe used for Playstation Controller?

* [X to close | Hacker News](https://news.ycombinator.com/item?id=8171340)

#### Breadcrumb

See [Text — Hierarchy](https://github.com/mems/calepin/blob/main/User%20Interface%20and%20experience/Text/README.md#hierarchy)

### User name

See [User name](https://github.com/mems/calepin/blob/main/User%20Interface%20and%20experience/Data/User/Nodes.md)

### Mega menu

Aka menu with sub menus, hit area

![Dynamic hit area](https://res.cloudinary.com/css-tricks/image/upload/v1561132003/dynamic-hit-area_tcvac3.png)

* [Menus with “Dynamic Hit Areas” | 67nj](https://www.67nj.org/menus-with-dynamic-hit-areas/) - [Menus with "Dynamic Hit Areas" | CSS-Tricks](https://css-tricks.com/menus-with-dynamic-hit-areas/)
* [Slides](https://slides.com/wireframe?debug=2#menu) - Interactive example
* [Ben Kamens, Breaking down Amazon's mega dropdown](http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown)
* [Dropdown Menus with More Forgiving Mouse Movement Paths | CSS-Tricks](https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/)
* [kamens/jQuery-menu-aim: jQuery plugin to fire events when user's cursor aims at particular dropdown menu items. For making responsive mega dropdowns like Amazon's.](https://github.com/kamens/jQuery-menu-aim)

### Submenu

> Use an ellipsis whenever choosing a menu item requires additional input from the user. The ellipsis character (…) means a dialog or separate window will open and prompt the user for additional information or to make a choice.

* [Menu (computing) - Wikipedia](https://en.wikipedia.org/wiki/Menu_\(computing\)#Sub-menus)
* [Menu Anatomy - Menus - macOS - Human Interface Guidelines - Apple Developer](https://developer.apple.com/design/human-interface-guidelines/macos/menus/menu-anatomy/)

### Table

* [How To Architect A Complex Web Table — Smashing Magazine](https://www.smashingmagazine.com/2019/02/complex-web-tables/)

### Range selector (sliders)

* [Form Usability: 5 Requirements for Slider Interfaces - Articles - Baymard Institute](http://baymard.com/blog/slider-interfaces)

### Accordion icon

Use `+` instead of `▶︎` or `▼`

* [Where to Place Your Accordion Menu Icons - UX Movement](http://uxmovement.com/navigation/where-to-place-your-accordion-menu-icons)
* [Progressive disclosure — Wikipedia](https://en.wikipedia.org/wiki/Progressive_disclosure)

### Error messages

* [How to write a great error message – Medium](https://medium.com/@thomasfuchs/how-to-write-an-error-message-883718173322)
* [Comment écrire des messages d'erreur avec un ton positif ?](http://www.testapic.com/informations-pratiques/actualites/best-practices/comment-ecrire-des-messages-d-erreur-avec-un-ton-positif/)
* How to write [Error Messages (Windows)](https://msdn.microsoft.com/en-us/library/windows/desktop/dn742471.aspx)
* [How not to write an error message | Webflow Blog](https://webflow.com/blog/how-not-to-write-an-error-message)

### Notification

And emails

> Notifications are interruptions — John Saito: [Stop the spammy notifications!](https://uxdesign.cc/stop-the-spammy-notifications-9fbac87dc077)

* [Designing smart notifications — Medium](https://medium.com/@intercom/designing-smart-notifications-36336b9c58fb)
* [A story of how design adds value to a simple notification e-mail](https://www.proxyclick.com/blog/proxyclick-journey/a-story-of-how-design-adds-value-to-a-simple-e-mail)

### Autocomplete

Autoselect most used instead of first:

In Browser WebDev Inspector, add new CSS property.

Examples when enter first letters, auto select for autocomplete most used property:

* "d": `direction`, **`display`**, `dominant-baseline`
* "w": `white-space`, **`width`**, `will-change`, `word-break`, etc.
* "b": `backface-visibility`, **`background`**, `background-attachement`, `background-blend-mode`, etc.
* "po": `pointer-events`, **`position`**
* "r": `resize`, **`right`**, `ruby-align`, etc.

See (Inspector improvements) [Developer Edition 48 – Firebug features, editable storage, inspector improvements and more… ★ Mozilla Hacks – the Web developer blog](https://hacks.mozilla.org/2016/05/developer-edition-48-firebug-features-editable-storage-inspector-improvements-and-more/)

### RTL

* [Bidirectionality - Usability - Google design guidelines](https://www.google.com/design/spec/usability/bidirectionality.html)
* [User Interfaces For Right-To-Left Languages (Hebrew, Arabic) and Bidirectional Text](http://www.i18nguy.com/MiddleEastUI.html)

### Ellipsis signification

* follow-up decision (more windows / popup / more actions as dropdown `⋮`): "Save as…"
* "Type here" (in an input: "Write something…")
* action with undetermined progress: "Loading…", "Connecting…", etc.
* more characters

> Use an Ellipsis When More Input Is Required – [OS X Human Interface Guidelines: Terminology and Wording](https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/TerminologyWording.html#//apple_ref/doc/uid/20000957-CH15-SW3)

* [The Mighty Ellipsis – Medium](https://medium.com/@jsaito/the-mighty-ellipsis-6c2c00ddc864)

### Text UI

Aka command line using SMS (or IM)

* [Futures of text | Whoops by Jonathan Libov](http://whoo.ps/2015/02/23/futures-of-text)

### Responsiveness

Aka performance preception, perceived performance, speed

> User perception:
>
> * 0-100ms: Instant
> * 100-300ms: Small perceptible delay
> * 300-1000ms: Machine is working
> * 1000ms+: Likely mental context switch
> * 10000ms+: Task is abandoned — High Performance Browser Networking by Ilya Grigorik

* 0.1s: system is reacting instantaneously
* 1.0s: the limit for the user's flow of thought to stay uninterrupted
* 10s: the limit for keeping the user's attention
* [Loading](#loading)
* [Response Time Limits: Article by Jakob Nielsen](https://www.nngroup.com/articles/response-times-3-important-limits/)
* [Responsiveness — Wikipedia](https://en.wikipedia.org/wiki/Responsiveness)
* [A Designer’s Guide to Perceived Performance - Marvel Blog](https://blog.marvelapp.com/a-designers-guide-to-perceived-performance/)
* [The Illusion of Speed – The Sea of Ideas](https://paulbakaus.com/tutorials/performance/the-illusion-of-speed/)

### Map

* [Cartography Comparison: Google Maps & Apple Maps — Justin O'Beirne](https://www.justinobeirne.com/cartography-comparison)
* [A Year of Google Maps & Apple Maps — Justin O'Beirne](https://www.justinobeirne.com/a-year-of-google-maps-and-apple-maps)
* [What Happened to Google Maps? — Justin O'Beirne](https://www.justinobeirne.com/what-happened-to-google-maps)
* [Google Maps’s Moat](https://www.justinobeirne.com/google-maps-moat)

#### Labels on map

* [What Happened to Google Maps? — Justin O'Beirne](https://www.justinobeirne.com/what-happened-to-google-maps)
* [Google Maps & Label Readability — Justin O'Beirne](https://www.justinobeirne.com/google-maps-label-readability)

### Shipping

eCommerce

Use "Delivery Date" not "Shipping Speed": "Arrives by Apr 24-30" not "Transit time: 3-6 business days"

* [Use 'Delivery Date' Not 'Shipping Speed' – From UX Research to Implementation Roadmap - Articles - Baymard Institute](https://baymard.com/blog/shipping-speed-vs-delivery-date)

### Accessibility

* [Statistics on disabilities – the one stat you need to know - Axess Lab](https://axesslab.com/statistics-on-disabilities/)
* [Accessibility: Improving The UX For Color-Blind Users – Smashing Magazine](https://www.smashingmagazine.com/2016/06/improving-ux-for-color-blind-users/)

#### Color contrast

Text with background, readability, accessibility, etc.

* [Color Theory for Digital Displays: A Quick Reference: Part II :: UXmatters](http://www.uxmatters.com/mt/archives/2006/01/color-theory-for-digital-displays-a-quick-reference-part-ii.php#colorContrastEffects)
* [Contrast Ratio: Easily calculate color contrast ratios. Passing WCAG was never this easy!](http://leaverou.github.io/contrast-ratio/)
* [Color Contrast Tips And Tools – Smashing Magazine](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/)
* text contrast [How light can you go?](http://jxnblk.com/grays/) and [Contrast](http://mrmrs.io/contrast/)
* [Colour Contrast Analyser (CCA) | The Paciello Group – Your Accessibility Partner (WCAG 2.0/508 audits, VPAT, usability and accessible user experience)](https://www.paciellogroup.com/resources/contrastanalyser/)
* [Accessible color palette builder](https://toolness.github.io/accessible-color-matrix/)
* [Check My Colours - Analyse the color contrast of your web pages](http://www.checkmycolours.com/)
* [Tanaguru Contrast-Finder](http://contrast-finder.tanaguru.com/) - [Tanaguru/Contrast-Finder: Find valid background / foreground color contrast for accessibility (a11y, WCAG)](https://github.com/Tanaguru/Contrast-Finder)

### 3D actions

study, examine, trun, arc rotate Press SHIFT and drag horizontally to lock view rotation about the world Y axis. This produces a horizontal orbit. Press SHIFT and drag vertically to lock rotation about the world X axis. This produces a vertical orbit.

pan, plan, dolly roll

### Dark pattern

Bad experience / interface to increase benefits. Trick the user.

Ex: delete account require to send a mail (not an email)

* Hall of Shame
* [Un exemple de la théorie de l’engagement – HTeuMeuLeu](http://www.hteumeuleu.fr/un-exemple-de-la-theorie-de-l-engagement/)
* [The Cruelest Opt-Out Forms](http://cruelestoptouts.tumblr.com/) - Ex: "Do you want to subscribe to the newsletter" "Yes - No, I'm ok being outdated"
* [Anti-pattern — Wikipedia](https://en.wikipedia.org/wiki/Anti-pattern)
* [Darkpatterns.org - exposing deceptive user interfaces since 2010.](https://darkpatterns.org/)
* [Dark Patterns are designed to trick you (and they’re all over the Web) | Ars Technica](https://arstechnica.com/security/2016/07/dark-patterns-are-designed-to-trick-you-and-theyre-all-over-the-web/)
* [Dark Patterns: The Sinister Side of UX | UserTesting Blog](https://www.usertesting.com/blog/2015/10/01/dark-patterns-the-sinister-side-of-ux/)
* [Les dark patterns en design d’interface – 24 jours de web](http://www.24joursdeweb.fr/2013/dark-patterns-design-interface/)

### Point of view

Aka my stuff or your stuff, perspective

* [Is this my interface or yours? – Medium](https://medium.com/@jsaito/is-this-my-interface-or-yours-b09a7a795256)

### Dashboard

> Dashboards are often what customers ask for. They are rarely what customers need. If you’re building a dashboard, it’s likely your user research wasn’t finished. \[...] Dashboards report on current status. Users don’t act on status. They act on change in status. Dashboards are passive when the user needs something active. They are a failure before it happens. — [Jared Spool on Twitter: "Dashboards are often what customers ask for. They are rarely what customers need. If you’re building a dashboard, it’s likely your user research wasn’t finished." / Twitter](https://twitter.com/jmspool/status/1293015767038996480)

### Responsive

Aka Responsive Web Design (RWD), art direction

* [Use Cases and Requirements for Standardizing Responsive Images](https://web.archive.org/web/20200717095058/http://usecases.responsiveimages.org/#art-direction)

Responsive Data Table:

* [Responsive Data Table Roundup | CSS-Tricks](https://web.archive.org/web/20200620061641/https://css-tricks.com/responsive-data-table-roundup/)
* [overflow - How should large table columns be handled on a responsive design? - User Experience Stack Exchange](https://ux.stackexchange.com/questions/15463/how-should-large-table-columns-be-handled-on-a-responsive-design)
* [A Responsive Design Approach for Complex, Multicolumn Data Tables | Filament Group, Inc.](https://web.archive.org/web/20200808064240/https://www.filamentgroup.com/lab/responsive-design-approach-for-complex-multicolumn-data-tables.html)
* [responsive table patterns](https://web.archive.org/web/20171108075728/https://www.filamentgroup.com/examples/rwd-table-patterns/)

### Switch control

* [State-Switch Controls: The Infamous Case of the "Mute" Button](https://web.archive.org/web/20201109234218/https://www.nngroup.com/articles/state-switch-buttons/)

### Text legibility

Aka font

* [B612 – The font family](https://b612-font.com/)
* [Typography of code - UI for developpers](<https://mmems.gitbook.io/calepin/development/human-interface/ui-for-developpers#typography of code>)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://mmems.gitbook.io/calepin/user-interface-and-experience/ui-ux.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.