Success or Failure in Syntactical Guidelines

Good Design

The BMW logo is an example of good design. For example, it is orderly in that every element is precisely placed such that it stands out, but supports hierarchy or grouping of the other elements. All of the elements are balanced left to right, up and down. The balance for the up/down comes from the white (or silver) BMW which has a lighter ‘weight’ than the empty black space on the reciprocal bottom. It is leveled because this logo feels stable from everything being left/right, top/bottom balanced; nothing is to an extreme. Finally, I think the grouping of the elements enhances this design as well. Finally I think that by grouping the white/blue elements in the center and surrounding it by black keeps what little dynamism there is, solidly in the middle of the logo, which keeps the viewers attention sin the middle of the logo, the eyes may wander out, but they get pulled back in right away.

Bad Design

Original - http://www.nyu.edu/classes/keefer/hell/plato.html

Background Removed

Basically, this design fails because your ability to perceive what is being said in the content, or find any pattern that belies a structural hierarchy, is supplanted by the background image. The background image prevents your visual systems from finding any kind of meaningful pattern beyond the bust of Plato.

However, even if you get rid of the background image, as I have done in the second example, the design still fails because there is no hierarchy to lend significance to any of the content. Without a hierarchical system for the elements everything on the page has the same weight. This means that visually, everything has the same importance, which in turn really means nothing on this page is important.

The easy fix for this would be to simply give the elements on the page balanced structure by simply grouping elements or by kind. For example titles should be bold, questions can be lists, etc… I mocked up a quick example of how to improve this design at least 10 fold by simply giving the elements hierarchy.

http://andrewsteinmetz.com/other/SFSU/DAI323/wk13/ . 

Movement / Motion

The primary problem with standard website navigation is that there is a user disconnect when transitioning from one page to the next. For example, in a typical situation, when you click on a navigation element, you are immediately moved from one place in virtual space to the next with no physical indicator explaining this to you. Just BAM! there you are. Some Web designers are trying to smooth the transition by offloading some of the perceptual work onto the human motion perception system. This is done by focusing the user’s attention on the transition, and relating it to normal motion, which helps the user to understand the change from one place to the next, much in the same way that you do when you walk from one room to the next. For example, the first screen cap below begins with the first page that you arrive at on the (demo) site. If we click on the “Portfolio” navigation element (1) you will run through a transition that leads you to page two. In the second screen you can see that the Portfolio page slides from the left side of the screen to the right side of the screen (2). This allows the user to understand their transition by using a standard motion that we are already adept at understanding, which in turn tells them they are leaving one page and arriving at the next. In the third screen, after the transition has completed, you are still being giving location information from a depth queue (3) in the form of a drop shadow that runs from the top of the page to the bottom about a quarter inch from the right side. This is an indication that you are looking at a different page by hinting that one page is on top of the other.

Another way that designers can move you through space is with a numbering system, much like what I’m using for this blog. For example, if we look at the first page of the instruction manual for Denon’s AVR-1910 surround receiver (1), we can see that they have created an ontological (hierarchical) system that guides us through the various functions that we may be interested in reading more about. By doing this, they have provided us with a logical structure through which we understand that if we are interested in Part Names, we need to move through the manual to the a designated place in the “space” of the manual. Now if we shift our attention to the Part Names and Functions page (2) you can see that each little thing on the face of the receiver has a corresponding number (2.2 & 2.3), which is accompanied by a brief description. Also note that they show you where you are in the manual (2.1). All of these system work naturally with our automatic cognitive processing relying on the actions of saccades and fixations to help our brain understand the boundaries of the manual’s space and how we move through it. Additionally as we turn the pages, there is a smooth cognitive transition that allows our brain to understand where we came from and how we arrived at the new place in the manual’s space.