February 2nd, 2009

Changing my Mind on Drop-Down Menus

For most of my time as a web designer, I have been opposed to the idea of using drop-down menus for main navigation elements. However, with some recent sites I’ve been developing, I finally caved to the idea – mainly because I wanted a reason to play with jQuery, and I’ve found that I’m actually enjoying the results. My initial objections are real. First, they are often times un-semantic, and cause poor coding. However, with CSS and a little jQuery it’s completely possible to use nested ul’s to manage a semantic and well-ordered list with the hierarchy completely intact.

Second, I had come to the conclusion that drop-down menus were dodgy, and hard to use for the user, especially those users with motor impairment. I still feel that this is essentially true, and am still pretty adamant against drop-downs that try to go more than one level deep. How often I’m on sites where the drop-downs are touchy and almost impossible to make selections with. This all said, think that a single level drop-down menu is achievable in at least a partial sense. In my trials on creating a site with a drop-down, I really played around with the padding of the target links to make sure that they took up the full spacing of the menu, making it harder to “fall-off” of the link and lose the menu. I also did this by setting my anchor tags to display as block.

A key really is providing enough space (via padding and line-height) around the link to give the user enough to hold onto during the selection process. I understand that there are many users who because of a motor impairment might stumble with this still, but the pros to drop-downs pushed me to use them for this particular site. I also think it’s important that if you do use drop-down menus, that on interior pages you provide a persistent secondary nav-bar so that all users do not have to hover incessantly to find the rest of the pages in the section they are in. I know that Jakob Nielsen probably doesn’t agree with me on this, and I can understand why.

So, what are the benefits of adding a drop-down menu to a site? For me, the thing which made me choose to use it for these two projects, was the scan ability of the site, and the direct accessibility of the interior links. For sites with deep navigation it helps to be able to see the second level from 1 click, so that they can get closer to the content they want sooner. Also, I found that for sites with medium amount of content, drop-downs help to intensify the values of the service provided by the organization. By hovering over a main navigation item to see many germane, and well organized pages in that section increases user confidence – which is counter-intuitive to what I used to think about drop-down menus.

All this to say: I’m not sold on drop-down menus, but I have finally found reason for their existence in particular projects.

August 3rd, 2008

How Design Conveys Truth in Advertising

I recently received a copy of my local “Homes and Land” magazine in the mail. For those of you who do not know, this publication is a listing of homes for sale in any given area. It’s a large company with magazine publications in many local markets throughout the United States and Canada.

Having worked in Real Estate advertising I always thought pretty low of these types of books, because statistically they accounted for an absurdly low number of actual real estate transactions. 2006 statistics showed that less than 1% of home buyers found the home they bought using these types of publications – which is especially ironic for the magazine called “Homefinders.”

That statistic was enough to convince me that these were not the right way to go for Realtors who wanted to spend their advertising money wisely. However, I’ve just recently started to wonder why these publications have such low numbers of success. Is it simply because people look elsewhere for their home purchases? Or might there be a usability problem with the design layout of the particular magazines which inhibits buyers from finding a home? After some thought and examination of the “Homes and Land” I received in the mail, I realized that the design has nothing to do whatsoever with selling homes.

We’re currently in the market for a new home, and as a consumer and a designer, I’ve been really attentive to the way in which I search for home listing information, and how I interact with the ways in which it’s presented to me by marketers. Information architecture is everywhere, and these magazines are no exception. Information, whether intentionally or not, is presented in a form or fashion which conveys meaning, usability, and intended audience.As a home buyer, I want to be able to search by many criteria – such as price, location/neighborhood, number of bedrooms/bathrooms – NOT by Realtor. “Homes and Land,” and similar publications like “Homefinders” and “Homeseekers” all provide individually designed (or as they would suggest, “market differentiated”) ads, which are hard to read, entirely different from ad to ad, and more focused on the Realtor than the homes they are selling. While looking at the information design (if I dare call it that) for “Homes and Land” magazine I had to ask myself “who do the publishers believe their readers are and how is this conveyed in their design choices?” It is apparent that the answer to this question is not the Realtors coveted buyer, but the magazine’s coveted consumer – the Realtors themselves. Indeed, if the design was truly for a buyer, it would have a completely different information design.

Now, I know that for Realtors there is an incredible need to differentiate themselves from the “competition.” It is a dog eat dog industry, and many in it stress the need to set themselves apart from one another. It is evident, based on the design of these magazines and their low success rate, that the real reason for their existence is not to sell homes, but to meet the felt needs of Realtors for differentiation in their local markets. A magazine which was focused on meeting the needs of the home buyer would be thoughtfully laid out with their needs in mind and the structure would mimmick their user process in finding, selecting and buying a home.

“Homes and Land” is a perfect example in how the way design information structures convey a certain truth in advertising. It undermines our words and shows true intentions. While magazine publishers like those at “Homes and Land” wouldn’t necessarily say they are being deceptive with Realtors, the design of the magazine conveys one of two things: (1) the magazine designers have no clue as to the actual consumer process of a home buyer, or (2) they are not designing for the home buyer, but rather for the people who butter their bread.

This happens all the time, in many different ways – company politics, inattentive copywriters, and other factors make us stray from the intentional focus on the needs of the user and decrease the effectiveness of a design at meeting it’s stated objective.

The irony of this whole thing is that while these print publications fail miserably at conveying information in a helpful fashion for the buyer, many of the company websites get it right. With the ability to search by zip code, price range, beds and baths, and myriad other helpful filtering search choices, Homes and Land does a great job of being focused on the consumer.

July 11th, 2008

Expression Engine Review

Over the past few weeks I’ve been busy with – among other things – launching my very first website built with the powerful content management application Expression Engine. The site – Living Hope Church – is a fully functional site, providing the client with full access to all of the content on the site, the ability to upload images, blog posts, add pages to site sections, calendar events, and even a podcast. Expression Engine’s architecture makes it flexible to provide a user-intuitive experience on the back-end, easily providing markers for separate content areas.

From a programming perspective, EE is much easier to code than WordPress, which requires you to code natively in php. That said, the learning curve for EE was pretty high, although no more than WordPress. The upside is that the EE forums are par excellence and I was able to get quick information from the EE community.

The capabilities of the CMS make creating multiple content types, relationships, filters and more very easy. The ability to use mulitple “weblogs” – that is, database tables to store information – and to be able to add custom fields and categories to each, means that the publish page if fully customizable to the needs of the content, not the other way around. This for me, is a huge asset. Before, while using WordPress, I was forced to bend content around the entry areas. Not so with EE.

That said, I’m not all rosey about EE. My major beef with it so far has to do with typography and the publish area. For client needs, unless they will simply be entering plain text, the textarea for data inputs provide no provision for the client to easily manipulate markup without using HTML tags, which provides for some pretty messy data entry areas, especially when creating unordered lists. Out of the box EE’s only option for clients is to learn bits and pieces of HTML, which in my world of clients isn’t a very good option.

There are extension options. However, the WYSIWYG extensions produce awful code and if a client copies and pastes from Word, they often ruin any consistency in design you might have pined for. I did find an extension which installs Markitup, an excellent jquery plugin which lets you use textile markup, making the process of marking up the content much easier. That said, it’s still a bit buggy and I can’t get it to work on another site I’m building in EE. Ugh.

All in all, I’m sold. At $99 for a non-commercial/personal/non-profit license and $249 for a commercial license it’s a no brainer for its ease of use and customization. As I look onto much more complex jobs, EE astounds me at its ability to perform. As a one-man-design-shop, I find it a very helpful tool in my arsenal.

If you’re interested in learning more about Expression Engine, I would suggest heading over to Michael Boyink’s site Train-EE. He provides some great tutorials for free and some nice screencasts and e-books for purchase.

January 5th, 2008

Why I’m a Content Activist…

Today, I was browsing some of the fine sites included on the CSS Mania site and came across a design site, in which the owner states that the three “ingredients for a spectacular web site” are: (1) beautiful design, (2) rock solid markup, and (3) attention to the details. While I agree that all of these are important to the design process, I disagree with the author (and the design strategy) and contend that the most important ingredient for a spectacular web site is great content! As a designer, I am constantly running into the challenge of creating pieces that have more effectiveness than simply “looking pretty.” Message, tone, intention, target audience are all affected by the content (as content is often affected by all of these things as well).

No matter how much we, as designers, want to get paid for our skills, if there is no message or content, there really can’t be a website. The web, while evolving, is still a content-driven medium. I’ve recently been reading Kelly Goto and Emily Cotler’s excellent Web Design 2.0: Workflow that Works and it suggests a workflow that actually begins with content generation. While so unintuitive to the designer, I believe that Goto and Cotler are 100% correct in their placement of content at the beginning of the design process. Content mediates all that we do in the design process, and is the starting point, rather than ending point of our work as designers. Content drives traffic, be it on commerce sites or personal blogs. Blogs which don’t say anything (or anything new, as is the unfortunate case of this blog) could be beautifully designed, executed with technical perfection, and focus on every aesthetic detail, yet still end up with no visitors.

What I’ve found lately is that clients, and users, care more about content than they do about XHTML and CSS. I know that personally, I’ve become a web-standards activist with my clients, advocating the necessity for standards compliance (accessibility, portability, browser compatibility, et al). But I’ve also become a content activist with my clients, guiding them through the complexity of finding their voice, describing their product in ways that are meaningful, and developing a message that is focused on what their customers want and need to hear.