Home » Design » Conclusions and recommendations on usability
2.31 AM Conclusions and recommendations on usability |
Everyone will agree that usability is an important aspect of web design . Whether you're working on a portfolio website, an online store, or a web app, it's important to make your pages simple and easy for visitors to use. Over the years, a lot of research has been done on various aspects of web and interface design, and the findings help us improve our design work. Here are 10 useful takeaways and recommendations that can help improve the user experience on websites. 1. Form Labels Work Best Above a Field The study found that the ideal place for labels in forms is above the fields. Many forms place labels to the left of the fields, creating a two-column layout; While it looks good, it's not the easiest layout to use. Why? Since the shapes are usually oriented vertically; those. Users fill out the form from top to bottom. Users scroll down the form as they progress. And following the label to the field located below is easier than finding the field to the right of the label. Placing labels on the left also creates another problem: are you aligning labels left or right? Left alignment makes the form scannable, but disables the labels from the fields, making it difficult to determine which label belongs to which field. Right alignment does the opposite: it makes the form look nice, but less scannable. Labels above fields work best in most cases. The study also found that labels should not be bold, although this recommendation is not definitive. 2. Users focus on faces People instinctively notice other people as soon as they come into view. On web pages, we tend to focus on people's faces and eyes, which gives marketers a good technique for attracting attention. But our attraction to people's faces and eyes is just the beginning; It turns out that we are actually looking in the direction that the person in the image is looking. Here's an eye tracking study that demonstrates this. We are instinctively drawn to faces, but if that face is looking somewhere other than at us, we will also look in that direction. Take advantage of this phenomenon by drawing users' attention to the most important parts of your page or ad. 3. Design quality - Reliability indicator Various studies have been conducted to find out what influences people's perception of trust in a website: Elements of computer reliability Elements influencing online trust: First results from a self-report study. We don't know how good the Fever app is, but the sleek user interface and website make a great first impression. One of the interesting findings from these studies is that users really do judge a book by its cover... or rather, a website by its design. Elements such as layout, consistency, typography, color and style influence how users perceive your site and the image you project. Your website should not only project a good image, but also be attractive to your audience. Other factors that influence trust are: quality of website content, number of errors, frequency of updates, ease of use and reliability of the authors. 4. Most users don't scroll how much users scroll (in the Prioritizing Web Usability section) showed that only 23% of visitors scroll the first time they visit a website. This means that 77% of visitors will not scroll; they will simply view the content above the fold (i.e., the area of the page that is visible on the screen without scrolling down). Moreover, the percentage of users scrolling decreases on subsequent visits, with only 16% scrolling on their second visit. This data highlights how important it is to place your key content prominently, especially on landing pages. This doesn't mean you have to cram everything into the top of the page, just that you have to make the best use of that area. Overcrowding it with content will simply make it inaccessible; when the user sees too much information, he doesn't know where to start. Basecamp makes great use of space. Above the fold (768px high) displays a large screenshot, tagline, value proposition, call to action, customer list, video, and a short list of features with images. This is most important for the home page, where most new visitors will land. So provide the essentials there: Name of the website, Value proposition of the website (i.e. how users will benefit from using it), Navigation through the main sections of the site that are relevant to the user. However, user habits have changed significantly since then. Recent research shows that users are quite comfortable with scrolling and are willing to scroll to the bottom of a page in some situations. Many users find scrolling more convenient than pagination, and for many users the most important information on a page is not necessarily placed "at the top of the page" (which, due to the variety of screen resolutions available, is a rather outdated, outdated term). Therefore, it is recommended to divide the layout into sections for ease of scanning, separating them with plenty of white space. 5. Blue - Best color for links Giving your site a unique design is great, but when it comes to usability, it's best to do what everyone else is doing. Follow the conventions because when people visit a new website, they first look for things where they found them on most other websites; they use their experiences to make sense of this new content. These are known as usage patterns. People expect certain things to be the same, such as link colors, website logo placement, navigation tab behavior, and so on. Google keeps all the links on its websites blue for a reason: it's a color most users are familiar with, so they're easy to find. What color should your links be? The first thing to consider is contrast: the links should be dark (or light) enough to contrast with the background color. Secondly, they should stand out in the color of the rest of the text; So, no black links with black text. Finally, research shows that if usability is your priority, it's best to use blue for links. The default link color in the browser is blue, so people expect it. Choosing a different color is by no means a problem, but it may affect the speed at which users find it. 6. Ideal Search Window. What is the ideal search box width? Something similar exists in usability based on the length of search queries in search boxes on a website (Web Usability Priority). It turns out that most of today's search boxes are too short. The problem with short fields is that even if you can enter a long query, only part of the text will be visible at a time, making it difficult to view or edit what you've entered. The average search window width is 18 characters. The data showed that 27% of queries were too long to fit. Expanding the field to 27 characters will satisfy 90% of requests. Remember that you can set width using ems, not just pixels and dots. One em is the width and height of one "m" character (using whatever font size is set on the website). So, use this measure to scale the width of the text input field to 27 characters. As a general rule, it's better to have search boxes that are too wide than too short so that users can quickly browse, check, and submit queries. This is a very simple rule, but unfortunately it is too often ignored or overlooked. Some padding in the input field can also improve design and usability. 7. White space improves comprehension Most designers know the meaning of white space, which is the empty space between paragraphs, images, buttons, and other elements on a page. White space declutters the page, giving things room to breathe. We can also group elements together by decreasing the space between them and increasing the space between them and other elements on the page. This is important for showing relationships between elements (for example, showing that this button applies to this set of elements) and building a hierarchy of elements on the page. Notice the large content margins, indents, and paragraph spacing on Netsetter. All this space makes the content easy and easy to read. White space also makes content more readable. A study (Lin, 2004) found that proper use of white space between paragraphs and in the left and right margins increased comprehension by almost 20%. Readers find it easier to focus and process rich content. In fact, the layout of a web page (including white space, headings, padding, and graphics) may not significantly affect performance, but it does affect user satisfaction and experience. 8. Effective user testing doesn't have to be extensive. tests with just five users will detect about 85% of all problems with your site, while 15 users will find almost all problems. The biggest problems are usually discovered by the first one or two users, and subsequent testers confirm these problems and find the remaining minor problems. Only two test users will probably find half the problems on your site. This means that testing does not have to be extensive or expensive to obtain good results. The biggest gains come from going from 0 test users to 1, so don't be afraid to do too little: any testing is better than nothing. 9. Informative product pages help you stand out. If your website has product pages, people shopping online are sure to check them out. But many product pages lack information even for fast-browsers. This is a serious problem because product information helps people make purchasing decisions. Research shows that poor product information is responsible for about 8% of usability problems and even 10% of user errors (i.e., the user gives up and leaves the website) (Web Usability Priority). Apple provides separate "Specs" pages for its products, which keep complex details separate from the simpler marketing pages, but still make them easy to access when you need them. Provide detailed information about your products, but don't fall into the trap of overwhelming users with too much text. Make the information easy to understand. Make your page scannable by breaking your text into smaller segments and using lots of subheadings. Add plenty of images for your products and use the right language: Don't use jargon that your visitors might not understand. 10. Most users don't pay attention to ads. that most users practically do not notice advertising banners. If they're looking for a piece of information on a page or are engrossed in the content, they won't be distracted by ads on the side. The consequence of this is that not only will users avoid advertisements, but also that they will avoid anything that looks like an advertisement, even if it is not an advertisement. Some highly styled navigation elements can look like banners, so be careful with these elements. The square banners on FlashDen's left sidebar aren't actually advertisements: they're links to content. They appear uncomfortably close to banner ads and may therefore be missed by some users. However, ads that look like content will get people to search and click. This may bring in more ad revenue, but it comes at the expense of your users' trust as they click on what they believe is genuine content. Before you go down this route, consider the trade-off: short-term income versus long-term credibility. . So far we've analyzed web forms, blogs, typography, and portfolios; and other case studies will be published next month. We found some interesting patterns that can serve as guidelines for your next design. Here we'll look at some of the practices and design patterns we discovered in our case studies in this quick compact overview for your convenience. According to our typography research: Line height (in pixels) ÷ body text font size (in pixels) = 1.48. 1.5 is commonly recommended in classic typography books, so our study confirms this rule of thumb. Very few sites use anything less than this. And the number of websites above 1.48 decreases as you move away from this value. Line length (in pixels) ÷ line height (in pixels) = 27.8. The average line length is 538.64 pixels (excluding margins and padding), which is quite large considering that many websites still have body text with a font size of 12 to 13 pixels. Paragraph spacing (in pixels) ÷ line height (in pixels) = 0.754. It turns out that paragraph spacing (that is, the distance between the last line of one paragraph and the first line of the next) is rarely equal to leading (which would be the main characteristic of ideal vertical rhythm). Most often, the spacing between paragraphs is only 75% of the paragraph leading. The reason may be that the driving part usually includes the space occupied by the triggers; and since most symbols do not have bottom elements, additional empty space is created below the line. The optimal number of characters per line is from 55 to 75. According to classic typography books, the optimal number of characters per line is between 55 and 75, but in practice, 75 to 85 characters per line is more popular. According to our blog design research (no longer online):
Layouts are typically fixed-width (pixel-based) (92%) and typically centered (94%). Fixed layout widths range from 951 to 1000 pixels (56%). The home page contains excerpts of 10 to 20 posts (62%). 58% of a website's overall layout is used to display core content. According to our web form design research: The registration link is called "register" (40%) and is located in the upper right corner. Subscription forms have a simple layout to avoid distracting users (61%). Input field headings are in bold (62%) and fields are spaced more vertically than horizontally (86%). Designers typically include a few required fields and a few optional fields. Email confirmation is not given (82%) but password confirmation is (72%). The Submit button is aligned left (56%) or centered (26%). According to our portfolio design research: 89% of the layouts are horizontally centered and most of them have a large horizontal navigation menu. 47.2% of portfolios have a customer page, and 67.2% have some form of standalone service pages. 63.6% have a detailed page for each project, including case studies, testimonials, slideshows with screenshots, drafts and sketches. Contact pages contain driving directions, phone number, email address, postal address, vCard and online form, |
Category: Design |
Views: 52 |
Added by: admin
| Tags: |
Total comments: 0 | |