Principle of UI Design

did some research on the principles of UI design for desktop applications in terms of the layout, visual design and user experience.

From this website: http://msdn.microsoft.com/en-us/library/aa511279#sizingspacing , it talks about the important things to design a window applications. Here I will be listing down the important elements/points that can be applied into my interface design later.

Design concepts

Visual hierarchy

A window or page has a clear visual hierarchy when its appearance indicates the relationship and priority of its elements. Without a visual hierarchy, users would have to figure out these relationships and priorities themselves.

Visual hierarchy is achieved by skillfully combining the following attributes:

• Focus. The layout indicates where users need to look first.
• Flow. The eye flows smoothly and naturally by a clear path through the surface, finding user interface (UI) elements in the order appropriate for their use.
• Grouping. Logically related UI elements have a clear visual relationship. Related items are grouped together; unrelated items are separate.
• Emphasis. UI elements are emphasized based on their relative importance.
• Alignment. The UI elements have coordinated placement, so they are easy to scan and appear orderly.

Additionally, effective layout has these attributes:

• Device independence. The layout appears as intended regardless of the font typeface or size, dots per inch (dpi), display, or graphic adaptor.
• Easy to scan. Users can find the content they are looking for at a glance.
• Efficiency. UI elements that are large need to be large, and elements that are small work well small.
• Resizability. If helpful, a window is resizable and its content layout is effective no matter how large or small the surface is.
• Balance. The content appears evenly distributed across the surface.
• Visual simplicity. The perception that a layout is not more complicated than it needs to be. Users don't feel overwhelmed by the layout's appearance.
• Consistency. Similar windows or pages use a similar layout, so users always feel oriented.

A design model for reading

Users choose what they read by the content's appearance and organization. 

• People read in a left-to-right, top-to-bottom order (in Western cultures).
• There are two modes of reading: immersive reading and scanning. The goal of immersive reading is comprehension.

• When using software, users aren't immersed in the UI itself but in their work. Consequently, users usually don't read UI text—they scan it. They then read bits of text comprehensively only when they believe they need to.
• Users tend to skip over navigation panes on the left or right side of a page. Users recognize that they are there, but look at navigation panes only when they want to navigate.
• Users tend to skip over large blocks of unformatted text without reading them at all.
• All things being equal, users first look in the upper left corner of a window, scan across the page, and end their scan in the lower right corner. They tend to ignore the lower left corner.
• But in interactive UI, not all things are equal so different UI elements receive different levels of attention. Users tend to look at interactive controls—especially controls in the upper left and center of the window—and prominent text first.

Flow

A layout has flow when users are guided smoothly and naturally by a clear path through its surface, finding UI elements in the order appropriate for their use. Once users identify the focal point, they need to determine how to complete the task. The placement of the UI elements conveys their relationship and should mirror the steps to perform the task. Typically, this means the task's steps should flow naturally in a left-to-right, top-to-bottom order (in Western cultures).

You know a layout has good flow when:

• The placement of the UI elements mirrors the steps users need to perform the task.
• UI elements that initiate a task are in the upper-left corner or upper-center.
• UI elements that complete a task are in the lower-right corner.
• Related UI elements are together; unrelated elements are separate.
• Required steps are in the main flow.
• Optional steps are outside the main flow, possibly de-emphasized by using a suitable background or progressive disclosure.
• Frequently used elements appear before infrequently used elements in the scan path.
• Users always know what to do next. There are no unexpected jumps or breaks in the task flow.

Balance

A window or page has balance when its content appears evenly distributed across its surface. If the surface physically had the same weighting as it has visually, a balanced layout wouldn't tip over to one side.

The most common balance problem is having too much content on the left side of a window or page. You can create balance in the following ways:

• Using larger margins on the left side than the right.
• Placing UI elements used to complete a task on the right.
• Placing UI elements used throughout the task in the center.
• Lengthening resizable or multi-line controls.
• Using center-alignment strategically.

Visual simplicity

Visual simplicity is the perception that a layout is not more complicated than it needs to be.

You know a layout has visual simplicity when it:

• Eliminates unnecessary layers of window chrome.
• Presents the content using at most seven easily identifiable groups.
• Uses lightweight grouping, such as layout and separators instead of group boxes.
• Uses lightweight controls, such as links instead of command buttons for secondary commands, and drop-down lists instead of lists for choices.
• Reduces the number of vertical and horizontal alignment grid lines.
• Reduces the number of control sizes, by, for example, using only one or two command button widths on a surface.
• Uses progressive disclosure to hide UI elements until they are needed.
• Uses sufficient space so that the window or page doesn't feel cramped.
• Sizes windows and controls appropriately to eliminate unnecessary scrolling.
• Uses a single font with a small number of sizes and text colors.

As a general rule, if a layout element can be eliminated without harming the effectiveness of the UI, it probably should be.

=======================================================

Beside from the website, I have also found some principles of design desktop software in a book called "About Face", by Alan Cooper, Robert Reimann, and David Cronin.

In the book, the authors mentioned that desktop applications fit into four categories of posture which are sovereign, transient and daemonic. For my case, the application that I will be designing is a sovereign posture because it is characteristically used for long, continuous stretches of time as the users of my application will be navigating the application for a long time when browsing through the photos.








There are few principles of sovereign posture design:

• optimise sovereign applications for full-screen use.
• should feature a conservative visual style. (not complicated visual, use minimal visual of style, toolbars and controls can be smaller than normal, keep the color palette narrow and conservative, avoid using big colorful controls.)
• should exploit rich input (keywords input, select, search, etc...)
• maximise document views within sovereign applications. 

========================================================


So, I have learned that to design a desktop application, it should apply appropriate flow of reading such as top to bottom and left to right in the content. The important content of the application should be placed in the middle of the window which uses up most of the space so that it is able to catch user's attention. put the important navigation buttons/elements on the top of window, upper left, or bottom right to avoid users miss see it as these are the placement that users will scan through while browsing/navigating an interface according to the source discussed above. 

The overall interface should be simple and avoid using unnecessary elements/graphics/design that might misleading or distract the users from doing a task. Keep interface simple, plain but aesthetically eye pleasing.