Applying Jungian Archetypes to Website Design

Carl Jung's Mandala image

In this post, I will explore how Jungian archetypes can unconsciously influence the perception of our audience to a website’s design. I will also attempt to gracefully throw in some references to my favorite band,The Police. It’s not an easy feat, so wish me luck!

First, some background information.

Carl Jung (1875-1961), a Swiss Psychiatrist, was the founder of analytical psychology. He posited a theory of collective archetypes, or concepts, that influence human behavior at an unconscious level. These archetypes were innate survival mechanisms dating back to our ancient ancestors and carry over to present day.

Here are the 5 archetypes:

• The Anima/Animus
• Divine Couple
• The Child
• The Self
• The Shadow

In this post, I will focus on the “shadow” archetype and how it can influence a site visitor’s unconscious perception and subsequent conscious behavior. The Shadow-is the “dark” side to our personality that we project into objects. For example, in literature, the “woods” was symbolically a dark place. A place of danger, in which underlying “id-like” desires were carried out. This shadow can manifest itself in dreams when there are dark rooms or shadowy figures. Emotions associated with the shadow are: fear, adventure, sensuality, rule breaking.

One important concept that Jung discusses is that of Synchronicity, the experience of two or more events occurring simultaneously for no obvious reason. They are considered “meaningful” coincidences because they supposedly stem back to the archetypes within the collective unconscious.

The concept of Synchronicty was illustrated in The Police’s 1983 album, Syncehronicity. An article by Robert Aziz shows how the shadow archetype was used to describe a synchronicity (meaningful coincideince) between a businessman traveling home who is on the verge of a breakdown and a “shadow” on a door of a dark Scottish lake. The shadow is symbolic of the mythical beast, the Loch Ness Monster, which is also emerging within the businessman.

What does the shadow archetype teach us about website design? It warns us to choose our designs wisely because there is a whole level of unconscious processes, perception, that influences a person before any conscious thought enters the picture. Do you want to be seen as the dark and daring company ready to break the rules of conformity? That may not be the ideal archetype for every website because it can be off-putting to your audience. I would not, for example, use the dark design for a children’s site. Children are even more influenced by archetypes because they do not have the level of “logic” present in the mature adult mind to overcome the instincts (remember your fear of dark rooms or the boogeyman? Jung would say those universal fears in children stem from the shadow archetype within the collective unconscious).

If you do decide to go with the mysterious shadow symbol, tread carefully, and ensure you design with best practices for dark websites in mind.

Applying Feng Shui to Website Design

The principles of Feng Shui can teach usability specialists a thing or two (or three) about harmonious website design. Typically, I rant on and on about conforming websites to the way in which people perceive information online. Today, I will rant about how we can use the principles of Feng Shui to create a harmonious balance of energy in the design and development of a website enabling visitors to have a better user experience.

Here is a summary of the three principles of Feng Shui and ways in which we can use these principles to enhance websites.

• Chi-means energy. It moves around us and determines whether we are feeling good or bad. Keeping the chi flowing around a site at a regular pace (not too fast*) can be accomplished through development and design.
• Development: The flow of a website should be circular using links that take your visitor to other locations around the site. The visitor should never feel trapped or like they have to hit the back button.
• Design: Use rounded elements in your design to avoid too many harsh 90 angles formed by elements such as top and left navigation bars, stacked images, and vertical lists of content. Integrate rounded elements such as graceful swirl patterns in the background, images with rounded edges (which can be accomplished in Photoshop), or even rounded fonts.

*Note that chaotic placement of objects or a lot of moving objects simultaneously can get the chi moving too quickly. Static elements as well as some angles can slow the chi to a good pace.

The 5 Elements-A collective term that describes the colors, textures, and shapes around us. The 5 elements can help designers choose color palates to complement a harmonious website. These colors should ideally be used in balance around the website to create a sense of yin and yang, dark and light.

1. Fire-red, orange, purple
2. Earth-brown, yellow
3. Metal-white, metallic
4. Water-black, blue
5. Wood-green, teal

The Bagua-Describes the location of objects around us, which help balance the 9 important areas of our lives:

1. Power/Wealth/Abundance
2. Fame/Future/Reputation
3. Love/Relationships/Marriage
4. Creativity/Children/Legacy
5. Compassion/Travel/Helpful People
6. Self/Career/Work
7. Knowledge/Wisdom/Harmony
8. Family/Health/Community
9. Well-Being/Balance

In the web world, these correspond to your one-stop categories or channels. (ie. The areas of your site that focus on certain topics). Power/Wealth/Abundance might be your “advertise with us” section. Fame/Future/Reputation could be your “in the news” or press release section. Love/Relationships/Marriage could be the “about us” page or the “related resources” links, etc…

It might take many years, but I think traditional theories of web design, development, and usability will integrate the tenets of Feng Shui eventually. The ideas of keeping energy in harmony are similar to many of design and usability best practices in which there site content is presented purposefully and clutter free. If only our lives outside the website could be so well in balance.

Designing a Usable Website for an Aging Population

Why Design for Seniors?
I read an interesting article today about web usability and aging and the increased need of websites to adapt to the needs of the growing senior population. Designing a website effectively means making sure that the site is designed in a user-friendly way. If a visitor cannot use your site for its intended purpose, than you will lose that potential customer. Seniors are a growing demographic and adapting your website to the way in which this population perceives information just might provide a rewarding ROI. Plus, if you take the time to design your site for the most sensory challenged visitors, you will, inherently be optimizing for everyone. According to the article, “research has demonstrated that improving the usability of systems for elderly, limited cognition, or visually impaired populations allow the public, as a whole, to benefit from improved usability “ (Chadwick-Dias, McNulty, and Tullis, 2003).

How do we create a senior-accessible site?
Here are the areas in which seniors have sensory impairment: Reduced visual ability, Hearing loss, Psychomotor impairments, Loss of fine motor control, Attentional factors, Learning and memory impairments. There are design/usability elements that can be implemented to help the visitor compensate for these impairments.

1. Reduced visual ability-Consider your font size. According to usability.gov, 33% of the seniors in a study found 8-9 point font size too small with an additional 22% finding 10-point text too small. Jakob Nielsen, usability guru, recommends using at least 12 point font. Erring on the side of larger font will not only help your senior population but will also help prevent eye strain in your younger populations. Performing some basic usability testing on a handful of your audience is always a recommended approach.

2. Hearing Loss-Ensure that all videos or podcasts on your site have the highest quality sound possible. MP3 is the  standard format for podcasts. Use the minimum bit rate that provide good results.
Here are some suggested settings:

• 48 – 56k Mono – sermons, audio books, talk radio
• 64k+ Stereo – music, music & talk combinations
• 128k Stereo – good quality music

Make sure you save it with a .mp3 file extension. For more information on podcasts, see Podcasting News

3. Psychomotor impairments/loss of fine motor control- can slow the visitors ability to think clearly and move fluidly. As a result, it may be more difficult for seniors to click on links, which can be either hard to see or hard to line up with the mouse. Make sure that links are clearly demarcated with a blue or another contrasting color than the rest of your text. In addition, make sure that images on your site are linkable in case it is easier for the visitor to click on the image rather than lining up the mouse cursor on a link. Products listed in an ecommerce feature should always click to the description page, for example. The fewer “wasted” clicks that your visitor makes, the more likely they will have a positive experience on your site and return in the future.

4. Attentional Factors-All people (as well as search engines) have a short attention spans online. The two click rule of the early nineties suggested that a user will take up to two clicks to find desired information before they abandon the site. This finding holds true today. Search engines will also abandon your site if their spidering is made harder by broken links, badly formatted code, extraneous code, etc….Therefore, you can improve the attention spent on your site by making your navigation simple and the “noise” on your site minimal. Reduce your usage of Flash and moving elements. Don’t include pop ups, pop unders, peel backs, or shifting ads, which can distract visitors and take away from their goal of finding content on your site. The more distractions your site has, the harder the visitor will have to work (cognitively) to find the information they need. NIHseniorhealth.gov is a well optimized senior site.

5. Learning and Memory impairments-Similar to the solution to attentional factors, keep your site simple with easy to use navigation and sub navigation. Ensure your site search is working optimally so visitors can find what they are looking for in as few steps as possible. (AKA information foraging). Make sure you have colors that distinguish between links that have been clicked on already and links that haven’t been clicked on. Finally, make sure you use elements like breadcrumbs which can guide the visitor through the site and let him or her know which pages they went to before. Breadcrumbs help visitors re-trace their steps on a website.

These are just a few ways in which you can make your site accessible to a greater number of people. The more people that can successfully use your site, the better the user experience, and the more likely that a visitor will become a customer.  Making your site accessible to everyone is not only financially beneficial, but, most importantly, it is the right thing to do.

Should you use a CMS?

Using a Content Management System is perfect for the small business owner. For many reasons, like how easy to add new content. Most of them have a text editor similar to Microsoft Word and just as easy if not easier to use. It will also let you had code or HTML without being a code junkie. Though if you are a code junkie, then you can switch to the code view and get your code on.

There are many different CMS’s out there Joomla, Durpal, DotNetNuke, Wordpress; to name a few (sure there are a bunch more, but then I would fill this post up with lots of CMS’s and I am sure you don’t need all of them). The toughest part might be getting one installed on your server, but many hosting companies offer a one-click install or other means to install these for you. Check with your hosting company to see which ones they offer and read up or learn more about those options.

Many of the CMS’s have options to add fancy functionality to site, like rotating features, video players, or SEO modules without knowing a lot or any code at all. This will save you time and money. Programmers aren’t cheap and if you can figure it out on your own, you will save yourself time. Though if you find yourself still lost, WBC will glad lend a hand to help you learn the process, so you can succeed.