Looks complete

This is the crux of the Yard-sale model. In a free market, one person ends up with all of the wealth – completely by chance.

Looks like the monopoly game. It is inevitable. This effect is the following:

When you lose, the maximum amount you can wager goes down. So you can't win back what you lost in one coin flip.

When you win, the maximum amount you can wager goes up. So you could potentially lose more than what you won in the first game.

Besides I like the work done on the interface to make it interactive 👍

A game where you need to pick the design that is most correct. Test your attention to details!

1. Due to color vision deficiencies, it’s a good idea to always complement error messages with an icon
   • Additionally, it might be a good idea to guide users towards specific issues of the form with an error summary.
2. Never cover user inputs
   • First of all, we avoid tooltips that open on hover and display the tooltip only once tapped or clicked.
3. Error message position:
   • they should be placed above input for various reasons, but it costs layout shifts. In doubt, a collapsible accordion instead might be a better idea there.
   • they should be placed inline in tables. One of the simpler patterns is to display the error message in the same row where the content lives.
4. Avoid toast error messages
5. Establish stop-words for your error messages: they should never be used. See Error messages
6. Provide Examples Of Correct Input or guide the user to the expected input. For example, "IBAN starts with the country code. For example, DE or AT.
7. Display Error Summary on the top
   • Additionally, you might want to adjust the favicon and the title of the document if errors do appear,

How to build common ui patterns that are accessible 👍

Check the responsiveness of a web interface on multiple screens simulatneously.

Only for chrome actually :/
#idea #project publish this for firefox

I find it hard too :/

Rule of thumbs:

1. Show errors immediately if issues are severe
2. Late validation is almost always better
3. Validate empty fields only on submit
4. Reward early, punish late: if a user edits an erroneous field, we should be validating immediately, removing the error message and confirming that the mistake has been fixed as soon as possible (reward early). However, if the input was valid already and it is being edited, it’s probably better to wait until the user moves to the next input field and flag the errors then (punish late).
5. Validate after a copy-paste
6. Allow users to override inline validation
7. Just in time validation
8. For short forms, consider validation on submit only. For complex forms, use the task list pattern

In general, the larger the primes you use, the better the illusion of randomness. With smaller primes, you will get more variation, but less appearance of randomness.

The first way is to set each trait on :nth-child(pn + b) where p is a prime which increases with each value and b is constant for each trait.

The second way (which is more on par with the original Cicada principle) is to set each trait on :nth-child(pn + b) where p is constant per trait, and b increases with each value. This creates a better overall impression of randomness (especially if you order the values in a pseudo-random way too) without “holes”, but is more tedious, as you need as many values as the prime you’re using.

A list of UI patterns

Examples of original icon hover effects 👍

Examples of original button effects 👍

Examples of original link effects 👍

Just a great collection of resources with useful demos and tutorials

Two circular navigation demos

A demo of 3 types of navigation menu with sublebels:

1. Overlapping levels
2. Covering levels
3. Overlapping levels with backlinks

Best toggles:

1. Inactive button coincides with the background / Active button has a highlighting background. "we suggest you use a combination of saturated lively color (ideally corresponding with your CTA color scheme) and a light grayscale neutral color. "
2. Active button has a check sign
3. Active button has bold text (a bigger font size helps too)

About the 5-second and 20-second tests:

The results confirmed our expectations since the average error rate was lower in the 20-second tests and the Success-Confidence score was higher. However, these differences were not significant.

There is a difference of 0.5% in the error rate and 2.5% in the confidence score.

The ticks could be perceived as outdated (akin to a physical form more than a website). As for radio button icons, you might as well use a radio button instead.

Some texts for a circle loader

In short, when designing a toggle button, for the sake of your users, it’s good to hold on to these basic principles:

• Use them only when they have an immediate effect
• Apply them when the setting has a default value.

→ part 2: https://shaarli.lyokolux.space/?iAYVOg

Research shows that the more different a new view is visually, the more likely it is to be perceived as a separate page by users. With it comes the expectation that the “Back” button will bring a user to the previous “page,” even though, technically, it might not really be a separate page.

That's why it's good to adjust the URL as much as possible :)
Moreover it allows to share this "state" of the page