If you want users to take action on the web page content, add a "banana" - something that makes it obvious what the user is supposed to do.
For example, if your page is selling software, make it easy for your users to make a purchase. People don't have a lot of time to read your entire page and find the right link, so it is important to grab their attention by using a "banana".
When resources are limited, companies often blur the lines between design and development roles in an attempt to maximize efficiency. However, maintaining a clear distinction between disciplines is crucial for creating cohesive and effective user experiences.
For many developers, especially those early in their careers, the risk of making design decisions that negatively affect the overall user experience is high. When Product Owners delegate design work to developers, they may unintentionally accumulate significant UX debt. UX debt, like tech debt, accumulates when design shortcuts are taken, leading to user experience issues that need to be fixed later—often at a greater cost.
Ensure your websites and apps are responsive (mobile-friendly). While you might have a high-resolution monitor at your workstation or home, it's important to remember that many users access content through their mobile phones or tablets.
Your goal should be to create designs that seamlessly adapt to various screen sizes, from small mobile displays to large desktop monitors.
"An image is worth a thousand words" is a timeless saying that underscores the power of visual communication. Images can convey complex ideas, emotions, and information more efficiently and effectively than text alone. They capture attention, enhance understanding, and improve retention.
Therefore, whenever possible, replace text with images to create more engaging and impactful content. By doing so, you can simplify your message, appeal to visual learners, and make your communication more memorable.
The best way to emphasize your point is to show the pain first, and then the solution. Use "Bad example" and "Good example" with crosses and ticks, respectively, in captions.
When you add images/videos to websites/applications, it is helpful to add a caption underneath them, describing and including extra information to users.
It's a convenient way of catching users' attention to your content. When people are scanning a newspaper, they often check out the pictures first, then read the accompanying description, and if it sounds interesting, they'll go back and read the article. Users read websites in a similar fashion.
Efficient programmers do not re-invent the wheel. That's why we use the best Web UI libraries.
Bootstrap is a NuGet Package that provides a jump-start for HTML-based projects. It includes the HTML, CSS and JavaScript framework used to build the Twitter site.
Making CSS changes can range from straightforward tweaks to complex adjustments that impact multiple elements or pages. Knowing when to handle changes yourself and when to seek a developer's input can save time and reduce risks.
When creating or editing CSS or HTML, it's important to avoid adding unnecessary classes and IDs.
It can be tempting to add classes to elements, as it's often the most obvious solution to CSS problems. However doing so can lead to cluttered code and overly specific solutions. When working with CSS, it's almost always better to reuse existing classes rather than adding new ones.
Callouts, or UI boxes, are often used to highlight alerts, warnings, and other key information. They work best when they span the full width of the screen, making the message clear and hard to miss.
Full-width callouts use space effectively, pull focus to the content, and add a strong, immersive feel to the page.
Mobile keyboards, autocomplete, and even copy-paste behavior often introduce leading or trailing whitespace into input fields. This causes validation to fail, even when the actual content is correct—like a GitHub URL ending in a space. That’s a frustrating experience for users, and it’s easily avoidable.
Always indicate which fields are required. Users get frustrated when they experience a wasted trip to the server, just because they did not get an obvious indication of what was required first time around.
It seems nearly all web developers are confused whether they should use hyperlinks or buttons on forms. The recommendation is that whenever data is being submitted (e.g. Save, Cancel, Apply) you should use a button, otherwise use a link.
This is because hyperlinks indicate navigation - "If I click this link, I'll be taken somewhere else".
Whereas a button indicates that something is being processed - "When I click this, I'm agreeing that something is being submitted"
When designing your form, you should try to help your user whenever it's possible. So it's a good idea to include the number of results in ComboBoxes.
When designing your form, you should try to help your user whenever it's possible. So it's a good idea to create a combo-box that has a custom template.
Most developers put the image and the caption in a DIV tag, where the figure is just a paragraph - this is not correct.
As we know portable devices like tablets and mobile phones are being more and more used as reading devices, however printing web pages is still often necessary. In general web designers don't think about printing when putting a website up, meaning we're left with web pages that frustratingly don't properly print on to paper.
An oversized image or table on your page can greatly reduce your page's readability and disrupt its layout. It affects page loading and can also cause problems in printing, wasting natural resources.
For a website that expects a lot of first-time visitors, it is wise to put the user registration form on the same page as the sign in dialog. This saves having the user click on another link to enter their details.
It is easier for users to remember their frequently accessed email address more so than one of their many usernames. For this reason, it is best to use email address instead of username for the sign in page.