Please, enter a valid email!

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.


Don’t miss out these all-time favourites

  1. The best hosting for a WordPress website. Tap our link to get the best price on the market with 30% off. If Bluehost didn’t impress you check out other alternatives.
  2. Website Installation service - to get your template up and running within just 6 hours without hassle. No minute is wasted and the work is going.
  3. ONE Membership - to download unlimited number of WordPress themes, plugins, ppt and other products within one license. Since bigger is always better.
  4. Ready-to-Use Website service is the ultimate solution that includes full template installation & configuration, content integration, implementation of must-have plugins, security features and Extended on-page SEO optimization. A team of developers will do all the work for you.
  5. Must-Have WordPress Plugins - to get the most essential plugins for your website in one bundle. All plugins will be installed, activated and checked for proper functioning. 
  6. Finest Stock Images for Websites - to create amazing visuals. You’ll get access to Depositphotos.com to choose 15 images with unlimited topic and size selection.
  7. SSL Certificate Creation service - to get the absolute trust of your website visitors. Comodo Certificate is the most reliable https protocol that ensures users data safety against cyber attacks. 
  8. Website speed optimization service - to increase UX of your site and get a better Google PageSpeed score.


Alex Bulat

Writing a blog post or building a micro niche WordPress website is something Alex can do bare-handed. You're welcome to contact him via Telegram, Facebook, or LinkedIn.

Get more to your email

Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.

From was successfully send!
Server error. Please, try again later.

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

  1. AquilaHughes says:

    You make a lot of effective arguments within this blog post however its
    difficult for me personally to concentrate on this great article because
    of the broken layout.

    • alexbulat says:

      Hey @aquilahughes:disqus! You said that the layout breaks. Can you please attach the screenshot, for us to help you fix this “inconvenience”. Thank you in advance.

  2. Ester Andr says:

    thank you. great as always! 🙂

  3. Daniel B. says:

    its interesting that a few months ago all articles I received were (to be honest) were related to your products and just advertising… nowadays I really expect when the next edition arrives, since your articles have improved amazingly, I love them all and I highly appreciate all the tips you provide, please keep the good work, thank you.

  4. Shabaz says:

    Very informative post!!!
    Thank You so much..

  5. Upendra Watwe says:

    intersting article, though the later part about transformation was a curve ball (in baseball parlance)/ or a bouncer in cricket lingo.. Maybe I was reading the article only with web and software design angle. Would love to read more such articles and also possibly take your advice for my software development efforts.

Leave a Reply

Your email address will not be published. Required fields are marked *