Usability and the utility, is not the visual design, it determines the success or failure of a web-site. Since the visitor of the page is the only person who clicks the mouse and therefore decides everything, user-centric design has become a standard approach for successful and profit-oriented web design. After all, if users can’t use a feature, it might as well not exist. The use of typography, symbols, color, and other static and dynamic graphics are used to convey facts, concepts and emotions. This makes up an information-oriented, systematic graphic design which helps people understand complex information. Successful visual communication through information-oriented, systematic graphic design relies on some key principles of graphic design.
There are three factors that should be considered for the design of a successful user interface:
- Development factors
- Visability factors and
- Acceptance factors.
Development factors help by improving visual communication. These include: platform constraints, tool kits and component libraries, support for rapid prototyping, and customizability.
Visibility factors take into account human factors and express a strong visual identity. These include: human abilities, product identity, clear conceptual model, and multiple representations.
Included as acceptance factors are an installed base, corporate politics, international markets, and documentation and training.
In order to use the best principles properly we first need to understand how users might interact with websites, and how they think, what are the basic patterns of users’ behavior.
How do users think? Link
The basic habit of most users’ 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 link 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 search for something interesting (or useful) and clickable; as soon as some promising candidates are found, users click. If the new page doesn’t meet users’ expectations, the Back button is clicked and the search process is continued.
Users appreciate quality and credibility. If a page provides users with high-quality content, they are willing to compromise the content with advertisements and the design of the site. This is the reason why not-that-well-designed websites with high-quality content gain a lot of traffic over years. Content is more important than the design which supports it.
Users don’t read, they scan. Analyzing a web-page, users search for some fixed points or anchors which would guide them through the content of the page.
Web users are impatient and insist on instant gratification. Its a Very simple principle concept: If a web-site isn’t able to meet users’ expectations, then the designer has failed to get his job done properly and the company may lose money capitalized on the website. The higher is the cognitive load and the less intuitive is the navigation, the more willing are users to leave the web-site and search for alternatives. [JN / DWU]
Users don’t make optimal choices. Users don’t search for the quickest way to find the information they’re looking for. Neither do they scan webpage in a linear fashion, going sequentially from one site section to another one. Instead users satisfice; they choose the first reasonable option. As soon as they find a link that seems like it might lead to the goal, there is a very good chance that it will be immediately clicked. Optimizing is hard, and it takes a long time. Satisfying is more efficient.
Users follow their intuition.It is seen in most of the studied cases users muddle through instead of reading the information a designer has provided on the designs. According to Steve Krug, the basic reason for that is that users don’t care. “If we find something that works, we stick to it. It doesn’t matter to us if we understand how things work, as long as we can use them. If your audience is going to act like you’re designing billboard, then design great billboards.”
Users want to have control. Users always want to be able to control their browser and mostly rely on the consistent data presentation throughout the site. E.g. they don’t want new windows popping up unexpectedly and they want to be able to get back with a “Back”-button to the site they’ve been before: therefore it’s always a good practice to never open links in new browser windows.
1. Don’t make users think Link
According to Krug’s first law of usability, the web-page should be obvious and self-explanatory. When creating a new site, designer job is to get rid of the question marks — the decisions users need to make consciously, considering pros, cons and alternatives.
If the navigation and site architecture aren’t intuitive, the number of question marks grows and makes it harder for users to comprehend how the system works and how to get from point A to point B. A clear structure, moderate visual clues and easily recognizable links can help users to find their path to their aim.
Visible Language and clarity
Visible language refers to all of the graphical techniques used to communicate the message or context. These include:
Layout: formats, proportions, and grids; 2-D and 3-D organization
Typography: selection of typefaces and typesetting, including variable width and fixed width
Color and Texture: color, texture and light that convey complex information and pictoral reality
Imagery: signs, icons and symbols, from the photographically real to the abstract
Animation: a dynamic or kinetic display; very important for video-related imagery
Sequencing: the overall approach to visual storytelling
Sound: abstract, vocal, concrete, or musical cues
Visual identity: the additional, unique rules that lend overall consistency to a user interface. The overall decisions as to how the corporation or the product line expresses itself in visible language.
2. Don’t squander users’ patience Link
In every project when we are going to offer our visitors some service or tool, user requirements should be kept minimal. The less action is required from users to test a service, the more likely a random visitor is to actually try it out. First-time visitors are willing to play with the service, not filling long web forms for an account they might never use in the future. Let users explore the site and discover your services without forcing them into sharing private data. It’s not reasonable to force users to enter an email address to test the feature.
As Ryan Singer — the developer of the 37Signals team — states, users would probably be eager to provide an email address if they were asked for it after they’d seen the feature work, so they had some idea of what they were going to get in return.
3. Manage to focus users’ attention Link
As web-sites provide both static and dynamic content, some aspects of the UI(user interface) can attract attention more than others do. Obviously, images are more eye-catching than the text — just as the sentences marked as bold are more attractive than plain text.
The human eye is a highly non-linear device, and web-users can instantly recognize edges, patterns and motions. This is why video-based advertisements are extremely annoying and distracting, but from the marketing perspective they perfectly do the job of capturing users’ attention.
4. Strive for feature exposure Link
Modern web designs are usually criticized due to their approach of guiding users with visually appealing 1-2-3-done-steps, large buttons with visual effects etc. But from the design perspective 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.
5.Color Design Principles
The three basic principles can also be applied to color: color organization, color economy, and color communication. Color organization pertains to consistency of organization. Color should be used to group related items. A consistent color code should be applied to screen displays, documentation, and training materials. Similar colors should infer a similarity among objects. One needs to be complete and consistent when grouping objects by the same color. Once a color coding scheme has been established, the same colors should be used throughout the GUI and all related publications. The second principle of color, color economy, suggests using a maximum of 5+/-2 colors where the meaning must be remembered. The fundamental idea is to use color to augment black-and-white information, i.e. design the display to first work well in black-and-white. Color emphasis suggests using strong contrasts in value and chroma to draw the user’s attention to the most important information. Confusion can result if too many figures or background fields compete for the viewer’s attention. The hierarchy of highlighted, neutral, and low-lighted states for all areas of the visual display must be designed carefully to provide the maximum simplicity and clarity. Color communication deals with legibility, including using appropriate colors for the central and peripheral areas of the visual field. Color combinations influenced least by the relative area of each color should be used. Red or green should not be used in the periphery of the visual field, but in the center. If used in the periphery, you need a way to capture the attention of the viewer, size change or blinking for example. Blue, black, white, and yellow should be used near the periphery of the visual field, where the retina remains sensitive to these colors. If colors change in size in the imagery, the following should be considered: as color areas decrease in size, their value (lightness) and chroma will appear to change. Use colors that differ in both chroma and value. Avoid red/green, blue/yellow, green/blue, and red/blue combinations unless a special visual effect is needed. They can create vibrations, illusions of shadows, and afterimages. For dark viewing situations, light text, then lines, and small shapes on medium to dark backgrounds should be used in slide presentations, workstations and videos. For light-viewing situations, use dark (blue or black) text, thin lines and small shapes on light background. These viewing situations include overhead transparencies and paper.
Four major points to be considered: simplicity, clarity, distinctiveness, and emphasis.
Simplicity includes only the elements that are most important for communication. It should also be as unobstrusive as possible.
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. Non-critical elements should be de-emphasized and clutter should be minimized so as not to hide critical information.
7. Make use of effective writing Link
As the Web is different from print, it’s necessary to adjust the writing style to users’ preferences and browsing habits. Promotional writing won’t be read. Long text blocks without images and keywords marked in bold or italics will be skipped. Exaggerated language will be ignored.
Talk business. Avoid cute or clever names, marketing-induced names, company-specific names, and unfamiliar technical names. For instance, if you describe a service and want users to create an account, “sign up” is better than “start now!” which is again better than “explore our services”.
8. Strive for simplicity Link
its always good practice while designing to follow the best principle of designing “keep it simple”-principle (KIS) should be the primary goal of site design. Users are rarely on a site to enjoy the design; furthermore, in most cases they are looking for the information despite the design. Strive for simplicity instead of complexity.
From the visitors’ point of view, the best site design is a pure text, without any advertisements or further content blocks matching exactly the query visitors used or the content they’ve been looking for. This is one of the reasons why a user-friendly print-version of web pages is essential for good user experience.
9. Don’t be afraid of the white space Link
Actually it’s really hard to overestimate the importance of white space. Not only does it help to reduce the cognitive load for the visitors, but it makes it possible to perceive the information presented on the screen. When a new visitor approaches a design layout, the first thing he/she tries to do is to scan the page and divide the content area into digestible pieces of information.
Complex structures are harder to read, scan, analyze and work with. If you have the choice between separating two design segments by a visible line or by some whitespace, it’s usually better to 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 content will be to perceive.
10. Conventions are our friends Link
Conventional design of site elements doesn’t result in a boring web site. In fact, convention designs and conventions are very useful as they reduce the learning curve, 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 tend to get used to basic principles of how we organize data (folders) or do shopping (placement of products).
With conventions its easy to gain users’ confidence, trust, reliability and prove credibility. Follow users’ expectations — understand what they’re expecting from a site navigation, text structure, search placement etc.
11. Testing and seting benchmark, test often Link
This so-called TETO-principle should be applied to every web design project as usability tests often provide crucial insights into significant problems and issues related to a given layout.
Test not too late, not too little and not for the wrong reasons. In the latter case it’s necessary to understand 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 to analyze it from a very specific point of view (considering requirements, stakeholders, budget etc.).
Some important points to keep in mind:
according to Steve Krug, testing one user is 100% better than testing none and testing one user early in the project is better than testing 50 near the end. Accoring to Boehm’s first law, errors are most frequent during requirements and design activities and are the more expensive the later they are removed.
testing is an iterative process. That means that you design something, test it, fix it and then test 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 to the problems you have 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 Weinberg’s law, a developer is unsuited to test 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 and visitors of your site wouldn’t have.
Bottom line: TO MAKE A SITE a GREAT SITE, ONE GOT TO MAKE SURE IT IS TESTED AND DEPLOYED.