{"id":10629,"date":"2023-09-14T10:04:22","date_gmt":"2023-09-14T17:04:22","guid":{"rendered":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/?page_id=10629"},"modified":"2023-10-17T13:38:26","modified_gmt":"2023-10-17T20:38:26","slug":"design-library-overview","status":"publish","type":"page","link":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/design-library-overview\/","title":{"rendered":"Design Library overview"},"content":{"rendered":"\n<h6 class=\"wp-block-heading\">Explore the Guidelines and see design patterns and examples for applying them <\/h6>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"9\" src=\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/uploads\/prod\/2023\/02\/gradient-bar-1536x14-1-1024x9.png\" alt=\"\" class=\"wp-image-7635\" srcset=\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/uploads\/prod\/2023\/02\/gradient-bar-1536x14-1-1024x9.png 1024w, https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/uploads\/prod\/2023\/02\/gradient-bar-1536x14-1-300x3.png 300w, https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/uploads\/prod\/2023\/02\/gradient-bar-1536x14-1-768x7.png 768w, https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/uploads\/prod\/2023\/02\/gradient-bar-1536x14-1-1400x14.png 1400w, https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/uploads\/prod\/2023\/02\/gradient-bar-1536x14-1.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">What&#8217;s in the Design Library?<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>18 Guidelines<\/strong> for Human-AI Interaction.<\/li>\n\n\n\n<li><strong>Design patterns<\/strong> for implementing the Guidelines.<\/li>\n\n\n\n<li><strong>Examples<\/strong> of ways the Guidelines are implemented in real AI products.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/uploads\/prod\/2023\/05\/HAX-Design-Library-5-23.png\" alt=\"\" class=\"wp-image-10053\" style=\"width:402px;height:295px\" width=\"402\" height=\"295\" srcset=\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/uploads\/prod\/2023\/05\/HAX-Design-Library-5-23.png 507w, https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/uploads\/prod\/2023\/05\/HAX-Design-Library-5-23-300x220.png 300w\" sizes=\"(max-width: 402px) 100vw, 402px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">How do I use the Design Library?<\/h3>\n\n\n\n<p>Use the filters to learn the Guidelines and get ideas for applying them. Explore:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>How to implement the Guidelines with the help of design patterns and examples (e.g., <a href=\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/library\/?taxonomy_guideline-term%5B0%5D=4&amp;content_type%5B0%5D=guideline&amp;content_type%5B1%5D=pattern&amp;content_type%5B%5D=example\">how to communicate system capabilities and limitations using Guideline 2<\/a>).<\/li>\n\n\n\n<li>Examples of how other products have implemented the Guidelines. Narrow down by type of AI (e.g., generative), product category (e.g., email), and\/or Guideline.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-space-between is-layout-flex wp-container-core-buttons-is-layout-1 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/library\/\">Explore the Design Library<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Explore the Guidelines and see design patterns and examples for applying them What&#8217;s in the Design Library? How do I use the Design Library? Use the filters to learn the Guidelines and get ideas for applying them. Explore:<\/p>\n","protected":false},"author":81,"featured_media":10053,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"toolkit_pattern_number":"","ep_exclude_from_search":false,"footnotes":""},"coauthors":[105],"class_list":["post-10629","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Design Library overview - Microsoft HAX Toolkit<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/design-library-overview\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design Library overview - Microsoft HAX Toolkit\" \/>\n<meta property=\"og:description\" content=\"Explore the Guidelines and see design patterns and examples for applying them What&#8217;s in the Design Library? How do I use the Design Library? Use the filters to learn the Guidelines and get ideas for applying them. Explore:\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/design-library-overview\/\" \/>\n<meta property=\"og:site_name\" content=\"Microsoft HAX Toolkit\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-17T20:38:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/uploads\/prod\/2023\/05\/HAX-Design-Library-5-23.png\" \/>\n\t<meta property=\"og:image:width\" content=\"507\" \/>\n\t<meta property=\"og:image:height\" content=\"372\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n\t<meta name=\"twitter:label2\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data2\" content=\"Kathleen Walker\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/design-library-overview\/\",\"url\":\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/design-library-overview\/\",\"name\":\"Design Library overview - Microsoft HAX Toolkit\",\"isPartOf\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/design-library-overview\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/design-library-overview\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/uploads\/prod\/2023\/05\/HAX-Design-Library-5-23.png\",\"datePublished\":\"2023-09-14T17:04:22+00:00\",\"dateModified\":\"2023-10-17T20:38:26+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/design-library-overview\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/design-library-overview\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/design-library-overview\/#primaryimage\",\"url\":\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/uploads\/prod\/2023\/05\/HAX-Design-Library-5-23.png\",\"contentUrl\":\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/uploads\/prod\/2023\/05\/HAX-Design-Library-5-23.png\",\"width\":507,\"height\":372},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/design-library-overview\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design Library overview\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/#website\",\"url\":\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/\",\"name\":\"Microsoft HAX Toolkit\",\"description\":\"Collaborative tools to help you create more effective and responsible human-AI experiences\",\"publisher\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/#organization\",\"name\":\"Microsoft Corporation\",\"url\":\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/uploads\/prod\/2022\/07\/msft-logo.png\",\"contentUrl\":\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/uploads\/prod\/2022\/07\/msft-logo.png\",\"width\":1536,\"height\":1536,\"caption\":\"Microsoft Corporation\"},\"image\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Design Library overview - Microsoft HAX Toolkit","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/design-library-overview\/","og_locale":"en_US","og_type":"article","og_title":"Design Library overview - Microsoft HAX Toolkit","og_description":"Explore the Guidelines and see design patterns and examples for applying them What&#8217;s in the Design Library? How do I use the Design Library? Use the filters to learn the Guidelines and get ideas for applying them. Explore:","og_url":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/design-library-overview\/","og_site_name":"Microsoft HAX Toolkit","article_modified_time":"2023-10-17T20:38:26+00:00","og_image":[{"width":507,"height":372,"url":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/uploads\/prod\/2023\/05\/HAX-Design-Library-5-23.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute","Written by":"Kathleen Walker"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/design-library-overview\/","url":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/design-library-overview\/","name":"Design Library overview - Microsoft HAX Toolkit","isPartOf":{"@id":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/design-library-overview\/#primaryimage"},"image":{"@id":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/design-library-overview\/#primaryimage"},"thumbnailUrl":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/uploads\/prod\/2023\/05\/HAX-Design-Library-5-23.png","datePublished":"2023-09-14T17:04:22+00:00","dateModified":"2023-10-17T20:38:26+00:00","breadcrumb":{"@id":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/design-library-overview\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/design-library-overview\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/design-library-overview\/#primaryimage","url":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/uploads\/prod\/2023\/05\/HAX-Design-Library-5-23.png","contentUrl":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/uploads\/prod\/2023\/05\/HAX-Design-Library-5-23.png","width":507,"height":372},{"@type":"BreadcrumbList","@id":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/design-library-overview\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/"},{"@type":"ListItem","position":2,"name":"Design Library overview"}]},{"@type":"WebSite","@id":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/#website","url":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/","name":"Microsoft HAX Toolkit","description":"Collaborative tools to help you create more effective and responsible human-AI experiences","publisher":{"@id":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/#organization","name":"Microsoft Corporation","url":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/#\/schema\/logo\/image\/","url":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/uploads\/prod\/2022\/07\/msft-logo.png","contentUrl":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/uploads\/prod\/2022\/07\/msft-logo.png","width":1536,"height":1536,"caption":"Microsoft Corporation"},"image":{"@id":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/wp-json\/wp\/v2\/pages\/10629"}],"collection":[{"href":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/wp-json\/wp\/v2\/users\/81"}],"replies":[{"embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/wp-json\/wp\/v2\/comments?post=10629"}],"version-history":[{"count":10,"href":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/wp-json\/wp\/v2\/pages\/10629\/revisions"}],"predecessor-version":[{"id":10902,"href":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/wp-json\/wp\/v2\/pages\/10629\/revisions\/10902"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/wp-json\/wp\/v2\/media\/10053"}],"wp:attachment":[{"href":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/wp-json\/wp\/v2\/media?parent=10629"}],"wp:term":[{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/haxtoolkit\/wp-json\/wp\/v2\/coauthors?post=10629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}