{"id":114,"date":"2022-05-10T17:24:17","date_gmt":"2022-05-10T17:24:17","guid":{"rendered":"https:\/\/digitaldocumentation.wustl.edu\/web-design-system-documentation\/?page_id=48"},"modified":"2022-05-10T18:02:36","modified_gmt":"2022-05-10T18:02:36","slug":"carousels-sliders-rotators","status":"publish","type":"page","link":"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/web-best-practices-guidelines\/carousels-sliders-rotators\/","title":{"rendered":"Carousels, sliders, rotators"},"content":{"rendered":"\n<p class=\"is-style-lead\">Avoid carousels, sliders and rotators.<\/p>\n\n\n\n<p>A primary principle of web usability is empowering users with as much control over their Web experience as possible. Fundamentally, autorotating carousels, sliders and rotators remove control from the user.<\/p>\n\n\n\n<p>Moving elements cause accessibility issues for users with difficulty clicking items quickly or precisely, and text that moves may prohibit international or low-literacy users from having enough time to read the message.<\/p>\n\n\n\n<p>Messages that are not always displayed on the page may not deliver the appropriate message to appropriate users if the message happens not to be showing when the user is looking.<\/p>\n\n\n\n<p><strong>Data from higher education websites shows that carousels are ineffective.<\/strong><br>The web team at ND.edu (Notre Dame) has shared&nbsp;<a href=\"https:\/\/erikrunyon.com\/2013\/01\/carousel-interaction-stats\/\">data on the rates of interaction with the carousel on the ND.edu homepage<\/a>. In January through June 2013, only 1.08% of users clicked on a carousel feature; of this 1.08% of users, 89.1% of the clicks were on the first message in the carousel. See&nbsp;<a href=\"http:\/\/www.uofadmissionsmarketing.com\/2013\/02\/using-carousels-in-higher-education.html\">additional information about higher education websites from U of Admissions Marketing<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Avoid carousels, sliders and rotators. A primary principle of web usability is empowering users with as much control over their Web experience as possible. Fundamentally, autorotating carousels, sliders and rotators remove control from the user. Moving elements cause accessibility issues for users with difficulty clicking items quickly or precisely, and text that moves may prohibit [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":0,"parent":105,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.14 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Carousels, sliders, rotators - Here and Next<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Carousels, sliders, rotators - Here and Next\" \/>\n<meta property=\"og:description\" content=\"Avoid carousels, sliders and rotators. A primary principle of web usability is empowering users with as much control over their Web experience as possible. Fundamentally, autorotating carousels, sliders and rotators remove control from the user. Moving elements cause accessibility issues for users with difficulty clicking items quickly or precisely, and text that moves may prohibit [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/web-best-practices-guidelines\/carousels-sliders-rotators\/\" \/>\n<meta property=\"og:site_name\" content=\"Here and Next\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-10T18:02:36+00:00\" \/>\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<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/web-best-practices-guidelines\/carousels-sliders-rotators\/\",\"url\":\"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/web-best-practices-guidelines\/carousels-sliders-rotators\/\",\"name\":\"Carousels, sliders, rotators - Here and Next\",\"isPartOf\":{\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/#website\"},\"datePublished\":\"2022-05-10T17:24:17+00:00\",\"dateModified\":\"2022-05-10T18:02:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/web-best-practices-guidelines\/carousels-sliders-rotators\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/web-best-practices-guidelines\/carousels-sliders-rotators\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/web-best-practices-guidelines\/carousels-sliders-rotators\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Best Practices &#038; Guidelines\",\"item\":\"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/web-best-practices-guidelines\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Carousels, sliders, rotators\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/#website\",\"url\":\"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/\",\"name\":\"Here and Next\",\"description\":\"Just another digitaldocumentation.wustl.edu Sites site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Carousels, sliders, rotators - Here and Next","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Carousels, sliders, rotators - Here and Next","og_description":"Avoid carousels, sliders and rotators. A primary principle of web usability is empowering users with as much control over their Web experience as possible. Fundamentally, autorotating carousels, sliders and rotators remove control from the user. Moving elements cause accessibility issues for users with difficulty clicking items quickly or precisely, and text that moves may prohibit [&hellip;]","og_url":"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/web-best-practices-guidelines\/carousels-sliders-rotators\/","og_site_name":"Here and Next","article_modified_time":"2022-05-10T18:02:36+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/web-best-practices-guidelines\/carousels-sliders-rotators\/","url":"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/web-best-practices-guidelines\/carousels-sliders-rotators\/","name":"Carousels, sliders, rotators - Here and Next","isPartOf":{"@id":"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/#website"},"datePublished":"2022-05-10T17:24:17+00:00","dateModified":"2022-05-10T18:02:36+00:00","breadcrumb":{"@id":"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/web-best-practices-guidelines\/carousels-sliders-rotators\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/web-best-practices-guidelines\/carousels-sliders-rotators\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/web-best-practices-guidelines\/carousels-sliders-rotators\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/"},{"@type":"ListItem","position":2,"name":"Best Practices &#038; Guidelines","item":"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/web-best-practices-guidelines\/"},{"@type":"ListItem","position":3,"name":"Carousels, sliders, rotators"}]},{"@type":"WebSite","@id":"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/#website","url":"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/","name":"Here and Next","description":"Just another digitaldocumentation.wustl.edu Sites site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"distributor_meta":false,"distributor_terms":false,"distributor_media":false,"distributor_original_site_name":"Here and Next","distributor_original_site_url":"https:\/\/digitaldocumentation.wustl.edu\/hereandnext","push-errors":false,"_links":{"self":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/wp-json\/wp\/v2\/pages\/114"}],"collection":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/wp-json\/wp\/v2\/comments?post=114"}],"version-history":[{"count":2,"href":"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/wp-json\/wp\/v2\/pages\/114\/revisions"}],"predecessor-version":[{"id":150,"href":"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/wp-json\/wp\/v2\/pages\/114\/revisions\/150"}],"up":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/wp-json\/wp\/v2\/pages\/105"}],"wp:attachment":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/hereandnext\/wp-json\/wp\/v2\/media?parent=114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}