blog

Whenever we create a web application for a client, we spend a significant amount of time and effort thinking through how the application should behave for its users. It is a priority for us that each element of interaction in an application help the user accomplish their intended goal quickly and efficiently and with a minimum of confusion.

Just last week, Bill and I had a lengthy discussion about a checkbox labeled “copy information from above.” What information should be copied? Should the checkbox be disabled or disappear once it is checked, or remain active to allow the option of unchecking it? If it is then unchecked, should it clear all fields in the entry, or only the unmodified ones? The answers to these questions that we choose to implement will have a significant impact to the usability of the application for its users.

A new generation of touch-enabled devices (iPhones, iPod Touches, iPads, etc.) is forcing application designers and developers to rethink application interfaces from the ground up. Without the typical mouse and keyboard interactions of hover, point, click, or drag, the opportunity exists for applications to expand their interfaces to include more complex gestures like pinch and swipe.

While there is a lot of carryover in how people approach these devices (e.g. “tap” on a touchscreen is roughly equivalent to “click” on a mouse), there are many differences as well—I would never consider rotating my laptop 90 degrees as a means of interacting with it, but on an iPhone or iPad it may enlarge what I am viewing, stretch the layout to accomodate the width of the viewport, completely relayout the design, or even act as a means for navigation or control. These changes can make for a shaky transition for many traditional computer users, and even lead to reasonable questions about the usability of the devices themselves.

In spite of these challenges, I have been fascinated by one particular case study: my 3-year old daughter, Leah. Ever since a particularly long car trip where we required a means for keeping her entertained, Leah has possessed my old iPhone 3G (sans cell service) loaded with games designed for preschoolers as well as the impossible-to-remove default Apple applications such as maps, weather, and camera.

With the exception of the occasional visit to the Apple Store, Leah does not regularly use a mouse and keyboard interface. This frees her from the years and decades of traditional computer use that form much of our initial interface behavior expectations. Once Leah was exposed to the idea of touching a screen to interact with the application displayed on it, she started tapping and swiping all over the place, often discovering points of interaction that I had no idea existed.

Between her regular iPhone use and occasional borrowing of my iPad (she calls it my “big phone”), I have made a few key observations:

• Touch interfaces can indeed be amazingly intuitive. Stop looking for menus, dropdowns, and “standard” navigation. If something looks like you should be able to touch it, then touch it and see what happens. It’s fascinating to open a new app and watch Leah touch whatever she can find, just to see what it will do. If we can get ourselves past looking for these traditional (and possibly outdated) elements and explore openly like a toddler, I am convinced we will find new joy (and features) using the new generation of devices and apps.
• The enjoyment found using a touch-enabled app is often inversely proportional to how “normal” its interface is. This seems especially true when using apps that rely heavily on the accelerometer to detect motion of the device as a means for interaction. It makes sense to tilt an iPhone or iPad like a steering wheel to steer in a driving game or tip it away from level to cause a ball to roll “downhill” through a maze. These are the same natural physics mechanics that have made the Nintendo Wii a worldwide best-seller. On the other hand, “traditional apps” like word processing programs pretty much still feel like typing out a document.
• Our hands are the most natural interface tool we have. We already use our hands to manipulate keyboards and mice to achieve a desired result displayed on a screen. Why not remove these intermediary devices and interact directly with the content? I have yet to meet someone hesitant to “figure out some new device” who hasn’t fallen in love with touch computing once they have the device in their hands, free from the added complication of a keyboard and mouse. Children discover their world through touch, and that means of discovery translates seamlessly into touch computing.

As application designers and developers, we have a special opportunity to completely redefine how people interact with machines as these touch devices infiltrate the mainstream. It will be interesting to watch these new patterns (or lack thereof?) develop in the coming years. In the meantime, I hope designers and developers will be willing to take some risks and try ideas not possible with our traditional computer usage patterns.

Even more interesting will be watching how my daughter Leah’s expectations of computing will grow differently from mine, seeded from such an early age by these enchanting touch-based devices…

Putting together good site architecture is an important and often neglected element of building a website. With so much energy and focus devoted to strategy, design and development, it’s a facet of the web process that is easy to forget.

Good architecture creates an intuitive browsing experience. With good architecture, you’ll know what content a site provides and you’ll have a clear idea of where you “are” within a site. When users complain that a site is confusing, it’s often because the architecture was inappropriate for the content on the site. They might not be able to put their finger on what’s wrong, but they’re likely complaining about the site’s architecture.

I like to frame this topic by comparing site architecture to the Dewey Decimal System. The Dewey system is used in libraries to organize a large amount of information in a way that’s easy for a library patron to browse. Every book exists in a place that is appropriately labeled and grouped. Libraries use this system to overcome the challenges of information organization: website architects can use a similar set of rules when thinking about organizing information for a site.

Over the years, I’ve compiled a list of handy tips to keep in mind when thinking about the site architecture.

• Top-level navigation should provide a structure that houses every page on the website. The Dewey system has ten major categories that characterize all of the nonfiction content of the library. Each category is supplemented by a number of subcategories. Books fall within these categories and subcategories.
• Navigation should be consistent. Do not, under any circumstances, change the site’s main navigation on a page by page basis.
• Navigation labels should be clear, concise, and should not overlap with another label. Be sure that your top-level navigation items have appropriate labels that fairly characterize all of the content in the section.
• Like information belongs together. Group content on your site by the type of information.
• Every piece of unique content should exist in exactly one place in the site’s architecture. A particular book has one place where it logically lives and copies are not repeated in multiple sections.
• Don’t confuse emphasis with architecture. Just because something is an important call-to-action on the site does not mean it belongs in your top-level navigation labels. Make sure that any piece of information that is important enough to reference from a high-impact area on the site can be found through a logical path that starts with the navigation.
• Don’t use your audiences as architecture. Many of your audience segments will have needs from the site which overlap with another audience. Using your audiences as architecture will either trigger the need to duplicate content or promise more information than the section actually provides.

Take a look around, there are examples of good design all over. The icons on your computer screen, the street signs outside your window, the vitamin water on your desk, each are pulling for your attention so that you might notice them, interact with them, or even buy them. Have you ever really taken a step back, and thought about how the choices you make each and every day are influenced by design?

No matter the situation, the way something looks is the first thing that anyone has to form an opinion, liking or perception about. The first time you meet someone, before you know anything about them, you judge on appearance. When you are shopping for shoes, before you slip them on to test for comfort, you judge them by the way they look. Or even a web application, before you dive into it’s functionality and how it works, you judge it based on the design. The fact of the matter is, good design is valuable, because it influences these perceptions, and ultimately your choices.

Recently I was having a conversation with the newest member of the dynamIt team, Andy Hutter, who had just purchased a new TV for his place. So I asked him which television he chose. He said that his decision came down to an LG or Panasonic, and he ended up choosing the LG because of how slick it looked. Two televisions comparable in price, picture, size and specs, but Andy chose the LG because of it’s design.

Design on the web is no different. People will form lasting opinions about a company or organization based on the way their site looks, and make choices based on that. Users make nearly instantaneous judgments of a web site’s visual appeal. These impressions impact perceived credibility, usability, and ultimately influence purchasing decisions. Web users form first impressions of web pages in as little as 50 milliseconds (1/20th of a second), according to Canadian researchers. Check out this article that highlights a study on the “halo effect” and “cognitive bias“, supporting the theory of first impressions in web design.

Sometimes it can be hard for designers to make clients understand the value of good design. A lot of companies/organizations settle with a free template, a site done in Frontpage, or having their secretary’s son do it because he is a computer science major. There is a ton of value in investing in a good web presence, because it’s a lot more than just making a pretty page on the interwebs.

It Will Improve Your Company Image

Visual communication is an integral part of a customer’s experience of a company or product, and it plays a key role in building a brand image.

It Helps Reach Company Goals

Good design is backed with a strategy. Our process at dynamIt allows us to discover a client’s objectives with thorough strategy, and this leads to design solutions that push to accomplish company goals for the future.

It Establishes Trust

Many studies have shown that the design of an unfamiliar ecommerce site will greatly impact the decision making process when a user goes to buy a product. I know that when I go to buy something online, if the site design sucks, I’m leaving.

You Will Stand Out Among Competitors

There is a lot crap on the web. I think this is pretty straight forward.

Even though your site may have superior products and services, an initial negative impression from a poor design can steer customers towards your competition. You only get one chance to create a good first impression, make it count.

Are there other scenarios where design has influenced you?

Our blog has been pretty quiet for the last month due to the fact that we’ve been pretty busy. It all came together last week as we saw the launch of four different client sites. Here’s a brief rundown of what we’ve been working on:

Columbus College of Art & Design

www.ccad.edu
We spent the last several months working with CCAD to completely re-orchestrate their website. Starting with web strategy and new architecture, designing the concept and the user experience, and finishing with web standards programming, we delivered the complete package. Our developers even got their hands dirty with a custom designed, AJAX-driven calendar integrated with the Google Calendar Data API.

CATCO

www.catco.org
CATCO is place to go for live theatre in Columbus. We worked closely with the people at CATCO to provide the online destination for information their organization and shows they put on each season. After many hours executing strategy & IA, concept design, UXD, and web standards programming we launched their new site. We had so much fun working on the project we even volunteered to help them promote the new site at Gallery Hop last weekend.

CallCopy

www.callcopy.com
Call recoding software specialist CallCopy came to us looking for a sleek redesign of their website as well as some guidance on navigation and architecture. After the first week of having the new site live we’ve heard reports that the new site has already yielded an increased conversion rate.

The Ohio State University Medical Center: CITIH

citih.osumc.edu
The Ohio State University Medical Center came to us looking for design and development of a microsite for its Center for IT Innovations in Healthcare (CITIH). This one had a tight timeline but we rolled it out in time for them to start accepting registrants for their summit Leveraging Federal Stimulus Funding for Healthcare IT Innovation.

Oh yeah, these are also the first four clients running the new version of the dynamIt Content Management System (dCMS). We launched that in July too.

Sorry to bore everyone with yet another developery post, but this does affect you designer types as well. Plus, I think it’s cool so I am going to share.

If you look closely around the web you will rarely see tabs that overlap each other. Usually, each tab is in its own self-contained box. The reason for this is that if two tabs overlap then turning one of those to its activate state requires the swapping of multiple graphics. This makes using sprites much more difficult and less effective (and if you’re still using JavaScript for image rollovers, well, that gets even messier).

So, I am working on the UI for the tabs seen to the right. You’ll notice that not only do they overlap, but each has a drop shadow that covers all the tabs and only those tabs that are “underneath” it. It is literally like we have four tabbed sheets of paper here that we want to be able to stack in any order. In my opinion, this is a pretty silky graphic effect, check it out, the PG. 2 tabs is all the way on the bottom, followed by PG. 1, then PG. 3, with PG. 4 on top.

My solution is to use absolute positioning along with transparent PNGs. Yes, transparent PNGs mean bad news for IE 6, but the solution is otherwise super-easy to work.

Simply cut out each individual tab and keep its alpha-channel transparency by saving as a PNG. Then, absolutely position each tab in its correct place on the page

Now here is the trick. If the server generates the active tab, whichever tab appears last in the HTML code will be on top based on the natural stacking order (i.e. no need to fool with z-index).

If the client-side can alter the active tab, messing with z-index is really not that difficult. I haven’t tried it, but something like the following should work thanks to jQuery.

$(‘.tab’).click( function() { $(this).siblings().css(‘z-index’, 1).end().css(‘z-index’, 2); } );

Oh yeah, if you do need rollovers this method is totally compatible with your traditional CSS sprite.

I am working this afternoon on a top secret project that involves a system to manage pages and pages of HTML content. I won’t go into anymore details, but I do need to work deeply with HTML documents. Anyway, PHPQuery is a cool idea, but after implementing it, I noticed I was getting some odd characters where they were not supposed to be. So, another solution had to be found.

I turned to the Document Object Model (DOM) class built into PHP, which I had not yet used. The documentation sucks, but it is actually a really powerful class. It is, however, lacking one vital function. The ability to get and set the HTML/XML contents of an individual node, that is, the equivalent of the innerHTML property of JavaScript DOM.

I googled for a solution but came up empty. So, I had to invent the solution myself, and after quite some time of tinkering around here’s what I’ve got:

function innerHTML(&$dom, &$node, $html = false) {

     ## if html parameter not specified, return the current contents of $node
     if($html === false) {

          $doc = new DOMDocument();
          foreach ($node->childNodes as $child)
          $doc->appendChild($doc->importNode($child, true));

           return $doc->saveHTML();

      } else {

           ## get rid of all current children
           foreach ($node->childNodes as $child)
               $node->removeChild($child);

          ## if html is empty, we are done.
          if($html == '') return;

          ## load up $html as DOM fragment, append it to our now-empty $node
          $f = $dom->createDocumentFragment();
          $f->appendXML($html);
          $node->appendChild( $f );
     }

}

Not sure if this is the most efficient solution, but from what I’ve seen so far, it works.