User Interface Design Heuristics

Discussing user interface principles, designs, platform approach, framework, etc. could be mean many thousands of pages, blog entries and hours of intensive discussions with different opinions between designers, developers, site owners and the end-user. But what’s important is to perhaps go back to basics and consider at least that the page or web site you’re designing is for the visitor who wants a great experience and feels provoked to participate, and to stay involved.

User-interface (UI)
Regardless of how many pages we write about UI design, there are a few general principles (heuristics) we all share.

Don’t confuse design with user-interface. Yes, aesthetics is design, but design (as in coloring within the lines) is secondary to the user-interface design; Such as minimalist design. Blocks should not hold information that is rarely needed or even relevant. Everything that is basically additional information falls outside the scope of minimalistic and aesthetic design.

In the fast lane. The visitor shouldn’t be made aware of the complexity behind the rendered page’s simplicity. Accelerate the experience by allowing visitors to access frequent actions. If it is faster to not search for your options, you’ve accelerated the interaction on a page. Use progressive-enhancements to compliment core-engine functionality to accelerate into over-drive.

Standards & Consistency. Follow platform conventions to prevent your visitors having to learn and remember words and actions described differently but meaning the same thing.

English M*F*, do you speak it? So stop talking developer to your visitors. They’re people who expect natural language and you should speak their language. Logical order, concepts, phrasing and notices should follow real-world conventions.

It’s “user => system”, and not “system => user”. Inform the visitor about what’s happening. Let them know visually what the status of the system is within reasonable time. Be it their current (in-)action or response state.

Freedom to navigate. Your visitors click on everything, sometimes not intentionally. Mistakes that need an exit strategy. Make sure there’s a dialogue giving them the freedom to undo an action, navigate away, or return to parent state. Give the control in the hands of the user.

360-awareness. The visitor of a page should not have to strain their brain trying to navigate around a design from actions, options and states. Lower this memory footprint as much as possible by making sure information (objects, options, content) is moved along from one part of a state to another. Provide system instructions, and make them visible.

Error handling. First, of course, is to avoid error states by carefully designing the core-engine that makes up the product. It’s impossible to catch all exceptions and situations, so prepare for unexpected errors. Design around the error by presenting it in natural language (any unique codes etc should be hidden from the end-user). Clearly describe the issue and suggest a solution in a constructive manner.

Document everything, but avoid having to document everything. I always say “If your users require a help page, you have a todo list for version 2.” The UI should be natural and logical, help documentation shouldn’t be needed. But hard to avoid and should always at least be made. Make sure documentation has a glossary, definition explanations, easy step by step instructions for core-functionality and isn’t too much to read. Remember my comment about logical approach and use of natural language.

Okay, this is a great start but I could go on for hours. Search the web for terms like: “Web usability guidelines”, and “Web user experience”, “Navigation and information architecture”, “minimalistic design”, “semantic web design”, etc.

There are thousands of guidelines, resources, opinions and checklists. But understanding the basics of UX/UI/PE means understanding how you should develop your mobile device app, web app, SaaS, stand alone program, etc. while keeping in mind the visitor of the site, the user of a program. Understand what it means to work on the user experience, interface, the flow, architecture, handling feedback, documentation, a/b testing, building for user loyalty through enticing them to return by adding value to the experience. Learn what it means to code for ‘grabbing their attention’, extending with innovation, when to apply third party trends, and mixing design with structure, with architecture, and usability.

If you explore, you build a product aimed to be a better experience. Your users will explore and are provoked to participate, provide feedback, and feel involved.