"Heuristic, is any approach to problem solving that employs a practical method, not guaranteed to be optimal, perfect, logical, or rational, but instead sufficient for reaching an immediate goal." - wikipedia
Avoid making basic mistakes. Save time and leave research for best practices to me. My name is Viktor and I'm UX/UI designer with 5+y of experience. I help startup businesses with shipping solid web experiences and web apps.
Join other subscribers and receive new tips weekly to your inbox.
"Under resourced teams (probably the majority) have devs doing design work. This is a nice, clear set of techniques to help avoid the bigger pitfalls. And nicely illustrated!"
nijollas-wilson (through Reddit)
"Cool site! As a dev figuring out the UX is a pain and pretty time consuming."
paulis (through IndieHackers)
"This is a great resource that you're putting together! I tend to refer to these as "patterns" in the sense that Christopher Alexander used in his book on architecture, "A Pattern Language"."
jroutens (through IndieHackers)
Use color contrast wisely.
Elements with high intensity color in combination with high level of occurrence hurts users' eyes. Intense backgrounds produce feelings of heaviness. This doesn't have an immediate effect on user to simply bounce off your app and jump the competition. But rather accumulates the feeling that the information are hard to scan as the contrast pulls the attention in a wrong direction. Opportunity lies in a light backgrounds that bring the actual content on the spotlight.
What you want is to highlight actions that generate new content and help to move forward towards the accomplishment of the tasks. Next step has to be a no-brainer.
Rule of thumb: Use high contrast, high saturation colors for buttons and active elements only. I mean those dedicated to dynamic data manipulation (filters, switchers and etc.). Rather than backgrounds of navigations, footers and modal windows.
In case you decided to use a dark background, at least decrease the saturation to a minimum. Use the HSL color model to fine-tune the parameters of saturation levels.
Navigation is basically a crossroad for the most useful screens. Its structuring could be a challenge, when dealing with tens of potential links to be categorized. One helpful trick from the beginning of the structuring process is to split all the possible links into two buckets. Namely Categories and Utilities navigations.
1. CATEGORIES (Content) Navigations
Content representation: Presents links to screens dealing with primary content of the application.
UI representation: Typically located on the left side of the screen. All items of the navigation are always visible (considering desktop viewport, might be hidden on mobile).
2. UTILITIES Navigations
Content representation: Ancillary elements covering secondary actions, accessed less frequently by the user.
Examples include authentication, management of settings, account related details, personal details, sorting and filtering mechanisms, data manipulation etc. Navigation links and information pertaining to them are not part of the website content hierarchy.
UI representation: Usually placed on the right side, close to the corners and edges of containers. As they serve secondary functions, they are often hidden under the dropdowns or popups. Often accompanied by icons to increase speed with which users spot the expected options. For instance icon of a bin with “remove", plus icon and “add”link, cog icon and link to "preferences" etc.
Mixing navigations is risky. This widespread interaction pattern teaches users to expect utilities to be found on particular locations on the screen. Placing them to expected locations improve productivity within the app.
Tables are the core element of the any web application. Amount of information they present will always grow with time. Hence controls helping user to find a specific piece of information or a relationship pattern, are essential. Over time software creators used uniform positioning for these controls to leverage a habits users built over the last decade of using software. Misalignment of these controls becomes an issue when we add new features and they become hard to find because of visually cluttered interface.
These are the 3 types of active elements altering the values presented in the table from the perspective of positioning.
1. Updating and transferring data (Recommended position: Top table edge - left or right corner)
Examples: Adding new table items, Bulk updating, Share, Multiselect, Download, Print, Multiaction dropdown
2. Reorganizing data (Recommended position: Top left table corner)
Examples: Filtering through Dropdowns, Datepicker, Sorting mechanisms, Search bar
3. Batch preview options (Recommended position: Bottom table edge)
Examples: Pagination, Lazy loading button, Density rate (quantity per page), List vs. Cards preview
Don't follow this positioning tips rigidly. You might find a better placement based on user testing. This is just a good-to-start-with guide.
Do you have a specific question in your mind? Hit me up with a message and I'll get back to you with answer. I' would be happy to be aware of your problems.