Contents Foreword Colors Gradients Layout & Grids Typography Forms Login & Sign-up page Button Roundness Checkbox, Radio & Toggle Cards Sidebar Bottom Navbar Links Slider Favorites Tooltips Testimonials Empty States Onboard Screens Dark mode Foreword Hi there! First of all, thanks for picking up a copy - you're amazing. This book does not try to cover everything under the sun related to UI. It focuses on the core of the UI patterns, trying to simplify the more complex things. It's my first attempt at writing a book. I'm fairly aware there are a few mistakes. Keep in mind that almost everything in our world is subjective. The best practises and tips are suggestions rather than clear cut rules. Some have fewer judgments, while others have more. However, the one piece of advice you should take is to be reasonable. Vikalp Kaushik Colors Guide for Creating the Perfect UI The color scheme you choose is important. Each one evokes a distinct image or emotion in individuals who view it. This is something you can utilise in your design. Let's look at how to make a user interface that makes the most of color choices. It's one of those user interface design approaches that will help you make more money. Colors have the ability to communicate in ways that are just as powerful as language. They have the potential to reflect your company's individuality. They can attract people and help you deliver your message more effectively. Colors are likely to be mentioned heavily in any UI Design standards. Each UX color choice has an own meaning and consequence. Of course, culture has a role in some of this. Choose the Right Color in the Proper Pattern Both positive and negative emotions are represented by the color red. Anger, love, confidence, and passion are some of the emotions that Coca-cola aims to elicit. Most people seem to be enthralled with the color orange. It's one of the popular UI colors used by many businesses. Fanta, for example, uses it as a backdrop color to draw emphasis to the brand name. Yellow is frequently associated with joy, happiness, and sunlight. This color is highly suited when discussing social media networks, which is why Snapchat employs it in its logo. Security, trust, and safety are all represented by the color blue. Numerous studies have shown that blue has positive connotations for a wide range of people. Blue can be seen in a variety of environments, including many natural ones. Hundreds of well-known brands, including Skype and Microsoft Word, as well as the companies mentioned above, use it. Green evokes sentiments of regeneration and peace. These feelings are appropriate for a brand like Tropicana, which employs green as its primary logo color. Black is a mysterious color, yet it is also connected with death and sorrow. It can also indicate modern or traditional at times. White is often associated with goodness, clarity, purity, and innocence. ◆◆◆ Monochromatic Monochromatic color schemes use a single base color for the design, but incorporate various shades, tints and tones of the main hue within the designs palette. This creates a very bold, dramatic look whilst still being relatively soft and elegant to the eye. It’s easy to create a sense of harmony and balance in the design when you’re using a monochromatic color palette in design. Why to use? By restricting your color palette in this way, you may even open yourself up to fresh and efficient ways of using colors in your designs. Instead of focusing on color-matching and contrasts, you can focus your creativity and the fun little details that give your design its unique quality. It removes the difficulty and “color chaos” that can come through too much choice in color. If you apply a monochromatic color scheme to your entire design, you can create balanced changes from one design to another. Monochrome is seen as one of the simplest color schemes to get right, so they are a popular choice with first-time designers. You can make a big message with just one color. Easy way to create monochromatic color scheme: Step 1: Pick any color So, I just pick this color “#564094”. Because I am using it a lot. And we’re going to change it to HSB, which stands for Hues, Saturation, and Brightness. Step 2: Make 10 copies of your main color Just copy paste the same color 10 times so we can make a perfect monochromatic color scheme. Step 3: Change the Brightness value The color code in hex is “#564094” and in HSB is “256 57 58”. Now, we’re creating a set of B values with differences of 10. Starting from 8 to 98. H & S remains same. Also variations can be any number not just 10 or it can be start or end at any point. Step 4: Pick colors accordingly Pick 3–4 colors according to make a monochromatic color palette. I pick “#291F47” , “#7356C7” and “#916CFA”. How to apply? (using 60/30/10 Rule) This popular design trick is a great way to keep your interface balanced. This formula dictates that 60% of your website should be made up of your dominant hue, 30% should be your secondary color, and the remaining 10% should be your accent color. Sticking to this formula will allow the eye to move comfortably from one focal point to the next. Another Example The color picked is “#E08938” and creating the different shades using B value variations. 60/30/10 Rule: ◆◆◆ Analogous Analogous colors are a group of three colors next to each other on a color wheel, such as violet, red-violet, and red. When these colors are grouped we call it an analogous color scheme. The color in the centre of this group of three is sometimes called the mother color since the other two colors contain that centre color. Analogous color schemes create a visually pleasing and calming display. For instance, the color blue can pair nicely with both teal and green. They usually match well and create serene and comfortable designs. Analogous color schemes are often found in nature and are harmonious. It always looks very elegant and clear. There is no tension in the palette, and typically it’s uniformly all warm, or all cold. If a base color on the warmcold border is chosen, the color with opposite “temperature” may be used for accenting the other two colors. However, analogous color schemes provide a low-contrast experience, since all colors fall in line with one another. Make sure you have enough contrast when choosing an analogous color scheme. Choose one color to dominate, a second to support. The third color is used (along with black, white or gray) as an accent. Easy way to create analogous color scheme: Step 1: Pick any color Started with color “#475FCB”. And we’re going to change it to HSB, which stands for Hues, Saturation, and Brightness. Step 2: Make 5 copies of main color Just copy paste the same color 5 times so we can make a perfect analogous color scheme. Step 3: Change the Hue value Now, increase or decrease the hue (H in HSB) value by 30 points. The color code in hex is “#475FCB” and in HSB is “229 65 80”. The main color is in center and decreased 30 points from the left and increased the 30 points to the right. You can change accordingly saturation and brightness (S & B) to get better contrast. Step 4: Choose accordingly Pick adjacent colors around the main color to make a analogous color palette. Examples: 1. Blue, blue-purple, purple Purple can be considered somewhat analogous to blue. Blues that are close to cyan or green look very different from purple. However, short wavelengths of blue light are close to violet. 2. Red, red-orange, orange These colors are the longest wavelengths of visible light and these colors are perceived as warm due to their association with sunlight and fire. 3. Teal, teal-green, green These colors are middle wavelengths of light that are extremely common in nature due to their presence in the sky, bodies of water and vegetation. They are considered cool and calming. ◆◆◆ Complementary A complementary color scheme is composed by using two colors opposite each other on the color wheel. This is the particularly contrasting of all color schemes which attracts the most attention and one of the primary challenges when working with it is to fulfil a harmonious balance. The powerful contrast of complementary colors can be very sharp, especially if you use every color in its full saturation. Because this scheme is a combination of warm and cold color when it comes to design you need to carefully examine which of the two colors will be the dominant one. Usually, when using a contrasting color scheme, it is important to choose the primary color and use the following one for accents. This choice will set the impression of the final result — your design will look warm or cold. Handful designers choose to reduce the saturation of the colors and use soft, warm shades, which makes the contrast softer but still retains the balance of the composition. This color scheme is useful when you need to emphasize something as it focuses the attention towards a particular object. Often, a design with a complementary combination of colors looks more traditional. As we said, in their most basic aspect, complementary color schemes are based on two colors but can be expanded by adding shades with different saturation and intensity. Easy way to create complementary color scheme: Step 1: Pick any color Started with color “#1E3CC3”. And we’re going to change it to HSB, which stands for Hue, Saturation, and Brightness. Step 2: Hue value Copy the first color and then increase or decrease the H (Hue) value by 180 points. It will give complementary color. Step 3: Shades and tint Now, To make a color palette. we will make a dark and light version of both colors. For the dark version, set the B (Brightness) value equal to 30 points. For the light version, set the B value equal to 90 points and also the S value to 50 points for better accessibility. Step 4: Make your color scheme Now, choose your colors accordingly. I have selected my picked color as primary, his dark version for heading or titles, his complementary color as a secondary and a light version of complementary color as an accent. Step 5: Apply Directly apply to your designs. Another example Let’s look at another example by the same approach. I have picked the “#7F4494” color. Follow all the steps and choose my color palette. After applying my color palette. ◆◆◆ Split-Complementary A split-complementary color scheme takes up a base color and two secondary colors. It is similar to the complementary color scheme, but one of the complements is split. The split complementary color scheme is versatile, pleasant, and easy to achieve. It offers the same advantages of a complementary color scheme in terms of contrast and balance between warm and cool color temperatures. Yet some assume it easier to work with since the hues are more subtle and create less tension. The benefit of the split complementary color scheme is that it has more combination than a simple complementary color scheme. This variety, however, also makes split complementary color schemes less vibrant and eye-catching. To make matters worse, it is often hard to harmonize the colors in a split complementary color scheme. The effect created by such a scheme is just as contrasting as the one before but barely less intense. If you feel unconfident about using the complementary scheme, use the split complementary instead. The split-complimentary color scheme is often a good choice for beginners, because it is difficult to mess up. Easy way to create split complementary color scheme: Step 1: Pick any color Started with color “#DBB468”. And we’re going to change it to HSB, which stands for Hue, Saturation, and Brightness. Step 2: Make copy Just copy paste the same color 2 more times so we can make a perfect split complementary color scheme. Step 3: Change Hue value Increase or decrease the hue (H in HSB) value by 150 points. The color code in HSB is “40 52 86”. First decrease by 150 points, you will get first complementary color and then other increase by 150 points, you will get second complementary color. Bonus: You can also change S & B (Saturation and Brightness) values accordingly to get better contrast and accessibility. Step 4: Apply Now, directly apply to your designs. Here, I have choose 60–30–10 rule (somewhat) for distribution of colors. Another Example: Let’s look at another example by the same approach. I have picked the “#D78CCB” color. Follow all the steps and make my color palette. After applying my color palette. ◆◆◆ Triadic A triadic color scheme, a unique variant of the split complementary color scheme, with an equal distance between all colors. All three colors are distributed evenly around the color wheel, causing there to be no clear superiority of one color. The scheme is always vibrant and colorful, designers should use it and balance very carefully to maintain the desired effects and color meaning. Triadic color harmonies tend to be quite enthusiastic, even if you use pale or unsaturated versions of your hues. To use a triadic harmony successfully, the colors should be carefully balanced — let one color dominate and use the two others for accent. By combining colors using the triadic principle we get lively and cheerful space which is the most suitable for playful or colorful user interfaces. Triadic scheme of warm colors is very intense and can cause the feeling of discomfort in the UI if you color the equal amount of space with each color. Vibrancy and intensity can be reassured by using one color as the dominant, and the other two as the secondary and the accent ones. Easy way to create triadic color scheme: Step 1: Pick any color Started with color “#F7C88C”. And we’re going to change it to HSB, which stands for Hue, Saturation, and Brightness. Step 2: Make copy Just copy paste the same color 2 more times so we can make a perfect triadic color scheme. Step 3: Change Hue value Increase or decrease the hue (H in HSB) value by 150 points. The color code in HSB is “34 43 97”. First decrease by 120 points, you will get first equivalent color and then other increase by 120 points, you will get second equivalent color. Step 4: Shades & tone You can also change S & B (Saturation and Brightness) values accordingly to get better contrast and accessibility. The color which I picked is very bright. So, I am decreasing B value of other colors to make perfect pair. Step 5: Apply Now, directly apply to your designs. Another Example Let’s look at another example by the same approach. I have picked the “#2F2D52” color. Follow all the steps and make my color palette. After applying my color palette. ◆◆◆ Tetradic A tetradic color scheme, an outstanding variant of the twin color scheme, with an equal distance between all colors. All four colors are divided evenly around the color wheel, resulting in there being no clear dominance of one color. The tetradic (double complementary) scheme is the richest of all the schemes because it uses four colors organized into two complementary color pairs. Tetrad is a very aggressive color scheme, needing very good planning and very emotional approach to relations of these colors. The scheme is always vibrant, scared and colorful, there is equal tension between all colors. This rich color scheme offers plenty of likelihoods for variation. The tetradic color scheme works best if you let one color be dominant. You should also pay attention to the balance between warm and cool colors in your design. This scheme is hard to harmonize; if all four colors are used in equal amounts, the scheme may look unbalanced, so you should choose a color to be dominant or overwhelm the colors. Easy way to create a tetradic color scheme: Step 1: Pick any color Started with color “#DC7272”. And we’re going to change it to HSB, which stands for Hue, Saturation, and Brightness. Step 2: Make a copy Just copy paste the same color 3 more times so we can make a perfect tetradic color scheme. Step 3: Change Hues values First, increase hue value by 30 points. After that increase 180 points in both colors. Step 4: Adjust You can also change S & B (Saturation and Brightness) values accordingly to get better contrast and accessibility. Step 5: Apply Now, directly apply to your designs. Google, Microsoft, eBay (and some other corporate companies) use tetradic colors in their logos. Colorful palettes create a sense of openness, diversity and optimism, which are positive for a consumer brand. Gradients Simple way to create a soft gradients Gradients were one of the design scenarios lifted to the side by designers when they fell madly in love with flat design. While that matte era is still here, it’s safe to say that gradients are making a comeback in a big way! Earlier last year, it appeared that gradient designs were inspiring changes almost overnight. From backgrounds to overlays to subtle textures in UI elements, gradients were trending upwards. However, the use of gradients works best for larger elements. In smaller elements, gradients can be difficult to see, and potentially distract or distort the vision of the user. But when used in larger spaces, gradients can help users focus on a specific call to action. Soft gradients allow you to make design elements look tactile and clickable. They add dimension to call-to-action buttons and app icons. For that reason, they’ve become common in apps and website design. Step 1: Pick any color Starting with your primary color. Or just pick any color you want. I just pick the “#1687d9” color because it was the primary color of my last project. Step 2: Linear gradient By default, it was the solid color change that to linear-gradient and choose both side same color. And also change the opposite side color from hex to HSB, which stands for Hue, Saturation and Brightness. (HSB = 205, 90, 85) Step 3: Change Hue value Now, increase or decrease the H (Hue) value by 20–30 points, depending on your preference. I have taken two examples, the first decrease by 20 points and the second increase by 20 points. Step 4: Change Brightness value Similarly, increase or decrease the B (Brightness) value by 5–10 points. It will help to give more smoothness to the gradient. Step 5: Change direction (up to you) By changing the direction, gradients will look more trendy and modern. It’s up to you and you can play around with directional line until you get a better result. Apply to your designs There are lots of gradient resources available online but finding your lovable perfect gradient scheme can be difficult or time-consuming. In this way, you can create your own soft and modern gradients from any regular color. And simply use it in your projects. Layout & Grids Use grids to improve visual hierarchy A grid is most often used as an underlay to a design or drawing, to oversees the positions of elements. A grid can help accelerate that hierarchical process and make it easier too. My biggest mistake as a beginner is I never used grids before designing because design software has alignment tools. But better practice is to use grids. The grids are known well for bringing order and clarity to your designs to improve the overall look and feel. It balances the layout and speeds up the design process. And also they are flexible. So, I started using grids and most recently I used two grid layouts which helps me in designing. Modular grid Modular grids provide a balanced layout by dividing up your content into equal standards but the ability to span multiple columns ensures the content appears charming and engaged. A module is established at the intersections. It is a rectangle with width and height that underlies the theme. Now, I used 8x8 rectangle modules. Because the screen size in pixels is a multiple of four or eight for most common devices. So it will easy to develop or design an interface. And also it will easier if all margins and padding values will be even. All margins are multiple of 8 like 24,56,98,144px etc. All building system must be fixed up using this grid — line spacing, alignment of elements, positioning, white space, sizes, icons, visual hierarchy etc. Column grid This column-based structure is used to place text, images and procedures consistently throughout the design. This grid layout helps in responsiveness. In responsive layouts, the column width is defined with percentages, rather than fixed values. This allows content to adapt to any screen size. The number of columns displayed in the grid is specified by the breakpoint range. First of all, below one is again an example of without grid. Text and images are placed that follow the vertical lines and flow lines making up the columns. They are the thick coloured blocks that make up the content width of your design. The number of columns changes from 14–16 on the large desktop to 12 on a desktop, to 6–8 on tablets and 2–4 on mobile. I use standard a 14 column grid according to a large desktop screen and the size of columns are 72px, the size of gutters is 24px and the side margins are 12px each. Results in creating a clean and organized space. Hard to notice the difference but now it is more ordered and balanced. Here, gutters are the space between the columns and side margins are the amount of white space outside of your content width. For tablet I use a 6 column grid, the size of columns are 102px, the size of gutters is 24px and the side margins are 16px each. For mobile I use a 2 column grid, the size of columns are 136px, the size of gutters is 16px and the side margins are 16px each. Conclusion In this way, grids make it easier for you to create a hierarchy. It establishes equilibrium with its symmetrical layout, which you can use to balance out your elements and decide if one side overpowers the other. The grid principle is also commonly used in art and photography to understand the balance point. They are also other types of grids — baseline grid, manuscript grid etc. But make effective use of grids in your design and development. Typography 8 tips to improve your typography skills Many peoples think that typography consists of only selecting a typeface, choosing a font size and whether it should be regular or bold. For most people it ends there. But there is much more to achieving good typography and it’s in the details that designers often neglect. These details give the designer total control, allowing them to create beautiful and consistent typography in their designs. 1. Use One Typeface Combining two or more typefaces isn’t easy. For beginner’s stick to one typeface. Using two or more typefaces successfully within a layout requires an understanding of the chosen fonts in order to be confident that they are complementary. 2. Justify Left is better Set your type justify left rag, because people reads from top to bottom, left to right. By justify type left, the human eye is able to find the edge and read the copy much more better. 3. Use font weight correctly The key to great design is contrast. Slight changes in weight makes it harder for user to notice the difference. Go from light to medium or from regular to bold. Sometimes, it’s good to skip weights. 4. Double point size for heading Doubling the point size of headlines outcomes greater contrast. Double up or down the point size. For example, if you’re using 18 point for the body, then use 36 point for the heading. 5. Let the letters breathe Space between the lines of type in a body of copy that plays a big role in readability. Correctly spaced lines make it easier for a reader to follow the type and improves the overall appearance of the text. 6. Widows & Orphans A widow is a short line or single word at the end of a paragraph. An orphan is a word or short line at the beginning or end of a column that is separated from the rest of the paragraph. Widows and Orphans create awkward rags, interrupt the reader’s eye and affect readability. They can be avoided by adjusting the type size, leading, measure, word spacing, letterspacing or by entering manual line breaks. 7. Emphasis Giving emphasis to a word without interrupting the reader is important. Italic is widely considered to be the ideal form of emphasis. Some other common forms of emphasis are: bold, caps, small caps, type size, color, underline or a different typeface. No matter which you choose, try to limit yourself to using only one. 8. Measure The measure is the length of a line of type. To a reader’s eye, long or short lines can be tiring and distracting. A long measure disrupts the rhythm because the reader has a hard time locating the next line of type. The only time a narrow measure is acceptable is with a small amount of text. For optimum readability you want the measure to be between 40–80 characters, including spaces. Forms Design better forms that brings in conversions A form, is an interface that collects through interactions, the required information, in a logical, meaningful way, and then passes it to at least one third party entity. Forms look like the most innocent and straightforward UI components, yet they handle the most important interactions with your product. They channel your users to sign up and pay. Their primary purpose is to help both users and businesses achieve their separate goals by establishing a relationship or initiating a conversation between the two. Even with their extensive importance online, it is surprisingly common to come across very poorly made forms — which is a shame. Here are some tips on how to avoid them: Match labels above the field Labels above the fields are an effective way to design forms and speed up filling the form. Also forms designed in this way are better with responsiveness on different devices. Group inputs and give them space Something as simple as making sure input labels are closer to their input box and leave space between them so users don’t get confused. Optional fields instead of required It is better to showing optional fields more clear than required one. In this way, the form will be clear and less overwhelming for the user. Users feel more better if they know this field is optional to fill instead of its required to fill. Divide into groups Long forms full of boxes can be overwhelming and complicated. They should be divided into logical groups by adding proper space and appropriate title. It makes users feel less overwhelmed by long forms and is easier for users to consume in chunks. Give users inline error codes. There is nothing more confusing than an unclear error. Generic errors put all of the work on the end users, which will more than likely result in either a frustrating user experience or an abandonment of the form altogether. Giving a user inline error codes give explicit instruction to the user where they need to fix their data. Summing Up: At last, no one really wants to fill out a form, but there are a lot of ways that you can make your forms easier to use and clear to your users. An easy-touse form is a efficient way to an increase in conversions, sales, and engagement. Login & Sign-up page Creating user friendly screens. Most entrepreneurs started their businesses because they love the work they do, not because they like selling. Unfortunately, your business won’t survive if you’re not good at attracting new users to signup for your application or maintaining the existing users with their daily login. We are going to figure out how to make sure new users will subscribing to your application without hesitating and also look upon how to make things easy for existing users. New Users Remember these things, works best for getting new users. Quickly Getting Started Don’t ask for everything at the start just quickly getting users to use your application. And ask all the other things separately in a different section like profile update etc. Just ask for an email and password for authentication, skip the username and other fields for a later proposal. Avoid Confirm Password The most frustrating part for users is re-entering the password and it’s not matching. Rather than asking for confirmation, allow your visitors to see what they just typed with an icon that unmasks their password. You should identify and explain form field errors. Show them in which field the error occurred, and explain the correct way to fill out the field. Give users a hint of what type of input is expected in a particular field. Provide Good Value Avoid using general terms like ‘Sign up’, ‘Login’. Instead, give the user idea of what to expect when they sign into the application. Define the value proportion or tell them what value the user will get from your application. Use External Accounts Sometimes users prefer instead of remembering passwords of different account at different places, they want to connect everything with one account. Your signup page should contain an option that lets people sign up on your website using an external account. This way, they won’t need to go through the lengthy registration process to make a purchase or add a comment on your site. Existing Users Remember these things, helps to make the experience better for existing users. Differentiate sign in and sign up Not everyone can quickly figure out the difference between Sign in and Sign up. Don’t make things difficult for your existing users. Handles this by providing visual differences in the button styles, clearly defined headers as well as a description of the action. Remember your users Is there anything more frustrating than returning to a website you logged into earlier only to find that you need to log in again? When your user returns to your website, make sure they’re already logged in or that certain fields are prepopulated for them for easy login. Easy to reset password Ensure to provide the “Forgot password” link to help the user recover his password. And the important part is how easy an experience you make for your users. Some of the common reset password methods are, sending email or OTP to registered email id or mobile number, recovery questions and authentication by a call to the registered mobile number. Better is to use always sending OTP or email. Use fingerprint or face ID Save your users trouble of having to re-enter all details when they try to relog into your application or website on the same device. Summing Up: We wish there was just a switch or a button to press to build your audience, but sadly this is not the case. There is no set science for attracting customers to your app or website. However, there are a few different things you can do to make things easy for users that help your business instead of frustrating them every time. Button Roundness A big impact on the overall feeling of interface. Designers are always trying to make the best design decisions for the project. No matter how minute, every decision affects the whole design. Buttons are a key part of any project. They signify a call to action and are responsible for any action taken on the page. Therefore, it is important that the buttons are well thought out. As the understanding of UI has evolved, we have seen a steady shift away from sharp-edged buttons to rounded cornered ones. Rounded cornered buttons are more aesthetically appealing to the current sensibilities. They are modern looking and signify optimism. 0 Px Radius: This option is a classical one and express mainly serious and professional feeling of interface. Being consistent with this rounding means clean components, sharp geometrical alignment and balance of all components. Pros: 1. Professional 2. Clean look 3. Organized & Structured Cons: 1. Conservative 2. Corporate feeling 3. Reserved 3–4px Radius: This is best and probably the most safe choice. 3–4px is in every point of standard across multi fields, expressing a little bit more friendly and accommodating then 0px. Round buttons are also not a great option for displaying nesting options. This is because they restrict the click area and make clicking difficult. So, when displaying nested options, it is best to use a semi-round button. Pros: 1. Friendly 2. Professional 3. Better look Cons: 1. Conservative 2. Not innovative 8–14px Radius: When it comes to stacking cards, rounded edges perform even better. It is far easier to count the cards with rounded edges as they are distinguishable from one another. When the edges of the stacked cards are sharp, they look uniform and our eyes glide over the stack instead of lingering on them. This is even more noticeable in grid layouts. It is no surprise that most website templates make use of cards with rounded edges for their features and services. Pros: 1. Playful 2. Trendy style 3. Innovative 4. Eye-catchy Cons: 1. Sometimes messy 2. Not properly used, look infantile Fully Rounded: The difference between buttons with rounded corners and fully rounded buttons is that fully rounded buttons only perform well with a lot of space. This means that you cannot stack round buttons the way you can with other buttons. On the other hand, when there is space, fully rounded buttons act as a great call-to-action. They can be used to direct a user’s attention to a specific action. And, they work even better when the layout is in the form of a list, or cards. Pros: 1. Friendly 2. Creative 3. Eye-catchy 4. Make Impact Cons: 1. Not for every CTA’s 2. Look like tags Summary When it comes to making the decision for picking buttons, there is no universal guide. Design is versatile and it can be used to your advantage. Make sure that whichever option you pick is conducive to the whole design. A user testing the decisions is a great option if it is feasible. At the end of the day, a button should make the user want to click it. Checkbox, Radio & Toggle Allow users to make choices Selection controls allow users to complete tasks which involve making choices such as selecting options, switching settings on or off, or adding or removing items. Radio buttons are not checkboxes. Checkboxes are not toggles. Toggles are not radio buttons. Each one of these elements have different meaning and used for distinct purpose. Sizes Use the correct sizes of radio, checkbox and toggle buttons for better visual implementation, efficiency and readability. Radio buttons A radio is a component that lets the user select the value that is written in its corresponding text label. Unlike checkboxes, a user can only select one radio button from a group at a time. Its best to use them for 2–4 elements. They only let the user select 1 thing, not more. Remember these things When the number of options is less. When options doesn’t require lengthy descriptions. Radio buttons are always listed vertically. Capitalize a radio button’s label. Checkboxes A checkbox is a component that lets the user select the value that is written in its corresponding text label. A user can select multiple checkboxes from a group at the same time. A checkbox control has three states: unselected, selected, and indeterminate. Use checkboxes when more than one option can be selected and capitalize the checkbox’s label. Toggle Buttons A toggle is an interface element that, by its activation or deactivation, provokes an immediate action on the screen. However, they don’t need to be confirmed with a CTA button. Use toggle buttons for activation. Mind the tap area Radio buttons, checkboxes and toggle buttons are one of the smallest interactive elements in all of UI design, so they need to have an easily accessible tap area. Let users select an option by clicking or tapping not just that small square, but also the label or associated words. Colors and different states Always use different colors for different conditions and try to use gradient colors for better visually appealing. Conclusion Always display a list of options vertically if possibly. Horizontally-aligned options can be hard to read and distinguish from one another. If you must display your list in a horizontal fashion, be sure to pay close attention to the proximity of an item to its corresponding checkbox, as well as the space between list items. Cards Ultimate guide for designing UI cards Cards are universal — from social media sites like Instagram and Facebook to E-commerce stores like Amazon. Card layout has quickly earned popularity. As an information container, cards hold all elements such as text, rich media, buttons, etc. Based on this content, it can adjust its size to that of different devices and screens, balancing user interface and user experience. What Are Cards? Cards are a UI component containing content and actions about a single case. Cards can contain various elements, but they all should be about a single topic. The purpose behind this is to avoid long texts and render more scannable content. Even though users might not be familiar with a card’s concept from a design point of view, they instantly know how to use them since they are identical to physical cards. Why is it so popular? Cards are popular because they seem to suppress content. Cards are modular, so different content items can be stacked together without visiting attention to their differences. Cards minify content, by forcing content to adjust to the limitations of the card boundary and card visual layout. Designers like that cards allow numerous content to be mixed and matched without concern that the design will become cluttered. Cards can break down content into digestible bits that allow users to interact with it. By giving a container for content, cards indicate that the content is real and emotional to the user. Card UI design is popular for other many reasons: Intuitive: Cards look identical to real-world definite cards as they seem in user interfaces. They appear common to users. Before cards became popular elements in mobile and web apps, they were all around in real life: business cards, baseball cards, sticky notes. Cards represent a beneficial visual analogy that allows our brains to intuitively connect a card with the piece of content it represents — just like in real life. Easy to digest: Cards don’t take up much space and urges the designer to priorities its content. In a twist, each card becomes digestible pieces of content that are easily accessed and explored. Cards make it easier for users to find the content that they are interested in. Cards are attractive and user friendly: Card-based design often relies heavily on visuals (especially, images); any copy is usually secondary to the visual in terms of the information architecture. The emphasis on using images can help make card-based design more attractive to users than the same content not arranged in cards. Advantageous for responsive design: Cards are rectangular shape resizes smoothly to fit the horizontal and vertical frontages of different screens, which means users get a uniform experience across all devices. Shareable: Cards can encourage users to share content on social media, as it allows users to easily share only specific piece of content vs a whole page. When to use card UI design? This is usually the case when you have: A search-based interface: Cards allow applicable content to generally indicate itself, making it possible for users to dive deep into their interests. Card-based design is a very suitable way for presenting such kind of content. Browsing products: Cards are better compatible when users browse for information. Task Management: When you can illustrate a single task in a flow as a card. Cards can be easily organized for a list of tasks. The task management app does a great task of using a card-style interface to create a dashboard for users, where each card represents a separate task. Similar items: Cards work best for collections of heterogeneous items (when not all the content is of the same basic type). Analytical Visualization: Dashboards usually show a variety of content samples simultaneously on the same sheet. In such circumstances, the card analogy can help create more obvious differences between items where each card can adapt to a different role. Anatomy of cards Card layouts can differ to support the categories of content they include. The following components are commonly found among that variety. (1) Rich Media: Cards can contain thumbnails to show an image, illustration, avatar, logo, icon or graphics. (2) Heading: Header text can contain things like the name or title of a photo album or article. (3) Description: Supporting text contain text like an article summary or a short description. (4) Call to Action: Cards can contain buttons for actions. (5) Subheading: Subhead text can contain text elements such as an article byline or a tagged location. (6) Icons: Cards can contain icons for actions. Tips & Best Practices There are a few things that can improve card design. 1. Use relevant image The image is the leader of the card design, you need a great image to draw users attention to each card. Not only images, but cards can also contain illustrations, icons with light background box or any other kind of rich media but needs to be relevant to the content. 2. Add visual hierarchy Hierarchy within cards helps direct the scrutiny of users to the most important information. Place main content at the top of the card and use typography to promote the main content. Use white space & contrast to separate content areas that need more diverse visual separation. 3. Limit content A card should include only important information and propose a correlated access point to additional details, rather than the full details themselves. As many of us, try to put too much content into a card, the card can turn out to become extensive or too lengthy and in a twist, lose its actual connection to the card analogy as it doesn’t look like a card anymore. 4. Avoid embedded links Don’t include inline links. Cards should link by themselves or provide a limited set of activities available. 5. Differentiate actions Cards that contain numerous actions should be visually contrasted. In the below example, I make the successive action less well-known by giving it a light tone instead of a primary button style. 6. Resist lines for grouping It’s common for new designers to distinguish content with borders as a way to define different groups. These borders cause unnecessary visual noise that detracts from the content. Aesthetic & Modern UI cards Modern digital cards aren’t a pure skeuomorphic idea, but quite frequently, using consistent analogies and principles used from physics help users make sense of interfaces and analyze visual hierarchies in content. In the case of cards there are a couple of things you can do: 1. Use rounded corners To visually compare with a real-world real card in posture. Rounded corners are more effective because they allow our eyes to easily follow lines “as it suits better to the natural movement of the head and eyes respectively”. 2. Add a light border or soft shadow To show depth and reveal that the whole card is clickable. Shadows create a chasm in the interface which helps us to differentiate UI elements. However, adding shadow into the design is not as simple as it sounds. Sometimes designers get carried away and by overdoing effects they make an otherwise decent-looking design look cheap. Avoid using pure black colour for the shadow. Bonus: Take care of fonts & white space It is essential to give each card room to be seen, read and understood. Add plenty of whitespace around each block to provide users time and peace to visually reset as they look from one card to the next. And opt for simple and basic typefaces (such as sans-serif with normal weight for card body copy), as basic typography maximizes readability and helps to browse. Some UI card examples Let’s look at the real-word UI card examples Blogs / Posts card: It’s essential to keep your blog cards simple. They should have a consistent, repeated structure, but use different image and font sizes to represent the most important to least important elements of the card to make them more understandable for those reading them. They highlight the featured image and title as the most prominent elements. Then, they also included quotes, which not only help users decide whether or not the article or posted content is right for them, but can entice them to click through if they were on the fence. E-Commerce / Product card: A product card is an important thing that helps you convert a visitor to a customer. An excellent product card should attract attention, arouse the desire to get the product, work out questions and disapproval, motivate people to buy, and also promote your website in search results. The name of the product should be placed in the most noticeable place so that the visitor will immediately understand that he has come to the right place. A good image will tell the customer over a thousand words, so you need a high-quality image to have the perfect product card. If a product has a special offer, indicate not only the promotional price in the price block but also the regular price and how much money the customer will save. Profile card: Profile card has become a nail user interface widget in a website template. With personal branding becoming important more than ever due to the shift of interest towards the online domain, it’s time to move away from those boring hyperlinks pointing to your online page. Just like every card, a profile card is a UI component that holds pieces of information vital to what it represents. It’s yourself you want to sell to your audience (not literally) to achieve your objective. Make sure to include only the necessary information (e.g., image, name, profession) and let your “about” page to have the remaining details to complete your profile. This is in terms of design and layout whereas both interior and exterior of the card does not damage the look and theme of the website. Hierarchy is the key. Dashboard cards: Dashboard designs can differ widely. But all dashboards are made of cards. Depending on the type of dashboard, each card might include profile info, notifications, quick links or a navigation design element, key data, graphs and data tables. Make sure you use the correct type of card for each element. Dashboard card allows the user to decide which data they want to focus on. Easily understood UI which allows the user to control exactly which data needs to be front and center in the dashboard. Only include the most relevant information and for your users, at least in the initial screen. When you have datasets that are easier to understand when seen together, find ways of presenting them in a single card. But be careful not to confuse the user. Daily activities card (Kanban): Kanban task cards seem like a pretty straightforward thing — take a sticky note, write what you need to do and put it on the wall. These cards must contain the number of units that need action. They also likely contain a variety of other information that clearly conveys what must be done. The information contained on the card includes the name of the task and important details like what type of task it is and who owns it. Kanban cards are placed under status categories. The most basic status categories are “To Do”, “In Progress”, and “Complete”, but statuses may vary project to project. The card structure is best for small changes like adding or deleting tasks rather than changing big picture ideas like your overall goals. Conclusion Cards can be designed more effectively in several ways. By initial defining and observing cards, we got a better idea of what this design pattern looks like across industries. It also allowed us to make some speculations as to what actions users are wanting on these cards. Cards work especially well in contexts where they provide summaries of many different kinds of content, rather than when simply used as a modern-looking replacement for a list of content. Sidebar Some interesting types of sidebar navigation. A sidebar is a tremendous, efficient, and important part of the website navigation design. As a rule, it is a component with typography, shading range, or symbols and shows up by the side of the fundamental content— either on the left or the right, depending upon the site design and formation. Ordinarily, sidebars on the left extension the most consideration and guide the clients all the more successfully due to visual propensity and client conduct, while sidebars on the right can make a more valuable order since they are viewed as auxiliary. For certain forms of websites and styles, vertical menus will do over add a touch of visual spice to your website; they’ll additionally improve the user’s browsing skill and create your site easier to navigate. Best Practices Few tips to make the sidebar navigation easy to scan or less frustrating for the users. 1. Use the logo The brand logo is particularly reliable for the visual side of the sidebar, however, it is often also functional as it is used as a hyperlink to the main screen of the app. 2. Add the relevant icons to the links By adding the relevant icons to the links, we speed up the visually scanning of the navigation and its legibility. 3. Indicate the currently active link Emphasize the active role on the navigation bar to make it easier for the user to understand his current position in the app. 4. Differentiate group links If your app comprises several tasks and subpages, it is worth grouping them to improve the significance of the hierarchy of some functions and their readability. 5. Use badges & tooltips to collapsed the sidebar If you have a shortened navigation, it is worth adding a tooltip after hovering the cursor over the link so that the user knows what the subpage is responsible for. And also badges can be placed with links for any notifications. Conclusion I don’t believe that you should follow strict rules for a good design but there are always “guidelines” for you to create better designs. This series is one of those guidelines and I hope you’ve enjoyed it. Bottom Navbar Important points for creating a navigation system. There are considerable ways in which you can style, list, and showcase your app menu or navigable items. One of the popular styles is the bottom navigation bar. It has elements named as icons, sometimes accompanied by texts, that are well-known and important enough to be highlighted. Upon selecting the bottom navigation bar icons, users can switch to a chosen view or refresh the currently active view. This brings their app usage experience smoother and expedites navigability. It also makes the app content more discoverable, thereby giving a boost to engagement, interactions, conversions, responses to CTA buttons, and more. Why do we need a Bottom Navigation Bar? The user can check which screen are they on at the time. It allows the user to change to distinct activities/fragments easily. It makes the user informed of the different screens functional in the app. Importance The bottom navigation bar aligns with the “thumb rule of design”. It acts on the principle, that most app users scroll and navigate apps using their thumbs. Hence, the primary and significant screens and pages within an app should be easily accessible by a user’s thumb. This exhibition makes the bottom navigation bars a more important aspect of app design. It settles most of the essential sections of the app within the reach of the users’ thumb, thereby making it more convenient. Instead of using just the hamburger menu, or any other menu design, one must also add the important items at the bottom of the app, in an easily navigable format. This bottom navigation bar can be kept constant across multiple or all screens on the app. The Anatomy of bottom navigation bar The layout or structure of a standard bottom navigation bar: Container: It used to display destinations. Active Label (Optional): The active label in navigation is the current screen or the one that the user clicks to go to. Inactive Label (Optional): Every other icon or label remains inactive on the navigation bar. Active Icon: As icons are pictorial representations, they catch the attention of the users faster than text. It indicates current active page. Inactive Icon: Out of emphasis but noticeable. Sizes While the shape of icons relies upon their design, the format should show consistency. The mean size of the icons should also ideally remain similar. The size may increase for active or pressed labels, to make it more unique. The length, height and width can be specified accordingly. Best practices Bottom navigation should let users get to the most important, or most used, features of the app. Simply remember these things: 1. Use 3–5 Destinations: Make sure to use only 3–5 top priority destinations in the bottom navigation. Using more than 5 will leave you cramped for space, the tap targets will be very close to each other — and the users might end up tapping the wrong tab, which will only add to their frustrations with your UX. Not to mention, every additional tab only increases the complexity of your app, compromising its performance. If your app contains more than 5 important destinations, consider using a Google-like hamburger icon or place them at other easily accessible locations. 2. Don’t Use a Scrollable Navigation Bar: It’s easy to think using a bottom navigation bar that’s lets users scroll through all the important destination is your solution (if you have more than 5). But, it’s not! More often than not, users don’t realize the navigation bar has the option to scroll and never see the features that side of the screen. 3. Consistency: By using icons that are this consistent you clearly communicate to the user that you’re a professional who cares about user experience at far finer levels. By being aware of them and by making them more consistent you bring the app closer to the heart of the users. 4. Avoid multiple colors: Avoid using different colors for different icons as it may lead to confusion and users may fail to tell apart active destinations from in-active destinations. Use proper opacity to enhance the visibility of the icons. The color scheme used on your bottom navigation bar should agree with the overall theme of your app. The icons and text labels for active and inactive destinations must have a distinct contrast. 5. Don’t truncate or wrap texts: Text labels should give quick and meaningfully explanations to navigation icons. Avoid long text labels as they do not cut short or wrap. Conclusion For providing the perfect user experience, you need to put a lot of ideas into your bottom navigational bar. And, yes, there should always be a bottom navigational bar, if you want to make the app easy to use for your users. The bottom navigational bar should be designed in such a way that its: Simple: it should lead to where it says it would! Clear: the tabs are recognizable and easy to tap. Well picked: choose only the features that enhance UX. Making it easier for users to navigate through the app should be the highest preference for an app’s design. The simpler your app is to use, the more likely it’ll be used. Links Usable hyperlinks are the signs of a good user experience. Links are one of the most important interactions on the web. In addition to reading, scrolling, and writing, they are deeply ingrained in the way we use any website. Think about it: How did you get this article? By clicking on the link. How did you go to the website before? As we know, these links are connected to the Internet. In HTML, each link is marked with an anchor tag <a>. The browser comes with a standard user agent style sheet, which makes the link blue and underlined. Since all browsers use the same template, users should be aware that this style represents a link. Based on this paradigm, we can use it to help users navigate our website. Why is it so important? Links are the most basic interactive component between users and web pages: the user clicks on a link and then opens another web page. They are important, but they are easily lost among more and more people. More concise UI elements such as web forms, animated tooltips, and call-to-action buttons. Links are so common that we often ignore them in projects. Creating internal links to your website can help you optimize content in search engines. The SEO of this topic as a UX design directly affects the SEO of your website. Some of the key factors that can affect the SEO of your website are page speed, mobile compatibility, and most importantly link structure. It also describes the structure of the link to your website and whether it is user-friendly. Usage and types of links Usually, anything that can be clicked is called a link, whether it is text or a digital image. In addition, the links can be of different types. Navigation Links: Mainly called hyperlinks, they are used to navigate between different parts of the page without starting a new task. Command Links: Mainly referred to as text buttons used to execute new commands. Usually used for less important commands. Definition Links: links that are more valuable than command links. Home link: As the name suggests, the homepage link allows users to return to the homepage by clicking on the website’s logo or slogan. Three States of link The same link follows three stages: Normal: Standard link or you can say that this is an unvisited link. Hover: Hover link appears when the cursor hovers over the link. Visited: As the name suggests, a link that someone has visited. When to use buttons or links? There had been clean variations among hyperlinks and buttons returned to the sooner level of the Internet. Buttons have been used in applications that allow users to immediately take actions that change the backend. Links are used in websites to allow users to navigate to another section or page. Buttons vs links First, you want to think about the main tasks you want users to perform on each screen. It should be a button. The more important should be more conspicuous. We call this action the primary call to action. There should be only one on each screen. You should never use links to change the state of an application. This means that clicking the link should not add, change or delete any data on the screen. The delete operation should not be a link or save operation. But in the past decade, the distinction between links and buttons has become increasingly blurred. As the website provides more and more functions. You can also find links for commands and buttons for navigation. The Problem with Default Underline Links Underlined hyperlinks affect readability because certain characters that are located below the basic characters and have descendants under the underline, such as p, g, j, and q, are affected by the value of the CSS property textdecoration: underline. For example: You cannot fully control the style of the underline, but you can set the bottom border, for example, simple border-bottom: 1px solid #2159AD; to create a brighter and more attractive underline that is still clearly visible. For example: Common points for better links UX The idea is to use links on the website so that users can use them, but users do not use these links. Therefore, it is also important to use links to ensure their availability. 1. Make meaningful text links instead of just “Click here” links. 2. Define better-visited links. On Google, visited links changes the colour from blue to purple. 3. Highlight to the users that it is clickable. 4. Use a pointing arrow or hand to elaborate the link. 5. Blue is the standard choice or blue represents a link, you can also try different colours but it should look like a link. 6. Add underlines or other non-colour indicators to help colourblind users who may not see colour. 7. Do not reveal a link on hover. Instead, make a better transition on hover. Conclusion This brings us back to the guiding principle of link design: consistency. Follow the established template guidelines that have been applied around the blocks and create your templates by carefully applying them in your design. We have seen many benefits and links in the content. One is from the perspective of user experience and the other is from the perspective of marketing. Both contain priority factors. Slider Allow users to make selections from a range of values. A slider is a user interface element that represents an volume slider or control. It allows the user to move a knob or bar from left to right and vice versa in a straight line. The slider provides excellent navigation for websites and applications where there are only a few elements to explore. The slider feels natural to the user and provides a fun way to change settings or explore features. The slider is easily recognizable to the user, making it easy to use and making them a very practical choice for designers to explore. Benefits of slider The sliders are easy to understand and learn. It makes them feel intuitive. Touch devices with small screens and sliders are great choices because they don’t take up much space. Sliders help users move next and back, increase speed or volume, and create a sense of urgency. Problems with slider When users use sliders, they often do so when they are distracted or in a rush, which often means the slider is pushed too far in one direction while trying to lift their finger from the screen. With too much pressure, it can be difficult to get your slider to work the way you want it to. Senior users with shaky hands may have difficulty with sliders. When using a slider, it is difficult to guarantee an accurate result. In these cases, users may feel helpless while trying to navigate the website. Issues with usability After you’ve researched your audience and decided that using a slider might be appropriate, think about your composition. Touchscreen users often use their thumbs when working on their devices. Therefore, it is important to examine the area of the screen that will be occupied by the user’s finger or thumb. This will help you position the slider on the screen so that it is easy to use or manipulate. The layout on the screen, where the user will use the mouse to move the slider, is different from the layout of a touchscreen device. With a touchscreen, you want to limit the chances of errors, click alternative links, or hide instructions while the user puts their finger or thumb on the screen. Make a positive visual impression If you have a large amount of content that might be “too much information” for your readers to discover or assimilate, you usually use sliders to present a series of visualizations to your users. A series of events that users can follow to purchase products on an ecommerce site, a set of clear visuals that guide the user through the experience can be useful and undemanding, saving the user time and making the site easier to use. This process can be used in a variety of situations to help users navigate a website or mobile application. Exact value or random? It can be difficult for users to use the slider correctly, which is especially true for touch devices. It’s very difficult to be specific with a small pin on the screen. The value is not important to the user. If the user can use the slider to share the approximate value, this is usually sufficient. If your users need an exact value when working with a slider, you can create a slider with an editable numeric value. However, if the UI requires an exact value for ease of use, it may be more helpful not to use the slider. Selecting the range? Creating a specific area helps users avoid running out of answers. Smaller search results usually provide fewer items, while larger search bars provide more items. However, your users won’t unnecessarily limit your options. They also won’t be disappointed with the many options they can’t afford. Allow users to explore your app even if they don’t understand the slider and the volume you’re offering users. Provide feedback Provide instant visual feedback when your users use a slider or insert information into an edit box. You can use animation, scrolling or movement to communicate with your users. These features will grab the user’s attention and create communication. Dynamic sites are always attractive. When you create visual comments, your users will feel recognizable. This creates a sense of confidence in their ability to navigate your site. The wrap up! Use the slider only when the exact value is not important to the user, but only an approximate range. Make sure the user can select this range correctly without trying too hard to get the correct value. Also, any label sliders should appear above or near the slider, rather than below it, so that they remain visible while the user selects a value. Also, consider another UI element that allows users to click or even enter text to indicate their choice. Favorites The user want to select items to consume later. It’s natural to want to remember things. We’d like to know what we seen and where it occurred. This problem predates computers and mobile phones, and we’ve tackled it in a variety of ways. From writing on walls to carving in wood to scribbling on a napkin or a post-it note, there are many ways to express yourself. They all do the same thing: they promote us in remembering. Favorites can help users make sense of large amounts of data and allow aspiring users to collect knowledge from people they like. Favorites are an easy way to distinguish preferred content from nonpreferred content. Favoriting can be done in a list view or in a detailed view of the item itself. In one of the item’s top corners, the outline of a quick favorite link (typically a star or heart) can be seen. When you click on your favorite link. It has been highlighted, and the item has been chosen as a favorite. When to use When your app contains a big number of content items and you want the user to be able to distinguish between them, utilize this pattern. Provide a quick favorite link adjacent to the list view item. You can also give a list of only favorite items, which can be accessed via a menu item. When trying to distinguish between numerous categories, avoid using favorites. Instead, you might use tags or folders. Ok: A simple one-step method for distinguishing a huge number of items. Not ok: There is only one level of differentiation. There are no options for adding metadata to a favorite. Bookmarks This is where the bookmarking feature comes in, allowing users to easily remember information for later use. This is especially crucial if you’re in a constrained setting. This was built into the web from the start. Every piece of information that is published has a unique address — URL — that serves as a reference and is all you need to know to access it at any time. We can recall thanks to modern operating systems and extensively used sharing tools. Furthermore, there are sites such as Pocket and Pinterest that essentially address this problem for the user; nonetheless, it is occasionally preferable to keep them a little closer to your chest. Wishlist Using the terms “favorite” or “bookmark” may not always be the most appropriate. You might want to accumulate items in a Wishlist in an ecommerce experience, for example. It’s possible that the pink running shoes aren’t your favorite pair, but you require them, so you add them to your Wishlist. Keep in mind the context… perhaps it should be called a shopping list?!? Make it very clear Make the favoriting action prominent and noticeable if it is something that users are normally interested in. Make it easy to find if it has a lot of value for the user. If favorites are so important to the user experience, you’ll want to make sure they’re easy to find. You could fill it with content when you first start off, but that isn’t always a smart idea; you want the user to do it. It’s a good idea to explain the topic now, while the user is still in context. Make use of copy and images, and explain how the bookmarking process works effectively. Things to remember Maintain a steady tone of voice. Don’t refer to it as “favorite” in one location and “bookmarks” in another. It may seem obvious, but you’d be surprised how many product developers ignore it. The star and heart icons work well together. Stay constant rather than mixing and matching. Make sure the action button’s status reflects whether the content was added to favorites or not. Provide the user with feedback. In certain circumstances, a brief nonintrusive notice such as ‘Added to favorites’ may suffice. Tooltips Provide suggestions about an item Tooltips are small UI elements that users encounter on a web page or application when they hover over other elements on the page. As the name suggests, Tooltips provide suggestions about an item or process on apps or web pages. In other words, Tooltips are text boxes that display a brief explanation of the elements of an application or web page. When thinking about an optimal UX, a good tooltip design can have a big influence on which users understand your features and end up being successful. Conversely, poor tooltip design presents tooltips as irritating and loses all credibility. The problem with tooltips While they allow you to squeeze additional information onto the screen, they have a number of issues. #1. They are difficult to spot: Some users won’t notice a clue, which means there is a high risk that they will never see the content on it. #2. They obscure the screen: You cannot read the hint and use the rest of the screen at the same time. #3. Can be cut into small screens: As the tooltips overlap, they can be cut out by smaller windows. #4. Hover content viewing is inaccessible: Hovering is not always the intention to trigger a check. The user can move the cursor over a suggestion that accidentally triggers it. You can provide a comparable experience for keyboard users by displaying the index in the foreground. But this is unconventional and still excludes touchscreen users. Possible Components Copy: Tooltips can contain a header and body text, or just body text. For smaller tooltips, skip the formalities and go straight to the body of the text. Exit: When a user closes the tooltip message. This can be as simple as an “x” or “close” button, or it can be activated from a user interacts with a certain item. Progress Bars: Tooltips that are part of a multi-product can include a progress indicator to let users know where they are in the process. 4 Simple Rules For Better UX 1. Treat every tooltip like a rub — you’re asking your users to read something, so make sure they get immediate value from that information. Also pay attention to the copy. Make it clear, concise and relevant for each step of the user journey. 2. Explain only the things that are indistinguishable from the interface / design. 3. Make suggestions as contextual as possible — trigger them based on user actions and display them to the most responsive group of users. Also, make sure they are accessible to users who navigate your website using a keyboard and screen reader. 4. Show them one at a time and don’t show more than 3–4 in a row. Users tire quickly and need time to act / digest what you have taught. As with everything else, analyze them and try them out! Conclusion To say that tooltips are paving the way for a bad user experience is just a flaw. If you know how and where to use tooltips, they will help you deliver a great user experience. Keep in mind that tooltips are primarily about efficiency. They should be on your app or website to make it easier for your users. Testimonials Testimonials can help you acquire that trust. Before hiring or purchasing from you, most prospective clients who are unfamiliar with your products or services will want to make sure that your organization is a good fit. As a result, a testimonial page is critical to the success of online initiatives. Real reviews from current or past clients are one of the best methods to make your testimonial page stand out. Client testimonials will act as social proof, demonstrating to potential buyers why your product is superior to the competition. The essential information First and foremost, we must go through the fundamentals. When writing a testimonial, we should always provide as much information about the client as feasible. Always mention the person’s name, title, and company. A image is a fantastic method to enhance these traits. Putting a human face on your testimonial always makes it more relatable to users. Using visuals to reinforce your message is a good idea. Adding visuals to your testimonial page, such as pictures and videos, rather than just text, will increase engagement and conversion rates dramatically. Adding videos and other visual content to your customer testimonials page will undoubtedly make your reviews more attractive, resulting in a higher conversion rate. Maintain an honest tone. Make sure you only use genuine testimonials — if someone discovers you used a dishonest recommendation, it could come back to hurt you later. It has the ability to rob you of all credibility and destroy your reputation more than good. Furthermore, rather than making up a moniker, use your clients’ initials if they don’t want to give their full names. Client Testimonials That Work Each client is unique, and their interactions with your business will differ. Some may take the time to provide feedback and share personal tales about their experiences with your company, while others will remain silent or make generic comments like “excellent service,” “excellent job!” and so on. You should include testimonials on your page that relate to the requirements of potential buyers, such as testimonials that show how your products or services helped your clients. Optimized For Mobile (Responsiveness) Tablets and smartphones have become popular devices for conducting online research. Because mobile devices account for more than 48% of all internet traffic, and this number is anticipated to rise in the future years. If you don’t have a responsive testimonial page, it’s possible that up to 50% of your visitors won’t be able to see it. There’s no denying that a large proportion of potential clients will access your website from their mobile devices. As a result, it’s crucial to make sure your testimonial page and other key product pages on your website are mobile-friendly. Make the material on your website easier to read and digest on mobile devices by using images and other intriguing graphics. Provide a link to a relevant source. Your client testimonials will be more credible if you link to external and real part. Your testimonial marketing campaign will be more effective if potential buyers can obtain more information about your items or services. If you think a review is important to include on your testimonial page, make sure you have enough information or proof to support it. Concluding 7 tips: Here are some recommendations and ideas you may utilise when developing and designing your own testimonials page: Request specific numbers from your customers to indicate how you benefited their work. Allow visitors to filter testimonials so they can locate the most relevant one. Use the highest-quality images and videos. Demonstrate how your product works instead of just using quotes. Experiment with different layouts — testimonies can be created from tweets and other social media posts. Display real-life consumer faces and their current position or occupation. Make it simple for more customers to leave a review. Empty States Creating UX friendly empty states screens. Empty states are screens in your UI that are not yet full of information. That is to say, they are screens which will eventually have content on them when the user populates them. If you’ve ever used an application that allows you to add favorites or items to a cart, for instance, you might be familiar with an empty state. Or maybe you’ve completed a search that returns no results. Some Best practices for designing empty states: Guide the users Don’t leave users hanging. Help users to understand or get started with a new product. You can put a call to action button on your empty state screen. A good call to action asking your user to add their own tasks can keep them engaged and in your app. Your call to action basically tells the user how to turn that empty screen into a filled screen. Suggest Alternatives If a user searches for something that does exist, provide close matches to what they are looking for. We give users a chance to explore other sections when they encounter an empty state in one section. Provide Starter Content Populate empty states with content to allow users the opportunity to learn and use your product immediately. Apps which store content like music or books, or use templated content like notes or documents can benefit from starter content. Giving your user the ability to change the starter content is a way to maintain engagement because the user is making the app their own. Add Personality Add personality by using friendly and sometimes humorous but keep the user goal and context in mind. But your empty state is a small instance where you can inject some personality into your product. Personality doesn’t automatically mean funny. When adding humor into your UI, use it with caution. That one line quip might be fresh today but tomorrow can leave a stale taste in the UI after it becomes exhausted. Use Illustrations Combining straight forward copy with fitting illustrations creates a better empty state. Empty states are a way to improve the user experience of your product and illustrations helps a lot. It encouraging users to interact with your app. Onboard Screens A guide to creating friendly onboarding screens. Onboarding is a virtual unboxing understanding that encourages users to get started with an app. The user onboarding experience is the first user experience a person has when they download your application and use it for the first time. It is a brief walkthrough that illustrates how to use the main features of the application in short, simple steps. The main fact of a user onboarding cycle is to improve user activation and user retention. Goals: Welcome users and fascinate them about the experience ahead. Help users implicitly or explicitly understand how the app can be used in their lives. Drive users to take actions that increase engagement and retention in the first seven days. Some basic practices of user onboarding: Show onboarding to first-time users First-time users should be met with the onboarding to help ease their experience into the application features. Use Illustrations Visual content is processed faster than textual. Use illustrations to allow users to easily understand application features. Or use a photo to visually reinforce the context you want to convey to the user. Show progress indicator Users need to know where they are in the onboarding process and how long the process will take. To make the process as useful as possible, create indicators of the current step and show them how many left. Don’t use many screens Using 3–4 screens is enough to give the user a quick insight into the application/product features. The number of steps should not exceed 4 (maybe 5). Too many steps may frustrate the user, which may result in closing the app. Use good copy Make your onboarding copy short, super helpful and straight to the point. Your content should contain all the necessary information about the current step and it should be short and logical. Allow users to skip the process Note that not all users first time or returning are willing to go through the entire onboarding process, allow them to be able to skip. If you want your onboarding screens to be user-friendly. Let them skip this path. Dark mode Cool Tips for Better Dark Mode Design We interact with apps and read websites all day and night. In some cases, white screens of the digital solutions may be inconvenient for our eyes. That’s why more and more designers pay attention to make their creations in two themes — light and dark. Dark mode has got specific rules that we should follow to make it natural for the users. This story contains all of them, so you can create a theme that brings positive experience. Pros of Dark mode : It reduces eye strain. Dark mode saves energy on high energy-consuming screens like — OLED, AMOLED, etc. Battery efficient. Enhance accessibility for users. Create an impression of luxury. It looks stunning Cons of Dark mode : In bright light conditions, it sucks, causes more eye strain. This is a bad example of dark UI screen. We are going to follow some cool tips to improve and make better dark UI screen. 1. Avoid 100% Black Background (Up to you) This is the common mistake we all made. We should use a very dark tone to the background. I prefer to use dark grey — rather than black. But sometimes black is fine. I personally use for dark mode these colors — #0e0a1b & #04020f. 2. Avoid 100% white as well Avoid using #FFFFFF in your dark mode UIs. It causes really large contrast with the background, so its better to use light versions for example #F6F6F6 or #FAFAFA etc. Its better for the eyes. 3. Contrast & Accessibility There are specific guidelines for dark themes to be applied if you would like to make the solution more accessible. The most important one is the following: the contrast level between body text and the background should be at least 15.8:1. Its easier to forget about contrast when working on both light and dark themes. Always double check contrast ratio to make sure UIs are accessible. 4. Avoid shadows Avoid using white shadows to elevate stuff, it looks bad. Instead create elevation system based on different opacities of white or other colors. In light User Interfaces, we tend to use subtle shadows to communicate depth. However shadows are not so visible on the majority of dark mode elements. This is why they should be used less frequently. There is another way to communicate hierarchy. 5. Desaturate colors Dark modes should avoid using saturated colors. The first reason for this is accessibility — saturated colors do not pass WCAG’s standard of at least 4.5:1 for body text against the dark background. Saturated colors may also cause eye strain, causing optical vibrations against the background. Conclusion Dark theme (or mode) is now popular. All major platforms started to support that, and users will demand from the solutions to implement that. This is the best time to learn the principles and start creating a dark theme for your projects.
