Layout practices which build bridges between technology needs and user needs to fulfill 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 solutions that are structured.
This announcement was intended to aid strategists, designers, and businesses prepare for the rise of mobile. With the growing prevalence of supporters and queries, an organization’s website is less and less inclined to become a visitor’s first experience with rich content. Such as evaluations, hours, telephone numbers, and finding location information — in many cases –this pre-visit engagement might be a user interaction with a data resource.
As a human reading this page, I easily understand what my choices are for paying: I will pay online, in person, on the telephone, or by email. If I ask Google Assistant how to pay a parking ticket in Boston, but things get a bit confusing:

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.

Semantic HTML is markup which communicates information about the connections between document elements, as opposed to just describing how they should look on display. Semantic elements like heading tags and record tags, for example, indicate that the text they enclose is a heading (

) for the set of record items (

  • ) in the ordered list (
      ) that follows.
      To be able to tailor results to these questions, software agents have started using the data that was related at their disposal to build a targeted, concise reaction and subsequently inferring intent. If I request Google Assistant what time Dr. Ruhlman’s office closes, for Example, it responds,”Dr. Ruhlman’s office closes at 5 p.m.,” and displays this effect:

      Google search results page for a bouillabaisse recipe including an image, numbered directions, and tags.
      A”featured snippet” to get allrecipes.com about the Google results page. The machine-readable values are shown by the pane on the right.

      Software agent hunt and semantic HTML

    1. Content Modelling: An Expert Skill,” Rachel Lovinger
    2. 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.
      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.
      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.

      The role of structured articles

      In late 2016, Gartner predicted that 30 percent of internet browsing sessions would be achieved without a display by 2020. Earlier the identical year, Comscore had predicted that half of all searches would be voice hunts by 2020. Though there’s recent signs to imply that the 2020 picture may be more complex than those broad-strokes projections imply, we are already seeing the impact that voice hunt, artificial intelligence, and intelligent software agents like Alexa and Google Assistant are making about the way information can be consumed and found on the web.
      HTML markup which focuses only on the presentational facets of a”page” may seem perfectly fine to a human reader however be completely illegible into an algorithm. Take, for instance, the City of Boston website, redesigned a couple of years back in collaboration with top-tier design and development partners. If I Wish to find information about how to pay a parking ticket, then a link in the home page takes me directly to the”How to Pay a Parking Ticket” screen (scrolled to show detail):
      In addition to locating and excerpting info, for example recipe measures or parking ticket payment choices, search and software agent calculations also now aggregate content from multiple sources by using linked data.

      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.
        A combined HTML code editor and preview window showing markup and results for heading, ordered list, and list item HTML tags.

        The prevalence of voice for a manner of access to data makes supplying structured, machine-intelligible content more important. Voice and software agents that are intelligent are not solely freeing users from their keyboards, they are changing user behavior. Based on LSA Insider, there are many critical differences between voice queries and typed queries. Voice questions often be:
        If we run Dr. Ruhlman’s Swedish Hospital profile page via Google’s Structured Data Testing Tool, we could see that articles about him is structured as small, discrete elements, each of which can be marked up with descriptive types and attributes that convey both the significance of those traits’ values and the way they fit together as a whole–all in a machine-readable arrangement.
        In this instance, Dr. Ruhlman’s profile has been marked up using microdata depending on the schema.org language. This ordered content base provides the semantic base on which further content connections can be built. The Knowledge Graph info box, for instance, comprises Google testimonials, which aren’t a part of Dr. Ruhlman’s profile, but that have been aggregated to this overview. The overview also includes an interactive map, made possible because Dr. Ruhlman’s workplace location is machine-readable.
        Though every one of those elements would look the exact same into a human producing this webpage, an enormous difference is read by the machine. They fall prey into the idiosyncrasies of the very well-intentioned content writers Even though WYSIWYG text entry fields can theoretically support semantic HTML, in training. By making content structure that is meaningful a core part of a site’s content management system, organizations may create semantically correct HTML every time, for each component. This is the base that makes it possible to capitalize on the rich relationship descriptions afforded by data that is linked.
        You will also observe that while Dr. Stacey Donion is an exact match in all the listed search results–which are numerous enough to fill the first results page–we are shown a”did you mean” link to get another doctor. Stacy Donlon, MD, is a neurologist who practices. Multicare linked profiles and does, however, provide semantic.

        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.'

        Than we see with Boston the Google Assistant search offers a much more helpful result. In cases like this, the Google Assistant result links right to the”Pay My Site” page and also lists a number of ways I can pay my ticket: online, by email, and also in person.
        MultiCare Neuroscience Center, you will recall, is where Dr. Donlon–the neuroscientist Google believes I might be searching for, not the orthopedic surgeon I am actually looking for–practices.

      • Content Strategy for Mobile, Karen McGrane
      • The City of Seattle website‘s “Pay My Ticket” page, showing four methods to pay a parking ticket in a simple, all-text layout.

        On creating material systems that work for algorithms and humans alike practitioners from across the design community have shared a wealth of resources lately. To Find out More about executing a content that is structured approach for your organization, these articles and books are a great place to begin:

        The City of Seattle website’s “Pay My Ticket” page, with the HTML heading elements outlined and labeled for illustration.
        • More;
        • more likely to inquire that, what, and where;
        • more conversational;
        • and more specific.

        These kinds of quick interactions, but are just one small piece of a far bigger problem: connected data is increasingly key to preserving the integrity of articles online. Like the hospitals, schools I’ve consulted for years, and government agencies, do not measure the success of the communications efforts in page views or ad clicks. Success for these means linking patients, constituents, and community members with solutions and information regarding the organization, wherever that information might be found. This communication-based definition of achievement readily applies to any type of organization working to further its business goals.
        While this use of semantic HTML offers distinct benefits over the”page screen” styling we found on the City of Boston’s site, the Seattle page also shows a weakness that is typical of manual approaches to semantic HTML. You’ll notice that, in the Google Assistant results, the”Pay by Phone” option we found on the webpage was not listed. This irregularity in arrangement may be what’s causing this option to be omitted by Google Assistant .
        Rather than a targeted selection of actions I’m presented .

        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.

        These elements, when designed well, convey relationships and data hierarchy visually to readers, and semantically to calculations. This arrangement allows Google Assistant to reasonably surmise that the text in those

        headings signifies payment options under the

        heading”Pay My Ticket.”

        A structured content design strategy frames articles resources–like articles, recipes, 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.
        It is likely that during repeated exposure to the search term”Dr. Stacey Donion,” Google Assistant fine-tuned the answers it supplied. The initial result, nevertheless, indicates that smart brokers might be at least partly susceptible to the exact same accessibility heuristic which affects individuals, wherein the advice that’s easiest to recall frequently seems the most appropriate.
        The City of Seattle’s”Pay My Ticket” page, though it lacks the polished visual style of Boston’s site, also communicates parking ticket payment options clearly to individual people:
        The model of constructing pages and then anticipating users to discover and parse these pages to answer questionsfrom the pre-voice age, is quickly becoming inadequate for successful communication. From engaging in patterns of information discovery and seeking, it precludes associations. Andas we found in the event of hunting for information about doctors –it might lead software representatives to make inferences based on information that is erroneous or insufficient routing clients to competitors who communicate more effectively.

        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.

        Stacey Donion, the search for a recommendation, MD, provides a very different encounter. Like the Town of Boston site above, Dr. Donion’s profile about the Kaiser Permanente site is perfectly intelligible to a sighted human reader. But because its markup is entirely presentational, its material is invisible to software agents.
        There’s insufficient evidence in this small sample to encourage a wide claim that calculations have”cognitive” prejudice, but even if we allow for possibly confounding variables, we can see the compounding problems we hazard by dismissing structured content. “Donlon,” for example, may well be a more common name than”Donion” and may be easily mistyped on a QWERTY keyboard. Regardless, the Kaiser Permanente result we are given previously for Dr. Donion is to get the wrong doctor. What’s more, in the Google Assistant voice hunt, the discussion format doesn’t verify if we meant Dr. Donlon; it just provides us with her centre’s contact information. In these scenarios, providing clear content may only work to our advantage.

        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.

        In addition to the indexing function that search engines perform, smart brokers and search algorithms are bringing additional modes of obtaining information: inference and aggregation. As a result, design campaigns that are devoted to creating visually effective pages are sufficient to ensure the integrity or accuracy of content published on the web. Instead, by focusing on providing access to data within a structured, systematic manner that is legible to both humans and machines, content publishers may ensure that their content is equally accessible and accurate in those new contexts, whether or not they’re producing chatbots or tapping to AI directly. In this guide, we’ll look at the forms and effect of structured content, and we’ll close with a set of tools that can help you to get started with a material that is structured approach to data design.

        Getting started: who and how

        None of the links provided in the Google Assistant results take me straight to the”How to Purchase a Parking Ticket” page, nor do the descriptions clearly allow me to know I am on the ideal path. (I didn’t ask about asking a hearing.) This is because the content on the Town of Boston parking ticket page is designed to communicate content relationships visually but is not structured semantically in a manner that conveys those connections to algorithms that are curious.

        Because people know what lists and headings look like and mean HTML is both semantic and presentational, and calculations can recognize them as components with defined relationships.

        This”featured snippet” perspective is possible because the content publisher, allrecipes.com, has broken this recipe into the smallest meaningful chunks appropriate for this subject matter and audience, then expressed advice about those chunks as well as the relationships between them in a machine-readable way. In this instance, allrecipes.com has utilized both semantic HTML and connected data to make this content not merely a webpage, but in addition legible, accessible data which may be correctly interpreted, accommodated, and remixed by algorithms and smart agents. Let’s look to see how they work across indexing, aggregation, and inference contexts.

        Linked data and content aggregation

      Structured content is a mainstay of various kinds of information on the internet. Listings, for instance, have been based on articles for ages. When I hunt, by Way of 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 pair of tags describing one example recipe:
      Say that I want to collect information about two recommendations I have been awarded for orthopedic surgeons.

      The Company case for content that is structured design

      Voice queries and articles inference

      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.

      As it’s composed Regardless of the visual simplicity of the Town of Seattle parking page, it more effectively ensures the integrity of its material across contexts. “Pay My Ticket” is a level-one heading (

      ), and also every one of the options below it’s level-two key words (

      ), which indicate they are inferior to the level-one component.

      In a layout process that was structured content, the relationships between content chunks are defined and described. This creates the relationships between them as well as the content chunks legible into calculations. Algorithms can then translate a content package as the”page” I am searching for–or remix and adapt the exact same content to give me a list of directions, the number of stars on a review, the period of time left before an office shuts, and some variety of additional concise answers to specific queries.

      In this instance, we could see that Google can find plenty of connections to Dr. Donion in its own standard index results, but it is not able to”know” the data about those sources well enough to present an aggregated outcome. In cases like this, the Knowledge Graph knows Dr. Donion is a Kaiser Permanente doctor, but it pulls at the wrong place and the incorrect physician’s name in its attempt to build a Knowledge Graph display.
      By conveying in an electronic context that includes inference and aggregation, organizations are effectively able to consult with their customers where users actually are, be it on a website, a search engine results page, or a digital assistant. They’re also able to keep greater control over the accuracy of their messages by ensuring the correct content are available and communicated across contexts.

      Remixed although these outcomes aren’t just aggregated from sources, but are translated to provide a customized answer. Getting instructions, placing a telephone call, and obtaining Dr. Ruhlman’s profile page on swedish.org are at the tips of my fingers.
      In its simplest form, linked data is”a set of best practices for connecting structured data on the web.” Linked data expands the basic capabilities of semantic HTML by describing not just what kind of thing a page element is (“Pay My Ticket” is an

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

      represents a”pay activity,” which inherits the structural characteristics of”trade activities” (the market of goods and services for cash ) and”actions” (actions carried out by an agent upon an item ). Data that is linked generates a richer, more nuanced description of the relationship between page elements, and it provides the structural and conceptual information that algorithms need to bring data together.