Left-Brain, Right-Brain

Without hesitation, I always begin the basic structure of Web page design with the primary navigation on the right sidebar. It’s always been that way, since anything else just didn’t feel right. I’ve given that fact very little thought over the past 10 years. However, the need for self-examination seemed more relevant today as I started off to Cambridge Mass on what was a very cold November afternoon. It’s usually a 3 hour trip, so I had plenty of time for introspection, especially since I was traveling to the annual “Learning and The Brain” conference. I jotted down the reasons why I think a right sided navigation is more intuitive on the backside of a Google Maps printout. And, with that scrap of paper I traveled into the psyche of left or right navigation.

The speakers that were scheduled for the three-day event included scholars, authors, professors and educators in the “heady” field of psychology and psychoanalysis. Where better to analyze the dynamic that lie deep within my subconscious than experts in the field? This year’s “Meeting of the Minds” was extra special since it had the most attendees ever, with over 2000 reservations and several dozen highly respected speakers. All of whom would pontificate and cajole the very essence of the “left brain, right brain” question.

The insight I came away with at the end of my first day of lectures, is that the professional programmer (left brain) has a sequential way of looking at the parts to obtain a result. Programmers have to to be able to comprehend the highly complicated coding necessary to create today’s interactive Web applications. While the designer (right brain) is a more fluid thinker, whose decisions are based on visual cues. What better way to explain why websites created by programmers look vastly different from those created by designers.

Note that this is my own personal discovery and not a scientifically proven fact. By no means do I claim to be a researcher or brain surgeon.

The Answer: Print Design?

I’m not a brain surgeon, though I have been a professional graphic designer for over 20 years, so the following observation is worth including. Should Web design navigation emulate print design? Why do I choose to structure my Web pages with a right-sided navigation menu instead of the long established left-side? In fact there was a study performed by Kingsbury and Andre in 2004 which concluded, Navigation: Left is Best. In their analysis they use L.L. Bean as the “TLL” (Top – Left – Left Navigation Pattern) which their shoppers prefer. I checked out their Web interface today and I don’t see a left OR right navigation model. Maybe L.L. Bean’s Web marketing department has abandoned this study, since they’ve since replaced their Web interface for a newer, more intuitive interface design. Could it be that their customers respond favorably to the new design by spending more coin?

So, why should the Web be any different?

Coming from the realm of advertising design, I’ve always worked from left to right. Let’s examine one of our society’s most popular past time: scanning local newspapers’ “Society Pages” for a glimpse of the civilized class. I admit it, I do sometimes envy their huge fortunes and fabulous good looks. The “Le clan Cunningham Au Chateau” article is a very effective way to garner favor from them, appealing to their egos. Newspapers, have used positioning, placement and coverage for many years to appeal to their readers and advertisers. So, why should the Web be any different?

As the modern day “investor class”, whose fortunes have lessened recently, could have benefited from better Web usability. As the remaining doom days of 2008 come to an end, I can’t help wondering is a right-sided navigation could have kept millions of investors from losing their life savings? Could a more intuitive Web interface have kept our economy from collapsing? The day trader may have been able to react more quickly to the falling market if only E-Trade’s navigation was more intuitive.

Evolving Web Design

A not-so-subtle Ug used a heavy method of coaxing his favor. The methods of persuasion used by today’s Web are far more sophisticated and far more nuanced. Like many national newspapers, we are all reluctant to change. Maybe that’s the reason why the Web has managed to grab a significant share of traditional print’s market. Immediately after the Web became commercially viable, research and statistical organizations began measuring user response. Web Trends was one of those pioneering companies that wanted to sell this valuable data to advertisers. Now there is Google Analytics which offers the regular Web developer access to a powerful suite of tools which can measure the user’s reaction to changes you make to your interface design and accessibility.

Don’t be an Ug.

There are many differences that exist between the Web user, not to mention sex, age, origin, politics and affluence. The way we shop (and search) for goodies on the Internet need to be a serious consideration when preparing your Web user interface. The world is becoming more sophisticated, so changing your Web design with accessibility and usability in mind is a must!

Incoming search terms:

• navigation on the right
• web design long left navigation

Web design tools for those lazy, yet very inquisitive Web designers that actually do want to learn by doing. The truly good tools that aren’t just revenue builders for the folks hosting them are few and far between. Here are some of those few that I have stumbled upon either by accident or in search of the magic Online Generator, Web Design Widget, Time-Saving Web Tool or by following the breadcrumb left by a professional SEO expert. Some of them I’ve tested myself while others are far too intriguing not to include in this list:

1. Tableless Layout Generator via The Yahoo Grid Builder- Part the Yahoo! User Interface Library (YUI) which is a set of utilities “for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. ”

2. Web Color Combinations Tester and Palettes via ColorCombos.com which offers the user the ability to visualize different color schemes and ten test them alongside each other.

Incoming search terms:

• google

In the best circumstance, CMS s the acronym for an Easy-To-Use framework of Web scripts that offer permissions based collaboration. The ability for different levels of content management is crucial for a company, association or organization to allow individuals to add content to a Web site, Intranet or Extranet. [singlepic=319,320,240,,]There are many different Web applications which allow easy maintenance without special programming knowledge. With the use of a WYSIWYG interface, the contributor can edit the whole Website remotely without the use of special editors like Dreamweaver © , GoLive © . CMS applications vary from e-commerce focused applications like Interchange ©, WebGUI © which is more for simple content changes, to Plone © which has a “Wiki” architecture that allows easy collaboration among different departments within segmented company structure. Plone consists of different “plug-ins” which create a powerful suite of useful Web apps which runs on Zope © , a Web Application Server. There are many CMS applications available, though most are commercial costing thousands of dollars in licensing fees. We have chosen to work within the Open-Source community of applications which are consistent with our philosophy of the Internet as being an “Open Collaboration” for the common good of the medium. Plus “Open-Source” is FREE , though donations to the developers are common courtesy.

There is a great CMS comparison and evaluation site at http://www.opensourcecms.com/ which details different open source Web Applications and lets programmers and users evaluate each.

• Xaraya – Xaraya’s modular, database independent architecture introduces tools which separate form, function, content, and design. Xaraya delivers the requisite infrastructure for a fully dynamic multi-platform Content Management Solution (CMS).
• WordPress – State-of-the-art semantic personal publishing platform with a focus on aesthetics, web standards, and usability.
• phpwcms – Very easy to learn with flexibility to separate layout and content.
• Plone© – plone.org – Plone: A user friendly and powerful open source Content Management System
• WebGUI© – WebGUI (pronounced web-gooey) is one of the most popular open source content management systems (CMS) available today.
• Interchange© – Content Management System for e-commerce website development.

Well, since then things have changed and most popular Web applications like WordPress, osCommerce, CMS Made Easy now use SVN (Subversion), a version control system. SVN is the most compatible successor to CVS. SVN is not much different than CVS in principle. Though if you did not originally install your app (e.g. WordPress) via SVN, then a simple copying of files is needed as detailed on Installing • Updating WordPress with Subversion

In addition to being convenient it is also has it perks as listed on WP Create and WP Mass Upgrade

As often happens, I forget what I was searching for when I stumbled upon a great resource for WordPress developers, WordPress designers and aficionados. In my case, I found this page very useful for several of my clients who have difficulty understanding the WordPress architecture; the post/page relationship and other structural concerns.

Yahoo Pipes – Features:

Import RSS feed . Provide an RSS feed URL for input, or specify a web service – such as Flickr – from which to retrieve an RSS data stream.

Get user input . To build robust Pipes, you need a way of letting end users supply information: search terms, URLs, dates, quantities, etc.

Generate URLs . If you want to marry Pipes with outside services, you will sometimes need ways to generate web service URLs on the fly, using user-supplied information.

Aggregate multiple feeds . Combine multiple RSS feeds. How multiple feeds are combined is dependent on which other modules are used (sorting, filtering, etc.)

Sort by value . Given a stream of RSS data/ content items (whether from a single source or mashed together), sort the stream by some field value. This could be by item date (usually the same as publishing date), title, category, etc. What you use depends on both what actual RSS/XML data you are importing as well as your specific functional need.

Pass filtering . Pass filtering just means that given your RSS stream, you want to specify which data items should be allowed to pass through to the next step. For example, if you are mashing together several blog feeds, you might “pass” items based on date, author, or a search string (e.g., posts about “Corvette” cars). Or you can filter out items by eliminating duplicate titles or URLs.

Transforming data fields . Sometimes you want to take the text content of an RSS stream and alter it using a set of rules. You might add or eliminate data fields, replace occurrences of a word or phrase, count items satisfying a criteria, geocode the data to produce a map, etc. There is no one single Pipes module that you use to transform data; there are many transform/ operator modules, each with a specific functionality.

Mathematical operations . Yahoo Pipes offers some very basic math functionality that can be combined with either numeric user input or suitable modules that produce a numeric value.

Plug-n-play of custom web services . The Yahoo Pipes interface is integrated with several external web services. However, a few months back, they introduced a module by which you can plug in your own custom web service.

Looping . Looping lets you repeatedly apply a block of Pipes modules over each item in an RSS stream. In fact, you can build a block of modules into a Pipe, name it, then access it from a loop in yet another Pipe.

Output results . The output of a Yahoo Pipe is a new RSS feed by default, though you can produce geocoded Yahoo Maps as well.

Sprout
From sproubuilder website:
Whether you’re a beginner or a pro, Sprout has a range of features that will allow you to quickly and easily build, publish and manage rich media Web content including widgets, minisites, banners, mashups and more.

Timeline
Timeline is a DHTML-based AJAXy widget for visualizing time-based events.

Popurls
A popular site that lets you get a bird’s eye view of several popular sites.

Timer
Timer is a Twitter bot that helps you set an alarm for things you need to remember

[singlepic id=106 w=320 h=240 float=]

[singlepic id=107 w=320 h=240 float=]

[singlepic id=101 w=320 h=240 float=]

[singlepic id=119 w=320 h=240 float=]

[singlepic id=122 w=320 h=240 float=]