Les liens de la mer numérique
This guide provides guideline for animations. Here are the following rules:
- 200-500ms is the optimal speed for interface animation
- on mobile device, the duration of animation should be limited to 200-300ms.
- on tablets, it should be longer by 3ß% as the screen is bigger so objects overcome the longer path when they change position.
- on wearables, the duration should be accordingly 30% shorter
- the duration of web transitions should last about 2 times shorter than on mobile devices — between 150–200 ms
- the more bigger the element is, a bot better when it lasts a little longer.
- When objects collide, the energy of collision must be evenly distributed between them according to physical laws. Avoid the bounce effect.
- The movement of the objects should be clear and sharp. Avoid motion blur.
- List items (news cards, article list items) should have a very short delay between its appearance: 20-25 ms.
Easing makes the movement more natural: the object should move with some acceleration or deceleration — just like all live objects in the physical world. There are 3 categories:
- linear motion: it looks very unnatural and artificial to the human eye.
- ease-in (acceleration curve): should be used when the objects fly out of the screen at full speed and won't be displayed again.
- ease-out (deceleration curve): should be used when the element emerges on the screen. his can also be applied to different cards or objects that appear from the outside of the screen.
- ease-in-out (standard curve): is the most frequently used in interface animation. In doubt, use this animation. Ease-in-out is used when the objects move from one part of the screen to another. The same movement type should be used when the element disappears from the screen but the user can return it to the previous place at any time.
Equal interaction: the appearance of all objects obeys to one particular rule
- A vertical list should be guided in one fluid direction
- Grid should have a diagonal appearance
- subordinate interactions (one central object which attracts all user's attention): animate as minimum objects as possible at one time.
- when the moving objects transform their size disproportionally, they should move along the arc rather than in a straight line.
- if the paths of the moving objects intersect one another, they cannot move through each other. In another case, the moving object can rise above other objects.
- 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.
- Never cover user inputs
- First of all, we avoid tooltips that open on hover and display the tooltip only once tapped or clicked.
- 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.
- Avoid toast error messages
- Establish stop-words for your error messages: they should never be used. See Error messages
- 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.
- Display Error Summary on the top
- Additionally, you might want to adjust the favicon and the title of the document if errors do appear,
Check the interaction is ok
The Selection control ecosystem flow chart has a great tree-choice to display the expected field component.
Which errors or alert message should be used?
Represents user journeys or user flows as a map.
5 stars rating sucks.
- Check if readers mark their readings as "favorite"
- What they enjoyed with this book. Every quality a reader chooses gets added to traits others have chosen.
- Add a "wished" list: users would mention what they would have liked to find in it
- The users are prompted to share their thoughts and receive suggestions to hone their feedback. The suggestions range dynamically, depending on a reader’s earlier choices.
Generating trust, meaningful usage of time, and clarity among users builds a safer environment for genuine conversation to spread, so comments should be protected from elements that detract from them.
and what readers can do today?. Write a review in 5 points (extracted from a book review):
- Explain why you chose your rating.
- List common qualities you enjoyed. Even better, write a sentence to say why you enjoyed specific qualities.
- Discuss a point (or several) that you found important.
- Mention what you wish you had known before.
- link to other that you think you best sum up your perspective.
I find it hard too :/
Rule of thumbs:
- Show errors immediately if issues are severe
- Late validation is almost always better
- Validate empty fields only on submit
- 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).
- Validate after a copy-paste
- Allow users to override inline validation
- Just in time validation
- For short forms, consider validation on submit only. For complex forms, use the task list pattern
Just a great collection of resources with useful demos and tutorials
For a mobile app:
We examine everything page by page and log all errors into a central database.
We then convert that content to Jira tickets, complete with descriptions, screenshots, and story points.
If we work with a third party, and one of its tools is not accessible, we work with them to make it accessible.
it looks similar to the service Sentry.
WebAIM says the most common types of WCAG 2 failures comprise 96.8% of all accessibility errors.
- Low contrast text
- Missing alternative text for images
- Empty links
- Missing form input labels
- Empty buttons
- Missing document language
The % of these errors is diminishing over time though
Despite the benefits discussed above, infinite scrolling does have several drawbacks, which can impair the user experience:
- Difficulty refinding content
- Illusion of completeness
- Inability to access the end of the page
- Accessibility problems
- Increased page load
- Poor SEO performance
One-stop resource for everything related to user experience
Best toggles:
- 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. "
- Active button has a check sign
- 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.
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
TL;DR;
apply every hover effect on devices that can not support the hover effect (smartphones, ...).
Use the @media (hover: hover) media query to target devices that have the :hover effect available, or @media (hover: none).
- Don’t Disable Copy-Paste For Passwords
- Don’t Rely on Passwords Alone
- Drop Strict Password Requirements
- Social Sign-In Isn’t For Everyone
- Replace Security Questions With 2FA
- Users Need Options For Access Recovers
In a dedicated area on the page, additionally to the primary navigation on the top, users are presented with a drop-down. They can specify what exactly they’d like to do on the website, or what they are looking for. Once one option is selected, another drop-down appears, allowing them to specify their intent even further.
This experience mimics the drill-down navigation with multiple levels. Yet the difference is that users are making small decisions, one after another, without being confronted with the entire navigation at every step of the way.
The user fills itself the needs
In fact, nobody wakes up in the morning hoping to finally compare products by features in a comparison table matrix. As customers, we actually want to find out what a better option is, yet we need to do quite a bit of work to get there.
A-Z Index Pattern: by listing all keywords on a single page mostly because users can use in-browser search to look something up quickly without having to go and explore multiple pages.
Tap-Ahead autocomplete pattern:
Rather than focusing on a list of keywords, the autocomplete actually provides an overview of items that the users might be looking for.
Tap-ahead minimizes the amount of effort needed for typing, but also drives customers to relevant results and gives them the confidence that they are actually on the right track.
If you are designing an interface for expert users, perhaps slightly more advanced ways to use search might be reasonable. Stackoverflow allows its users to specify a filter right in the search box, without having to rely on filters, tags, or any other modes of navigation.