Since its release in January, 2009, NetMRI 3.0 has been well received by customers. Jay Ennis, Executive VP of Product Development at Netcordia, points to the user interface designed in partnership with PixelMEDIA. “… the new UI has helped us connect with customers,” says Ennis, “Wow” is a common reaction…” At the same time, Netcordia is solidifying its position in the competitive software industry and is capturing the attention of key media leaders like Red Herring, which recently named Netcordia to its annual Red Herring 100 list of America’s most promising technology companies.

A User-centered, Visual Approach
Netcordia’s NetMRI 3.0 improves the product’s Network Configuration and Change Management capabilities by providing multiple views of the network and every device connected to it, and then showing the effects of local changes on interdependent network initiatives. New diagnostic capabilities also help IT managers assess the potential impact of even the smallest changes to a network.

The new NetMRI 3.0 user interface features dashboards to
help IT managers track top problems and troubled devices, 
monitor trends, and identify the most important risks. click to enlarge

“I went to a customer six months ago and he said he loved the product, but he pulled a notebook out of a drawer and showed me all the steps he had to take to get to the feature he wanted,” said Yama Habibzai, product marketing director for Netcordia. “Over the course of the last few years, we’ve added more and more to this product. It was time to think about using a more visual approach to streamline the overall product experience for users at all levels.”

Gathering and incorporating user feedback was a key element in our approach. The Web-based interface consolidates core functionality into a set of dashboards, offering IT managers a fast, at-a-glance visualization of network performance. The dashboards show changes over time and the topology status view shows users exactly where a change took place. A combination view overlays both network health and policy compliance statuses on top of the topology map. The tabbed interface allows users to toggle quickly between different views of the network.

The redesigned NetMRI 3.0 user interface triages complex tasks into bite-size pieces. click to enlarge

When an issue is identified, users can drill down quickly using a system of logically organized “accordion” menus that replace the folder structure of previous versions and competing products. With a product as feature-rich as NetMRI 3.0, a well designed user interface helps customers maximize their return on investment by taking full advantage of everything the product has to offer.

“The new version is much better and very easy to navigate,” said Tod Isaacson, manager of network services at Loyola Marymount University. “Now, you can see several different screens at once that you had to hunt for in the past. I will use a lot more stuff that I didn’t know was there in the past because it’s now easier to find.”

For more information
Founded in 2000, Netcordia is a leading provider of network automation software to the world’s most complex and mission-critical networks. For more information, visit www.netcordia.com

In all, each member of the board had a slightly different definition but it was evident that each description was cut from a similar cloth. Surprised? Not really. Comforted? Yes.

Toby Bottorf, Director of Design, WGBH Interactive, had an interesting observation. He stated that we don’t design a user experience; we design for a user experience. I couldn’t agree with him more. In reality, we are just setting the stage. What happens in the hearts and minds of the audience is relative to their own past experiences, knowledge, environment and, of course, expectations. Since we are trying to mimic physical interactions within a virtual environment, defining expectations is paramount to creating a positive user experience. Much discussion was centered on the ability to enhance the experience by aligning expectations. Chauncey Wilson, Senior Manager, AEC User Research, Autodesk, Inc., discussed user experience in a similar manner to Maslow’s Hierarchy of Needs. Using a three-tiered pyramid, he defined the base as “relative and expected” functions that one would expect for choosing the experience. The second layer represents comfort. I equated this to factors like ease-of-use and thoughtful design. Third, at the top of the pyramid, is delight. Here, expectations are exceeded and the experience becomes an pleasurable one. But, the top tier is a moving target. Technology, design, and culture can easily push what was once a delight to a comfort. (see diagram)

So, what did I gather from all of this? For starters, we all are bombarded with choices and everyone is vying for your audience’s attention. So, when possible, reduce the “noise” level and minimize the need for your audience to make unnecessary choices. This not only reduces the need for complicated information structures but it relieves the stress of making the wrong decision. Second, define your intentions. Set the stage for a pleasurable experience early on. Frustration increases when your message is unclear which then encourages trial and error. And finally, stay current with both your audience and the environment in which the experience is delivered. If technology is the conduit, use good judgment and always precede with proper usability and interaction models. Push the boundaries to drive innovation (think the pyramid’s top layer) but expect to refine them. Some trends are harder for your audience to accept than others.

In closing, I must admit, it was a refreshing to hear others speak about user experience in a way that is subjective and open for interpretation. It’s evident that it means something slightly different to everyone, but with insight, knowledge, and a creative spirit, setting the stage for a captivating experience is well within grasp.

For more information about MITX and upcoming events visit MITX.org

Note: This video is part of our Let’s Talk series of staff perspectives. You can check out more perspectives on our Vimeo Channel.

Last night PixelMEDIA hosted the monthly meeting of the NH Usability Professional Association (NH UPA). The meetings are an opportunity for user experience professionals to connect with each other. Talks included our own Luke Michel (watch his crowd-pleasing discussion about punctuation) as well as John Herman, a local media maker in his own right. As a newcomer to the NH UPA gatherings, John said two things that made me think about the way we communicate. The first:

I have no idea what you’ve been saying for the last 45 minutes but you sound like smart people and I think we do about the same thing.

As people engrained in what we do every day, we can all get hung up on industry vernacular, catch phrases, and tech-speak that the audience we’re trying to reach may not understand. And while one may say that it was a gathering of peers—so we can use our language—even within our own networks we can improve understanding by avoiding terms that mean different things to different people.

So the next time you write copy for that print brochure, stick a label on that web page, or talk at a public event, think about what your audience cares about. Remember they don’t know your internal language and won’t take the time to translate your features into their benefits. Connecting with people requires taking the time to understand their needs. And if your web or media partner is using language you don’t understand, remind them of your business goals and make sure they will be addressing them with their solutions. (They should be asking for that information and learning your language in the first place, then applying their process to produce results, not the other way around.)

The second nugget John shared was to:

Lead with your passion, not time or money.

While we all know time and money are important, especially in the current economy, if you put them first people will see through your message and suspect your motives. With all the user-generated content and alternatives to your offering out there, people can spot who’s in it for themselves and will seek other options. Find what your company is truly passionate about and lead with that first. Let the problem you are trying to solve determine what medium you use to connect with your audience. Are you working to find a cure for diseases with your research? Helping save lives with your heart devices? Educating kids with your Rubik’s cubes? Stay true to your passion and fans will follow.

Luke Michel presents at the Feb 25, 2009 New Hampshire Usability Professionals Association monthly meeting in Portsmouth.
(Oops, we forgot the mic, so the sound quality isn’t great.)

NHUPA: Punctuation and Usability from PixelMEDIA on Vimeo.

The practice of web analytics has been around for quite some time, and has evolved over the years to offer more and more insight into the user behavior on our websites.  Major players in today’s analytics market include Google Analytics, WebTrends, Omniture, and Urchin.  They allow us to measure the traffic to our site, user demographics, and browser statistics, as well as to track specific campaigns and their impact on lead generation and ultimately, our bottom line.

This is all well and good for your traditional website targeted for the desktop user, but does it hold true for mobile users?  Yes and no.  Of course, we want to track all of the same information as a traditional website, such as page views and browser statics.  But mobile users have different needs than your typical desktop user.  The parameters of their world vary greatly, and so will the decisions they make.  Their usage of your site will reflect these decisions — and analytics reports are your view into their world.

One differentiating factor of the mobile user is the device they use.  With the rapid growth of mobile communications worldwide, there are countless mobile devices and each one offers a different user experience.  Unfortunately, analytics packages such as Google Analytics and WebTrends lack the ability to track mobile-specific information.  Some of these tools rely on JavaScript to track data, a technology that not all mobile devices support.  If your users are lucky enough to have a device that allows JavaScript, the data you collect will not track the mobile-specific information that you’re most interested in, such as the device, manufacturer, and model.

Fortunately, there are solutions available that track exactly this type of information.  One solution is a free offering from AdMob called AdMob Mobile Analytics.  This solution provides a simple way to add code to your website that logs not only the most common analytics data, but the manufacturer, model, browser, operating system, and screen resolution of the mobile device in use.  These are the parameters that are most important to us on the mobile device, since they most directly affect the behavior of our users.

You can leverage this information in a number of ways:

• Develop features for your user base: If your mobile site is targeted toward business users, most of whom will have a mobile device that allows for a rich and interactive experience (e.g., an iPhone or a Blackberry), you can focus your development efforts towards these devices.  You can raise your minimum requirements and comfortably develop richer features, knowing that you’re not alienating a large percentage of your user base.
• Focus your testing efforts on the most common devices: Testing mobile sites can be daunting.  It is nearly impossible to test on every device available, but once you know your users and the devices they use, you can focus your testing on those and cut down on development efforts and costs.
• Watch user behavior: Mobile devices have smaller screen sizes and limited controls that will affect the way a user navigates through your site — and how long they decide to stay. Important content buried on your site may not get the traffic it deserves if users can’t find it.  See what areas of your site get the most traffic and build your site architecture to best allow your users to find the most critical information.

Listen to your mobile users by observing their actions, and observe their actions by investing some time into a mobile analytics solution.  The insight provided will give you the ammunition you need to develop the most effective mobile site possible — and to earn that pat on the back you deserve.

• Vary the letter cases
• Try different calls to action (CTA)
• Add more keywords throughout the campaign
• Test different variations of landing pages

One of the first things I always test is different letter cases within the ad copy. Check out these ads with two different cases:

vs.

I have seen the same ad with varying cases have drastically different results whether that be through higher click-thru-rates (CTR) or conversion rates. Additionally, testing dynamic keyword insertion (DKI) better helps to match search queries to the ads. Trying different calls to action is good to test as well:

There are literally hundreds of permutations of ads you can write to contain different cases and punctuation, varying ad copy, and any other ideas you may think of.

There is always the opportunity to add more keywords to your campaign. You can expand the reach of your ads by testing terms in different match types. For example, if you are only bidding on the exact match of “designer coffee tables” you could also try it in phrase and broad match. You can take advantage of many free keyword expansion tools and can comb your site for new keywords. There are even tools that will make permutations of your keywords.

Testing different variations of your landing page(s) is always a good idea. Whether you do an A/B test or a multivariate test, play around with items on the page. You can tweak the content and shorten the registration form among other things. Google AdWords Website Optimizer is a great tool for testing variations of landing pages.

Keep in mind to always be careful whenever you test new ideas. Some ideas might have great results, but adversely some might not. It is important to keep a close eye on your tests as to not waste precious budget.

I have only touched on a couple of items as there is so much within PPC to test that you should never become complacent with your campaign. Remember, your campaign might be performing well, but it can always do better.

1) Decide which content to put on your mobile site

One of the first challenges when starting a new mobile project is deciding exactly what content to offer your mobile visitors. There are a few differing opinions in the industry right now; some people strongly believe in the One Web, while others believe that the experience should be re-shaped for the medium. This could mean a new website, new content, and a new information architecture as well as a design optimized for mobile.

2) Mobile enabling your site isn’t as simple as adding a new stylesheet.

CSS, the language used for applying styles to your website, currently provides a method for specifying where those styles should be applied. This functionality is provided in the form of a ‘media’ attribute applied to your stylesheets. Supported media types include screen (your computer), print (for printing a web page), and handheld (small screen, handheld devices). Unfortunately, support for the handheld media type is limited and buggy. If it were, it would theoretically be as easy to reformat your website for a mobile device as it is to reformat it for print. There would of course still be other considerations—hiding a large banner image via CSS will not stop it from being downloaded over a slow connection to a mobile device.

Because of the lackluster support for the handheld media type, we’re generally stuck with device detection: if a user hits the site from a handheld device, we route them to a separate mobile website. Websites built for mobile use a very similar markup language as regular websites. However, just like some desktop browsers offer different levels of standards support, so do mobile browsers—and there are a lot more of them!

3) Understand the different levels of mobile browsing

At least here in the U.S., we are just starting to see a big push toward phones that are really optimized for browsing the web. With devices like the Apple iPhone, Samsung Instinct, LG Dare, and the G1, every major wireless carrier now offers a decent phone for web browsing. While the iPhone (with its bundled version of the Safari web browser) is easily the winner for web browsing, the other devices aren’t far behind. All the major browser makers also have versions of their browsers that run on mobile devices.

However, there are still a lot of older phones in use whose browsing experience is basic, at best. Even popular devices like the BlackBerry tend to have a sub-standard browser compared to the devices listed above. It’s definitely a challenge to optimize your site to work on the small screens and bad browsers of the older devices, while trying to take advantage of the bigger screens and better rendering ability of newer devices.

4) Play to the strengths of the platform!

So, this should be fairly obvious—it’s a mobile device! Build a site that supports what a user needs to do when they’re on the go. Things like making telephone numbers into hyperlinks that automatically dial the phone can make all the difference to a user. Limiting content to what’s really important and removing images for faster page load times might be painful at first, but as you strip down to the essentials,  you’ll start increasing the usability and value of your mobile site.

5) Test on a range of devices

Testing is definitely one of the bigger challenges we have to deal with. There is simply no way to test on every device. However, with the right combination of devices you can get a great idea of how your site will perform across a wide range of different devices. On page 62 of Cameron Moll’s book, Mobile Web Design, Joe Shepter explains how Yahoo! employed this technique when developing a new mobile site for FIFA.

To make sense of the chaos, Yahoo!’s team first selected a target
group of ten phones. They were all widely distributed, and their
browsers ran the gamut from high-end to barely functional. As the
thinking went, if the site worked perfectly on all of them, it would
perform reasonably well on the rest of the world’s phones.
- Joe Shepter

The folks at MobiForge recommend a similar process:

One way to approach this problem is to focus on five classes of devices that span a range of capabilities. Of the hundreds of devices available, supporting five mainstream devices makes a great place to start. Obviously supporting more devices ensures greater compatibility with more devices and developers should always endeavor to do this, but supporting five devices disparate devices can do the job.

There are also plenty of emulators to help you along, but are definitely not a substitute for the real thing.

6) Use the resources available to you!

Ok, so I know I said 5 pointers, but everyone likes that last extra freebie, right? One last thing to keep in mind—there are resources available to help you along. Aside from the emulators to help with testing (which can be much quicker to use when still in development), there are some web sites that will help check your website to see if it’s ready for prime time.

• W3C mobileOK validator: Similar to their HTML validator, but results are specific to mobile sites
• ready.mobi: “evaluates mobile-readiness using industry best practices & standards”

And of course, partnering with a company who’s been through it couldn’t hurt either. We’d love to answer your questions if you’re thinking it’s time to make the leap into mobile for yourself. Contact us and let’s talk about it!

Unfortunately, the height of the page being pulled in would vary wildly. This led to a fairly disappointing experience where the page was either far too long, or content in the iframe was cut off and the user had to scroll within the iframe to see everything.

We came up with what we thought might be an interesting solution. If the page loading inside of the iframe (the child page) could calculate its height, and somehow let the parent page know, the parent page should be able to reset the height of the iframe.

With a little inspiration, we came up with a pretty neat solution that we’d like to share. Our solution requires that you have the ability to edit the code of both the parent and child pages.

The child page being loaded into the iframe will simply reset the location of the parent page, and include a hash with the height of itself.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script>
<script>
var parentUrl = "http://example/iframe-outside.html";

setHash = function() {
parent.location = parentUrl + "#" + $('body').height();
}();
</script>


We’re using jQuery here to easily get the height of the <body> tag.

On the parent page that includes the iframe, we’ll again use jQuery and write a small function that gets the height from the hash in the URL, and uses that to reset the height of the iframe.


function setHeight() {
var newHeight = parseInt(location.hash.substring(1)) + 50;
$('#hashFrame').attr('height', newHeight);
}

We ran into a bit of an issue: the page we were loading was taking a few seconds to load, and we didn’t want to set our height on the iframe until the content within the iframe had finished loading (and it had a chance to set the proper height to the url hash).

More jQuery to the rescue! The jQuery .load() method allowed us to call our setHeight() function after the iframe had finished loading.

$('#hashFrame').load( function() {
setHeight();
});

Putting it all together gave us a great way to use our new application inside our legacy application, and make it faily seamless to the end user.

By looking at what content users need and want, we can begin to pinpoint the tradeoffs necessary for a quick and rewarding experience. Take the example of picking up a friend at the airport. From your desktop you can get detailed information about the flight: How long has it been in the air? What is its altitude? How many miles has it traveled? In a mobile environment on the way to the airport, that information takes a back seat to simply knowing what time it’s landing and which terminal do you need to go to. The same priorities hold true for most types of content, and identifying what they are is the first step to design. We can fit it all, but it seems far better to fit what is needed most by users.

Check out this example from a recent project:

Full web version

Mobile version

Not everyone has an iPhone or Blackberry Storm. A lot of users have simple smart phones, requiring careful thought into how deep content lies within the Mobile Experience and how many clicks it takes to get to it.

Information Architecture and Interaction Design for Mobile needs to take this into account and requires the structure to contain a number of “either/or” choices and tailoring the navigation (modified from the work of Christian Crumlish):

• If at all possible, limit the number of categories to five (5)
• To help users access links quickly, choose the top 10 per page to assign numerical access
  
• Minimize the number of levels of navigation: the deeper the content is, the harder to drill in and out
  
• Reorder the site categories by priority to best suit the needs of the Mobile audience. Speaking to users will help determine the best approach for this.
• Make telephone numbers links:
  <a href=”tel:+19995551234”>+1 999 555-1234</a>

Be prepared to spend time working through the navigation and interaction modeling for the Mobile Experience. In order to simplify the structure into an intuitive experience that breaks the content down into digestible chunks takes patience. Ironically, simplification is one of the more complicated processes, but the payoff at the end of the day is worth it. Just ask your happy users.