Collection of UX/UI tips to ship applications that customers want to use. Useful for developers, indie hackers and founders.
Avoid making basic mistakes and start with a solid foundation. Save time and focus on growth hacking. Subscribe to receive new tips weekly to your inbox.
This diagram explains the right approach to build MVP from the UX perspective in a very simple way.
Neither producing multi-feature app, nor single feature hyper optimized for pleasurable experience would give you the constructive response.
Better way is to produce the smallest core, with pleasurable design where core functionality shines. And you will receive useful feedback as a result.
Use color contrast wisely.
High intensity in combination with high quantity hurts our eyes. Low quantity is a healthy way to attract attention and guide towards progress. Intense backgrounds produce feelings of heaviness whereas light backgrounds 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.
How do we decide, what to keep in a menu and what not? What is “important”?
Every SaaS is basically a system that enables the user to perform actions upon objects. Actions usually alter the state of the object.
In every situation, there will be more actions available than objects. Consider collaboration SaaS and “Project” as an object. A user can create, edit and delete the project. At least 3 actions are possible within 1 object. Therefore in order to keep menu concise, objects should be part of the menu, not actions.
How well structured menu decrease costs by cutting support tickets in half.
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 (Position: Top table edge - left or right corner)
Examples: Adding new table items, Bulk updating, Share, Multiselect, Download, Print, Multiaction dropdown
2. Reorganizing data (Position: Top left table corner)
Examples: Filtering through Dropdowns, Datepicker, Sorting mechanisms, Search bar
3. Batch preview options (Position: Bottom table edge or Top right corner)
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.
Car drivers use dashboards to quickly understand the status of the complex system and its parts, such as car and its pieces, and react appropriately in a second. But also during the calm times, they try to make a sense from the data. For instance how many more hours they can drive without the refueling.
Dashboards in a business context are used for the very similar purpose. Drivers are basically managers driving their businesses and their ultimate goal is to stay on a road that bring profits.
Dashboard screen is actually a the only place that enables the user to overview the status of distinct business parts at once. The right combination of the elements surfaces relationships between data and suggest relevant actions to react with a positive change.
There are only two types of dashboards you can have in your app, Operational and Analytical.
1. Operational Dashboards
Use when users have to react immediately based on the realtime data. Engagement in time-sensitive tasks is a key factor to be considered. Purpose is to create a control room where activity of all the actors within a system can be seen and UI navigates us to relevant action. Imagine a dashboard for a fleet management app, where all vehicles within a fleet are tracked. Or project management app that provides a preview of all the projects various teams work on now and how they approach the finish line.
2. Analytical Dashboards
Use when users rather need to gain insight and perceive critical relationships between data. What counts is the quality of the judgment. Longer time periods are considered in this context. Overview of distinct business parts at once helps to outline the trends and provides playground for the analysis. Classical example is a tool for tracking user activity and key metrics measurement. Or advertising performance analytics software.
Mixing these two types together implies different decision making capabilities, which are contradictory. These can cause misinterpretation of signals and inability to react at the right time.