UI Design Guidelines - Dos and Don'ts
Master UI design with key guidelines in this article by Prince Pal, offering practical tips to create visually appealing and user-centered interfaces.
Apply UX Design Principles to Your Digital Product.
To make sure your website has a good UX design, start by thinking about who will be using it. What features do they need? How should they navigate through the site? Once you've answered these questions, think about how you can improve the user's experience via presenting a well designed user interface.
UI Design Guidelines are a set of best practices, principles, and rules that guide designers in creating effective, efficient, and user-friendly user interfaces. These guidelines help ensure the design is consistent, accessible, meets users' needs, and aligns with the product or service's goals.
Critical Aspects of UI Design Guidelines:
Consistency: Ensures uniformity in using colors, fonts, buttons, and layouts across the interface. Consistency helps users understand and predict how the interface works.
Usability: This focuses on making the interface easy to navigate and use. This includes clear labeling, intuitive navigation, and feedback to the user on their actions.
Accessibility: Ensures that the interface is usable by people with varying abilities, including those with disabilities. This includes providing sufficient contrast, keyboard navigation, and alternative text for images.
Visual Hierarchy: This structure guides the user’s attention to the most important elements through size, color, and layout. A clear visual hierarchy helps users quickly understand the interface and accomplish their goals.
Feedback and Response Time: This involves providing immediate and clear feedback to users after interacting with the interface, such as visual cues on buttons, loading indicators, or success messages.
Simplicity and Clarity: Emphasizes the importance of a clean and straightforward design. Avoiding clutter and unnecessary elements helps users focus on what’s important.
User-centered design: Encourages designers to focus on users' needs, preferences, and behaviors. This includes conducting user research and usability testing to inform design decisions.
Responsiveness: Ensures the interface adapts well to different screen sizes and devices, providing a seamless experience across desktops, tablets, and smartphones.
Performance Optimization: Minimizes load times and ensures the interface is fast and responsive. Users are more likely to stay engaged with a product that performs well.
Documentation and Standards: Encourages the creation and use of design systems, which include documentation on design standards, components, and patterns that ensure consistency across the product.
By following these guidelines, designers can create suitable interfaces and provide a positive and practical user experience.
UI Design Dos and Don'ts
Dos
Do Keep It Simple
Aim for a clean and uncluttered interface.
Use minimal elements to avoid overwhelming the user.
Do Prioritize Consistency
Maintain consistent design patterns throughout the interface.
Ensure uniformity in fonts, colors, and element sizes.
Do Focus on User Needs
Design with the user’s goals and tasks in mind.
Conduct user research to understand their requirements and pain points.
Do Ensure Accessibility
Use sufficient contrast for text and background.
Provide alternative text for images and ensure the interface is navigable with a keyboard.
Do Use a Clear Visual Hierarchy
Prioritize essential elements by size, color, and placement.
Guide users’ attention through the logical sequencing of elements.
Do Provide Feedback
Offer visual cues when users interact with elements (e.g., buttons changing color on click).
Inform users of the system’s status (e.g., loading spinners).
Do Design for Responsiveness
Ensure your design adapts to various screen sizes and devices.
Test on different devices to guarantee a seamless experience.
Do Keep Navigation Intuitive
Use familiar icons and labels for navigation.
Ensure that menus and navigation structures are easy to understand and use.
Do Optimize Performance
Minimize load times by optimizing images and code.
Implement lazy loading for images and asynchronous loading for scripts.
Do Test and Iterate
Regularly test your designs with real users.
Be open to feedback and iterate based on test results.
Don'ts
Don’t Overload with Information
Avoid presenting too much information at once; break it into manageable chunks.
Resist the urge to include unnecessary elements that do not serve a purpose.
Don’t Ignore User Feedback
Don’t dismiss user complaints or suggestions.
Avoid making design decisions based solely on personal preferences.
Don’t Sacrifice Usability for Aesthetics
Don’t prioritize looks over functionality.
Ensure that design choices enhance, rather than hinder, user experience.
Don’t Use Too Many Fonts or Colors
Avoid using more than two or three different fonts.
Stick to a consistent color palette to avoid visual clutter.
Don’t Rely Solely on Color to Convey Information
Don’t use color alone to communicate important information; ensure it’s also clear in text or symbols.
This ensures that colorblind users can still access all information.
Don’t Forget Mobile Users
Don’t design exclusively for desktops; ensure mobile users have an equally smooth experience.
Avoid tiny touch targets and ensure all interactive elements are easily tappable.
Don’t Ignore Loading Times
Avoid heavy graphics or unoptimized code that slows down loading times.
Users are likelier to abandon a site that takes too long to load.
Don’t Use Jargon or Complex Language
Avoid industry-specific terms that may confuse users.
Keep language simple, clear, and to the point.
Don’t Disrupt Users with Unnecessary Pop-Ups
Don’t bombard users with pop-ups, especially when they arrive on a page.
Avoid auto-playing videos or audio, as this can frustrate users.
Don’t Forget to Document Your Design Decisions
Avoid making design changes without documenting the rationale behind them.
This helps maintain consistency and clarity across the design team.
These guidelines will help create a user-friendly, efficient, and aesthetically pleasing interface.
Usability Rule: Don’t Make Users Think
(Krug, Don’t Make Me Think)
Having to ask, “Where am I?” or “What do I do next?” makes us think
A user should always know their current location via visual contrast (shading or color) for the active tab and perhaps breadcrumbs, e.g., You Are Here: Home > Hobbies > Book Collecting (each hyperlinked)
A user should always know what to do next; calls to action should be clear and prominent, and limited in number
Dense or confusing screen layouts make us think, “What’s this page for?”
People scan/skim, so design pages like billboards.
Create a clear visual hierarchy by giving prominence (via larger or bold fonts) to essential items, grouping similar items, and nesting sub-categories.
Break pages into clearly defined areas, using headers, etc
Highlight critical terms with bold fonts
Make what’s clickable noticeable with prominent buttons, obvious links, etc.
Minimize noise/busyness by omitting needless words and page elements, using bullet lists, etc.
Follow industry conventions for web or mobile navigation, e.g., where to place navigation links, utilities, “about us,” etc.
Users don’t have to think as much when they find things where they expect to see them.
Note that designers often resist using conventions, viewing them as uncreative.
Bad naming makes us think, e.g., vague categories (e.g., do I find a handheld vacuum cleaner in “electronics” or “home & garden”?), clever names, technical jargon (e.g., use “Stamped Mail” or “Metered Mail”?), etc.
More Navigation Guidelines
(Krug, Don’t Make Me Think)
The home page should include: 1) site identity and concise/informative/lively tagline or mission statement that conveys differentiation; 2) how to get started via 1 )site navigation hierarchy, 2) search, or 3) best stuff = teases/timely content/deals; 3) call to action, if appropriate (e.g., registration)
Some users almost always use the search box for their wants, while others rely on links, tabs, and other navigation cues. It would be best if you designed with both types in mind.
Navigation format should be persistent and consistent on every page (except for the home page and some pages for forms) and should always include: 1) logo/site ID (which should link to the home page); 2) “Home” link or icon; 3) search box; 4) sections, ideally as tabs; and 5) utilities.
Every screen needs a prominent name (e.g., the “Auctions” section, then the “Sell an Item” subsection)
Drop-down menus are tempting to save space, but they reduce serendipity in discovery, and they are error-prone because they disappear quickly and require careful mouse maneuvering.
The risk of error is particularly acute with multi-level/nested pulldowns (i.e., a category list whose elements each expand into subcategory lists)
Pulldowns work best for alphabetical lists of known names, e.g., states
Preserve the visual distinction between visited and unvisited links
Don’t put labels inside text boxes: they may be perceived to be default answers
Don’t float headlines between paragraphs: position them closer to the text that follows
Progressive disclosure: don’t overwhelm users with too much information on the first page
Let users choose the level of detail that meets their needs.
Don’t worry about requiring multiple clicks—the user will find navigation easy if each click makes sense.
Provide progress indicators for multistep actions, e.g., creating a profile or shopping transactions.
Make it easy to undo the last action and the entire last sequence
The back button accounts for 30-40% of all web clicks
What gets attention: faces, things that move (e.g., videos), loud noises
Make navigation targets large enough and not too distant from each other
Fast-loading pages are critical
A responsive design that avoids horizontal scrolling (i.e., automatic adjustment based on display size) is essential.
Internal search (Sharp)
Make the search box wide enough to see the input
Must account for plurals, typos, hyphens, variants
Tips: 1) identify the top 10-20 search terms via logs, then make sure results for them make sense: 2) check results for terms like “shipping,” “customer service,” “phone number,” and “returns”
Consider using filters to narrow search results
More tips: (Stayintech)
Visual Design Guidelines
Flat design is trendy and removes clutter, but it also removes visual distinctions and thereby makes it more challenging to provide clues about the functionality of screen elements (Krug p. 152)
Readability (Weinschenk, 100 Things)
All-caps text is more complicated to read; use it sparingly to get attention
Contrary to conventional wisdom, research shows no difference in reading comprehension between high-resolution serif and sans serif fonts; nevertheless, many designers favor serif fonts for large text blocks
Some newer fonts, e.g., Tahoma and Verdana, are designed with considerable letter body heights for better screen readability
Especially when reading on a screen, contrast matters and is best achieved with black text on a white background
Break text into chunks with bullets, short paragraphs, pictures, etc.
People read faster with long line lengths but prefer shorter line lengths
Colors (Weinschenk, 100 Things)
Blue and red don’t go together; they are hot and cold colors
9% of men are color blind
The meaning of color varies by culture. For example, white is the color of death for some and purity for others.
Mobile Design Guidelines
Read iOS Human Interface Guidelines and Android Design Principles!!
With small screens on mobile devices, you may have to click through more levels than on websites to access the same content/features.
Pull-down menus are more difficult to manipulate with small touch screens; use buttons when possible.
Avoid requiring pinch-to-zoom to navigate or view the content (Google Research)
Give clear direction to switch screen orientation when landscape offers the best experience (Google Research)
The mobile touch interface forfeits cursor hovering, making it more challenging to provide clues about functionality (Krug p. 152)
Responsive design is a great goal, but according to Krug (p. 149), it takes a lot of time, and it isn't easy to do well compared to designing separate experiences for web and mobile.
Always provide a link to the desktop version, but don’t label it the “full” site because this may cause users to perceive the mobile experience to be inferior (Google Research)
Takeaways
Several fundamental principles of good user experience design include simplicity, consistency, clarity, and empathy.
I am a Fulbright fellow and a multidisciplinary designer expert in solving complex problems by breaking things down into tangible designs, seamless flows, and friendly interfaces. Let's write this story together. Don't hesitate to contact me for a UI UX consultation.
WhatsApp: +91 9915 106 790