3 UI Design Principles

I have a fun one to talk about today, that being user interface design principles. I’ve talked about UX heavily, and in doing so, I’ve touched on UI design here and there, and if you were to read the omnibus of my UX writing here, you’d be able to assemble a fairly good set of design principles from it. But, let’s actually just talk about it specifically, here and now.

First of all, UX and UI are not synonymous, and I want to point this out right now. User interface design principles are not a UX tenet set, but rather guidelines for something that is about 40% of UX, the rest being flow, logistics, and a number of other things.

I am going to talk about three basic principles here, but since mobile, tablet and PC designs have some different facets and guidelines, there are going to be three sub-points to each, to clarify specifics to each platform.

#1 – Accessibility
Mobile: For mobile, accessibility is a hard obstacle to overcome. Mobile devices usually have a windows interface, and as a result, multi-window designs, or MDI structures aren’t really possible. Therefore, centralism for your application, accessing features, subsets of functionality and the like, almost always has to be a separate “page” loaded from a quick call button on the side or bottom dock. The trick here is to make sure this dock is easy to find and access, without it crowding workspace.

Tablet: Tablet is similar to mobile, but will provide some larger screen area, which means that the “home” button can actually be part of the form, and not have to require accessing this dock.

PC: It doesn’t really matter what OS you’re targeting, if you’re targeting specific ones. With PC, your centrality needs to focus around toolbars or drop down menus at the top. However, there’s something to be said for using MDI (multiple document interface) solutions for this, in a lot of more complex software. Avoid anything like Microsoft’s “ribbon” control, as it’s actually kind of awful, and if your software is all about big viewing area, minimal stacks of toolbars is recommended.

#2 – Visually Simple Elegance
Mobile: With mobile, simple elegant aesthetics is all about use of colors and outlines to maintain visibility and visual appeal without making the controls huge or overly-shaded. Vector-minded graphics are your best bet.

Tablet: With tablets, you follow mobile’s lead, but since you do have more space, you can use some graphics, gradients and rounded shapes, for a slightly more “deep” appearance, but avoid bitmapped skins.

PC: With PC, feel free to use skins or custom controls for internal controls, as long as it doesn’t slow the interface down. However, avoid using this kind of technique for the primary form object itself, because this actually looks suspicious to some people (programmers mainly), and can make it difficult to drag or maximize the form.

#3 – Consistency and Spacing
Mobile: Consistency in mobile is all about alignment constants, because repeated minor difference “window” pages having slight proportional differences is less noticeable, and a three pixel variance is just going to happen. Make sure controls don’t crowd, because touchscreen is still an infant technology and therefore is not as precise as people expect it to be.

Tablet: With tablets, treat it like web design. Space them at constant margins, use split containers or alignment fields, and have space for controls to react well to taps, swipes and drags. Maintain sizing and lettering consistency.

PC: In PC, it’s easy to get buttons to vary in size, as well as wording schemes and hotkey themes, so you need to watch these with some care. Make sure button placement, alignment, size and wording is consistent, and make sure that, if possible, there’s not a lot of white space.

These are the user interface design principles I would cite first, if I had limited room to talk about the subject. But, there have been tomes written on interface design, more come out every year, so this is far from all-inclusive and final.