I'm a full-stack developer that is passionate about good user interfaces. In my newsletter, I talk mainly about UI/UX stuff. You could expect an email or two in a month, I'm not aiming to spam you with non-useful info.
User Awareness
|
Hello Reader, Real and digital life share a lot of similarities. Sometimes, you may feel that your app is almost perfect, but something still feels off. That’s why it’s crucial to understand usability heuristics. One of these heuristics is Visibility of System Status: The design should always keep users informed about what is happening through appropriate feedback within a reasonable amount of time. This principle applies to real life, too — in other words, people should be aware of what's going on around them.
For digital products, here is a list of examples to consider: File Upload: Show a notification when a file is uploaded. Form Submission: Display a progress bar while the form is being submitted. Loading Data: Use a loading spinner or progress bar when fetching data from the server. Saving Changes: Show a "Saving..." indicator when changes are being saved. Search Function: Display a search progress indicator during the search. Page Load: Show a loading indicator while a webpage or app screen loads. Data Sync: Notify users when data synchronization is in progress. System Updates: Display an update progress bar during system updates. Error Messages: Show error notifications when an operation fails. Login Process: Indicate the status of the login process (e.g., "Logging in..."). Download Progress: Show download progress for files or updates. Completion Notification: Notify users when a background process completes. Hover States: Change button or link appearance on hover to indicate interactivity. Auto-save: Show an auto-save indicator for applications that save automatically. Queue Position: Indicate the user's position in a queue or waitlist. Battery Status: Display battery charging or discharging status. Connection Status: Show current connection status (e.g., Wi-Fi signal, online/offline status). Printer Status: Notify users of the print job status. Calendar Sync: Show synchronization status for calendar events. E-commerce Checkout: Indicate progress through the steps of the checkout process. The list could go on, but you get the idea. I’ll cover usability heuristics in my course because, to me, this is essential knowledge to be aware of. |
Victor Ponamariov
I'm a full-stack developer that is passionate about good user interfaces. In my newsletter, I talk mainly about UI/UX stuff. You could expect an email or two in a month, I'm not aiming to spam you with non-useful info.
Here is a quick recap of all CSS prefers-* queries that you can use to adjust to user settings. Prefers Reduced Motion (95.57% global support) Indicates whether the user prefers less motion to avoid VIMS - Visually-Induced Motion Sickness. Here we disable any animations or transitions, but we can be flexible here (e.g., REDUCE motion but do not disable it completely) Prefers Color Scheme (95.16% global support) Detects whether the user prefers a light or dark color theme. In this example we...
Today we'll cover another CSS media query: prefers-reduced-motion, and how to load (or avoid loading) styles based on user preferences — this is genuinely cool stuff! I've just posted the same article on LinkedIn, for my first time. Accessibility concern There’s a condition called VIMS: Visually induced motion sickness (VIMS)—a subcategory of motion sickness that specifically relates to nausea, oculomotor strain, and disorientation from the perception of motion while remaining still. To...
After a rough patch, I’m getting back to writing. More practical stuff that you can apply directly in your projects. One topic that looks really good is how to use modern CSS to support UI/UX and accessibility. Preference Media Queries Preference Media Queries allow you to adapt your UI based on the user's system-level settings and personal preferences — like reduced motion, high contrast, or dark mode. They're mostly used to improve accessibility and user experience. Let's cover one of them....