Play the Piano and Other Instruments via the WordPress Block Editor

Tetsuaki Hamano released the Piano Block plugin for WordPress on Monday. It allows users to insert a piano-based interface into the editor for playing music. Mostly, it is just a lot of fun.

Hamano launched RichText Extension, his first submission to the WordPress plugin directory, in the spring of 2020. At the time, block-related plugins were still scarce, but he has continued contributing extensions since that initial release. Flexible Spacer Block is invaluable for responsive vertical spacing. Flexible Table does the same for table elements, and his Custom HTML Block Extension is handy for anyone writing code regularly from the editor.

While his previous outings covered several vital features for different user groups, his latest is a bit more on the lighter side of things. More than anything, it serves as a brief distraction, a way to break up the day for people who spend a lot of time in the WordPress content editor.

One thing that I love about blocks is that they do not have to serve a vital function in producing content for a site. Sometimes, their purpose is to simply bring a little joy into our lives. That is what Piano Block does.

Hamano noted in the plugin description:

This plugin does not add any useful features to WordPress, nor does it add any useful blocks to help you write posts. Let’s insert this block and enjoy the music if you are stuck in writing an article or just want a little distraction.

The plugin merely adds a web-based musical instrument to the block editor, offering a change of pace from building content. It does not appear on the front end of the site.

WordPress block editor open with a Piano Block inserted into the content canvas.  It has a few options for changing the volume, octave, instrument, and sustain pedal.  The keys are mapped to computer keys.
Piano Block in the editor.

The block offers a range of 14 instruments. The default is an acoustic piano, but users can switch between various keyboard, string, brass, and woodwind options. Plus, there is a xylophone.

Users can move up or down two octaves, change the volume, or toggle the sustain pedal on and off. Other than that, there are no other block-specific options.

The block’s keyboard mapping threw me off at first. I peeked under the hood and found the JavaScript code for assigning each key. I was tempted to clone the plugin’s GitHub repository, set up the build tools, and customize it. However, that seemed like a lot of work for a block meant to be a momentary distraction. It was not time for me to put on my developer hat.

So, I tickled the plastic keys of my laptop, trying to rewire my brain to a layout that did not match an actual piano. I just had fun with it, and that is kind of the point.

I rarely record videos, being much more comfortable tapping my laptop’s keys than doing anything on camera. Therefore, Tavern visitors are in for something of a treat today. I put together a short clip of me playing a song via the Piano Block:

That was tougher than it looked with the keys in odd places. Apologies if I missed any notes or lines. It has been a while since I have heard Twinkle, Twinkle, Little Star. I believe it goes a little something like that.

I am continually amazed at what some developers create on top of the block system. More than anything, I want to see some of the talented musicians in the WordPress community — I know some of you are out there — record themselves playing something with Piano Block. A little jazz, perhaps?

WordPress 6.0 to Introduce Performance Improvements for Custom Pages

WordPress core committer Jonny Harris merged a patch into WordPress core for a 12-year-old ticket that he says has the potential to bring “a massive effect on performance for custom pages.” The change, which will be included in the upcoming 6.0 release, stops unnecessary queries when developers are using the do_parse_request filter, thanks to a refreshed patch from contributor Paul Bearne.

Harris summarized the problem and how the change improves performance in the commit message:

Developers of plugins and themes can use the do_parse_request filter to hot-wire requests and hook in early to render custom pages. However, even through these request may not need post queries and 404 lookups to be run, they run anyway. This can results in unnecessary SQL queries running on these requests. By adding a return value to the parse_request method of the WP class, these queries can now be skipped.

WordPress core contributor Konstantin Kovshenin detailed the need for this change in a Twitter thread he published in 2021, when soliciting help for the ticket:

Harris performed a quick review of plugins that use the filter and said he does not anticipate breakages. The search found 133 plugins using the filter. Some of the most popular ones include Google’s Site Kit plugin (1M+ installs), The Events Calendar (800K installs), and AMP (500K installs). Harris suggested the change requires a dev note, as it may have unanticipated side effects. The dev note is likely to be published closer to the time of release. WordPress 6.0 is currently scheduled for release on May 24, 2022.

Virtual Peaker Launches Gravity Connect API

Virtual Peaker, a cloud-based SaaS company that empowers modern utilities with a distributed energy platform, has launched Gravity Connect API, an open-spec API and market enablement tool to connect utility customers, OEMs, and developers to more easily accelerate the deployment of distributed energy resources (DERs).

how to combine Adjacent keywords into a multi-word keyword

hello everyone , please can anyone help me !!
I have a list of keywords i used TextRank algorithme, and i have list of all words ,I want to combine Adjacent kaywords into a multi-word keyword depending on their position in the list of all words with java.
For exemple :

Keywords :[ management ,activities ,such ,accounting ,risk ,project ,performance]

list of all words : [ "A", "cloud", "service", "for", "managing", "business", "activities", "such", "accounting",",", "procurement", "project", "management",",","risk", "management"," performance","."]

Result of multi-Keywords : [ "risk management" ,"activities such accounting","project","management performance"]

please help me :(

Introducing KoolKits: OSS Debugging Toolkits for Kubernetes

KoolKits (Kubernetes toolkits) are highly-opinionated, language-specific, batteries-included debug container images for Kubernetes. In practice, they’re what you would’ve installed on your production pods if you were stuck during a tough debug session in an unfamiliar shell.

To briefly give some background, note that these container images are intended for use with the new kubectl debug feature, which spins up Ephemeral containers for interactive troubleshooting. A KoolKit will be pulled by kubectl debug, spun up as a container in your pod, and have the ability to access the same process namespace as your original container.

The Power and Pains of Autonomy

TL; DR: The Power and Pains of Autonomy at the ACB21

In this highly engaging talk at the Agile Camp Berlin 2021, Jimmy Janlén addresses the core element of “Agile,” its key to speed, innovation, and success: team autonomy. Learn more about its benefits, challenges, fears, and pains and what organizations can do to unleash it.

The Power and Pains of Autonomy

Modern organizations are convinced that autonomous empowered teams are one of the core concepts of Agile and key to speed, innovation, and success. 

Enabling High-Quality Code in .NET

Introduction to Code Quality

When we talk about code quality, we can think of different aspects of it. We mainly refer to the attributes and characteristics of code. While there is no widely adopted definition of high-quality code, we know some of the characteristics of good code:

  • It is clean.
  • Absence of code smells
  • Consistent
  • Functional: it does what we say it does.
  • Easy to understand
  • Efficient
  • Testable
  • Easy to maintain
  • Well documented

There are probably additional characteristics of good code, but these are the core of the high-quality code.

We All Are Ukraine 🇺🇦

This is not a regular Smashing article. But these aren’t regular times either.

I was born and grew up in Minsk, Belarus. That’s where I spent nights playing Prince of Persia. That’s where I’d wait in front of a bakery nearby for the smell of freshly basked Narochansky bread. That’s also the place where our family went to peaceful protests on the streets, even then back in the 90s heavily suppressed by an armed regime with a brutal force.

I was surrounded by incredible friends from all over. Nobody cared if it was Belarus, Ukraine or Russia, or any other friendly countries in the world. We didn’t have much, but what we did have, we valued enormously. From the collections of wrapping paper of chocolates to huge snowballs we were building all together when it was freezing outside. I remember us reading dictionaries and encyclopedias together, discussing books in book clubs, playing hockey outside, dreaming about the bright future while looking at the sky, together.

Today, people in Ukraine can’t do that. I’ve been dozens of times in Ukraine, and I have very close friends in this wonderful country — incredibly kind and passionate people who want nothing but a better world for their families and the people around them. Some of us here at Smashing have Ukrainian origins, and we have close connections to our Ukrainian friends and colleagues.

What’s happening right now in Ukraine is deeply personal to all of us. It’s shocking and horrifying to see the streets of Ukraine being shelled, civil homes being bombed, people hiding in shelters, people leaving their homes, families torn apart. It’s unimaginable to realize that it’s happening right here, in the heart of Europe, right now.

I strongly believe that there are wonderful people everywhere in the world, and I truly believe that most people are good and kind and supportive and empathetic. And I won’t believe for a moment that any reasonable, decent and honest person can support the actions happening today.

As a design community, we all can’t be silent in these times. We need to be united in our fight against the war, for democracy, for those dreams that children are entitled to have when they are growing up. It’s our obligation to help as much as we can. This should be personal to all of us. And Ukraine needs our help, now.

How Can You Help?

Everybody can make a huge difference:

  • As a merchant, set up a product and donate funds to Ukraine.
    If you run a store, set up a product and allow people to set their own price, then donate funds to Ukraine. A point in case: BackStage Roasters from Lithuania, selling coffee at “you-pay-what-you-want” price, with all collected funds going to Ukraine. Here are some ways to donate.
  • Speak up in your company and organization to support Ukraine.
    Speak in your Slack channels about what your company and organization can do to help Ukraine today. Think about campaigns you could launch to collect funds or donate money.
  • Publish posts showcasing organizations and companies supporting Ukraine.
    Let the voice of the kind people helping out be heard; share the stories of how companies help in these times and share on social media. A great example is Wix.com, with team members driving all the way to the border of Poland-Ukraine, and along with the Polish team helping the Ukrainian co-workers and their families across the border and bring them to safety.
  • Support Ukrainian refugees in your city or country.
    Talk to people around and find out what is needed and donate clothing, shelter, old phones, or anything else that might be of help.
  • Support your Ukrainian friends, loud and clear.
    Make your position clear. Ask your Ukrainian friends and colleagues what they need, and what you can do to help.
  • As a VPN service provider, create special plans for Russian people.
    As social media are being blocked and censored in Russia, we need to help Russian people learn the truth about what’s happening in Ukraine today. You could also write posts explaining how to set up a VPN or use Telegram proxies in Russian.
Donate And Support Ukraine We are donating all proceeds of the Smart Interface Design Patterns PDF to support Ukraine. You can select as many PDFs as you wish when making a purchase.

We all are Ukraine. And we all can make a difference — however small it might appear to be at first. 🇺🇦 ❤️

GitOps Takes DevOps Teams To Higher Levels of Maturity

Stream-Aligned and Platform Teams

The 2021 State of DevOps report identifies two types of teams as the way high-maturity teams organize themselves: stream-aligned teams and platform teams. The idea of a "platform" or "internal developer platform" is fundamental to GitOps. While a GitOps pipeline begins with committing code to a Git repository, it is made possible by a platform that paves the way for that new code to move in an automated way from the repository to a production environment.

The platform is how the Ops team provisions resources such as cloud services, storage, service meshes, and security and monitoring tools in a ready-made template. These templates are created even before they are needed and made available to any developer within the organization. The big shift due to this is that developers need not raise a ticket for the resources they need: they can pick a ready-made template and deploy their code in a matter of minutes. From the Ops side, they have peace of mind knowing they have configured this template and that it follows security protocol by default. It does not require developers to separately configure security for deployments.

Building a Kotlin Mobile App With the Salesforce SDK: Editing and Creating Data

Here in Part Two of our three-part series, we continue to build on the fundamentals of Android development with the Salesforce Mobile SDK. In Part One, we covered project setup and creating a layout that fetches data from Salesforce, using Kotlin as our programming language of choice.

Before we continue towards developing a complete mobile synchronization strategy, we’ll first build out our mobile app to allow editing and creating data on our Salesforce org.

MongoDB to Couchbase for Developers, Part 2: Database Objects

MongoDB developers and DBAs work with physical clusters, machines, instances, storage systems, disks, etc. All MongoDB users, developers, and their applications work with logical entities: databases, collections, documents, fields, shards, users, and data types.  There are a lot of similarities with Couchbase since both are document(JSON)- oriented databases.  Let’s compare and contrast the two with respect to database objects.  You may also refer back to Part 1 of this series comparing the architecture.  

MongoDB Organization

A full list of MongoDB schema objects is listed here and here. A database instance can have many databases, a database can have many collections, and each collection can have many indexes.  Each collection can be sharded into multiple chunks on multiple nodes of a cluster using a hash-sharding strategy or an index sharding strategy.  The MongoDB indexes are local to their data.  Therefore, the indexes use the same strategy as the collection it is created on.

Creating Native Web Components

Native web components have been here for a while, but they still seem like the new kid on the block. Mainly due to the fact that they have a high barrier to entry, notably for beginners, and don’t have most of the features from the more established front-end frameworks. Nonetheless, they can be useful, especially for those who want to create framework-agnostic and reusable components. Today we will build some native web components with Minze, a simple JavaScript framework that makes it a breeze to create native web components.

Let’s get started!

Prior knowledge

This tutorial should be quite easy to follow for anybody familiar with the basics of HTML, CSS and JavaScript. Advanced knowledge in those fields is not required.

Outline

We will be building several web components for a fictive Smart Home dashboard application. You will learn some basic concepts of web components and how to create them with Minze. During this tutorial we will build 3 Components:

  • An accordion – for showing and hiding content.
  • A switch – that toggles between two states, exacltly like a light-switch.
  • A card – a simple encapsulated component that can be fed with content externaly

Following along

You can follow along in any environment by including a CDN link of Minze or by using this Codepen with the preloaded Minze script.

<script src="https://unpkg.com/minze@1.0.3" defer></script>

Accordion

Our first component is an accordion. It can be used to toggle content visibility.

1. Creating and registering the component

First, we need to extend from the MinzeElement class to create our component. Then we use the define method of the said component to register it. The component will be automatically registered in dash-case derived from its class name: sh-accordion. Web components should always consist of at least two words to prevent clashing with build-in html-components.

JavaScript

class ShAccordion extends MinzeElement {
  // ...
}

ShAccordion.define()

HTML Element

<sh-accordion>
  <div slot="title">
    Stats
  </div>

  <div slot="content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, similique!
  </div>
</sh-accordion>

2. Properties & Methods

Next, we define the properties and methods of our component. reactive defines well you guessed it, reactive properties, when they change a template re-render will be triggered. The first argument of the nested array is the name of the property, the second is the initial value. toggleOpen is a method that will toggle the open property between true and false.

class ShAccordion extends MinzeElement {
  reactive = [['open', false]]

  toggleOpen = () => this.open = !this.open
}

ShAccordion.define()

3. HTML

Here we are defining the html property as an arrow function for rendering the encapsulated HTML of the component. The template includes a slot tag that can be filled in when the component is used.

class ShAccordion extends MinzeElement {
  // previous code ...

  html = () => `
    <div class="title">
      <slot name="title"></slot>

      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20" fill="currentColor" class="arrow">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </div>

    <slot name="content"></slot>
  `
}

ShAccordion.define()

4. CSS

Styling can be added by using the css property. We are using the :host pseudo-class selector to style the component and the ::sloted CSS selector to style the externally inserted content. Note the use of ternary operators to conditionally apply styling based on the state of the open property.

class ShAccordion extends MinzeElement {
  // previous code ...

  css = () => `
    :host {
      background: rgb(228 228 231);
      font-family: sans-serif;
      border-radius: 2px;
      cursor: pointer;
    }

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
      user-select: none;
      padding: 16px;
    }

    .arrow {
      transition: transform 0.2s ease-in-out;
      transform: ${this.open ? 'rotate(180deg)' : 'rotate(0)'};
    }

    ::slotted([slot=content]) {
      display: ${this.open ? 'block' : 'none'};
      padding: 16px;
    }
  `
}

ShAccordion.define()

5. Event listeners

Finally, we are adding a click event listener. The eventListeners property defines one or more event listeners inside the component. We are attaching a click handler to the title. The first argument of the nested array is a CSS selector, the second is the event type and the third is a callback function that runs when the title is clicked.

class ShAccordion extends MinzeElement {
  // previous code ...

  eventListeners = [['.title', 'click', this.toggleOpen]]
}

ShAccordion.define()

Result

Here is the full implementation of the accordion component.

See the Pen
ShAccordion
by Sergej Samsonenko (@sergejcodes)
on CodePen.light

Switch

Next up we will build the switch component.

1. Creating and registering the component

First, we need to extend from the MinzeElement class to create our component. Then we use the define method of the said component to register it. The component will be automatically registered in dash-case derived from its class name: sh-switch.

JavaScript

class ShSwitch extends MinzeElement {
  // ...
}

ShSwitch.define()

HTML Element

<sh-switch></sh-switch>

2. Properties & Methods

Next, we need to define the properties and methods for our component. reactive defines reactive properties, when they change a template re-render will be triggered. The first argument of the nested array is the name of the property, the second is the initial value. toggleActive is a method that toggles the active property between true and false.

class ShSwitch extends MinzeElement {
  reactive = [['active', false]]

  toggleActive = () => this.active = !this.active
}

ShSwitch.define()

3. HTML

Here we are defining the html property as an arrow function that holds the template of the component.

class ShSwitch extends MinzeElement {
  // previous code ...

  html = () => `
    <div class="indicator"></div>
  `
}

ShSwitch.define()

4. CSS

Now we are adding styling. We are using the :host pseudo-class selector to style the component. Note the use of ternary operators to conditionally apply styles based on the state of the active property.

class ShSwitch extends MinzeElement {
  // previous code ...

  css = () => `
    :host {
      width: 48px;
      height: 25px;
      display: flex;
      background: rgb(255 255 255);
      border: 1px solid rgb(228 228 231);
      border-radius: 9999px;
      cursor: pointer;
      transition: all 0.2s ease-in-out;
      padding: 2px;
    }

    .indicator {
      width: 20px;
      height: 20px;
      background: ${this.active ? 'rgb(161, 161, 170)' : 'rgb(228 228 231)'};
      border-radius: 9999px;
      position: relative;
      transform: translateX(${this.active ? 'calc(100% + 2px)' : '0'});
      transition: all 0.2s ease-in-out;
    }
  `
}

ShSwitch.define()

5. Event listeners

Finally, we are adding event listeners. The eventListeners property can define multiple event listeners inside the component. We are attaching a click handler to the element. The first argument of the nested array is a CSS selector, the second is the event type and the third is a callback function.

class ShSwitch extends MinzeElement {
  // previous code ...

  eventListeners = [[this, 'click', this.toggleActive]]
}

ShSwitch.define()

Result

Below is the full implementation of the switch component.

See the Pen
ShToggle
by Sergej Samsonenko (@sergejcodes)
on CodePen.light

Card

Our last element will be a card component.

1. Creating and registering the component

First, we need to extend from the MinzeElement class to create our component. Then we use the define method of the said component to register it. The component will be automatically registered in dash-case derived from its class name: sh-card.

JavaScript

class ShCard extends MinzeElement {
  // ...
}

ShCard.define()

HTML Element

<sh-card
  top-line="Outside"
  headline="Temperature"
  value="12°c"
  background="linear-gradient(220.64deg, #C8F5FF 0%, #B4B4FF 100%)"
></sh-card>

2. Attributes

Next, we need to define the attributes that can be added to the component.

class ShCard extends MinzeElement {
  attrs = ['top-line', 'headline', 'value', 'background']
}

ShCard.define()

3. HTML

Here we are defining the html property as an arrow function that holds the template of the component.

class ShCard extends MinzeElement {
  // previous code ...

  html = () => `
    <div class="top-line">${this.topLine ?? ''}</div>
    <div class="headline">${this.headline ?? ''}</div>

    <slot>
      <div class="value">${this.value ?? ''}</div>
    </slot>
  `
}

ShCard.define()

4. CSS

Adding styling for multiple nested elements inside the component. We are using the :host pseudo-class selector to style the `sh-card` element.

class ShCard extends MinzeElement {
  // previous code ...

  css = () => `
    :host {
      width: 200px;
      height: 180px;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      background: ${this.background ?? 'transparent'};
      font-family: sans-serif;
      border-radius: 2px;
      padding: 24px 24px 16px;
    }

    .top-line {
      font-size: 16px;
      margin-bottom: 2px;
    }

    .headline {
      font-size: 20px;
      font-weight: bold;
    }

    .value {
      font-size: 36px;
      font-weight: bold;
      margin-top: auto;
    }

    ::slotted(*) {
      margin-top: auto;
      margin-bottom: 12px;
    }
  `
}

ShCard.define()

Result

Here is the full implementation of the card component.

See the Pen
ShCard
by Sergej Samsonenko (@sergejcodes)
on CodePen.light

Conclusion

As you can probably tell by now creating web components isn’t really rocket science. To see even more examples view the demo accompanied to this tutorial:

The post Creating Native Web Components appeared first on Codrops.

Hi everyone, I’m fencingand

"Our services also include finishing touches to your exterior areas such as fencing and artificial grass. Not only can we provide a paved area, but we can also finish the transformation for you, ready for the big reveal. Artificial grass can be a great alternative for busy people who dont have the time to tend to their gardens. Artificial grass, a fresh new driveway and fencing are all you need to make your house look new again.

Services We Offer

Aluminum Fence Blackpool
Chain Link Fence Blackpool
General Repairs & Maintenance Blackpool
Iron Fence Blackpool
Resin Drives Blackpool
Gravel Drives Blackpool
Tarmac Driveways Blackpool
Block Paving Driveways Blackpool
Artificial Grass Blackpool
Turfing Blackpool
Imprint Concrete Blackpool

"

How To Create An Information Architecture That Is Easy To Use

When creating the information architecture of a website, users are often overlooked in favor of internal politics and organizational thinking. On larger websites, each departmental silo wants its own section of the site, and they often fight to ensure their section is featured in the main navigation. Even small sites suffer from problems with information architecture as business owners focus more on what they want to say rather than what users want to know.

In most cases, stakeholders are the worst people to decide on the information architecture, so I want to share an alternative process. However, before we can implement this process, we need to explain why our stakeholders should not be defining the site structure. To do that, we need to teach them about mental models.

Understanding And Explaining Mental Models

Mental models are used to explain how we organize pretty much anything in our world. For example, most of us would organize the following words into a group that we would probably refer to as “fruits”:

  • Apple,
  • Pear,
  • Banana,
  • Melon,
  • Orange.

However, not all of us see the world in the same way. For example, if you are an expert in fruits, you would probably include tomatoes in this list. But, of course, most of us would probably associate tomatoes more with salads than we do fruits.

Lots of things can influence our mental models from previous experience to culture. However, one of the most significant influencing factors is our level of experience in the subject matter.

As we become more knowledgeable in a particular subject, our mental model diverges from the rest of the population. For example, an expert in birds will tell you that there is no such thing as a seagull, yet most of us would think otherwise.

It is precisely this issue of experts having a different mental model from the rest of us that means stakeholders are the worst people to be making decisions about a site’s information architecture. After all, most stakeholders are experts in their products or services and think about them differently from most people visiting the website.

This issue makes them bad at organizing content and can undermine the content itself.

Creating Relevant Content

Poor content choices can significantly impact how effective your information architecture is. Hence, creating an information architecture must begin by defining the content that needs to appear on the website.

Organizations typically make two common mistakes when deciding on the content for their website. First, many mindlessly migrate the content from their old website to the new one. They fail to ask whether this content is relevant.

However, the second and more significant issue is that stakeholders start from the wrong premise when creating content. They start by asking themselves, “what do we want to say” rather than “what does our audience want to know?

The result of this wrong starting point is that any information architecture will fail because users won’t find answers to their questions. That is because the content doesn’t exist on the website.

The starting point for any information architecture project should not be to define what the organization wants to say, but what questions, objections, and tasks the user has in their mind as they come to the website. You can then build the site’s content and, by extension, the information architecture around these:

  • Questions
    They can range from general questions such as “what is this site about” or “how can this site help me” to more specific questions about the products or services the site provides.
  • Objections
    They are the reasons that users might not take action. For example, if your call to action is to sign up for a newsletter, users might have concerns about spam, privacy, or how easy it will be to unsubscribe. If you don’t address these objections, people will not act.
  • Tasks
    They relate to actions the user might want to take on the website. These might include booking an event, signing up for a newsletter, or contacting the organization behind the website.

On an e-commerce site, this would include finding a product, adding it to the cart, checking out, and managing the order.

You should use other elements such as social proof, or the companies value proposition to answer these questions and objections. However, the information architecture itself needs to be built around the user’s needs.

So, before we begin organizing content, we first need to gather a list of questions, objections and tasks. Now, depending on the breadth of what your organization does, this can turn into a huge list. But, that is okay, as our next step will be to identify which questions, objections, and tasks matter most to users.

Identify Your Top Content

Not all questions, objections, or tasks are equal. Some will be much more important to users or asked by many more people. It is, therefore, vital that we identify our top elements as we will want to ensure these are particularly easy to find.

Depending on time and budget, you could take a couple of approaches. I highly recommend identifying the critical elements using top task analysis if you have the time. This approach created by Gerry McGovern prioritizes content by surveying users and asking them what they most care about.

If you have limited time or budget, then a conversation with customer-facing staff such as sales representatives or call center staff is often enough to identify what questions, objections, and tasks come up the most.

In either case, you will find that a large percentage of user inquiries will revolve around a relatively small number of questions, objections, or tasks.

Now we know the top content, we can begin drafting our information architecture.

Create The First Draft With Open Card Sorting

To begin with, we are going to focus solely on organizing the top content and ignore the less important questions, objections, and tasks. That is to prevent ourselves and any users we involve from becoming overwhelmed. Ideally, you want to end up with no more than 30 to 60 cards.

Start by simplifying your top content. For example, if you have a question that reads “how much does it cost,” it could be simplified to “pricing.” You will also find similar content that is obvious enough to be grouped. For example, “how much does it cost” and “are there any extra charges” could be both displayed as “pricing.”

Once you have your simplified list of top content, you need to organize it into top-level sections. If the budget or timescales are tight, you could make an educated guess as we will be testing later. However, if you do, you will probably receive pushback from stakeholders and end up doing more rework. Therefore this route can often be a false economy.

A better approach is to do an open card sort. Traditionally, card sorting has been done in person. However, I prefer to do it online with a tool like UX Metrics, as it is quicker, easier to arrange, and makes analyzing results straightforward.

All you have to do within UX Metrics is create a separate ‘card’ for each of your simplified content areas. Then, UX Metrics will give you a URL to share with users via social media, email, or even your website.

Users who choose to complete the card sort will be asked to organize the content into any groupings that make sense to them and give each group a name. These groups will be their personal preference for sections on the website.

Note: I recommend getting as many people as possible to complete the card sort. However, as a minimum, you will need at least 13 users to weed out outliers.

Once the open card sort is finished, UX Metrics will provide you with a report showing you what groups users created and how often they occurred. You then need to merge similar groups and decide on a small number of top-level sections favoring often occurring groupings.

This process is not an exact science and takes experience. Try to keep the number of groups down as low as possible. Approximately four is ideal as we can only hold four pieces of information in our short-term memory at a time. Certainly avoid going above eight elements and when adding more sections, try chunking the groups into separate navigation.

For example, you could have a primary navigation bar and a secondary utility bar for sections such as help, log in or contact us. Don’t worry about getting it wrong at this stage, as we will test our structure later. You can also use the report to identify potential sub-sections underneath the primary navigation. However, these will be further defined when carrying out closed card sorting.

Ensure Your Information Architecture Scales With Closed Card Sorting

Closed card sorting is similar to open card sorting, with one difference. Instead of users organizing cards into their own set of groups, they organize them into a predefined set of sections that you give them.

In other words, we will ask users to organize cards into the top-level information architecture we have created:

Because a closed card sort only requires people to put cards into predefined groups, we can ask users to sort considerably more cards than in an open card sort. Because of that, we can use closed card sorting as a way of discovering whether our first draft will accommodate all of our content, not just our top tasks, questions, and objections.

We can use UX Metrics to run closed card sorting, but I suggest adding an extra top-level section labeled “I don’t know.” This approach helps collect cards that the user has no idea where they should be placed. That will help us identify if our site structure fails in certain areas.

After reviewing the results, you should be able to assign most content to a top-level section. If you have a lot of content that doesn’t fit comfortably, you may have to revise your draft architecture and repeat the closed card sorting exercise.

However, we have yet to address the subsections within those top-level sections. You may well be wondering if you need to do this entire process for each top-level section of the website.

How Low Do You Go In Card Sorting?

Unless you are working on an extensive site with a healthy budget for information architecture, you will probably only run card sorting for the top-level sections. Below that, you will be forced to make educated guesses based on what content people have placed within each of those top-level sections. If that is the case, do not worry because the first navigational selection a user makes is the most important.

One of the most influential usability studies was “First Click Usability Testing” by Bob Bailey and Cari Wolfson. They explored the importance of the user’s first click being correct. They found that if the first click was correct, people had an 87% chance of finding the content they wanted instead of just 46% if the first click was wrong.

In other words, if you only run card sorting on the top level of your information architecture, you have still doubled the chance users will succeed.

Of course, if time and budget allow, it would be advisable to run open card sorting for each of the sections of your site to help determine the structure of the subsections. Also, if your website is extensive (such as a university or government body), you may wish to run closed card sorting as well to make sure all the content lower in the site sits comfortably within its sections.

Whatever approach you adopt, it is worth testing your final information architecture one last time to ensure it works successfully.

Test Your Information Architecture With Tree Testing

I would recommend running a simple tree test to test your final information architecture. Once again, you can do this through UX Metrics or whatever tool you settle on.

To create a tree test, you need to recreate your site’s information architecture as a hierarchical tree. Once you have done that, you can decide what you wish to test. First, select a small number of pages you want to check that users can find. For example, you may wish to ask users to find a page on the site that they believe will answer specific questions or complete a particular task.

When considering what to test, I recommend focusing on three types of content:

  1. Content that is particularly important to the user or for the site’s success;
  2. Content that users placed in varying sections during the card sorting exercises;
  3. Content that you suspect may be hidden too deep in the information architecture.

Next, you will tell UX Metrics the fastest path for finding each piece of content.

Once you have done that, all that remains is to distribute the test as you did for card sorting. Users will be asked to find each piece of content, and then you will receive a report from UX Metrics. The report will show you how successful people were, how quickly they completed the task, and whether they took the best route.

If you are creating an entirely new information architecture, I recommend focusing on whether people can complete the task successfully within a reasonably short time. Whether they used the most direct route or not is a secondary consideration.

If your site structure has problems in your tree test, don’t panic, especially since users will probably only have trouble finding secondary content. It is important to remember that your information architecture does not exist in isolation.

Supplement Your Information Architecture

Navigating your site’s information architecture is just one method users can use to find content. For example, site search is also critical. However, the most crucial tool in your arsenal for improving findability is cross-linking.

When you view the results of your tree testing, probably the most significant issue you will find will be that users are unsure which of two or more sections a piece of content will be in. When faced with that situation, they often guess, and if they guess wrong, they may give up before exploring the other options.

To address this problem, you need to include links to the page in the alternative sections people look in. That way, they can recover even if they make an initial mistake.

You can identify pages for cross-linking by looking at your closed card sorting exercise. First, look for pages that are regularly placed in different sections by users. Then, make sure you include those links to that page from all those sections, even if it only sits in one of those sections in the hierarchy.

Also, don’t forget to highlight critical content that exists lower in the hierarchy than the page viewed. For example, a top-level section page should highlight the top content within that section of the site, and the homepage should provide quick access to the most important content across the entire site.

By combining a well-researched and tested information architecture with these other techniques, you will ensure that we can address users’ objections and questions as quickly as possible and complete any tasks they have.

Further Reading on Smashing Magazine