Heuristic Techniques: Web Design on the “Edge of Mind”

Heuristics. What the heck is that, you will ask? Imagine, you need to solve the problem that nobody has yet solved. Where to start from? Heuristics helps to answer this difficult question. Heuristic techniques are some kind of recommendations that will help you to get a solution.

While browsing the web you can run across websites that where created with no design taste at all. This is because today every Internet-friendly user can create website on a free hosting. Some of these miraculous WEB-sculptors would do well to read following list of heuristic techniques. By the way, they will be helpful not only for web designers, but also for everyone who works with Photoshop.

Generally, there are way more techniques than the number we've listed in this article, we've picked those that can be applied by WEB-designers, artists, etc.

Image Credit: "Businessman photo" from Shutterstock

One of the most cited books on HCI are ten heuristics rules of an American expert in the field of UI design Jakob Nielsen. He developed those rules in cooperation with other researcher - Rolf Molich. These are the main commandments any developer of computer interfaces should follow i.e. these are minimum criteria every interface should correspond.

Visibility of the System (The Rule of Feedback)

System (in this case - a computer program) should inform user of the status of its work, by appropriate ways and in a reasonable time. In considering the rules must take into account several aspects, they follow.

User awareness

User must be aware of the current status of the program - for example, how much time elapsed from the start of the process of copying files, when encoding audio CD-ROM into MP3 will finish, etc. Additionally, user must see what his actions resulted into: data entry, pressing, etc.

Means of providing feedback

The choice of specific means of feedback depends on the type of information you need to convey to the user, and the type of action that causes the need for feedback:

• Text messages about critical errors;
• Audible alarm.

Windows Error sound evokes goosebumps:)

Time interval of warning

Time interval when user is informed about the response to his action or event, should be minimal. This is important because of the presence or absence of the user information about the current state of the system determines its next steps. If user was not warned of unsuccessful operation following actions may cause new issues.

System and real world equality

The system should speak in user's language. Not only his native language which is very important, but in the concepts that are familiar to each and every user in the real world, to those he got accustomed to. What’s more presentation of information and objects in a program should be organized in a natural and logical order:

• Do not use specialized terms;
• Create interfaces that mimic real-world objects.

Watches, calculators, CD players, notebooks - the majority of software that has these features, look almost exactly the same as their physical counterparts. This notion got the name skeuomorphism, check out one of our blog posts dedicated to this theme.

User’s freedom of action

User needs to have the control over the system and ability to change current state of the program. Users make mistaken actions (Ex. accidentally pressed button or mouse miss-click), that’s why user need to “have an exit” from the current situation, clearly defined in the program.

• “Cancel” button or corresponding function of the “Escape” key are the must-have.

Key “Escape” works in Adobe Photoshop, allowing you to interrupt the download of a large file, or perform a complex filter, and many other functions.

Consistency and standards

Consistency means using the same means to express same resources and perform actions that have almost the same nature. Consistency in the interface design should be kept everywhere. Consistency - one of the most important rules of designing user interfaces. A consistent interface is intuitive and very easy to learn, because when facing it user “gets some surprises”, and even those parts of the interface that are visible for the first time, seemed be really understandable. If the program responds differently, generally it becomes quite opposite to what it’s supposed to be.

Prevention of errors

With reference to the subject of interface design of computer programs, the principle of error prevention means: "The design, which alerts you of possible issues is much better than a good bug report."

Interface that prevents errors and related problems figuratively is referred to as a "helpful" one. The program as if takes care of user and is always ready to offer assistance or give a hint.

Understanding is better than memorizing

When designing the interface all the objects, functions, activities need to be created visible and easily accessible for the user. Minimize memorizing - you should not make your user memorize some info to use it elsewhere. Any time, user should understand clearly what to do at a specific moment.

In a good interface, “how to’s” are always visible and ready to be referred to any time when they are required.

Flexibility and efficiency

It’s quite natural since the program should solve the problem which user is working at. However, when designing the interface developer faces following problem: interface should be equally comfortable for both noobs and experienced users. Keep in mind: consumers have various requirements towards the program and different “aggressiveness” of working. If you make simple interface with minimum amount of options, more experienced users will not be able to use the program efficiently.

Solution: Keyboard shortcuts, you can use to quickly access frequently-running program functions, including opening and saving files.

Designation of “hot keys” should be intuitive; and have those meanings people got used during the decades of work.

Aesthetic and minimalist design

To put it simply, this rule means: "Nothing excessive". No need to clutter interface with elements that are irrelevant and used less frequently. The fact that each element, whether button or a text label necessarily diverts part of user's attention. This can lead to lessening of perception of important interface elements due to less important ones.

***

These were the most heuristic principles of interface perception. Now let’s have a look at the elements that are of a great importance for designers and exactly for such tasks like: designing logo, navigation, website illustration, banner or intro video.

Transformation of forms:

• Use a circular, spiral, tree-like, spherical or other compact form.
• Make a hole in the object, or the cavity.
• Check that the shape of the object corresponds the laws of symmetry. Move from symmetric to asymmetric shape.
• Switch from straight pieces of flat surfaces, cubic and polyhedral forms to curved, spherical and streamlined.
• Perform an object in the form of another object, animal, plant, etc.
• Use different types of symmetry/asymmetry, dynamic and static properties of the form, rhythm (alternating identical and similar items), the nuances and contrast.

Transformation in the space

• Change traditional orientation of an object in space: change horizontal position to vertical or inclined, turn an object upside down, turn it by rotating;
• Use the "empty space" between the elements of an object. Pass one element through the cavity in another one;
• Combine diverse objects by placing one inside other like stacking dolls;
• Implement or pair objects on several surfaces;
• Divide bulky of non- bulky parts.

Transformation of motion and force

• Change the direction of rotation;
• Replace pulsion movement with rotational;
• Change the direction of movement;
• Replace traditional complex trajectory with moving by a line or circle;
• Divide an object into elements that can move relatively to each other. Make moving parts static, and set in motion static ones.

The transformation of the material and substance

• Give some element or surfaces a porous texture. Fill the pores with some color;
• Instead of a rigid three-dimensional structures use flexible membranes;
• Change the physical state of matter (make something soft look hard and on the contrary);
• Replace the objects of their optical copies (images), zoom out objects. Go from visible optical copies to infrared, ultraviolet, and other images.

Transformation by analogy

• Use natural principle of repetition of similar elements (honeycomb cells, leaves, crystals, etc.);
• Use as a prototype of the desired solution inanimate object or wildlife;
• Apply the principle of imitation;
• Use empathy: imagine you’re sought-for object, using your senses to find the most appropriate solution;
• Use children's toys for prototypes.

***

As you can see, everything is quite simple and logical. By learning these practical heuristic ways you'll be able to change your designs, seemingly for the better.