10 Principles Of Good Website Design — Smashing Magazine
Bạn đang xem: 10 principles of good website design — smashing magazine
Usability and the utility, not the visual design, determine the success or failure of a trang web. Since the visitor of the page is the only person who clicks the mouse và therefore decides everything, user-centric design has become a standard approach for successful and profit-oriented website kiến thiết. After all, if users can’t use a feature, it might as well not exist.
We aren’t going lớn discuss the kiến thiết implementation details (e.g. where the search box should be placed) as it has already been done in a number of articles; instead we focus on the main principles, heuristics and approaches for effective sầu website design — approaches which, used properly, can lead to more sophisticated thiết kế decisions and simplify the process of perceiving presented information.
Please notice that you might be interested in the usability-related articles we’ve sầu published before:
Principles Of Good Website Design And Effective sầu Web Design Guidelines
In order khổng lồ use the principles properly we first need lớn understvà how users interact with websites, how they think and what are the basic patterns of users" behavior.
How vì chưng users think?
Basically, users’ habits on the Web aren’t that different from customers’ habits in a store. Visitors glance at each new page, scan some of the text, and click on the first links that catches their interest or vaguely resembles the thing they’re looking for. In fact, there are large parts of the page they don’t even look at.
Most users tìm kiếm for something interesting (or useful) & clickable; as soon as some promising candidates are found, users cliông chồng. If the new page doesn’t meet users’ expectations, the Baông chồng button is clicked & the tìm kiếm process is continued.Users appreciate chất lượng và credibility. If a page provides users with high-quality nội dung, they are willing to compromise the content with advertisements và the thiết kế of the site. This is the reason why not-that-well-designed websites with high-chất lượng nội dung gain a lot of traffic over years. Content is more important than the kiến thiết which supports it.Users don’t read, they scan. Analyzing a web-page, users tìm kiếm for some fixed points or anchors which would guide them through the content of the page.
Users don’t read, they scan. Notice how “hot” areas abrupt in the middle of sentences. This is typical for the scanning process.Web users are impatient and insist on instant gratification. Very simple principle: If a web-site isn’t able lớn meet users’ expectations, then designer failed khổng lồ get his job done properly và the company loses money. The higher is the cognitive load & the less intuitive is the navigation, the more willing are users khổng lồ leave the web-site và search for alternatives.
1. Don’t make users think
According to Krug’s first law of usability, the web-page should be obvious & self-explanatory. When you’re creating a site, your job is lớn get rid of the question marks — the decisions users need lớn make consciously, considering pros, cons & alternatives.
If the navigation & site architecture aren’t intuitive sầu, the number of question marks grows & makes it harder for users to comprehover how the system works & how lớn get from point A to point B. A clear structure, moderate visual clues and easily recognizable liên kết can help users lớn find their path to lớn their ayên ổn.
Let’s take a look at an example. Beyondis.teo.uk claims to be “beyond channels, beyond products, beyond distribution”. What does it mean? Since users tover lớn explore web-sites according to lớn the “F”-pattern, these three statements would be the first elements users will see on the page once it is loaded.
Although the design itself is simple và intuitive, to understvà what the page is about the user needs lớn search for the answer. This is what an unnecessary question mark is. It’s designer’s task to lớn make sure that the number of question marks is close to lớn 0. The visual explanation is placed on the right hvà side. Just exchanging both blocks would increase usability.
ExpressionEngine uses the very same structure lượt thích Beyondis, but avoids unnecessary question marks. Furthermore, the slogan becomes functional as users are provided with options lớn try the service & download the không tính phí version.
By reducing cognitive sầu load you make it easier for visitors to grasp the idea behind the system. Once you’ve achieved this, you can communicate why the system is useful và how users can benefit from it. People won’t use your web site if they can’t find their way around it.
2. Don’t squander users’ patience
In every project when you are going to offer your visitors some service or tool, try khổng lồ keep your user requirements minimal. The less action is required from users to lớn test a service, the more likely a random visitor is khổng lồ actually try it out. First-time visitors are willing to lớn play with the service, not filling long web forms for an tài khoản they might never use in the future. Let users explore the site và discover your services without forcing them into lớn sharing private data. It’s not reasonable to force users to enter an email address to lớn chạy thử the feature.
As Ryan Singer — the developer of the 37Signals team — states, users would probably be eager lớn provide an tin nhắn address if they were asked for it after they’d seen the feature work, so they had some idea of what they were going khổng lồ get in return.
Stikkit is a perfect example for a user-friendly service which requires almost nothing from the visitor which is unobtrusive sầu & comforting. And that’s what you want your users to lớn feel on your website site.
Apparently, Mite requires more. However the registration can be done in less than 30 seconds — as the size has horizontal orientation, the user doesn’t even need to scroll the page.
Ideally remove sầu all barriers, don’t require subscriptions or registrations first. A user registration alone is enough of an impediment to lớn user navigation to cut down on incoming traffic.
3. Manage khổng lồ focus users’ attention
As web-sites provide both static and dynamic content, some aspects of the user interface attract attention more than others vày. Obviously, images are more eye-catching than the text — just as the sentences marked as bold are more attractive sầu than plain text.
The human eye is a highly non-linear device, & web-users can instantly recognize edges, patterns and motions. This is why video-based advertisements are extremely annoying & distracting, but from the sale perspective they perfectly bởi vì the job of capturing users’ attention.
Xem thêm: Tìm Kiếm Trên Google Bằng Hình Ảnh, 6 Cách Tìm Kiếm Google Hình Ảnh Trên Điện Thoại
Humanized perfectly uses the principle of focus. The only element which is directly visible khổng lồ the users is the word “free” which works attractive sầu và appealing, but still calm và purely informative sầu. Subtle hints provide users with enough information of how khổng lồ find more about the “free” hàng hóa.
Focusing users’ attention to specific areas of the site with a moderate use of visual elements can help your visitors to lớn get from point A to lớn point B without thinking of how it actually is supposed lớn be done. The less question marks visitors have sầu, the better sense of orientation they have sầu and the more trust they can develop towards the company the site represents. In other words: the less thinking needs to lớn happen behind the scenes, the better is the user experience which is the aim of usability in the first place.
4. Strive for feature exposure
Modern web designs are usually criticized due lớn their approach of guiding users with visually appealing 1-2-3-done-steps, large buttons with visual effects etc. But from the kiến thiết perspective sầu these elements actually aren’t a bad thing. On the contrary, such guidelines are extremely effective as they lead the visitors through the site content in a very simple and user-friendly way.
Dibusoft combines visual appeal with clear site structure. The site has 9 main navigation options which are visible at the first glance. The choice of colors might be too light, though.
Letting the user see clearly what functions are available is a fundamental principle of successful user interface design. It doesn’t really matter how this is achieved. What matters is that the content is well-understood và visitors feel comfortable with the way they interact with the system.
5. Make use of effective sầu writing
As the Web is different from print, it’s necessary to lớn adjust the writing style khổng lồ users’ preferences and browsing habits. Promotional writing won’t be read. Long text blocks without images and keyword marked in bold or italics will be skipped. Exaggerated language will be ignored.
Talk business. Avoid đáng yêu or clever names, marketing-induced names, company-specific names, & unfamiliar technical names. For instance, if you describe a service and want users khổng lồ create an account, “sign up” is better than “start now!” which is again better than “explore our services”.
Eleven2.com gets directly khổng lồ the point. No xinh đẹp words, no exaggerated statements. Instead a price: just what visitors are looking for.
An optimal solution for effective writing is to
use short & concise phrases (come to lớn the point as quickly as possible),use scannable layout (categorize the nội dung, use multiple heading levels, use visual elements và bulleted lists which break the flow of uniform text blocks),use plain và objective language (a promotion doesn’t need lớn sound like advertisement; give sầu your users some reasonable & objective sầu reason why they should use your service or stay on your web-site)6. Strive for simplicity
The “keep it simple”-principle (KIS) should be the primary goal of site design. Users are rarely on a site lớn enjoy the design; furthermore, in most cases they are looking for the information despite the kiến thiết. Strive sầu for simplithành phố instead of complexity.
From the visitors’ point of view, the best site kiến thiết is a pure text, without any advertisements or further nội dung blocks matching exactly the query visitors used or the content they’ve sầu been looking for. This is one of the reasons why a user-friendly print-version of website pages is essential for good user experience.
Finch clearly presents the information about the site và gives visitors a choice of options without overcrowding them with unnecessary content.
7. Don’t be afraid of the trắng space
Actually it’s really hard lớn overestimate the importance of white space. Not only does it help to lớn reduce the cognitive load for the visitors, but it makes it possible to perceive sầu the information presented on the screen. When a new visitor approaches a thiết kế layout, the first thing he/she tries to lớn vị is to scan the page và divide the nội dung area inlớn digestible pieces of information.
Complex structures are harder to lớn read, scan, analyze & work with. If you have the choice between separating two design segments by a visible line or by some whitespace, it’s usually better lớn use the whitespace solution. Hierarchical structures reduce complexity (Simon’s Law): the better you manage to provide users with a sense of visual hierarchy, the easier your nội dung will be to lớn perceive sầu.
White space is good. Cameron.io uses Trắng space as a primary kiến thiết element. The result is a well-scannable layout which gives the content a dominating position it deserves.
8. Communicate effectively with a “visible language”
In his papers on effective sầu visual communication, Aaron Marcus states three fundamental principles involved in the use of the so-called “visible language” — the content users see on a screen.
Organize: provide the user with a clear & consistent conceptual structure. Consistency, screen layout, relationships và navigability are important concepts of organization. The same conventions và rules should be applied lớn all elements.Economize: vị the most with the least amount of cues and visual elements. Four major points khổng lồ be considered: simpliđô thị, clarity, distinctiveness, và emphasis. Simplicity includes only the elements that are most important for communication. Clarity: all components should be designed so their meaning is not ambiguous. Distinctiveness: the important properties of the necessary elements should be distinguishable. Emphasis: the most important elements should be easily perceived.Communicate: match the presentation to lớn the capabilities of the user. The user interface must keep in balance legibility, readability, typography, symbolism, multiple views, and color or texture in order to lớn communicate successfully. Use max. 3 typefaces in a maximum of 3 point sizes — a maximum of 18 words or 50-80 characters per line of text.9. Conventions are our friends
Conventional design of site elements doesn’t result in a boring website site. In fact, conventions are very useful as they reduce the learning curve sầu, the need to figure out how things work. For instance, it would be a usability nightmare if all web-sites had different visual presentation of RSS-feeds. That’s not that different from our regular life where we tkết thúc to lớn get used to lớn basic principles of how we organize data (folders) or bởi vì shopping (placement of products).
With conventions you can gain users’ confidence, trust, reliability và prove sầu your credibility. Follow users’ expectations — underst& what they’re expecting from a site navigation, text structure, tìm kiếm placement etc.
A typical example from usability sessions is khổng lồ translate the page in Japanese (assuming your web users don’t know Japanese, e.g. with Babelfish) & provide your usability testers with a task to lớn find something in the page of different language. If conventions are well-applied, users will be able to achieve a not-too-specific objective, even if they can’t understand a word of it.
Steve Krug suggests that it’s better to lớn innovate only when you know you really have a better idea, but take advantages of conventions when you don’t.
10. Test early, kiểm tra often
This so-called TETO-principle should be applied to lớn every website kiến thiết project as usability tests often provide crucial insights into lớn significant problems & issues related lớn a given layout.
Test not too late, not too little & not for the wrong reasons. In the latter case it’s necessary lớn underst& that most design decisions are local; that means that you can’t universally answer whether some layout is better than the other one as you need lớn analyze it from a very specific point of view (considering requirements, stakeholders, budget etc.).
Some important points to lớn keep in mind:
according to Steve sầu Krug, testing one user is 100% better than testing none & testing one user early in the project is better than testing 50 near the over. Accoring to Boehm’s first law, errors are most frequent during requirements & kiến thiết activities & are the more expensive sầu the later they are removed.testing is an iterative process. That means that you kiến thiết something, kiểm tra it, fix it và then demo it again. There might be problems which haven’t been found during the first round as users were practically blocked by other problems.usability tests always produce useful results. Either you’ll be pointed lớn the problems you have sầu or you’ll be pointed to the absence of major design flaws which is in both cases a useful insight for your project.according to lớn Weinberg’s law, a developer is unsuited khổng lồ chạy thử his or her code. This holds for designers as well. After you’ve worked on a site for few weeks, you can’t observe it from a fresh perspective anymore. You know how it is built and therefore you know exactly how it works — you have the wisdom independent testers và visitors of your site wouldn’t have sầu.Xem thêm: Cách Dùng Seoquake Đơn Giản Và Hiệu Quả Cho Website, Cách Cài Đặt & Sử Dụng Seo Quake Hiệu Quả
Bottom line: if you want a great site, you’ve got khổng lồ test.
