Madison Ave. Collective

est. 2008

All website development projects start with questions. Lots of questions. In order to uncover unknowns and proceed with confidence, we recommend starting with a Discovery phase. Learn all about Discovery in this free, 8-page illustrated guide.

We start all new development projects with an extensive research and strategy phase called Discovery, which can save you from unexpected delays and costs by identifying challenges early, so they can be addressed. This worksheet is no replacement for a thorough Discovery, but it will streamline the start of your custom website or mobile app project by helping you organize your thoughts and needs.

Use this checklist to evaluate your website’s user experience, ADA compliance, brand consistency, and mobile responsiveness, and to start identifying its strengths and trouble spots.

When it comes to website development, there’s a big difference between using a one-size-fits-all template, and creating a multi-dimensional user experience (UX) that actually helps you achieve your business goals.

Every effective website needs a foundation. Within it, content strategy and information architecture (IA) are two essential layers. These strategic planning elements provide a home for your website’s content to live and grow and serve your organization. And content is, of course, everything.

“Your content is your website,” says Neil Patel, founder of Crazy Egg.

Here at the MAC, content strategy and IA documents are developed during an initial phase of work we call Discovery. Our research and strategy process involves several steps, typically in this order:

  1. Stakeholder interviews
  2. Competitive analysis
  3. Website and brand audit
  4. User personas
  5. Content strategy
  6. Information architecture
  7. Functional requirements and specifications
  8. UI design mood boards

Before going further, let’s define the two terms central to this article.

Content strategy is a systematic way to describe your organizational goals, brand promise, and target audiences. In other words, what do you want to say, and who do you want to say it to?

It will also note which type of content is needed where — e.g. a paragraph of text, a video, a gated article, an infographic, or anything else that will tell your story and guide users along a desired path.

It may also include some preliminary keyword research to bring your content into focus with your users’ goals, baking in SEO right from the start in a way that adds value to your audience — rather than slapping it on later as an afterthought, in a way that neither users, nor search engine algorithms, appreciate. (More on content strategy elements here.)

Information architecture (IA) flows out of the content strategy. Its purpose is to concisely communicate the underlying structure and organizational hierarchy of the website.

An IA can take the form of a simple Word document outline, or it can be a more elaborate tree diagram with boxes and lines that show how a user can get from one page to another. Either way, the IA describes how the content of your website is organized in terms of pages, subpages, and sub-subpages. And — importantly — it also assigns names to identify those pages in your navigation bar.

You can think of your content strategy and IA as two sides of the same coin. Content strategy will influence IA, and visa versa. Because they directly impact one another, they should be created and refined more or less simultaneously.

A collaborative, iterative process is especially important when more than one person is developing these documents. At the MAC we’ll often have one of our content developers take the lead on the content strategy, while a UX designer will take the lead on the IA. These two individuals work closely together during the research and strategy phase, influencing one another. Out of that collaboration, we arrive at a final product that really serves the user and supports our client’s goals.

Which brings us to our next point. Content strategy and IA aren’t just a static reflection of your organization’s vision, purpose, and goals. They also empower you to develop your story and tell it in a more compelling way.

Content (words, photos, videos, etc.) and architecture (site structure and navigation labels).

Two tools to tell your story

Here’s what I mean by this.

Let’s say you produce children’s toys that are handmade in Virginia from sustainably-sourced materials, and you sell your wares through an online storefront. These high-quality trains, building blocks, and puzzles are not for every parent with a two-year-old. Your target customer is someone who likes to shop at local, independently-owned stores and prefers quality over quantity. These are people who care about the environment and the way that their actions impact future generations, and they’ll pay a premium to feel good knowing their purchases are not depleting the earth’s natural resources.

Now let’s imagine how the IA and content can work together to tell a complete story on the homepage of your company’s website. The first thing visitors might see is a large photo of a bright-eyed toddler in a modern playroom, stacking a colorful wooden pyramid. Over the top of the photo are the words “She may not know it’s handmade with sustainable Virginia hardwood, but her smile says you bought the perfect gift.”Then, along the top of the page is a navigation bar with the following links: Handmade Toys for Toddlers | Green Gifts from $50 | Our Sustainability Promise.

As you can see from this example, your website’s content (photos and words) and IA (navigation labels) each have a role to play in differentiating your product and company from a thousand other online toy stores.

An alternative course of action would be to use more common terms for the IA such as: “Toy Catalog | Gifts on Sale | About us.” But these labels won’t help you differentiate from competitors, and they don’t help you tell your story. Generic terms, by definition, paint a picture that makes you look and sound like everyone else.

Be different, and be yourself

Upon arriving at any new website, the first question all website visitors subconsciously ask themselves is: Do I care about what I’m looking at? Yes (stay) | No (leave).

People are impatient. Especially when browsing the web. You’ve got just a few short seconds to communicate what you’re offering them — be it uncommon information, a useful new product, or a better service than that of your competitors. Good content, paired with a good IA, plays a major role in your ability to give people confidence they’re in the right place.

Unless you manufacture water or oxygen, what you offer is not for everyone. The more specific and clear you’re able to be, the more success you’ll have at attracting those who align with your mission and want what you’re selling.

This article is also published on Medium.

In the rare case, a visitor comes to your website and immediately signs up for your service or purchases your product.

In a more typical case, a visitor needs to be courted before they’re ready to commit (or in marketing jargon, “convert”).

A potential customer travels through the marketing funnel, learning more about you, engaging with your content, and determining if they’re going to purchase.

It’s your job to provide the perfect content, at the ideal time, to the right person.

This starts with a complete understanding of who that person is. At the MAC, we peel back the layers on their needs and decision making process through our Discovery method.

Armed with this research, you can accurately match the marketing funnel with your web content strategy, smoothly guiding the prospect to a decision.

This post demonstrates how to align a customer’s journey through the marketing funnel (awareness, consideration, action) with user-friendly web design and captivating content. We’ve also thrown in examples of content types to demonstrate how to implement this approach.

How the marketing funnel and web content strategy align

A lead generating website guides visitors through a specific set of pages, tied to a three-tiered funnel, leading to a desired set of outcomes.

For those of you who are visual learners, here is a helpful graphic:

Conversion factors

Before we dive further into the funnel layers, it’s a good idea to get a grasp on what leads a visitor to convert. Key conversion factors include the website’s usability, the site’s relevance to visitors, and the ease of navigation. These are supported by content quality, reader-friendly formatting, clear calls-to-action, and simple conversion forms.

Your goal is to keep the visitor’s attention and motivate them to take the desired action. If they have to dig for an answer, they will likely move on to a different option.

Content creation

Once you have your conversion factors squared away, you can fill in the marketing funnel with compelling content.

Create content to answer questions and concerns that arise at different stages of the decision making/buying process. More on this to come.

You may need to create different funnels for different target audiences or conversion goals. For example, a completed inquiry form or an actual purchase could be two types of conversions on the same website.

Additionally, the types of content you share and where it belongs in the funnel typically shifts depending on your industry and if you’re targeting businesses or consumers.

Are you starting to get the sense that this is a fluid practice? Well, you’d be spot on. It’s a choose-your-own-adventure approach, guided by your audience’s preferences.

Some examples to help clarify:

Top-of-funnel: Awareness

The awareness phase is where you build the connection between your brand and the topic. Your target audience has a problem and is searching for answers. You want to direct their attention to your solutions.

Content types for the top-of-the-funnel:

We took this approach with PainWise, a public awareness campaign addressing the opioid epidemic.

For the first phase of a digital marketing campaign, different messaging and imagery were used for specific audience segments. The goal here was to purely drive awareness. Clicks to the site were an added bonus and the goal of the second (consideration) phase.

Above: Samples of PainWise Facebook ads for specific audience segments.

REI has mastered funnel-driven content. To plug into people’s needs, they’ve produced a series of short how-to videos. These videos nudge someone closer to purchasing from them when adventure calls.

Middle-of-funnel: Consideration

If a person has entered the middle-of-the-funnel, you’ve successfully captured their attention. The consideration phase is where you educate and engage. This is also where you typically build subscribers and followers.

Content types for the middle-of-the-funnel:

Havenly, an online interior design service, prompts visitors to take a style quiz. To view the results, the visitor completes a simple contact form with the option of booking a consultation with an interior designer.

Above: Havenly invites visitors to sign up to view their interior decor style.

Another example comes from Willamette Community Bank, one of our clients here at the MAC. Each product page includes a short contact form. Visitors are then contacted by a loan specialist with the intent of moving leads down the funnel.

Bottom-of-funnel: Action

At the action phase, leads are compelled to make a purchase decision, converting them to customers. Continuing to build trust and providing the right content can greatly impact your conversion rate.

Content types for the bottom-of-the-funnel:

Sprout Social takes a 30-day free trial approach. Teams have the opportunity to test out the social media management software, before taking the plunge.

Above: Sprout Social offers visitors a 30-day free trial before committing to a paid subscription.

Use content to improve conversions

With an in depth understanding of your audience and industry appropriate marketing funnel, you can accurately align your web content strategy to the customer journey.

To match the marketing funnel with your web content strategy:

Fine-tune this approach and you’ll improve your customer relationships and conversions.

This article is also published on Medium.

You wouldn’t launch a business without a plan. Likewise, launching a website without a strategy will leave you with a site that sends prospective customers running for the hills.

A web content strategy is essential for creating a site that helps you meet your business goals. And, your most valuable players will benefit.

The following outlines key elements of a content strategy and provides actionable steps for you to implement. If we were in math class, we’d say these are your order of operations.

Element 1: content strategy goals and mission statement

Address how your website will help you achieve business goals. These site-level goals will guarantee each ensuing decision supports your organization.

Abound, a client of the MAC, provides guidance on schools across the US. Its goals include serving a previously untapped audience (adult students) and positioning themselves as a leader in the college guidance market. These goals directly dictate the site’s functionality and design.

Tied to your goals, your content mission statement steers audience-focused content.

The Content Marketing Institute offers a great template:

Abound’s content mission statement is:

Action step: Outline your goals and fill out the content mission statement template.

Element 2: Conduct an audience analysis

Knowing our audience’s needs, wants and desires is essential. This detailed understanding is key to providing them with helpful information. The more helpful you are, the more likely they are to reciprocate by subscribing/purchasing/etc.

This process, officially called persona development, is tightly woven into the MAC’s Discovery method. Asking key questions on the front-end helps ensure your audience is effectively and efficiently targeted.

Action step: Ask the audience.

The questions you ask will slightly differ depending on if you’re targeting organizations or individual consumers, but here are a few ideas to get you started:

Element 3: Messaging matters

Now that you’re in tune with your audience, how will you craft messaging to inspire action? What voice and tone will resonate?

Remember, how you speak to your customers is not necessarily how you want to be spoken to.

Action step: Create a brief guide outlining your messaging standards. Don’t pull your hair out; just jot down your approach on paper (or Google Doc) so any member of your team can write copy with your voice. MailChimp has a phenomenal example.

Element 4: Determine web features

Before you jump into what your website will look like (don’t worry, you’ll get there), consider what features and capabilities need to be integrated. Examples include email signups, calendars, ability to buy a product or make a donation, lead capturing, and responsive display.

Going back to Abound, its site needed to house thousands of colleges and their unique offerings. The solution: a custom database enabling users to filter schools by college, program, class type, location and more.

Action step: Compile a big wish list of features. Then, prioritize the features that are most critical for when your website launches.

Element 5: Get organized with an information architecture

Don’t let the phrase “information architecture” scare you. We’re not asking you to pull out your protractor.

If it helps, think of information architecture as an outline or site map illustrating your content and navigation. You must consider your target audience, features and data comprising your website.

Gather a team of designers and content strategists for this step. If you are stuck, ask the experts.

Action step: List out all your possible pages, how they will link, and what they will be called.

Element 6: Conduct a content inventory and audit

Your information architecture serves as your guide for content and copywriting. So, what do you have and what will you need to create?

Take inventory of what content you have to work with. This content could live onsite or offsite.

Next, carefully audit what you’ve collected. Is this quality content? Is the messaging on-brand? Will it meet audience needs?

Action step: Review your inventory and evaluate the quality.

Element 7: Plan your web content

Now you can select appropriate topics to address customer needs and fill in content gaps.

All content topics you produce need to serve a purpose, whether it’s entertaining, informational, helpful, or some combination. This purpose should be directly tied to your marketing funnel.

For instance, an infographic linking to a landing page serves prospects at the top of the funnel or awareness phase. An informational webinar, demonstrating how you solve a problem, belongs in the middle of the funnel.

Finding the sweet spot between topic, content type, and buyer’s journey ensures your content is intentional and drives site visitors through your marketing funnel.

But how will a prospect find your content? Introducing, content hubs.

Your topics, or keywords, should form content hubs. Developing hubs means your site is meaningful for visitors and is search friendly.

Action steps:

Identify your key topics and affiliated keywords. Here is a SEO guide to get you started.

Plan out what types of content (landing pages, blog posts, videos, ebooks, photography, etc.) you will produce to support your topics and marketing funnel.

If needed, go back and adjust the information architecture to sync with the new content you are planning.

Element 8: Determine ownership

By now, you have a solid plan of what you will create and where it will go on your website. But, who is going to create all this wonderful, actionable content…and when?

This is where ownership comes in. Establishing ownership is essential for well-managed content that builds a strong brand image.

Web design and development is a multidisciplinary practice. Delineate who is responsible for content creation, production, distribution, and maintenance.

Establish your workflows — who is responsible for each step, and the order of those steps.

Also falling under the ownership umbrella are brand standards and messaging guides. You want your audience to know your content is your organization’s just by the way it looks or sounds.

Action step: Create two documents. One is a working document specifying your brand and messaging standards. (If you followed this outline, you should already have your messaging standards ready to go.) Another is your editorial calendar specifying what, when, where, and who.

Put the elements of a content strategy to work

To avoid random acts of content and a bloated website, gather your team — and web strategists — and start creating your web content strategy.

The purpose of creating a plan is to transform the experience for your team and your audience. The result: a website that helps you meet your business goals.

This article is also published on Medium.

A content strategist sits at a table with a stack of user personas, drawing bubbles on a page, mapping the information a web user is going to need, how they’re going to use it, and in what order.

A graphic designer stands at their desk, drafting content blocks on a wireframe, anticipating the needs of the user who will be visiting that page.

An interaction designer sits in traffic on their way home, thinking about what a button should do when the user clicks it, and what type of user action should make the email signup form unfold before them on the page.

All these specialists are helping to design a user experience. And while it’s easy to suppose that “design” is simply a shorthand for “graphic design,” in the case of UX, it’s so much more.

What’s user experience?

Well — in addition to being a buzzword — UX is also “an important, strategically relevant, multidisciplinary field for solving very difficult problems at the intersection of technology, spaces, the Internet and people.” (So says Trip O’Dell, product design manager at Amazon.)

Literally defined, UX is a person’s perceptions and responses from the use of a product, system, or service. That’s how the International Organization for Standardization puts it.

In less stuffy speech, user experience is “how you feel about every interaction you have with what’s in front of you in the moment you’re using it.” User Testing Blog followed that latter definition with several worthy questions:

These questions comprise a good litmus test for UX on the Internet. When creating a website, you’re aiming for “yes” all the way down the line.

What’s UX design?

According to Wikipedia, user experience design is “the process of enhancing user satisfaction with a product by improving the usability, accessibility, and pleasure provided in the interaction with the product.”

Make it fantastic, in other words. Do everything you can to wow your user on all those litmus questions above.

Which brings us to the point

UX design is not a synonym for graphic design for the web. While it’s easy to assume that hey, design is design, these animals are pretty different. And in this case, that difference is pretty crucial. A graphic designer plays an important role in UX design — but there are other roles, no less important.

Truth: you can’t have peerless UX without a disarmingly attractive, elegantly simple, self-explanatory visual design.

Equally true, you can’t have great UX without an architecture that’s sensitive to a user’s needs, structuring information in a logical, comprehensible way.

Or without page layouts (wireframes) that offer the right content, in the right place, so intuitively that a user doesn’t even have to think about what they came for, because they’re already doing it.

Or without on-point messaging that appeals to the user’s immediate practical priorities and underlying emotional needs in a deeply compelling way.

Or without on-page elements — breadcrumbs, for example — that support the experience by making the website effortlessly navigable.

Or user testing to catch hangups and refine the design. Or best-practice web development to put the site on its feet and get it rolling.

In short, there’s a difference between designing a visual user interface (UI design) and designing every aspect of a multi-dimensional experience (UX design). Here’s Kyla Tom, lead graphic designer at Madison Ave. Collective, on the big picture:

“Web design … requires content development from individuals with editorial expertise, a graphic designer to really dig into the final UI design and create iconography, an interaction designer who knows exactly how smooth actions and transitions need to be, and a back-end as well as front-end developer to maintain the site and bring everything to life on screen.”

In short, UX is teamwork.

UX designers come in many shapes

Because UX design isn’t the sole purview of any one individual — some mythical being who’s able to handle it all solo — it’s worth thinking about the various specialists involved in designing an excellent user experience, and acknowledging their role as UX designers. The magic happens at the intersection of several very different, very vital skill sets:

And it’s more than the sum of the parts. UX is strategic. It’s iterative. It’s multidisciplinary. UX design is what happens when content, graphic design, and development click. It’s the satisfaction you feel when, as a user, you land on a website and your needs are answered before you even have to ask.

That’s no buzzword. That’s an ideal worth striving for.

So, when asked what UX design is, don’t fill in the bubble next to “graphic design for the web.” Remember that on the multiple choice test, the correct answer for UX is: all of the above.

This article is also published on Medium.

For the better part of 16 years I’ve been designing websites and other screen interfaces, and during this time I have certainly seen an evolution in UX/UI design trends.

Technology has evolved, too. It wasn’t all that long ago when mobile phones, with their tiny screens, would only display tiny websites. As responsive layout became the norm, a whole new set of usability and wayfinding needs for mobile design was born.

And yet despite these changes and new challenges over the years, the job of the UX designer has remained the same: Present information in an easy-to-find, easy-to-consume way.

I’ve decided to take a closer look at one of the more ubiquitous interface design elements on the web — the breadcrumb trail — and ask a few questions. First, do website users actually find breadcrumbs useful? Second, if they are in fact helpful, what are some ways to optimize their effectiveness? And finally, will new technologies and trends in UX/UI design relegate breadcrumbs to the trash bin of antiquity? In other words, is modern web design causing breadcrumbs to go stale? Let’s find out.

A little history

Long, long ago when siblings Hansel and Gretel were abandoned in the woods by their extremely poor (in more ways than one) parents, they conceived a genius way to find their way back home: Drop breadcrumbs. Nevermind the fact that birds ended up eating the bits of bread, causing the two lost children to be kidnapped and nearly cooked by an old witch. The idea was still a good one: Leave a trail behind.

Fast forward to 1991, when The New Kids on the Block were rocking the Super Bowl halftime show. Web servers and web browsers were the new tech on the street, and it didn’t take long for developers to co-opt Hansel and Gretel’s brilliant wayfinding method for their own then-20th-century purposes. Digital breadcrumbs quickly became commonplace across the world wide web because they gave users a handy, at-a-glance view of their current location and a path to get home. 25+ years later, these strings of links, separated by arrows, continue to be ever-present on the Internet today.

By the way, I have a theory that the word itself was originally part of why breadcrumbs caught on within the designer/developer community. It was a memorable and clever metaphor, and became a sort of insider term for people who make websites. I suspect this sentiment hasn’t changed.

Usability begins with well-organized content

When we develop websites and applications here at the MAC, one of the early steps in our process is to analyze all of the site’s content, then map out every section and page into a well-organized tree diagram. Our recommendations are informed by the client’s goals, the end-user’s needs, and usability best practices. These information architecture (IA) diagrams typically start by showing the home page, then below that the major sections of the site, then the subsections, etc., and finally the individual content pages.

Here’s what the IA and corresponding breadcrumb trail for a website we recently developed for a local bank looks like: Home > Business > Checking & Savings > Business Checking Accounts.

Each level represents a click (or tap) by the user. Of course when breadcrumbs are clickable, as all good breadcrumbs should be, they give users another way to go “back” or “up” a level to explore other pages in the website. The one exception to this rule is the page at the end of the breadcrumb trail. The name of the page currently being viewed shouldn’t be a clickable link, as reloading the active page would just be confusing.

Above: Location-based breadcrumbs for Willamette Community Bank

Two kinds of breadcrumbs

There are two main breadcrumb types used in UX design today:

  1. Location-based: to help a user identify their current location in the site’s structure; and
  2. Attribute-based: to help a user identify an important quality or attribute of the content (page) being viewed.

The website above features a location-based breadcrumb trail. Now let’s take a look at a couple attribute-based examples. Amazon sells books in multiple formats including paperback, hardback, and Kindle — their digital reader version. For Amazon, a book’s format (printed or digital) and genre (there are dozens of them) are attributes significant enough to warrant their own system of breadcrumbs. Take a look at the two screen shots below. It’s the same exact book categorized in two completely different ways. When you toggle between “Kindle” and “Paperback” it reloads the page and changes the breadcrumb trail.

Above: Amazon’s breadcrumbs (paperback version)

Above: Amazon’s breadcrumbs (Kindle version)

Breadcrumbs for big business

Fortune ranks the top 10 most successful American companies according to revenue earned, and the list includes familiar brands such as Apple, GM, and CVS Health. I took a look at each of the company’s websites and found that six of the 10 (60%) use breadcrumbs.

Of these six websites, however, only three of them display breadcrumbs for mobile users. This kind of UX design inconsistency is unfortunately all too common.

And then there’s mobile

Is it crazy to use precious mobile screen space for a list of breadcrumb links? Or is it crazy not to?

Many websites, including deep ones like Amazon, remove all hints of “you are here” from mobile — even though their designers thought breadcrumbs to be a good idea for desktop. It’s like we’re back in the wild west of web design, where commonly used conventions and UX norms are thrown out the window simply because the screen got small. This is sloppy design, in my humble opinion.

A good compromise, I believe, is to show mobile users at least one step back — serving as both a browsing tool and also a hint of where they’re at. Best Buy does a good job with this. When shopping on your phone for a 12-inch Apple MacBook at bestbuy.com you’ll notice a single breadcrumb “See MacBooks” located directly above the page title. With an arrow pointing left, it’s an unobtrusive and short form way of saying Click here to go back and see more Apple laptops.

Breadcrumbs for mobile on the left. Breadcrumbs for desktop on the right.

Just remember, even shallow websites can benefit from displaying a morsel of breadcrumb on mobile. This is because other common wayfinding conventions, such as highlighting the current section in the main navigation bar, are often hidden behind a collapsed menu. A single mobile breadcrumb accomplishes a lot while using just a little space.

What the research shows

Usability guru Jakob Nielsen is a big proponent of breadcrumbs. One reason, he says, is the lack of a downside. “Breadcrumbs never cause problems in user testing: people might overlook this small design element, but they never misinterpret breadcrumb trails or have trouble operating them,” Nielsen writes.

While in-depth studies on breadcrumb usage are not exactly a dime-a-dozen, I did find one study that showed breadcrumbs get used as a navigation tool 6% of the time. This is compared with 40% of users who clicked on embedded links, 31% who clicked on the browser back button, and 22% who clicked on the navigation bar. The same study showed that when there is no breadcrumb trail present, the navigation bar and back button get used more often. No surprise there.

What I did find surprising was how significant a role the location of the breadcrumb played in how often it was clicked on. Breadcrumbs placed directly near the page title received a whopping 82% of all breadcrumb clicks, compared with only 18% for those placed at the very top of the page.

Do breadcrumbs improve SEO?

I’ve scoured the internet for an answer to this question, and I’ve also talked with a couple experienced web developers about it. The consensus seems to be that yes, breadcrumbs can improve SEO, but not to put too much stock in this. Search engines like Google and Bing love to change their rules with how they reward or penalize websites in search results.

Here are a couple things we know. Google recommends adding breadcrumbs as one of several ways to “enhance your site’s attributes.” And Schema.org, which is funded in part by Google, has some recommendations on coding with a consistent breadcrumb vocabulary here.

As a side note, it’s interesting to see that Google displays a form of a breadcrumb trail in search results for mobile, but this has no bearing on whether or not the websites themselves include a visible breadcrumb trail. Google seems to be looking at the URL structure, then translating that into a human readable path. Curiously, however, they don’t do this for desktop.

Advanced tips and tricks

As noted above, breadcrumbs can be good for things like:

But breadcrumbs can also go wrong. By their very nature of being another thing on the page, breadcrumbs will fight for attention with other elements. The trick is to make them accessible, but not intrusive. Using a small font size and an expected location — directly next to or above the page title — will keep the breadcrumbs from becoming visual noise.

There’s also the often overlooked matter of a breadcrumb trail’s length. Websites with long-winded page names will tend to have equally long-winded breadcrumbs that wrap onto multiple lines and eat up space. Deep sites with several levels to display can further cause this kind of crumbly page clutter.

In cases like these, something we like to do at the MAC is create alternate versions of the page names: A longer and more descriptive name for the page title, and another shorter name for the breadcrumb. While it’s a good idea for the wording of the currently viewed page to match the breadcrumb 1:1, the other items up the ladder, such as section names or landing pages previously viewed, can be shortened to save space.

Below is an example of how a word-length-optimized breadcrumb trail could look for a higher ed website. Notice how with each click the previously viewed page name gets abbreviated.

The final string of words is easier to read, is less redundant, and eats up less screen space.

Another tip: don’t substitute breadcrumbs for a conventional navigation menu. Because they only show one linear path, standard breadcrumbs are not actually very useful for navigating a website. There is, however, an advanced breadcrumbing technique we used at PainWise.org designed to encourage users to explore when viewing the website on a desktop computer or tablet. Hover your mouse over the last breadcrumb link on this page to see a dropdown list of other pages within that section.

Summary of recommendations

While they shouldn’t be a substitute for other wayfinding conventions, I believe most larger websites would benefit from a location- or attribute-based breadcrumb trail — especially when the main navigation is hidden from view.

Here are my top seven recommendations:

  1. Use breadcrumbs when designing websites that are three or more levels deep
  2. Place breadcrumbs directly above or next to the page title
  3. For mobile, a single breadcrumb (pointing back one level) should be used at a minimum
  4. Use arrows — not slashes or vertical lines — to imply movement between pages or point back home
  5. Show the current page, but don’t link to it
  6. Avoid long and redundant breadcrumbs by using shorter alternatives for section names
  7. Even with breadcrumbs, a conventional navigation menu should still be used

Final thoughts

In the modern era of UX design, breadcrumbs continue to offer value, including the potential to improve user experience.

It turns out that breadcrumbs, after all these years, are still a fresh idea. Hat tip to Hansel and Gretel for helping millions of website users find their way back home.

This article is also published on Medium.

So you want to build a website. Sounds simple, right? Do a quick search on Craigslist and you’ll find plenty of freelancers ready to help. But like most projects, building a website is more complex than it seems and it becomes readily apparent creating a site isn’t as easy as putting a little code online in a visually pleasing way. Because of web design’s inherent challenges, it’s not a one-man or one-woman job. Web design takes a knowledgeable team with a variety of skills as well as ample forethought in terms of audience, structure, message, layout, interaction, and emotion. This is where UX and UI design play a large role, and where the distinction between the two becomes important.

UX

UX stands for User Experience design. That’s all well and good, but what does a UX designer actually DO? Basically, the UX designer is in charge of the overall experience (obviously) the user has on the website or app. UX is the creation of the seamless flow of the site and it determines whether or not information can readily be found. Oftentimes, user experience is most successful when the user doesn’t even know it is happening because they are not hindered by the site.

User experience starts with research on the audience itself: How will they navigate the site? What is it they are looking for? Who is the primary user? Once the audience is understood, the UX designer creates a sitemap and architecture for the site. The site map and architecture show the hierarchy of the site pages, how many pages the site has (and what those pages are labeled), what the paths a person will use to navigate the site, and where specific information can be found throughout the site. In other words, if a website is confusing to navigate, that is poor UX design.

Architecture

Another important task a UX designer tackles is the creation of wireframes. A wireframe shows what content needs to be on a particular page. Not to be confused with design or layout, black-and-white wireframes give a basic structure to an individual page and give guidance as to what content needs to be found on that particular page. No color, fonts, or imagery have been chosen at this time, but the wireframes serve as a guide for their implementation when the UI Designer steps in.

Wireframes

This is not to say the UX Designer only tackles the aforementioned tasks. UX design is present throughout the process of web design and the UX Designer is there to make sure the site’s hierarchy and structure is clear from design to development. UX design can cover both large structural ideas of the site or focus on smaller details like the functionality of a single button. For example, when a user clicks a button, they expect it to act a certain way in relation to the rest of the site. Good UX design will ensure the button acts as expected. Ultimately, UX design is critical in making a website flow and make sense to the user and is ever-present in the web design process.

UI

UI stands for User Interface design and it can often bleed into UX design, just as UX design can bleed into UI. After all, the design of a website needs to be clean, clear, and coherent both in terms of functionality and visuals. But, in a general sense, UI design is where the color, layout, emotion, and story of the site come together. This is where the brand comes alive and the connection between brand and consumer becomes apparent. Using the audience research, wireframes, and the architecture provided by the UX designer, the UI Designer can then take those critical pieces of framework and start adding the details that unify the brand as a whole. This includes consistent use of typography, colors, and imagery.

UI is where color, fonts, and style come in

The UI designer can also determine the layout of the page, and places buttons or content where they will be most logically found. While the wireframes give an overall structure and general placement of content, the UI Designer can take that guide and move elements to better suit the goals of the site while working within their newly established look and feel. The UX designer, of course, can bring their input into this process as well.

It is then the UI designer’s role to work closely with the development team to ensure the layout remains as it was envisioned. Clear communication between the UI designer and the development team is key in overcoming any challenges or clarifying any questions that may arise through the development process. Needless to say, communication is critical throughout the entire web design process.

UI & UX: They work best together

You can’t have one without the other. A design with excellent UX won’t necessarily appeal to the eye, and a design with great UI can be confusing and frustrating to use. When these two areas of web design work well together, you end up with an easy-to-use site that clearly represents the vision and personality of the organization. And, even better, the site will become a pleasant experience for the user.

At a minimum, UX and UI are crucial parts of any web project, but they are also just the tip of the iceberg. Web design is a collaborative process. It often requires content development from individuals with editorial expertise, a graphic designer to really dig into the final UI design and create iconography, an interaction designer who knows exactly how smooth actions and transitions need to be, and a back-end as well as front-end developer to maintain the site and bring everything to life on screen. So yes, creating a website isn’t as easy as 1–2–3, but, with the right team, it can become something beautiful, easy-to-use, and most importantly, help your organization achieve its goals.

This article is also published on Medium.