Layout practices which build bridges between technology needs and user needs to meet business goals are critical to making this vision a reality. Experience designers all, content strategists, programmers, and information architects have a role to play in delivering and designing content options that are effective structured.
While this use of semantic HTML presents distinct advantages over the”page display” styling we saw on the Town of Boston’s website, the Seattle page also shows a weakness that is typical of guide approaches to semantic HTML. You’ll notice that, at the Google Assistant outcomes, the”Pay by Phone” option we saw on the webpage wasn’t listed. This irregularity in semantic structure could be what is causing this option to be omitted by Google Assistant from its own results.

  • Content Everywhere, Sara Wachter-Boettcher
  • The search for a recommendation, Stacey Donion, MD, provides a different experience. Like the City of Boston site above, Dr. Donion’s profile on the Kaiser Permanente site is perfectly intelligible to some sighted individual reader. However, because its markup is entirely presentational, its content is imperceptible to software agents.
    The prevalence of voice as a mode of access to information makes providing structured content all the more important. Voice and intelligent software agents are not just freeing users from their keyboards, they’re changing user behaviour. According to LSA Insider, there are numerous critical differences between voice queries and typed questions. Voice queries often be:

    Google search results info box for Dr. Ruhlman, showing an photo; a map; ratings; an address; reviews; buttons to ask a question, leave a review, and add a photo; and other people searched for.
    Google search results page for Scott Ruhlman, MD, showing a list of standard links and an info box with an image, a map, ratings, an address, and reviews information.

    The Google Assistant hunt that is equivalent offers a effect that is more helpful than we see with Boston. In this case, the Google Assistant result links directly to the”Pay My Site” page and also lists several ways I can pay my ticket: on line, by email, and in person.

    In order to tailor results to these questions that were more especially formulated, software agents have started inferring intent and then using the linked data in their disposal to build a targeted, concise reaction. If I ask Google Assistant what time Dr. Ruhlman’s office shuts, for Example, it reacts,”Dr. Ruhlman’s office closes in 5 p.m.,” and exhibits this result:

    Google Assistant app on iPhone with the results of a “how do I pay a parking ticket in Seattle” query, showing nearly the same results as on the desktop web page referenced above.

    Getting started: who and how

    These outcomes aren’t only aggregated from sources, but are translated and remixed to provide a answer. Getting instructions, placing a telephone call, and accessing Dr. Ruhlman’s profile page on are all at the ends of my hands.
    Because it’s composed of content that is marked up 36,, Regardless of the simplicity of the City of Seattle parking ticket page, it ensures that the integrity of its material across contexts. “Pay My Ticket” is a level-one heading (

    ), and every one of the choices below it are level-two key words (

    ), which signify that they are inferior to the level-one element.

    The City of Seattle website’s “Pay My Ticket” page, with the HTML heading elements outlined and labeled for illustration.

    These elements, when designed well, communicate information hierarchy and relationships visually to algorithms, and to readers.
    The City of Seattle’s”Pay My Site” page, though it lacks the polished visual design of Boston’s website, also communicates parking ticket options clearly to individual visitors:
    The pane on the right shows the values that are machine-readable.

    Google Assistant app on iPhone with the results of a “how do I pay a parking ticket in Boston” query, showing results only weakly related to the intended content.
    Google Assistant app on iPhone with the results of a “what time does Doc Dr Stacey donion office close” query. The results displayed include a card with “8AM–5PM” and the label “MulitCare Neuroscience Center, Monday hours,” as well as links to call the office, search on Google, get directions, or visit a website.

    Structured content is already a mainstay of various types of information about the internet. Listings, for example, have been based on structured articles for several years. While I hunt, for example,”bouillabaisse recipe” on Google, I am provided with a standard list of links to recipes, as well as an Summary of recipe steps, a picture, and a set of tags describing one instance recipe:
    Along with the indexing purpose that conventional search engines function, AI-powered search algorithms and clever agents are bringing in the mainstream of accessing advice: inference and aggregation additional modes. Because of this, design campaigns that focus on producing effective pages are no longer sufficient to guarantee the integrity or accuracy of articles published on the internet. Rather, by focusing on providing access to information in a structured, systematic manner that is legible to both machines and humans, content publishers can make sure that their content is both accurate and accessible in those new contexts, whether or not they’re creating chatbots or tapping to AI directly. In this guide, we will look at effect and the forms of structured content, and we are going to close with a set of tools which could help you get started with a structured material approach to data design.

    Voice inquiries and articles inference

    By conveying clearly in an electronic context that includes inference and aggregation, associations are more effectively able to consult with their customers where users are, be it on a web site, a search engine results page, or even a digital assistant. They’re also able to keep greater control over their messages’ accuracy by ensuring the proper content communicated and can be found across contexts.
    Such quick interactions, but are only one piece of a larger problem: connected data is key to preserving the integrity of content online. Such as the hospitals, government agencies, and schools I have consulted for years, do not measure the achievement of the communications efforts in ad clicks or page views. Success for these means connecting patients, components, and community members with services and information regarding the business. This communication-based definition of achievement readily applies to any sort of organization working to further its business goals on the internet.

    HTML markup which concentrates only on the presentational facets of a”webpage” may look perfectly fine to a human reader however be completely illegible to an algorithm. Take, by way of instance, the City of Boston website, redesigned a couple of years back in cooperation with top-tier design and development partners. If I want to find information about how to pay a parking ticket, then a connection in the home page takes me straight to the”How to Purchase a Parking Ticket” screen (scrolled to reveal detail):
    To be honest, following trials of this search did produce the most generic (and partly incorrect) practice place for Dr. Donion (“Kaiser Permanente Orthopedics: Morris Joseph MD”). It is possible that through repeated exposure to the search term”Dr. Stacey Donion,” Google Assistant fine-tuned the answers it supplied. The very first result, however, indicates that smart brokers might be at least partly susceptible to the exact same accessibility heuristic which affects individuals, wherein the information that’s easiest to remember frequently seems the most appropriate.
    On creating content systems that work for algorithms and humans alike, practitioners from across the design community have shared a wealth of resources lately. To learn more about implementing a structured content strategy for your organization, these articles and books are a great place to begin:
    In this instance, Dr. Ruhlman’s profile is marked up with microdata depending on the language. This content foundation provides the exact base on. The Knowledge Graph info box, for example, comprises Google testimonials, which are not part of Dr. Ruhlman’s profile, but which have been aggregated to this review. The overview also includes an interactive map, made possible because Dr. Ruhlman’s workplace place is machine-readable.
    Though each of these elements would seem the same into a sighted human an enormous gap is read by the machine distributing it. While WYSIWYG text entry fields can theoretically support HTML, in practice they fall prey into the idiosyncrasies of the most content authors. By making content structure that is purposeful that a core part of a website’s content management system, organizations may create semantically correct HTML for every element, every moment. This is also the foundation that makes it feasible to capitalize on the rich relationship descriptions afforded by data that is connected.
    In this example, we could see that Google can find lots of links to Dr. Donion in its own standard index outcomes, but it is not able to”know” the information about those sources well enough to demonstrate an aggregated outcome. In cases like this, that the Knowledge Graph understands Dr. Donion is a Kaiser Permanente physician, but it pulls in the wrong location and the incorrect doctor’s title in its endeavor to build a Knowledge Graph display.
    In its most basic form, linked data is”a set of best practices for linking structured data on the web.” Linked data extends the fundamental capabilities of semantic HTML by describing not just what sort of item a page element is (“Pay My Ticket” is a

    ), but also the real world concept that thing represents: this

    represents a”pay action,” which inherits the structural attributes of”trade actions” (the market of goods and services for cash ) and”actions” (actions carried out by a broker upon an object). Data that is linked creates a richer, more nuanced description and it provides the structural and conceptual advice that algorithms need to bring data together from disparate sources.

    A combined HTML code editor and preview window showing markup and results for heading, ordered list, and list item HTML tags.

    As this page being read by a person, I understand what my options are for paying : I can pay online, in person, by email, or on the phone. But things get a bit confusing, if I request Google Assistant to pay a parking ticket in Boston:

    Program broker search and semantic HTML

    Not one of the links supplied in this Google Assistant results take me directly to the”How to Purchase a Parking Ticket” page, nor do the descriptions clearly let me know I’m on the right path. (I didn’t ask about asking a hearing.) This is due to the fact that the content on the Town of Boston parking ticket page is styled to convey content connections visually to readers but is not structured semantically in a way that conveys those relationships to algorithms that are curious.
    Semantic HTML is markup that communicates information about the meaningful relationships between document elements, as opposed to just describing how they ought to look on screen.
    In late 2016, Gartner called that 30 percent of web browsing sessions would be achieved with no display by 2020. Though there’s recent signs to imply that the 2020 picture might be more complex than those broad-strokes projections imply, we’re already seeing the effect that voice hunt, artificial intelligence, and smart software agents such as Alexa and Google Assistant are creating about the way information is consumed and found on the web.
    There is insufficient evidence in this little sample to support a broad claim that calculations have”cognitive” bias, but even when we allow for possibly confounding variables, we can observe the compounding problems we hazard by ignoring structured content. “Donlon,” for example, might be a more common name than”Donion” and may be readily mistyped onto a QWERTY keyboard. Regardless, the Kaiser Permanente result we are given previously for Dr. Donion is to get the wrong doctor. Furthermore, in the Google Assistant voice hunt, the interaction format doesn’t confirm whether we intended Dr. Donlon; it just provides us with her centre’s contact info. In such scenarios, providing transparent content can work to our advantage.
    When I inquire Google Assistant what time Dr. Donion’s office closes, the outcome is not just less helpful but really points me in the incorrect direction. Instead of a targeted selection of focused actions I’m presented with the hours of operation and contact info .

    The Company case for content that is structured design

    This announcement was intended to help strategists, designers, and companies prepare for the imminent rise of mobile. It continues to ring true for connected data’s era. With the increasing prevalence of supporters and voice-based inquiries, the website of an organization is less and less inclined to be a visitor’s first experience with content that is abundant. In many instances — such as hours finding location info, telephone numbers, and evaluations –this pre-visit participation may be a user interaction with a data resource.

    In a design process that was content that was structured, the relationships between content chunks are defined and clarified. This makes the connections between them as well as both the content chunks legible into calculations. Algorithms can then translate a content package as the”page” I’m looking for–or remix and accommodate the exact same content to give me a list of directions, the amount of celebrities on a review, the amount of time left until an office closes, and any number of additional succinct answers to specific queries.
    In addition to finding and excerpting information, for example parking ticket payment options or recipe measures, applications and search representative algorithms also aggregate content from multiple sources using linked data.
    Say, for instance, that I would like to gather more info about two recommendations I’ve been awarded for orthopedic surgeons.
    You’ll also notice that while Dr. Stacey Donion is an exact match in all of the listed search results–which are a lot of enough to fill the initial results page–we’re shown a”did you mean” link for another doctor. Multicare does, nevertheless, provide semantic and linked profiles that are data-rich to get their doctors.
    MultiCare Neuroscience Center, you will remember, is where Dr. Donlon–the neuroscientist Google thinks I may be looking for, not the surgeon I am actually looking for–clinics.
    The model of expecting users to detect and parse these pages to answer questions and constructing pages , however time-tested from the age, is rapidly becoming insufficient for effective communication. From engaging in emergent patterns of information discovery and hunting, it precludes organizations. And–as we found in the event of hunting for information about doctors –it might lead software representatives to make inferences based on information , possibly routing customers to rivals who communicate more efficiently.

    Google Structured Data Testing tool, showing the markup for Dr. Ruhlman's profile page on the left half of the screen, and the structured data attributes and values for the structured content on that page on the right half of the screen.
    The City of Boston website's “How to Pay a Parking Ticket” page, showing a tabbed view of ways to pay and instructions for the first of those ways, paying online.

    When we run Dr. Ruhlman’s Swedish Hospital profile site via Google’s Structured Data Testing Tool, we can see that articles about him is structured as small, different elements, each of which is marked up using descriptive types and attributes that convey both the significance of those attributes’ values and how that they fit together as a whole–all in a machine-readable arrangement.

    Google search results page for Dr. Donion, showing a list of standard links for Dr. Donion, and a 'Did you mean: Dr Stacy Donlon MD' link at the top. There is a Google info box, as with the previous search results page example. But in this case the box does not display information about the doctor we searched for, Dr. Donion, but rather for 'Kaiser Permanente Orthopedics: Morris Joseph MD.'

    Because individuals understand what lists and headings look like and mean HTML is both semantic and presentational, and they can be recognized by calculations as elements with defined, interpretable relationships.

    Google Assistant app on iPhone with the results of a “what time does dr. ruhlman office close” query. The results displayed include a card with “8:30AM–5:00PM” and the label, “Dr. Ruhlman Scott MD, Tuesday hours,” as well as links to call the office, search on Google, get directions, and visit a website. Additionally, there are four buttons labeled with the words “directions,” “phone number,” and “address,” and a thumbs-up emoji.

      In their recent book, Designing Connected Content, Carrie Hane and Mike Atherton define structured content as articles which is”planned, developed, and connected outside an interface so that it’s ready for any interface.” A structured content design approach frames content resources–like recipes, articles, product descriptions, how-tos, profiles, etc.–maybe not as pages to be found and read, but as packages composed of little chunks of content data that relate to one another in meaningful ways.

      The City of Seattle website’s 'Pay My Ticket' page, with two HTML heading elements outlined and labeled for illustration, and an open inspector panel, where we can see that the headings look the same to viewers but are marked up differently in the code.
      The City of Seattle website‘s “Pay My Ticket” page, showing four methods to pay a parking ticket in a simple, all-text layout.

      This”featured snippet” view is possible since the content writer,, has broken this recipe in the smallest meaningful chunks appropriate with this subject matter and audience, then expressed advice about these chunks as well as the connections between them at a machine-readable manner. In this example, has utilized both semantic HTML and linked data to produce this content not only a webpage, but also legible, accessible data which may be correctly interpreted, accommodated, and remixed by calculations and intelligent agents. Let’s look to learn how they work collectively across inference contexts, and indexing, aggregation.

      Linked content and data aggregation

      The Use of structured content