Tuesday, October 11, 2011

Week 9 Activity

Gestalt theory in visual screen design: a new look at an old subject.

  • Principle 1: Using a distillation of Gestalt laws will improve the visual aspect of your instructional media
  • Principle 2: Observance of the Rule of Thirds or Divine Proportion could offer as much aesthetic pleasantry without resorting to the Gestalt heavy handedness.
(For a half decent pictorial definition on what the Gestalt Principles are, look here.)

I've gone a bit overboard here but I just thought I'd share some of my personal experiences with regards to designing interfaces over the last 20 years.

Overall, the second principle/observation seems to take more prominence in my experience and opinion. I feel there is more to be gained from the application of simpler heuristics such as the Rule of thirds or the Golden Ratio.
As a former software and web application developer,  there is an easier way to address the needs of aesthetics and effective visual design and usability. The introduction of Gestalt principles seems to cloud the issue and in many ways serves to obfuscate the process.
There's just too much to take into consideration.


A Peek into the Past

When Windows development became really popular (with the advent of Visual Basic back in 1991) untold UI horrors were unleashed onto the world.
Prior to this, nearly every application was DOS based, with screen formatting and layout pretty much aping the appearance of mainframe applications as displayed on 3270 terminal emulators.
The biggest contention for the layout and visual appeal of DOS based applications in those days was the alignment of text and labels: right aligned, left aligned etc. You just tabbed through the fields and pressed 'Enter' at the end of the form. Job done.
When Visual Basic arrived on the development scene in the early 90's, it gave programmers much greater scope in terms of forms layout and presentation. Things were now event driven. You didn't have to start at the top and tab your way through the fields. You could click over them - ignore them completely.
Many mistakes were made.
Matters were made worse when 3D form controls were introduced.
Imagine a purple coloured command button with the word "Submit" written thereon in lurid 3d text. The horror, the horror.
Alan Cooper ("the father of Visual Basic") was one of the first pundits in the Windows world that advocated the benefits of correct layout and better visual representation. He makes no reference to Gestalt theory - not that I could find anyway. This was before Jakob Neilsen. This was before Netscape and the web.
The rules were simple: have functionally similar wdgets grouped together and surrounded by a frame control. The 'Enter' and 'Cancel' buttons were at the bottom of the form - Enter on the left, Cancel on the right.
We looked at the CUA (common user access) documents from IBM. They seemed to make sense. We even formed a committee where I worked to ensure that the transition from 3270 emulation based programs to desktop applications was a smooth one.
We'd buy "VB Developer" magazine to learn these things. Maybe graphic designers had some notion of the benefits of Gestalt theory as it applies to visual screen design but back in those days developers and graphic designers worked in separate departments. In separate buildings. Graphic designers did brochures and flyers for distribution by mail. They wore berets and used Macs. We wore jeans, ate pizza and used PCs.
Now we have the web and everyone's a designer. The horror continues and the law of the jungle reigns. Fortunately the LotJ (law of the jungle) dictates that only the strongest and most visually appealing web sites survive. Check out 37Signals. They are treated like rock stars in the web development world and are not fond of Jakob and Don and all their button down sensibilities. 37Signals' mantra is: If I (the developer) like it, the users will like it. Google "37Signals and Gestalt" and you'll find a reference to a website that no longer exists (http://weblogs.media.mit.edu/SIMPLICITY/archives/000113.html) - its from 2006 anyway , but it shows that even back then the enfants terrible of the web design world knew what Gestalt theory was. Dig a little deeper and Ryan Singer, one of the 37Signals software designers gives a pretty good example of what a Gestalt is as it applies to UI design:
"Elements with strong contrast catch our eyes as they scan the screen. When an area of strong contrast carries a pertinent message (like “Reservation dates”, or “Create a room key”, or “Balance “) a halo of attention settles on that area. With our attention landed, we notice smaller nearby elements that didn’t have enough contrast to stand on their own across the whole page. These elements are grouped together with proximity and contrast to make up a gestalt. The page is then made up of many of these gestalts with space in between them. That’s the second level of cohesion: the page elements are organized into groups that tie elements together and separate them from other groups."
And:
"...the browser’s rendering engine doesn’t care if elements are placed into coherent gestalts on a web page. ...it’s the reader who creates the requirement that things should be clearly grouped and separated."
"Cohesion" in code, interface and product design, February 5, 2011

Jakob Neilsen's website (ironically not that visually appealing) gives sound advice on usability and good design. He does make reference to the Gestalt proximity rule on one page  but he focuses his attention on this one aspect only. Curiously, given their public enmity, Neilsen's opinions seem to echo those of Ryan Singer's. To me, both of these advocates of design and usability seem to use just a subset of the eleven (count 'em: eleven) principles employed by Chang, Dooley and Tuovinen. Its a bit easier to manage and get your head around.

1 comment:

  1. Tony, a very comprehensive reply!

    I agree that a simple 'common-sense' approach beats a lot of academic mumbo-jumbo. The article we were given to read is based on one experiement - far better I think would have been to 'collect' 100 of the world's top websites, the ones voted by users as being good design. Then to list how many of them used the 11 principles of gestalt in their design.

    37signals.com currently has a list of what Jason F looks for. All common sense, all 'human'. Gems: 'What’s the simpler version of this?', and 'What’s the obvious next step?'.

    I think the human brain just 'knows' when something suits it, we are all different, I doubt there is a sinlge website that everyone will agree is 'good' wrt design. So your disregard for the complexities of gestalt is healthy. its ironic that gestalt, being complicated, is used to describe how to make something simple.

    ReplyDelete