Category Archives: Website Design

Stuff about building websites.

My New Job

Visual Studio 2012 shipped last month, so the rhythm of the business shifted to reorganizing for the next product cycle. As a part of the reshuffling, my job scope expanded from overseeing the Visual Studio Developer Center to the MSDN proper and Team Foundation Service websites. My charter covers content presentation, information architecture and experience integration. That’s a fancy way of saying, “Help build a more useful and pleasant to visit website.”

MSDN, according to Alexa, receives about 11% of all web traffic directed to microsoft.com, so I’m really looking forward to helping shift the experience for the millions of customers that visit the site. If you’re one of those customers, feel free to let me know what you do and don’t like about MSDN, and I’ll incorporate that into the evolving plans.

My team has also grown and I’m very happy to be working with some of the same people that I worked with a few years back when I was Lead Site Manager for TechNet*.

I already have some ideas about some things I’d like to see change and I’ll be highlighting them here going forward; don’t be shy about telling me what does and doesn’t work. 😉

(*Having helped launch Microsoft Answers in 2008, I’ve now officially worked across the Microsoft technical website audience triad of Developer, IT Pro and Consumer. It’s amazing and humbling when I start to think of the millions of people that have interacted with my work. Very few places in the world have that scale opportunity and I feel fortunate for the opportunity.)

Top Task Optimization – Example: The shop.nordstrom.com Header

Over twenty years have passed since the web was created, we’re still mostly creating the first web page and site. This irritates me.

Back in the days of web yore when websites started to gain serious traction and Yet Another Hierarchical Officious Oracle came online, the websites I encountered mirrored the Internet applications of the time. Applications like GopherPinevi, and ftp.

Endless hierarchical navigational menus with content neatly and zealously segregated into the buckets behind them, deep-tree page patterns that look like man pages, a dizzying array of click targets, sitemaps for computers instead of humans, and crappy default font choices in sizes and styles that make click targets miniscule.

Even people who should know better often stumble (myself included!)

Two decades of usability and customer feedback, and many websites still do this stupid shit. The mobile web revolution is starting to change things a bit given the screen size constraints, but many mobile sites have a UI not far removed from a DOS prompt.

Why has it been so hard to move on? It’s not like people haven’t tried. Shockwave  Flash, as much as it has its other issues, does at least provide the possibility of more information-dense experiences outside of the HTML box when designed correctly. HTML5 is showing some promise but it’s still to early to say how it will turn out.

I think the problem begins at home. The home page, to be specific.

The reason this is the case is because most websites still get designed starting from the home page and view the home page as the “root” of the site. For small sites this still makes some sense, but for sites containing more than a handful of pages, it’s just plain dumb. The home page and headers and footers are now overloaded, bloated things, crying out for streamlining and optimization.

Search has pretty much erased site hierarchies, and if you don’t have your top site tasks linked or actionable on each and every page, you are doing your visitors a huge disservice.

Over the coming weeks, I’ll analyze some sites to show how I think they could be made a bit better in this area.

Let’s start with a department store, Nordstrom. They have locations across the country and they have a very good online shopping experience that also offers in-store pickup. If I buy something and want to pick it up[1], what two pieces of information do I need? Where the store is and what time it is open.

This site has two entry points to find this information: one in the header labeled “Our Stores & Events” and one in the footer labeled “Store Locations & Events“. I’d argue that the second link title is a bit better than the first, but they may be doing some A/B testing here to find the better phrase for their customers. Note that they also have the link instrumented to track which one gets clicked.

On the destination page behind the link, I see this:

A key task hidden in the middle of a complex graphic.

It’s nice that the text entry focus is set and highlighted in the field, but wow, with that big header text on a busy background, I actually clicked on the header thinking I needed to go to another page before I spotted the text entry.

After entering in my zip code, the first listing on the results page is the furthest from my location. So I have to scroll down to find the closest one. This is a solved problem, so it’s surprising to run into it here. The good news is that they do clearly provide shopping hours and a link to a map, but the map is three clicks in from the home page. This is a significant hurdle for people on mobile devices.

In this example, I’m going to tackle the multiple click problem via the header and solve for a few other usability issues that crop up there along the way.

Current header.

The current header has a lot going on. Nine links plus a search box. There are four links that point to two destinations and there’s a mix of underlined and non-underlined links.

The first thing that jumps out for me is that the prime real estate, the top left corner, is underutilized from a top task perspective. Multiple eye tracking studies  have shown that most people start in the top left corner, move right, then down and to the right a shorter distance, making an “F” shape.

In this Step 1 revision, I’ve moved the Nordstrom logo up and placed the search box right below it. I’d A/B test this location against the current location to check performance, but with a more visible location I’d expect on-site search to increase.

Step 1 header revision.

On the right side, I’ve de-duplicated the “sign in” and “Your Account” links. In this signed out state, they both lead to the same sign in experience. In a personalized signed in state, clicking on your name would take you to your account information. Removing that link has the added benefit of tightening up the top line and it no longer competes for attention in the logo area.[2]

The biggest change here is the addition of base store hours for most of the week[3], and a store locator by zip code search box that uses some ghost text as a guide. The user interaction here would be to type in a zip code, hit enter/return, and have a results page that displays all regional stores plotted on a map along with a list sorted by proximity to the center of the zip code. Each store listed would also display hours and upcoming events.

In this new interaction model, every page on the site now provides critical top task  information, a rough guide to when stores are open, and locations are now only one click away from being displayed on a map. In the current model that Nordstrom is using, you are three clicks away from a map, two from store hours.

We’ve now (hopefully) optimized two top customer tasks, so now it’s time to take the second step and optimize for the top business tasks of promotions in the header. Nordstrom is using three areas here: 1) top left, under the logo, 2) top right, in the black header bar, and 3) lower right with icon.

In this second step, the most noticeable change is moving the shipping information and icon up into the top black bar. This removes the circular black icon, which was a visual attractor and previously drew you to the search box. With the search box moved, there is no need to draw the eye to that target. The net effect is that we have uncluttered the right-hand side of the header and in the process, made the store locator more visible. I’d also lean towards an evergreen placement of the shipping information, given its high value proposition to entice customers to try things out for no cost, and only swap it out for promotions during major seasonal sales.

I’ve also taken the liberty here to change the font to more closely match the rest of the fonts in the header and normalize around sans-serif, but I’d leave it to a fontographer/designer to make the final call on font faces and sizes here.

Step 2 header revision.

By moving the shipping promo into the header bar, we also de-duplicated the points promotion that appeared in two places and removed two questions for customers, “Which link should I click?” and, “Are the links different?”

Another change is replacing the “See details” link in the triple points promotion with, “Only four days left!” Where there used to be three underlined links in the header with the same text that took you to two different destinations, now we have two clickable regions with clear destinations. My rationale for removing the third promotion spot is that with the shift of the search box, more people will see the promotion overall, so the need for two areas to promote it are minimized.

The net result? We’ve pared down to six links with an equal amount of destinations and unweighted the header from a visual standpoint so it competes less with the sales content below.

The existing and proposed headers together for comparison.

The final step would be to A/B test everything to discover if the changes we made drove better click-through or changed customer feedback around finding stores and store hours.

[1] This particular scenario may be an edge case for Nordstrom, but I constantly hear people complain about discovering store hours and locations for various merchants.

[2] I was also leaning towards removing the “Get E-mail Updates” and “Wish List” links, but without knowing the data behind how much this drives their overall digital engagement strategy, I left them alone. “Wish List” also takes you to a sign in page, so that would be a low-hanging fruit link to remove in the anonymous state to free up more space and reduce links.

[3] Nordstrom’s core days are Mon-Sat and in the United States, where most people generally expect reduced Sunday hours, so only displaying Mon-Sat core hours is a relatively safe move.

Designing for the Mobile Web

The days of fine-grained link acquisition with a mouse or trackpad pointing device are being eclipsed. If you haven’t designed a mobile version of your website or aren’t thinking about how to re-factor your site for a mobile touch experience, now’s the time to do so. And if you aren’t considering mobile Safari as your primary target, you’re not paying attention.

Don’t believe me? Than you should look at the data around PC shipment forecastssmartphone shipment forecaststablet/mobile shipment forecasts, and correlate that against desktop browser market share and mobile browser market share.

Designing for this emerging mobile web isn’t hard – there are just some new constraints you need to keep in mind.

Offer a non-desktop version of your site and a way to view it. XKCD sums this up nicely. I swap back and forth depending on what I’m doing at the moment. Choice is good.

Allow zooming. This one frustrates me to no end. Someone, somewhere thinks, “Oh, mobile experience! I better set fixed widths for everything so the proportions don’t get wacky.” And then I visit a mobile site where I can’t zoom a picture. Fail.

Touch targets need to be around 6mm or larger and you need to provide some space around clustered links, otherwise click acquisition becomes hard. This also means using larger fonts for links in some cases.

Just don’t do cascading or flyout menus or navigational items. Getting proper render across all browsers is tough and accidental touch inputs tend to be high, so menus/navs that collapse on touch outside of target areas will frustrate users. I’ve wanted to throw my phone to the ground when dealing with finicky nav flyouts.

Go easy on the Javascript. The Javascript engines in mobile browsers are much better than they used to be even a year ago, but highly complex scripts will slow things down. I access my WordPress dashboard via the mobile web sometimes, and it’s s-l-o-w to render due to all the Javascript.

Dump extraneous text. Focus on the task or action and minimize the use of text so you can use the limited UI space for other elements. For mobile, I’m in, I’m out. I’m not doing deep research. If I can’t find things quickly, I move on.

Optimize, compress, and be sparing with graphics. Graphics chew up bandwidth, which most people still pay for on their data plans and slow down page render times. Don’t even get me started about sites that render out a 2MB PDF for some pages…

Check your CSS on your target platform(s). There are wide variances in CSS rendering across mobile experiences. I keep running into sites that don’t re-flow or re-paint correctly when I zoom. It makes sites unusable.

Pay attention to keyboard input scope. Every now and then, I run into a site that notices I’m on a mobile browser and I get a different keyboard for input. It’s a nice detail that makes password or email entry that much easier. Just be consistent between fields, because I get screwed up and annoyed when the keyboard changes when I change field focus.

Don’t be clever with ad placement. Look, most of us need to work for a living, myself included, (notwithstanding a few rich, dirty hippies,) but that doesn’t mean you should make your ads look like the rest of your content or place them right next to high profile touch click targets to garner some extra clicks.

Lastly, make stuff bigger and simpler. Screen sizes are smaller than desktops – duh. Strip things down to the basics and make the remainder larger. Consider re-factoring your information architecture and remove extraneous pages. Think easy and fast.

There! Get to work. 😉

Website Launch Kōan, #1

Over the years I’ve been involved in dozens of website launches and refreshes both large and small, and I’ve noticed that most have had similar arcs in getting pixels to the screen.

From these experiences, I’ve devised a few kōans to ponder. Here’s the first.

Q: When will the final, complete copy be ready for localization and publication at launch?

A: After launch.

Data Wallowing

It’s been snowing in the Seattle area and I now live on a very steep hill, so today I worked from home and have been wallowing in website analytics between a couple of sledding breaks.

My data wallows look at everything the analytics reports can serve me: visitors, page views, countries, browser versions, page paths, etc. The more esoteric the data, the more I like it, actually. I tend to find the signals in the extremes: the most popular and least popular stuff. They tell you what to focus on and what to chuck overboard.

I look at the last month, quarter, half-year, and year to get a feel for the trends over time and see how major site updates impacted traffic. I look at the top stats for each bucket and also look deep in the long tail to see what’s hiding. I sanity-check the data against my expectations, like looking at the percentage of non-U.S. visitors to the U.S. site, (it’s always higher than I expect,) and referring pages, (the top entry is really bookmarks instead of search???)

I look at clickmaps of the most and least trafficked pages to get a sense of how the page layout may be influencing clickthroughs.

Then if I have access to it, (at Microsoft I do,) I look at the data of the referring sites themselves to see where the outbound rank is for the site I’m analyzing. I look for customer satisfaction data, customer feedback, planning and marketing data, as well as industry trends for the segment the site’s in.

I search social media and look for positive and negative things about the site in question. I also see what they’re saying about the competition.

Then I spent time thinking about instrumentation gaps and how I can triangulate across or re-query the data sets I do have access to in order to guesstimate the gaps. Examples of gaps that I’ve run into in the past are not instrumenting by content types or site sections.

When I have all this data loaded into my head and spreadsheets, I can finally begin analysis by creating an empirical top task list based on what the data says and compare that to the expected or desired top task list. Further analysis is a topic for another day.