May 1, 2014

Form and Content: Hegel’s Philosophy and UX Design

The German idealist philosopher GWF Hegel (1770-1831) is one of the most important figures in Western philosophical thought. Building on foundations laid by Immanuel Kant, Hegel set out in a number of works and lectures his comprehensive framework or “system” linking together the nature of reality and thought; taking in philosophy, logic, science, art and politics.

Hegel is popularly associated with the “Thesis > Antithesis > Synthesis” triad of the development of ideas, although apparently he only used this once and attributed it to Kant. This process is characterised by outside influence on events or ideas that emerge in reaction to the original idea. In fact Hegel’s “dialectic” reasoning is more subtle and profound than that, with things encompassing contradictory elements that affect each other and become a whole. We can think of this Unity of Opposites like a magnet with a negative and positive pole: they are opposites but are required together to make a whole.

Another popular idea associated with Hegel is often expressed as “Content is inseparable from Form”; many undergraduate philosophy essays revolve around assertions or contradictions of this statement.

Elbow @ Leeds Arena

The performance of Elbow at the Leeds Arena was a perfect combination of content and form

In philosophical terms we can think of Form as being the appearance of a thing, which its Content is its essence or existence. Form cannot exist without Content (as even an empty picture frame says something and has existence) and Content cannot exist without some kind of Form in the world.

So while these two concepts are are separate, they are also interdependent for their existence – the dialectic relationship between them that means that Content is inseparable from Form.

What does this have to do with UX design? When creating wireframes or mockups of sites, or while in development there is often a disregard for the actual content that will be presented through the form being created. As we have seen the two are mutually interdependent and so seeing the eventual content as irrelevant is a mistake.

For this reason I see the use of placeholders or “Lorem Ipsum” text to fill content spaces as an inadequate technique for design. Not only because sometimes this text can make it into production by mistake but that it helps to have realistic content to set the correct context for the frame in which it will be presented. I much prefer to have a bit of relevant (if old) text which uses terminology, phrases and other specific wording (and pictures) to correctly set the scene. This content can be updated later but gives more life and meaning to the format as it is being developed.

Likewise preparing copy irrespective of the means by which it will reach your audience will most likely mean the message will not hit the target in the way you intend. Long winded content for a blog or website most often viewed on mobile will not be as effective as a snappier piece; whereas if someone is expecting a lengthier piece with substance (e.g. a Medium post) then a handful of paragraphs won’t cut it.

To summarise: building web sites and apps without due reference and respect to the ultimate content that will be presented is a mistake and will lead to sub-optimal sites; as will preparing content (either as copy, pictures, media or anything) without considering the presentation of it as part of a whole.



Fatal error: Uncaught Error: [] operator not supported for strings in /home/jamesahu/public_html/wp-content/themes/layerswp-master/core/helpers/post.php:62 Stack trace: #0 /home/jamesahu/public_html/wp-content/themes/layerswp-master/partials/content-single.php(72): layers_post_meta(28) #1 /home/jamesahu/public_html/wp-includes/template.php(724): require('/home/jamesahu/...') #2 /home/jamesahu/public_html/wp-includes/template.php(671): load_template('/home/jamesahu/...', false) #3 /home/jamesahu/public_html/wp-includes/general-template.php(168): locate_template(Array, true, false) #4 /home/jamesahu/public_html/wp-content/themes/layerswp-master/single.php(21): get_template_part('partials/conten...', 'single') #5 /home/jamesahu/public_html/wp-includes/template-loader.php(78): include('/home/jamesahu/...') #6 /home/jamesahu/public_html/wp-blog-header.php(19): require_once('/home/jamesahu/...') #7 /home/jamesahu/public_html/index.php(17): require('/home/jamesahu/...') #8 {main} thrown in /home/jamesahu/public_html/wp-content/themes/layerswp-master/core/helpers/post.php on line 62