CINXE.COM

<!DOCTYPE html>    <html lang="en-US">  <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width" /> <title>Interface/Design | The Open Library Blog</title> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="pingback" href="https://blog.openlibrary.org/xmlrpc.php">  <meta name='robots' content='max-image-preview:large' /> <link rel='dns-prefetch' href='//archive.org' /> <link rel="alternate" type="application/rss+xml" title="The Open Library Blog » Feed" href="https://blog.openlibrary.org/feed/" /> <link rel="alternate" type="application/rss+xml" title="The Open Library Blog » Comments Feed" href="https://blog.openlibrary.org/comments/feed/" /> <link rel="alternate" type="application/rss+xml" title="The Open Library Blog » Interface/Design Category Feed" href="https://blog.openlibrary.org/category/interfacedesign/feed/" /> <script type="text/javascript"> window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/14.0.0\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/14.0.0\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/blog.openlibrary.org\/wp-includes\/js\/wp-emoji-release.min.js?ver=6.2"}}; /*! This file is auto-generated */ !function(e,a,t){var n,r,o,i=a.createElement("canvas"),p=i.getContext&&i.getContext("2d");function s(e,t){p.clearRect(0,0,i.width,i.height),p.fillText(e,0,0);e=i.toDataURL();return p.clearRect(0,0,i.width,i.height),p.fillText(t,0,0),e===i.toDataURL()}function c(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(o=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},r=0;r<o.length;r++)t.supports[o[r]]=function(e){if(p&&p.fillText)switch(p.textBaseline="top",p.font="600 32px Arial",e){case"flag":return s("\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!s("\ud83c\uddfa\ud83c\uddf3","\ud83c\uddfa\u200b\ud83c\uddf3")&&!s("\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!s("\ud83e\udef1\ud83c\udffb\u200d\ud83e\udef2\ud83c\udfff","\ud83e\udef1\ud83c\udffb\u200b\ud83e\udef2\ud83c\udfff")}return!1}(o[r]),t.supports.everything=t.supports.everything&&t.supports[o[r]],"flag"!==o[r]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[o[r]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(e=t.source||{}).concatemoji?c(e.concatemoji):e.wpemoji&&e.twemoji&&(c(e.twemoji),c(e.wpemoji)))}(window,document,window._wpemojiSettings); </script> <style type="text/css"> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 0.07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <link rel='stylesheet' id='animate-css' href='https://blog.openlibrary.org/wp-content/plugins/qi-blocks/assets/css/plugins/animate/animate.min.css?ver=4.1.1' type='text/css' media='all' /> <style id='wp-block-library-inline-css' type='text/css'> :root{--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,161;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px;--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}.has-text-align-center{text-align:center}.has-text-align-left{text-align:left}.has-text-align-right{text-align:right}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{clip:rect(1px,1px,1px,1px);word-wrap:normal!important;border:0;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.screen-reader-text:focus{clip:auto!important;background-color:#ddd;-webkit-clip-path:none;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style*=border-top-color]){border-top-style:solid}html :where([style*=border-right-color]){border-right-style:solid}html :where([style*=border-bottom-color]){border-bottom-style:solid}html :where([style*=border-left-color]){border-left-style:solid}html :where([style*=border-width]){border-style:solid}html :where([style*=border-top-width]){border-top-style:solid}html :where([style*=border-right-width]){border-right-style:solid}html :where([style*=border-bottom-width]){border-bottom-style:solid}html :where([style*=border-left-width]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}figure{margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}} </style> <link rel='stylesheet' id='classic-theme-styles-css' href='https://blog.openlibrary.org/wp-includes/css/classic-themes.min.css?ver=6.2' type='text/css' media='all' /> <link rel='stylesheet' id='archive-auth-css' href='https://blog.openlibrary.org/wp-content/plugins/archive-auth/public/css/archive-auth-public.css?ver=1.0.0' type='text/css' media='all' /> <link rel='stylesheet' id='archive_sharing_css-css' href='https://blog.openlibrary.org/wp-content/plugins/archive-sharing-widget/public/css/archive-sharing-widget.css?ver=20181212' type='text/css' media='all' /> <link rel='stylesheet' id='qi-blocks-grid-css' href='https://blog.openlibrary.org/wp-content/plugins/qi-blocks/assets/dist/grid.css?ver=1.3.3' type='text/css' media='all' /> <link rel='stylesheet' id='qi-blocks-main-css' href='https://blog.openlibrary.org/wp-content/plugins/qi-blocks/assets/dist/main.css?ver=1.3.3' type='text/css' media='all' /> <link rel='stylesheet' id='twentytwelve-style-css' href='https://blog.openlibrary.org/wp-content/themes/twentytwelve/style.css?ver=6.2' type='text/css' media='all' /> <link rel='stylesheet' id='child-style-css' href='https://blog.openlibrary.org/wp-content/themes/twentytwelve-child/style.css?ver=1.0.0' type='text/css' media='all' /> <link rel='stylesheet' id='twentytwelve-fonts-css' href='https://blog.openlibrary.org/wp-content/themes/twentytwelve/fonts/font-open-sans.css?ver=20230328' type='text/css' media='all' /> <link rel='stylesheet' id='twentytwelve-block-style-css' href='https://blog.openlibrary.org/wp-content/themes/twentytwelve/css/blocks.css?ver=20230213' type='text/css' media='all' />  <script type='text/javascript' src='https://archive.org/includes/analytics.js?ver=ffd0d9' id='archive_analytics_js-js'></script> <script type='text/javascript' src='https://blog.openlibrary.org/wp-includes/js/jquery/jquery.min.js?ver=3.6.3' id='jquery-core-js'></script> <script type='text/javascript' src='https://blog.openlibrary.org/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.0' id='jquery-migrate-js'></script> <script type='text/javascript' src='https://blog.openlibrary.org/wp-content/plugins/archive-auth/public/js/archive-auth-public.js?ver=1.0.0' id='archive-auth-js'></script> <script type='text/javascript' src='https://archive.org/web/wb404.js?ver=20181212' id='archive_wayback_404_js-js'></script> <link rel="https://api.w.org/" href="https://blog.openlibrary.org/wp-json/" /><link rel="alternate" type="application/json" href="https://blog.openlibrary.org/wp-json/wp/v2/categories/7" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://blog.openlibrary.org/xmlrpc.php?rsd" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://blog.openlibrary.org/wp-includes/wlwmanifest.xml" /> <meta name="generator" content="WordPress 6.2" /> <link rel="icon" href="https://blog.openlibrary.org/files/2016/02/OL-logo.jpg" sizes="32x32" /> <link rel="icon" href="https://blog.openlibrary.org/files/2016/02/OL-logo.jpg" sizes="192x192" /> <link rel="apple-touch-icon" href="https://blog.openlibrary.org/files/2016/02/OL-logo.jpg" /> <meta name="msapplication-TileImage" content="https://blog.openlibrary.org/files/2016/02/OL-logo.jpg" /> <script src="//archive.org/includes/analytics.js?v=20230130" type="text/javascript"></script> <script> 'use strict'; if ('archive_analytics' in window) { archive_analytics.service = 'blog'; archive_analytics.send_pageview_on_load({}); archive_analytics.process_url_events(window.location); } </script> <meta name="monetization" content="$ilp.uphold.com/D7BwPKMQzBiD"> </head> <body class="archive category category-interfacedesign category-7 wp-embed-responsive qi-blocks-1.3.3 qodef-gutenberg--no-touch custom-font-enabled"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-dark-grayscale"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0 0.49803921568627" /><feFuncG type="table" tableValues="0 0.49803921568627" /><feFuncB type="table" tableValues="0 0.49803921568627" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-grayscale"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0 1" /><feFuncG type="table" tableValues="0 1" /><feFuncB type="table" tableValues="0 1" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-purple-yellow"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0.54901960784314 0.98823529411765" /><feFuncG type="table" tableValues="0 1" /><feFuncB type="table" tableValues="0.71764705882353 0.25490196078431" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-blue-red"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0 1" /><feFuncG type="table" tableValues="0 0.27843137254902" /><feFuncB type="table" tableValues="0.5921568627451 0.27843137254902" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-midnight"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0 0" /><feFuncG type="table" tableValues="0 0.64705882352941" /><feFuncB type="table" tableValues="0 1" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-magenta-yellow"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0.78039215686275 1" /><feFuncG type="table" tableValues="0 0.94901960784314" /><feFuncB type="table" tableValues="0.35294117647059 0.47058823529412" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-purple-green"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0.65098039215686 0.40392156862745" /><feFuncG type="table" tableValues="0 1" /><feFuncB type="table" tableValues="0.44705882352941 0.4" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-blue-orange"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0.098039215686275 1" /><feFuncG type="table" tableValues="0 0.66274509803922" /><feFuncB type="table" tableValues="0.84705882352941 0.41960784313725" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><div id="page" class="hfeed site"> <header id="masthead" class="site-header" role="banner"> <hgroup> <h1 class="site-title"><a href="https://blog.openlibrary.org/" title="The Open Library Blog" rel="home">The Open Library Blog</a></h1> <h2 class="site-description">A web page for every book</h2> </hgroup> <a href="https://blog.openlibrary.org/">   <img src="https://blog.openlibrary.org/files/2023/04/cropped-cropped-openlibrary-header.png" class="header-image" width="1280" height="437" alt="The Open Library Blog" /></a> <nav id="site-navigation" class="main-navigation" role="navigation"> <button class="menu-toggle">Menu</button> <a class="assistive-text" href="#content" title="Skip to content">Skip to content</a> <div class="menu-menu-1-container"><ul id="menu-menu-1" class="nav-menu"><li id="menu-item-1135" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-1135"><a href="http://blog.openlibrary.org/">Home</a></li> <li id="menu-item-1136" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1136"><a href="https://blog.openlibrary.org/about-2/">About</a></li> </ul></div> </nav> </header> <div id="main" class="wrapper"> <section id="primary" class="site-content"> <div id="content" role="main"> <header class="archive-header"> <h1 class="archive-title"> Category Archives: <span>Interface/Design</span> </h1> </header> <article id="post-2330" class="post-2330 post type-post status-publish format-standard has-post-thumbnail hentry category-interfacedesign category-research"> <header class="entry-header"> <img width="624" height="114" src="https://blog.openlibrary.org/files/2024/06/Screenshot-2024-06-15-at-8.06.16-PM-624x114.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" decoding="async" srcset="https://blog.openlibrary.org/files/2024/06/Screenshot-2024-06-15-at-8.06.16-PM-624x114.png 624w, https://blog.openlibrary.org/files/2024/06/Screenshot-2024-06-15-at-8.06.16-PM-300x55.png 300w, https://blog.openlibrary.org/files/2024/06/Screenshot-2024-06-15-at-8.06.16-PM-500x91.png 500w, https://blog.openlibrary.org/files/2024/06/Screenshot-2024-06-15-at-8.06.16-PM-768x141.png 768w, https://blog.openlibrary.org/files/2024/06/Screenshot-2024-06-15-at-8.06.16-PM.png 1246w" sizes="(max-width: 624px) 100vw, 624px" /> <h1 class="entry-title"> <a href="https://blog.openlibrary.org/2024/06/16/listening-to-learners-and-educators/" rel="bookmark">Listening to Learners and Educators</a> </h1> <div class="entry-byline"> Posted on <a href="https://blog.openlibrary.org/2024/06/16/listening-to-learners-and-educators/" title="3:06 am" rel="bookmark"><time class="entry-date" datetime="2024-06-16T03:06:54+00:00">June 16, 2024</time></a><span class="by-author"> by <span class="author vcard"><a class="url fn n" href="https://blog.openlibrary.org/author/mekarpeles/" title="View all posts by mek" rel="author">mek</a></span></span> </div> </header> <div class="entry-content"> <p>Over the course of 2023, the Open Library team conducted design research and video-interviewed nine volunteers to determine how learners and educators make use of the OpenLibrary.org platform, what challenges get in their way, and how we can help them succeed. Participants of the study included a mix of students, teachers, and researchers from around the globe, spanning a variety of disciplines.</p> <h2 class="wp-block-heading">About the Participants</h2> <p>At the earliest stages of this research, a screener survey involving 466 participants helped us understand the wide range of patrons who use the Open Library. Excluding 141 responses that didn’t match the criteria of this research, the remaining 325 respondents identified as:</p> <ul> <li>126 high school, university, or graduate students</li> <li>64 self learners</li> <li>44 researchers</li> <li>41 K-12 teachers</li> <li>29 professors</li> <li>12 parents of K-12 students</li> <li>9 librarians</li> </ul> <p>Participants reported affiliations with institutions spanning a diverse variety of geographies, including: Colombia, Romania, France, Uganda, Indonesia, China, India, Botswana, Nigeria, and Ireland.</p> <h2 class="wp-block-heading">Findings</h2> <figure class="wp-block-image is-style-default"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXfbXBVZZEOo8BoYQ_9E_4AvvZDkFa36CN-QlzZpgHitDPYymofJ1vEFREZhj5ne0n35aycNZ-SpB89AxCp9U4qb39z0ZsUe68yKIwSEz1kn7pz5uwZU6S9IoyDsDm3NV3EZA_NQ9c0DbNaES_GBM-3_BVfY?key=TzrR-z9FrvGgZcD2E-Kpsw" alt="" /><figcaption class="wp-element-caption">A screenshot of the Findings section of the collaborative Mural canvas, filled with digital sticky notes </figcaption></figure> <p>Here are the top 7 learnings we discovered from this research:</p> <ol> <li><strong>The fact that the Open Library is free and accessible online is paramount to patrons’ success. </strong>During interviews, several participants told us that the Open Library helps them <strong>locate hard to find books</strong> they have difficulty finding elsewhere. At least two participants didn’t have access to a nearby library or a book vendor that could provide the book they needed. In a recent <a href="https://blog.archive.org/2024/06/14/patrons-speak-out-the-impact-of-losing-access-to-more-than-500000-books/">Internet Archive blog post</a>, several patrons corroborated these challenges. In addition to finding materials, one or more of our participants are affected by disabilities or have worked with such persons who have <strong>limited mobility</strong>, difficulty commuting, and benefit from online access. Research use cases also drove the necessity for online access: At least two interviewed participants used texts primarily as references to cite or verify certain passages. The ability to quickly search for and <strong>access specific, relevant passages</strong> online was essential to helping them to succeed at their research objective, which may have otherwise been prohibitively expensive or technologically intractable. </li> <li><strong>Participants voiced the importance of internationalization and having books in multiple languages. </strong>Nearly every participant we interviewed advocated for the website and books to be made available in more languages. One participant had to manually translate sections of English books into Arabic for their students. Another participant who studied classic literature manually translated editions so they could be compared. A teach who we interviewed relayed to us that it was common for their ESL (English as a Second Language) students to ask for help translating books from English into their primary language.</li> <li><strong>The interests of learners and educators who use the Open Library vary greatly. </strong>We expected to find themes in the types of books learners and educators are searching for. However, the foci of participants we interviewed spanned a variety of topics, from Buddhism, to roller coaster history, therapy, technical books, language learning materials, and classic literature. Nearly none of our candidates were looking for the same thing and most had different goals and learning objectives. One need they all have in common is <strong>searching for books</strong>.</li> <li><strong>The Open Library has many educational applications we hadn’t intended. </strong>One or more participant reported they had used the read aloud feature in their classroom to help students with phonics and language learning. While useful, participants also suggested the feature sometimes glitches and robotic sounding voices are a turnoff. We also learned several educators and researchers link to Open Library when creating course syllabi for their students.</li> <li><strong>Many of Open Library subject and collection pages weren’t sufficient for one or more of our learners and educators use cases. </strong>At least two interviewees ended up compiling their own collections using their own personal web pages and linking back to the Open Library. One participant tried to use Open Library to search for K-12, age-appropriate books pertaining to the “<a href="https://openlibrary.org/subjects/constitution_day_(u.s.)">US Constitution Day</a>” and was grateful for but underwhelmed by the results.</li> <li><strong>The Open Library service & its features are difficult to discover</strong>. <ul> <li>Several interviewees were unaware of Open Library’s full-text search, read aloud, or note-taking capabilities, yet expressed interest in these features.</li> <li>Many respondents of the screener survey believed their affiliated institutions were unaware of the Open Library platform.</li> </ul> </li> <li><strong>Open Library’s community is generous, active, and eager to participate in research</strong> to help us improve. Overall, 450+ individuals from 100+ institutions participated in this process. Previously, more than 2k individuals helped us learn <a href="https://blog.openlibrary.org/2023/09/14/how-do-patrons-prefer-to-read/">how our patrons prefer to read</a> and more than <a href="https://blog.openlibrary.org/2022/09/29/a-summer-of-design/">750 participants helped us redesign our book pages</a>.</li> </ol> <p>Some of our learnings we had already predicted and seeing these predictions confirmed by data has also given us conviction in pursuing next steps. Some learnings were genuinely surprising to us, such as many teachers preferring the online web-based book reader because it doesn’t require them to install any extra software on school computers.</p> <h2 class="wp-block-heading">Proposals</h2> <p>After reviewing this list of findings and challenges, we’ve identified 10 areas where the Open Library may be improved for learners and educators around the globe:</p> <ol> <li><strong>Continuing to make more books available online </strong>by expanding our <a href="https://openlibrary.org/trusted-book-providers"><strong>Trusted Book Providers</strong></a> program and adding <a href="https://guide.pressbooks.com/chapter/what-is-a-webbook/#:~:text=By%20comparison%2C%20a%20webbook%20stays,traditional%20formats%20can't%20do.">Web Books</a> to the catalog.</li> <li><strong>Participating in outreach to promote platform discovery & adoption.</strong> Connect with institutions and educators to surface opportunities for partnership, integration, and to establish clear patterns for using Open Library within learning environments.</li> <li><strong>Adding onboarding flow after registration to promote feature discovery</strong>. Conduct followup surveys to learn more about patrons, their challenges, and their needs. Add an onboarding experience which helps newly registered patrons become familiar with new services.</li> <li><strong>Making books available in more languages</strong> by prototyping the capability to translate currently open pages within bookreader to any language, on-the-fly.</li> <li><strong>Creating better subject and collection page experiences</strong> by<strong> </strong>giving librarians tools to create custom collection pages and tag and organize books in bulk.</li> <li><strong>Improving Read Aloud</strong> by using AI to generate more natural/human voices, make the feature more discoverable in the bookreader interface, and fix read aloud navigation so it works more predictably.</li> <li><strong>Allowing educators to easily convert their syllabi to lists on Open Library </strong>using a Bulk Search & List creator feature.</li> <li><strong>Moving to a smarter, simpler omni-search experience </strong>that doesn’t require patrons to switch modes in order to get the search results they want.</li> <li><strong>Importing missing metadata and improving incomplete records</strong> by giving more librarians better tools for adding importers and identifying records with missing fields.</li> <li><strong>Improving the performance and speed of the service</strong> so it works better for more patrons in more areas.</li> </ol> <h2 class="wp-block-heading">About the Process</h2> <p>The Open Library team was fortunate to benefit from the guidance and leadership of Abbey Ripstra, a Human-Centered Design Researcher who formerly led Design Research efforts at the Wikimedia organization. This research effort wouldn’t have been achievable without her help and we’re grateful.</p> <p>In preparation for our research, Abbey helped us outline a design process using an online collaboration and presentation tool called <a href="http://mural.co">Mural</a>.</p> <p><img decoding="async" loading="lazy" width="624" height="336" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXcLqdq1r_5van1f7BmlJ-rbzeC8bAYHPQfEvgyo4nihC5iNhyawiXPjMKZ37ugKHqYZugHwNGTp4VhDk-T2HWTh3ZUZ4TxVquuN6zs6fnSd6OAjkIcVpuI5oSBaRDwc7Z2hxy-ZVb6ub8YCdHE9Q3lnhT9l?key=TzrR-z9FrvGgZcD2E-Kpsw"></p> <p>During the planning process, we clarified five questions:</p> <ol> <li>What are the objectives of our research?</li> <li>How will we reach and identify the right people to speak with?</li> <li>What questions will we ask interview participants?</li> <li>How will we collate results across participants and synthesize useful output?</li> <li>How can we make participants feel comfortable and appreciated?</li> </ol> <p>To answer these questions, we:</p> <ul> <li>Developed a <a href="https://forms.gle/noDQykZLxe6AUcDj7">Screener Survey</a> survey which we rendered to patrons who were logged in to OpenLibrary.org. In total, 466 patrons from all over the world completed the survey, from which we identified 9 promising candidates to interview. Candidates were selected in such a way as to maximize the diversity of academic topics, coverage of geographies, and roles within academia. <a href="https://web.archive.org/web/20230911030846/https://openlibrary.org/"><img decoding="async" loading="lazy" width="624" height="47" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXdEqwYcsIBKTq5MJH-rGbKgl70vaKxvI-cHgJ6HbARXhwramvF64nGpGQ6ZiDzforMwLbX8gqjWf--6Zh_FNWQLDgzOolRthbG9Deu8ysoMTvNX_OPMRv86IAYOQDgroLAk7s7g_xfS-J6LvBi7cIhBCPJG?key=TzrR-z9FrvGgZcD2E-Kpsw"></a></li> <li>We followed up with each candidate over email to confirm their interest in participating, suggesting meeting times, and then sent amenable participants our <a href="https://docs.google.com/document/d/1l-oy0xd3j1oHTcRjAtI-9u4MOhTxo4YEsCmXbdY-BOI/edit">Welcome Letter</a> and details of our <a href="https://docs.google.com/document/u/1/d/1lp3dpYUC7OcWXrW8EVatwZ5t3NB4wSKc117aytZ9kvs/edit">Consent Process</a>.</li> <li>We coordinated interview times, delegated interview and note taking responsibilities, and kept track of the state of each candidate in the process using an <strong>Operations Tracker</strong> we built using Google Sheets:<img decoding="async" loading="lazy" width="624" height="292" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXeKZeW-ynCiVIM-elOF5HYItPEKH6DB03sEPn3WyG8OuS9hlgBCuZvAiJ6-_k7BofE8iBAKR1U2naKErVLdrtZ6bhIx14ojFtHzXUnFgWOAcqUDFoYcxvPxmVm0D-cP3Q0sFNkNX3efe9989rsBJ_fURwka?key=TzrR-z9FrvGgZcD2E-Kpsw"></li> <li>During each interview, the elected interviewer followed our <a href="https://docs.google.com/document/d/1cs1Twj0BgaCIJx5--hh4f5K_-bIiYpAx3FxfNiAIh1s/edit?usp=sharing">Interviewer’s Guide</a> while the note taker took notes. At the end of each interview, we tidied up our notes and debriefed by adding the most salient notes to a shared mural board.<img decoding="async" loading="lazy" width="624" height="144" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXcKb0RT13jgq5S3wShdiTiFYmvH3soGCghcM-1Q-jvrHwvaZ1GSv6CYjAkbZzWgsRCt5j6Th1yzQuOjcBjdv8-jh33WbczOb6MtFBpK4RxJwHbLlgpXEvP2Hw3IbmP92RYE-EqXaZUEcx0-qediQsipfXzm?key=TzrR-z9FrvGgZcD2E-Kpsw"></li> <li>When the interviewing stage had concluded, we sent thank you notes and small thank you gifts to participants. Our design team then convened to cluster insights across interviews and surface noteworthy learnings.</li> </ul> </div> <footer class="entry-meta"> Posted in <a href="https://blog.openlibrary.org/category/interfacedesign/" rel="category tag">Interface/Design</a>, <a href="https://blog.openlibrary.org/category/research/" rel="category tag">Research</a> | <span class="comments-link"><span></span></span> </footer> </article> <article id="post-2270" class="post-2270 post type-post status-publish format-standard hentry category-accessibility category-interfacedesign tag-redesign"> <header class="entry-header"> <h1 class="entry-title"> <a href="https://blog.openlibrary.org/2023/06/04/update-open-library-book-page-redesign/" rel="bookmark">Update: Open Library Book Page Redesign</a> </h1> <div class="entry-byline"> Posted on <a href="https://blog.openlibrary.org/2023/06/04/update-open-library-book-page-redesign/" title="5:05 pm" rel="bookmark"><time class="entry-date" datetime="2023-06-04T17:05:35+00:00">June 4, 2023</time></a><span class="by-author"> by <span class="author vcard"><a class="url fn n" href="https://blog.openlibrary.org/author/nicknorman/" title="View all posts by nicknorman" rel="author">nicknorman</a></span></span> </div> </header> <div class="entry-content"> <figure class="wp-block-image size-large is-style-default"><img decoding="async" loading="lazy" width="500" height="287" src="https://blog.openlibrary.org/files/2023/06/image-3-500x287.png" alt="" class="wp-image-2278" srcset="https://blog.openlibrary.org/files/2023/06/image-3-500x287.png 500w, https://blog.openlibrary.org/files/2023/06/image-3-300x172.png 300w, https://blog.openlibrary.org/files/2023/06/image-3-768x440.png 768w, https://blog.openlibrary.org/files/2023/06/image-3-624x358.png 624w, https://blog.openlibrary.org/files/2023/06/image-3.png 980w" sizes="(max-width: 500px) 100vw, 500px" /></figure> <p>Last year, as part of our inaugural ‘<a href="https://blog.openlibrary.org/2022/09/29/a-summer-of-design/">Internet Archive Summer of Design fellowship,</a>‘ we conducted design research on making our Books Page easier for patrons to navigate on both desktop and mobile devices. We are excited to announce that a significant number of these improvements have been implemented this past month.</p> <p>We extend our heartfelt appreciation to Hayoon Choi, Jim Champ, Katherine McGonigle, Jayden Teoh, and all the dedicated individuals involved in bringing these changes to life. </p> <h3 class="wp-block-heading"><strong>Key design updates we made to the our Books Page:</strong></h3> <ol> <li><strong>Navigation Menu. </strong>The Books Page <strong>navigation menu</strong> has been designed to be more visually clear and relocated to the top of the page, directly beneath the main menu for better discovery. As you scroll, the fixed sub navigation menu dynamically highlights the corresponding section option based on the scroll position within the website.</li> <li><strong>Buttons. </strong>Because we had so many buttons competing for attention, the “Preview” button has been replaced with a more subtle link below the book cover. The prominent green “Want to Read” button has also been updated to a more neutral gray color. Finally, on mobile, the <strong>share button</strong> has been moved up from below the fold, next to the title.</li> <li><strong>Mobile. </strong>The Mobile Books Page now features the book title and author first, then a prominent book cover, and finally available read options, all <a href="https://en.wikipedia.org/wiki/Above_the_fold">above the fold</a>.</li> </ol> <h3 class="wp-block-heading"><strong>Desktop</strong></h3> <div class="wp-block-columns is-layout-flex wp-container-3"> <div class="wp-block-column is-layout-flow" style="flex-basis:50%"> <figure class="wp-block-image size-large is-style-default"><img decoding="async" loading="lazy" width="500" height="285" src="https://blog.openlibrary.org/files/2023/06/image-4-500x285.png" alt="" class="wp-image-2280" srcset="https://blog.openlibrary.org/files/2023/06/image-4-500x285.png 500w, https://blog.openlibrary.org/files/2023/06/image-4-300x171.png 300w, https://blog.openlibrary.org/files/2023/06/image-4-768x437.png 768w, https://blog.openlibrary.org/files/2023/06/image-4-624x355.png 624w, https://blog.openlibrary.org/files/2023/06/image-4.png 952w" sizes="(max-width: 500px) 100vw, 500px" /></figure> <p>Before</p> </div> <div class="wp-block-column is-layout-flow" style="flex-basis:50%"> <figure class="wp-block-image size-large is-style-default"><img decoding="async" loading="lazy" width="500" height="281" src="https://blog.openlibrary.org/files/2023/06/image-5-500x281.png" alt="" class="wp-image-2281" srcset="https://blog.openlibrary.org/files/2023/06/image-5-500x281.png 500w, https://blog.openlibrary.org/files/2023/06/image-5-300x169.png 300w, https://blog.openlibrary.org/files/2023/06/image-5-768x432.png 768w, https://blog.openlibrary.org/files/2023/06/image-5-624x351.png 624w, https://blog.openlibrary.org/files/2023/06/image-5.png 1024w" sizes="(max-width: 500px) 100vw, 500px" /></figure> <p>After</p> </div> </div> <h3 class="wp-block-heading"><strong>Mobile</strong></h3> <div class="wp-block-columns is-layout-flex wp-container-6"> <div class="wp-block-column is-layout-flow"> <figure class="wp-block-image size-full is-resized is-style-default"><img decoding="async" loading="lazy" src="https://blog.openlibrary.org/files/2023/06/image-2.png" alt="" class="wp-image-2273" width="190" height="397" srcset="https://blog.openlibrary.org/files/2023/06/image-2.png 408w, https://blog.openlibrary.org/files/2023/06/image-2-144x300.png 144w" sizes="(max-width: 190px) 100vw, 190px" /></figure> <p>Before</p> </div> <div class="wp-block-column is-layout-flow"> <figure class="wp-block-image size-full is-resized is-style-default"><img decoding="async" loading="lazy" src="https://blog.openlibrary.org/files/2023/06/image.png" alt="" class="wp-image-2271" width="225" height="397" srcset="https://blog.openlibrary.org/files/2023/06/image.png 410w, https://blog.openlibrary.org/files/2023/06/image-170x300.png 170w" sizes="(max-width: 225px) 100vw, 225px" /></figure> <p>After</p> </div> </div> <h3 class="wp-block-heading"><strong>Feedback Welcome</strong></h3> <p>In pursuit of improving accessibility for all patrons, we empathize that website changes may also be challenging for our readers. We welcome and appreciate your feedback so we can further improve the usability of our services. Please feel free to share your thoughts or questions in the comments section and <a href="https://twitter.com/openlibrary/status/1661440557065928730">connect with us on Twitter</a>.</p> </div> <footer class="entry-meta"> Posted in <a href="https://blog.openlibrary.org/category/accessibility/" rel="category tag">accessibility</a>, <a href="https://blog.openlibrary.org/category/interfacedesign/" rel="category tag">Interface/Design</a> | Tagged <a href="https://blog.openlibrary.org/tag/redesign/" rel="tag">redesign</a> | <span class="comments-link"><span></span></span> </footer> </article> <article id="post-2188" class="post-2188 post type-post status-publish format-standard has-post-thumbnail hentry category-fellowships category-interfacedesign category-mobile category-new-features"> <header class="entry-header"> <img width="624" height="389" src="https://blog.openlibrary.org/files/2022/12/openlibrary.org_people_mekBot_books-1.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://blog.openlibrary.org/files/2022/12/openlibrary.org_people_mekBot_books-1.png 1106w, https://blog.openlibrary.org/files/2022/12/openlibrary.org_people_mekBot_books-1-300x187.png 300w, https://blog.openlibrary.org/files/2022/12/openlibrary.org_people_mekBot_books-1-500x311.png 500w, https://blog.openlibrary.org/files/2022/12/openlibrary.org_people_mekBot_books-1-768x478.png 768w" sizes="(max-width: 624px) 100vw, 624px" /> <h1 class="entry-title"> <a href="https://blog.openlibrary.org/2022/12/27/a-brand-new-my-books-experience/" rel="bookmark">A Brand New My Books Experience</a> </h1> <div class="entry-byline"> Posted on <a href="https://blog.openlibrary.org/2022/12/27/a-brand-new-my-books-experience/" title="10:04 pm" rel="bookmark"><time class="entry-date" datetime="2022-12-27T22:04:15+00:00">December 27, 2022</time></a><span class="by-author"> by <span class="author vcard"><a class="url fn n" href="https://blog.openlibrary.org/author/mekarpeles/" title="View all posts by mek" rel="author">mek</a></span></span> </div> </header> <div class="entry-content"> <h2 class="wp-block-heading" id="have-you-noticed-our-new-my-books-page-experience-please-let-us-know-what-you-think"><em>Have you noticed our new <a href="https://openlibrary.org/account/books">My Books</a> page experience? </em><br><strong><a href="https://forms.gle/EN6R6W9vuQLJar289">Please let us know what you think</a>!</strong></h2> <p><strong>Read on</strong> to learn more about what’s changed.</p> <figure class="wp-block-image size-full is-resized is-style-default"><img decoding="async" loading="lazy" src="https://blog.openlibrary.org/files/2022/12/openlibrary.org_people_mekBot_books-1.png" alt="" class="wp-image-2192" width="553" height="345" srcset="https://blog.openlibrary.org/files/2022/12/openlibrary.org_people_mekBot_books-1.png 1106w, https://blog.openlibrary.org/files/2022/12/openlibrary.org_people_mekBot_books-1-300x187.png 300w, https://blog.openlibrary.org/files/2022/12/openlibrary.org_people_mekBot_books-1-500x311.png 500w, https://blog.openlibrary.org/files/2022/12/openlibrary.org_people_mekBot_books-1-768x478.png 768w" sizes="(max-width: 553px) 100vw, 553px" /></figure> <p><strong>Forward </strong>by Mek</p> <p>This year we’ve had the great fortune of collaborating with <a href="https://www.linkedin.com/in/samuel-grunebaum-60a591198/">Samuel Grunebaum</a>, 2022 Open Library Design & Engineering Fellow. Samuel is wonderfully positioned at the cross-section of software engineering, design, and education, making him capable of rapidly prototyping new designs, ensuring these designs are clear and instructional, and bringing these designs to life through engineering. It’s rare I find someone, like Sam, who can so easily and effectively switch contexts between design and engineering while also keeping bigger product pictures in mind. This set of skills has not only made Sam essential to early prototyping stages, we have also benefited greatly from Sam’s ability to uniquely recognize and raise challenges about component accessibility and mobile/desktop compatibility we likely would have otherwise missed. In addition to being a 2022 Open Library Fellow, Sam co-directs a software & design consultancy that is <a href="mailto:samzgrunebaum@gmail.com">accepting new freelance projects</a>, tutors college, high school, and intro-level computer science and is <a href="https://www.inspiricapros.com/tutor/samuel-grunebaum/">accepting new students</a>, and is <a href="mailto:samzgrunebaum@gmail.com">open to the right mission-aligned, full-time role</a>.</p> <p><strong>Personal Intro</strong></p> <figure class="wp-block-image is-resized is-style-rounded"><img decoding="async" loading="lazy" src="https://www.inspiricapros.com/wp-content/uploads/2021/11/Samuel-Grunebaum.jpg" alt="" width="300" height="300" /></figure> <p>Hello, I’m Samuel Grunebaum and I’ve been working with Open Library as a Design & Engineering Fellow, contributing designs and code to the My Books redesign process. I’m currently transitioning into a career in software design and front end engineering after working as a Computer Science educator at the Horace Mann School in The Bronx, New York and as a freelance designer, developer, and teacher in all things software.</p> <p><strong>Problem</strong></p> <p>Open Library patrons and stakeholders alike identified the My Books page as a major pain point in the site’s navigation and information hierarchy. At the beginning of the project the desktop interface loaded by clicking the ‘My Books’ button in the header looked like this:</p> <figure class="wp-block-image is-style-default"><img decoding="async" src="https://lh4.googleusercontent.com/-kJOGNp7CJtV5s-fU-Pxumc9be7boEImC0oQNfb4iIqKXJ-AxgXCgdUZKMZnbAR2CLqKOV0Ge7AKI_dB4HkEOAiXTDjYy8OVKFxhwO2u4LmeYJ_yPVE6SpXvU45HiWGhIRIrySH7IVYYtGBnYFhqYg-D_6VOB_vuaGG6xPgaN-1zLEBVV7PbUfij3pjTbQ" alt="" /></figure> <p>Perhaps the most confusing issue with this flow, is that the ‘My Books’ button brought patrons to their account’s Loans page. Another problem that was continually observed with the existing design is the mobile navigation on this page:</p> <figure class="wp-block-image is-resized is-style-default"><img decoding="async" loading="lazy" src="https://lh3.googleusercontent.com/kdgmm99Eo3QmSnf1z4wB4kk56I8r3wRLWZPHYyg2poGaCwe1bxmgJ2clocPdRCarxxlMIyTSODc0vEuH26_VfQyqwsZOVX8vCj99A5ecBMOhMueC2VY1UaB5_-mHwL0KXRViGoMDTYD7Udcakn8WBWIGFXtI_JS5DssuBJLdYHkq_fY6i8oDIRlbsH2bZw" alt="" width="357" height="851" /></figure> <p>The mobile design took the desktop sidebar menu and added it directly below the site header, creating three layers of navigation and a very confusing split in the My Books page interface. </p> <p>The central problem of the existing design for My Books was that there was no true My Books page, but rather a My Books button driving to the Loans page. This meant that there was no single place for patrons to find their books, whether books they had on loan or books they had added to one of their reading logs. </p> <p>The previous menu design also had the unfortunate side effect of burying the Reading Log options, as well as Reading Stats, Notes, Reviews, and Import/Export options deep below the fold in an already confusing mobile menu. </p> <p>Digging deeper into this problem and hearing from Open Library stakeholders, patrons, librarians, and the community at large clarified the direction we would take: working towards a mobile-first consolidated My Books interface that gives patrons an understandable and discoverable way to access the books associated with their account, as well as the other account specific sections including Stats, Notes/Reviews, and Lists.</p> <p><strong>Interim Fix</strong></p> <p>Before beginning the design process in earnest, we decided an interim fix would be helpful to mitigate the confusing nature of the mobile My Books navigation. The solution we decided on was an extremely quick fix, able to be implemented in just a few minutes. </p> <p>The adjustments made used a darker color to differentiate the menu from the rest of the header and the page content, as well as making the menu section smaller with an adjustable height click-and-drag feature:</p> <figure class="wp-block-image is-resized is-style-default"><img decoding="async" loading="lazy" src="https://lh4.googleusercontent.com/qio_Qdy5QDn9cVvujtInrppTGuUS2iYyDbYWkdDhAMy89eYjzCHqIGqzK6TWXpe_WJTE3VhdxloIyBRa9xOcO2jmZyVapqFN1Bgx3nxE585TjCNzjQPPl6ZYv0Iv2oPiQinGICcLgPSVmnh8H6WXwZTb6u3FXo8HFy-xjwXKl8LUo8NDViIyDDYpeHlQew" alt="" width="351" height="603" /></figure> <p><strong>Approach</strong></p> <p>After meeting with members of the Open Library team to discuss the main issues, we agreed that the central areas to focus on were:</p> <ol><li>Creating an interface unique to My Books that would consolidate a patron’s loans and logs into one page accessed by the My Books button</li><li>Improving the usability of the My Books page on mobile by moving towards a responsive, mobile-first design for the My Books page and redesigning the menu on mobile</li></ol> <p>The next step was to iterate multiple potential interfaces for the new My Books page on both mobile and desktop. With the help of the Open Library team and other design fellows, we came up with the following options for mobile and desktop My Books interfaces:</p> <p>In conjunction with <a href="https://blog.openlibrary.org/2022/11/22/dana-main-navigation-improvements/">Dana</a>, another 2022 Design Fellow, we continued to iterate on the designs based on feedback received from Open Library stakeholders, librarians, and patrons. </p> <p>We settled on the <a href="https://www.figma.com/proto/KE0BoBAlMPzPHbhvVblKS8/My-Books-Page-Prototype-Flows?node-id=299%3A2&scaling=scale-down&page-id=0%3A1&starting-point-node-id=299%3A2&show-proto-sidebar=1">following approach for desktop</a>, which includes new carousel sections for displaying books and creates space for a Reading Stats data visualization widget:</p> <figure class="wp-block-image size-full is-style-default"><img decoding="async" loading="lazy" width="1448" height="703" src="https://blog.openlibrary.org/files/2022/12/www.figma_.com_proto_KE0BoBAlMPzPHbhvVblKS8_My-Books-Page-Prototype-Flows_node-id2993A2scalingscale-downpage-id03A1starting-point-node-id2993A2show-proto-sidebar1.png" alt="" class="wp-image-2204" srcset="https://blog.openlibrary.org/files/2022/12/www.figma_.com_proto_KE0BoBAlMPzPHbhvVblKS8_My-Books-Page-Prototype-Flows_node-id2993A2scalingscale-downpage-id03A1starting-point-node-id2993A2show-proto-sidebar1.png 1448w, https://blog.openlibrary.org/files/2022/12/www.figma_.com_proto_KE0BoBAlMPzPHbhvVblKS8_My-Books-Page-Prototype-Flows_node-id2993A2scalingscale-downpage-id03A1starting-point-node-id2993A2show-proto-sidebar1-300x146.png 300w, https://blog.openlibrary.org/files/2022/12/www.figma_.com_proto_KE0BoBAlMPzPHbhvVblKS8_My-Books-Page-Prototype-Flows_node-id2993A2scalingscale-downpage-id03A1starting-point-node-id2993A2show-proto-sidebar1-500x243.png 500w, https://blog.openlibrary.org/files/2022/12/www.figma_.com_proto_KE0BoBAlMPzPHbhvVblKS8_My-Books-Page-Prototype-Flows_node-id2993A2scalingscale-downpage-id03A1starting-point-node-id2993A2show-proto-sidebar1-768x373.png 768w" sizes="(max-width: 1448px) 100vw, 1448px" /></figure> <figure class="wp-block-image is-style-default"><img decoding="async" src="https://lh4.googleusercontent.com/rpVUanRvBfz-xmtZ2weQs60dIQvXNN3bHIHVWwERFldleox6VbY591V_8YzW84spzbhBbCT15-r-8_tCenFj5km1J-FL2yxfBpXTaXW1ZwoaYiE6E-qQ04NLQIbVcACnt7N7Yxd2P9cqZ-8daGmdg_LCpUgRopEy8UwH2R_dNec13uTwWY3eKNZzOcZu3g" alt="" /></figure> <p>Alongside the new desktop design, the mobile-first redesign that we settled on makes use of the existing sidebar menu to guide the structure of the new mobile interface while making use of an information hierarchy already familiar to patrons. </p> <p>This mobile design not only improves usability and accessibility to the key components of My Books, but also decreases engineering overhead by allowing for a responsive design using the original sidebar menu:</p> <figure class="wp-block-image is-style-default"><img decoding="async" src="https://lh6.googleusercontent.com/Ph-Sde2gGW3cAlY8k2DLgrnfYGUEGy3XQvM-0qGqt0keq96vPVM_cMK6bC_9SOoen3Z4SAArRjr-O34UhBrGhEWYZT8Pzdv8gZOSsFAiR01q-D8rF7uoXO9ZH1Lfd5DB0iEoRjQ2e0qkNeyoCWPhfMJem7H7k9F3hzT1nYSfGswUsP8oKUo5m3PmFYnJhg" alt="" /></figure> <p>You can <a href="https://www.figma.com/proto/KE0BoBAlMPzPHbhvVblKS8/My-Books-Page-Prototype-Flows?node-id=332%3A80&scaling=contain&page-id=277%3A2&starting-point-node-id=332%3A80&show-proto-sidebar=1">try the new mobile design prototype<strong> here</strong></a>.</p> <figure class="wp-block-image size-full is-style-default"><a href="https://www.figma.com/proto/KE0BoBAlMPzPHbhvVblKS8/My-Books-Page-Prototype-Flows?node-id=332%3A80&scaling=contain&page-id=277%3A2&starting-point-node-id=332%3A80&show-proto-sidebar=1" target="_blank" rel="noopener"><img decoding="async" loading="lazy" width="829" height="365" src="https://blog.openlibrary.org/files/2022/12/blog.openlibrary.org_wp-admin_post.php_post2188actionedit.png" alt="" class="wp-image-2196" srcset="https://blog.openlibrary.org/files/2022/12/blog.openlibrary.org_wp-admin_post.php_post2188actionedit.png 829w, https://blog.openlibrary.org/files/2022/12/blog.openlibrary.org_wp-admin_post.php_post2188actionedit-300x132.png 300w, https://blog.openlibrary.org/files/2022/12/blog.openlibrary.org_wp-admin_post.php_post2188actionedit-500x220.png 500w, https://blog.openlibrary.org/files/2022/12/blog.openlibrary.org_wp-admin_post.php_post2188actionedit-768x338.png 768w" sizes="(max-width: 829px) 100vw, 829px" /></a></figure> <p><strong>First Phase Release: </strong>Desktop My Books Interface</p> <p>The first and most immediate step to improving the overall My Books experience was to create a distinct page on the site for an account’s books. The new My Books page now exists at <strong>/account/books</strong> for any patron of Open Library. The new page is almost a carbon copy of the original My Books page, but with its own content that is separate from the Loans page, which was originally what came up when clicking My Books in the header. Below is an image of the current desktop release of My Books:</p> <figure class="wp-block-image is-style-default"><img decoding="async" src="https://lh5.googleusercontent.com/5igHoMQe7be9uE49wh9PCZAnLr2kOEMZ6QM-v6oOX2MSr_CT9V_XkrJGz8YT2oTylRBLMm_tf2BFbdCr_N4uq8KcrjcRbGyBQR6_ZTOkngaZGqxZpJccg-H4Pe9e-fgVnDFCEWs_f4hnvOAZFeXp7hBnazwSCrMHoUZO5cfqMJeJ5iGaadYsW2uBVBz8zw" alt="" /></figure> <p>After adding the new page at /account/books, I created a new file for the My Books content and added custom carousels to the page for displaying a patron’s loans and reading logs. Beyond improving the flow of clicking the My Books button, this initial redesign aims to increase user engagement with reading logs and will also populate the My Books page with images of book covers from a patron’s own selections, creating a more welcoming and dynamic account page driving from the My Books header button.</p> <p>Another change in this release is the addition of Reading Stats and Import/Export Options buttons at the top of the page, as these are currently buried at the bottom of the My Books sidebar. In the next phase of the design, there will be a prominent link to Stats at the top of the My Books page with the addition of the data visualization widget.</p> <p>The creation of this page not only provides an elegant interim solution to the issue of confusing My Books navigation by adding a novel page to the Open Library but also lays the groundwork for a more comprehensive redesign including mobile-first improvements, multiple new custom components, and more prominently featured a patron’s Reading Stats. </p> <p><strong>Next Steps: </strong>Mobile Release and Stats</p> <p>The next steps of the My Books redesign process will begin with improving the mobile usability by overhauling the My Books interface. The engineering approach I will take is to hide the My Books index content on mobile, instead only displaying the sidebar menu as the whole My Books interface. The sidebar will be responsively designed to display custom carousels on mobile, as rendered in <a href="https://www.figma.com/proto/KE0BoBAlMPzPHbhvVblKS8/My-Books-Page-Prototype-Flows?node-id=332%3A80&scaling=contain&page-id=277%3A2&starting-point-node-id=332%3A80&show-proto-sidebar=1">this interactive Figma prototype</a>.</p> <p>The next and final step after completing the implementation of the mobile redesign will be to finish the redesigned desktop My Books interface by building the Reading Stats data visualization widget. <a href="https://www.figma.com/proto/KE0BoBAlMPzPHbhvVblKS8/My-Books-Page-Prototype-Flows?node-id=299%3A2&scaling=scale-down&page-id=0%3A1&starting-point-node-id=299%3A2&show-proto-sidebar=1">Here’s an interactive Figma prototype of this new design</a>.</p> <p>I am so excited to continue working on this redesign process, which has already been a wonderful introduction to the Open Library design system and code base. Moreover, I’m excited to contribute to what is hopefully a welcome improvement to the Open Library ecosystem, increasing both access and usability to some really wonderful account features. My hope is that patrons will be able to more easily save and read books on Open Library once they have one clearly defined place to look at all of their books, whether checked out or saved in reading logs, as well as their reading stats and account information.</p> <p><strong>Reflections</strong></p> <p>Working on this project with the Open Library community has been an amazing experience in UX design, full stack web development, and community collaboration across state and national lines. I am grateful to be able to contribute to a project that is so meaningful to so many people through its unique ability to disseminate knowledge freely to anyone with Internet access. It was also a fun way to expand my web design and development experience. </p> <p>I am immensely grateful to the Open Library community as a whole for being so welcoming to me when I joined a few months ago and for continuously supporting my design process through helpful critiques and design input, as well as the general kindness shown in the weekly community meetings. I am especially grateful to Mek, my counter-point on Open Library staff, who has taught me so much about the Internet Archive stack and the Open Library design language, and my main collaborator Dana, who has expertly taken the reins on the Desktop interface designs and navigation for the overall site. I also want to extend my thanks to Drini, Lisa, Jim, Abby, and Hayoon who have all had invaluable contributions to the My Books design and implementation process, as well as the ongoing development of a comprehensive Open Library design system. I’m so excited to continue working with this community and for the completion of the My Books redesign. </p> </div> <footer class="entry-meta"> Posted in <a href="https://blog.openlibrary.org/category/fellowships/" rel="category tag">Fellowships</a>, <a href="https://blog.openlibrary.org/category/interfacedesign/" rel="category tag">Interface/Design</a>, <a href="https://blog.openlibrary.org/category/mobile/" rel="category tag">Mobile</a>, <a href="https://blog.openlibrary.org/category/new-features/" rel="category tag">New Features</a> | <span class="comments-link"><a href="https://blog.openlibrary.org/2022/12/27/a-brand-new-my-books-experience/#comments">10 Replies</a></span> </footer> </article> <article id="post-2157" class="post-2157 post type-post status-publish format-standard has-post-thumbnail hentry category-fellowships category-interfacedesign category-new-features category-uncategorized"> <header class="entry-header"> <img width="624" height="289" src="https://blog.openlibrary.org/files/2022/11/Screen-Shot-2022-11-22-at-5.27.47-PM.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://blog.openlibrary.org/files/2022/11/Screen-Shot-2022-11-22-at-5.27.47-PM.png 1578w, https://blog.openlibrary.org/files/2022/11/Screen-Shot-2022-11-22-at-5.27.47-PM-300x139.png 300w, https://blog.openlibrary.org/files/2022/11/Screen-Shot-2022-11-22-at-5.27.47-PM-500x232.png 500w, https://blog.openlibrary.org/files/2022/11/Screen-Shot-2022-11-22-at-5.27.47-PM-768x356.png 768w, https://blog.openlibrary.org/files/2022/11/Screen-Shot-2022-11-22-at-5.27.47-PM-1536x713.png 1536w" sizes="(max-width: 624px) 100vw, 624px" /> <h1 class="entry-title"> <a href="https://blog.openlibrary.org/2022/11/23/scott-barnes-reading-log-search/" rel="bookmark">Search for Books in your Reading Log</a> </h1> <div class="entry-byline"> Posted on <a href="https://blog.openlibrary.org/2022/11/23/scott-barnes-reading-log-search/" title="2:48 am" rel="bookmark"><time class="entry-date" datetime="2022-11-23T02:48:07+00:00">November 23, 2022</time></a><span class="by-author"> by <span class="author vcard"><a class="url fn n" href="https://blog.openlibrary.org/author/mekarpeles/" title="View all posts by mek" rel="author">mek</a></span></span> </div> </header> <div class="entry-content"> <p>by <strong><a href="https://github.com/scottbarnes/">Scott Barnes</a></strong>, 2022 Open Library Fellow</p> <p>As of last week’s deploy, it’s now possible to <strong>search</strong> the Open Library for the books in your reading log by navigating to the <a href="https://openlibrary.org/account/books">My Books</a> page, selecting the <a href="https://openlibrary.org/account/books/currently-reading">Currently Reading</a>, <a href="https://openlibrary.org/account/books/want-to-read">Want to Read</a>, or <a href="https://openlibrary.org/account/books/already-read">Already Read</a> bookshelf, and typing in a search query.</p> <p>Keep reading to learn tips and tricks on how to effectively search for books within your reading log.</p> <figure class="wp-block-image size-full is-resized is-style-default"><img decoding="async" loading="lazy" src="https://blog.openlibrary.org/files/2022/11/Screen-Shot-2022-11-22-at-5.27.47-PM.png" alt="" class="wp-image-2158" width="789" height="366" srcset="https://blog.openlibrary.org/files/2022/11/Screen-Shot-2022-11-22-at-5.27.47-PM.png 1578w, https://blog.openlibrary.org/files/2022/11/Screen-Shot-2022-11-22-at-5.27.47-PM-300x139.png 300w, https://blog.openlibrary.org/files/2022/11/Screen-Shot-2022-11-22-at-5.27.47-PM-500x232.png 500w, https://blog.openlibrary.org/files/2022/11/Screen-Shot-2022-11-22-at-5.27.47-PM-768x356.png 768w, https://blog.openlibrary.org/files/2022/11/Screen-Shot-2022-11-22-at-5.27.47-PM-1536x713.png 1536w" sizes="(max-width: 789px) 100vw, 789px" /></figure> <p><strong>A Forward</strong> by Mek</p> <p>This year the Open Library has been exceedingly lucky to collaborate with <strong><a href="https://github.com/scottbarnes/">Scott Barnes</a></strong>, a lawyer who has reinvented himself as a very capable software engineer. We had the pleasure of meeting Scott earlier this year while he was scouring the Open Library for old rock climbing guidebooks. Ever since joining one of our community calls, he’s been surmounting challenging technical hurdles as one of our most active 2022 Open Library Fellows. As law professor Lawrence Lessig famously penned in his 1999 book <a href="https://openlibrary.org/works/OL6037025W/Code">Code</a>: “Code is law”. I guess that’s why we shouldn’t be too surprised how quickly Scott became familiar with the Open Library codebase, at the precision of his work and attention to detail, and his persistence in getting code just right without getting slowed down. We hope you’ll enjoy Scott’s contributions as much as we do and learn at least one new way of using the reading log search to improve your book finding experience.</p> <p><strong>A Forward</strong> by Drini<br>I’m exceedingly pleased to introduce Scott Barnes to the Open Library Blog. I have had the honour of mentoring Scott throughout some of the projects on his fellowship, and have been floored by his love, passion, and skill in all things programming. Whether it’s working on user facing features (such as this one), improving code architecture, investigating performance issues, setting up infrastructure, or keeping up-to-date with new programming techniques by diving into a new programming book or topic, Scott is always excited to dive in, learn, and make an impact. And his code never fails to meet requirements while being well-architected and robust. I am so excited to see what he does next with his programming super powers! Because as far as I can tell, there’s no stopping him. Now without further ado, I’ll hand it off to Scott to talk about:</p> <h2 class="wp-block-heading" id="reading-log-search">Reading Log Search</h2> <p>👋 Hi, my name is <a href="https://github.com/scottbarnes/">Scott Barnes</a>. This year as a 2022 Open Library Fellow I collaborated with <a href="https://github.com/cdrini">Drini Cami</a> to develop reading log search. In this post, I’ll show different ways of effectively using the new reading log search feature, as well as technical insight into how it was engineered behind the scenes.</p> <figure class="wp-block-image is-resized is-style-rounded"><img decoding="async" loading="lazy" src="https://ca.slack-edge.com/T03ST9K7K-U03MNR6T7FH-4db8f31a423d-512" alt="Profile photo for scottreidbarnes" width="256" height="256" /></figure> <h3 class="wp-block-heading" id="3-ways-of-searching-your-reading-log-using-a-web-browser"><strong>3 Ways of Searching your </strong>Reading Log<strong> using a Web Browser</strong></h3> <h4 class="wp-block-heading" id="natural-language-search"><strong>Natural language search</strong></h4> <p>The most common way to use search your reading log is by entering a natural, free-form search query, just like you might using your favorite search engine. From the <a href="https://openlibrary.org/account/books/currently-reading">Currently Reading</a>, <a href="https://openlibrary.org/account/books/want-to-read">Want to Read</a>, or <a href="https://openlibrary.org/account/books/already-read">Already Read</a> page, you can search for your books on that reading log shelf by submitting text describing the book’s title, author name, ISBN, or publisher. An example could be “Lord of the Rings by J.R.R Tolkien”.</p> <h4 class="wp-block-heading" id="keyword-search"><strong>Keyword search</strong></h4> <p>If you want greater control, you can also harness the power of <a href="https://solr.apache.org/">Apache Solr</a>, the underlying technology which powers the Open Library search engine.</p> <p>Let’s say, for example, that you’d like to find books on your reading log by a specific author named “King” but using the<strong> Natural Language</strong> mode instead returns books with “King” in the title. Using keyword search, you could search for <em>author: king</em> to see only books by authors named “King” (while not seeing books with “King” in the title). On the other hand, if you only want to find titles matching “King” and not the author, you could instead search for the keyword <em>title: king</em>. Want to find your horror books? Try <em>subject:Horror</em>.</p> <p>For a list of common keywords, you can see the <a href="//openlibrary.org/search/howto">Open Library Search How-To Guide</a>, or peek at the code behind it: <a href="https://github.com/internetarchive/openlibrary/blob/8aa71c7c545fa082560bfba7b31cc84319650730/openlibrary/plugins/worksearch/code.py#L60">worksearch/code.py</a>.</p> <p>Reading log search, like the main Open Library search, supports boolean operators, specifically <em>AND</em>, <em>OR</em>, and <em>NOT</em>, along with wildcards such as <em>*</em> and <em>?</em> to match multiple characters and a single character respectively. Therefore, to search for all books matching “climb”, “climber’s”, “climbs”, etc., that were published by Sierra Club Books that you want to read, you could visit <a href="https://openlibrary.org/account/books/want-to-read">Want to Read</a> and search for <em>title: climb* AND publisher: sierra club books</em>.</p> <p><em>NOTE</em>: the boolean operators are CaSe sensitive, so <em>AND</em> will work as expected, but <em>and</em> will not. The actual search terms themselves are not CaSe sensitive, however, so “<em>king</em>” and “<em>KiNg</em>” will return the same results.</p> <h4 class="wp-block-heading" id="searching-your-reading-log-via-the-api"><strong>Searching your reading log via the API</strong></h4> <p>For those looking to perform programmatic searches, it’s possible to search via a web API using the following RESTful pattern: <a href="https://openlibrary.org/people/{USERNAME}/books/{SHELF}.json?q={QUERY}">https://openlibrary.org/people/{USERNAME}/books/{SHELF}.json?q={QUERY}</a>. </p> <p>For example, to search for all titles matching “king” on my Want to Read shelf I’d query: <a href="https://openlibrary.org/people/srb36/books/want-to-read.json?q=king">https://openlibrary.org/people/srb36/books/want-to-read.json?q=king</a>. </p> <p>Or if I wanted to search for all titles matching climb* on that same shelf, I’d search for <a href="https://openlibrary.org/people/srb36/books/want-to-read.json?q=title:(climb*)">https://openlibrary.org/people/srb36/books/want-to-read.json?q=title:(climb*)</a></p> <h2 class="wp-block-heading" id="behind-the-scenes"><strong>Behind the scenes</strong></h2> <p>Now for the technical details! Reading log search was added in pull request <a href="https://github.com/internetarchive/openlibrary/pull/7052">#7052</a>. In exploring how reading log search might be accomplished, two key things leapt to our attention:</p> <ol><li>Reading log records are stored in the database, and work and edition data (i.e. “books”) are stored in Solr; and</li><li>To work with the split data, we were probably doing more queries than we needed to, both in the back end itself, and within the templates that make up the pages.</li></ol> <p>The goal then was to add the ability to search the reading log, ideally while reducing the number of queries, or at least not increasing the number.</p> <h3 class="wp-block-heading" id="changing-the-back-end"><strong>Changing the back end</strong></h3> <p>Most of the heavy lifting was done in core/bookshelves.py. The challenge here was addressing the reading log records being in one database, and the edition data being in Solr.</p> <p>The solution was to query the reading log database once, and then use those results to query Solr to get <em>all</em> the information we’d need for the rest of the process. Then we could simply pass the data around in a Python dataclasses, and then ultimately pass the results through to the templates to render for display in patrons’ browsers.</p> <p>For the super curious, this is found in <a href="https://github.com/scottbarnes/openlibrary/blob/0f65bbf97a2bc91d0da835ea8960c1bc966b332d/openlibrary/core/bookshelves.py#L271">get_filtered_reading_log_books()</a></p> <h3 class="wp-block-heading" id="changing-the-templates"><strong>Changing the templates</strong></h3> <p>As mentioned, having the data in two places had led to some excess querying, which manifested itself in the templates where we re-queried Solr to get additional data to properly display books to patrons.</p> <p>However, because we had gathered all of that information at the outset, we just had to change the templates to render the query results we passed to them, as they no longer had to perform any queries.</p> <h2 class="wp-block-heading" id="how-you-can-help"><strong>How you can help</strong></h2> <p>Volunteers not only help make Open Library special, but they help make it even more awesome. Check out <a href="https://openlibrary.org/volunteer">Volunteering @ Open Library</a>.</p> </div> <footer class="entry-meta"> Posted in <a href="https://blog.openlibrary.org/category/fellowships/" rel="category tag">Fellowships</a>, <a href="https://blog.openlibrary.org/category/interfacedesign/" rel="category tag">Interface/Design</a>, <a href="https://blog.openlibrary.org/category/new-features/" rel="category tag">New Features</a>, <a href="https://blog.openlibrary.org/category/uncategorized/" rel="category tag">Uncategorized</a> | <span class="comments-link"><span></span></span> </footer> </article> <article id="post-2146" class="post-2146 post type-post status-publish format-standard has-post-thumbnail hentry category-fellowships category-interfacedesign category-mobile category-uncategorized"> <header class="entry-header"> <img width="624" height="184" src="https://blog.openlibrary.org/files/2022/11/Screen-Shot-2022-11-22-at-2.43.55-PM.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://blog.openlibrary.org/files/2022/11/Screen-Shot-2022-11-22-at-2.43.55-PM.png 2224w, https://blog.openlibrary.org/files/2022/11/Screen-Shot-2022-11-22-at-2.43.55-PM-300x88.png 300w, https://blog.openlibrary.org/files/2022/11/Screen-Shot-2022-11-22-at-2.43.55-PM-500x147.png 500w, https://blog.openlibrary.org/files/2022/11/Screen-Shot-2022-11-22-at-2.43.55-PM-768x227.png 768w, https://blog.openlibrary.org/files/2022/11/Screen-Shot-2022-11-22-at-2.43.55-PM-1536x453.png 1536w, https://blog.openlibrary.org/files/2022/11/Screen-Shot-2022-11-22-at-2.43.55-PM-2048x604.png 2048w" sizes="(max-width: 624px) 100vw, 624px" /> <h1 class="entry-title"> <a href="https://blog.openlibrary.org/2022/11/22/dana-main-navigation-improvements/" rel="bookmark">Improvements to the Main Navigation</a> </h1> <div class="entry-byline"> Posted on <a href="https://blog.openlibrary.org/2022/11/22/dana-main-navigation-improvements/" title="9:01 pm" rel="bookmark"><time class="entry-date" datetime="2022-11-22T21:01:24+00:00">November 22, 2022</time></a><span class="by-author"> by <span class="author vcard"><a class="url fn n" href="https://blog.openlibrary.org/author/mekarpeles/" title="View all posts by mek" rel="author">mek</a></span></span> </div> </header> <div class="entry-content"> <p>Dana, UX/Design Fellow on Open Library</p> <p><strong>Forward</strong> <em>by Mek</em></p> <p>Few aspects of a website have greater impact and receive less recognition than good navigation. If done well, a site’s main navigation is almost invisible: it’s there when patrons need it, out of the way when they don’t, and it zips patrons to the right place without making them overthink. Over the years, we’ve attempted improvements to our navigation but we haven’t had the design bandwidth to conduct user research and verify that our changes solved our patrons problem. It turns out, we still had several opportunities for improvement. That’s why this year we were incredible lucky to have collaborated with Open Library UX Design Fellow Dana Fein-Schaffer, who recently transitioned into design from a previous role as a <a href="https://onlinelibrary.wiley.com/doi/full/10.1002/jts.22770">neuropsychological</a> researcher. Dana’s formal education and experience links a trifecta of complimentary fields — computer science, psychology, and design — and has resulted in unique perspective as we’ve endeavored to redesign several of Open Library’s core experiences: the website’s main navigation and the desktop version of our My Books page.</p> <p>As an Open Library UX Design Fellow, Dana has been in charge of design direction, conducting user interviews, figma mockups, feedback sessions, and <a href="https://archive.org/embed/openlibrary-videos/openlibrary-community-celebration-2022.mp4?start=3270">communicating</a> decisions to stakeholders. In addition to her skill prototyping and notable problem solving capabilities, Dana’s warmth with the community, affinity for collaboration, and enthusiasm for the project has made teaming up with her a gift. While we’d rather the fellowship not end, we endorse her work with great enthusiasm and highly recommend organizations which share our values to view Dana’s <a href="https://www.danafeinschaffer.com">portfolio</a> and engage her for future design opportunities.</p> <h2 class="wp-block-heading" id="the-design-process">The Design Process</h2> <figure class="wp-block-image is-resized is-style-rounded"><img decoding="async" loading="lazy" src="https://static.wixstatic.com/media/054c34_ba1254586fbb4a118638e480f975a86d~mv2.jpg/v1/crop/x_0,y_380,w_3024,h_3024/fill/w_960,h_960,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/IMG_7214_JPG.jpg" alt="IMG_7214.JPG" width="240" height="240" /></figure> <p>Hello, I’m Dana Fein-Schaffer, and I’ve been working as a UX Design Fellow with Open Library over the past several months. I’m currently transitioning into UX Design because after gaining professional experience in both psychology research and software engineering, I’ve realized that UX is the perfect blend of my skills and interests. I’ve been enjoying growing my UX skillset, and working with Open Library has been a perfect opportunity for me to gain some formal experience because I love reading and was hoping to work on a book-related project. Moving forward, I’m particularly excited about working as a UX designer for an organization that focuses on social good, especially in the literary, education, or healthcare spaces! If you have a role that may be a good fit, or if you work in one of those industries and are interested in connecting, please feel free to reach out. You can also learn about me from <a href="https://www.danafeinschaffer.com">my portfolio</a>.</p> <p><strong>Problem</strong></p> <p>At the beginning of my project, the current navigation bar and hamburger menu looked like this: </p> <figure class="wp-block-image is-resized"><img decoding="async" loading="lazy" src="https://lh4.googleusercontent.com/2cly4AAL5qOTp9tuyBEufSTOWXiyLTYwWE6k-2uR2lkeWSxw2bDQ3zdgFRUq9tguMgWCE7valmf5gegKVZ0uzP_dDSy9ZdlhYjHuSpUTlf3yF4hyL6sB_q_MKSPogljTsfHDyD79QdntFCWHE4CMWJ1M4RCO9SG2AZ8ZR0vEzxPatjxq3WB-dJW1Uqo2LA" alt="" width="807" height="71" /></figure> <figure class="wp-block-image is-resized"><img decoding="async" loading="lazy" src="https://lh5.googleusercontent.com/S4F6WInW6u5O6cetuMPJkrfXxUTKQUmklGoa7H-oIvr6J3dwP_VlXEEHIzyCT0ze50NJogjpqSYm7I_81BGkmKfNpHuQuEIVffn02mL-63FF46OSer7p8_nzG9XxJlAUkyGVD2Wyd0z5mhgIocgXsR8c0pb45sxELLzJt5WTV8_PSj60kOxNupwJNAQIbQ" alt="" width="252" height="725" /></figure> <p>I met with members of the Open Library team to identify three key areas of concern: </p> <ol><li>The label “more” was not descriptive, and it was unclear to patrons what this meant</li><li>The hamburger menu was not consistent with the navigation bar items</li><li>The hamburger menu was confusing for patrons, especially new patrons, to navigate</li></ol> <p><strong>Approach</strong></p> <p>Before I began my project, the Open Library team decided to implement an interim solution to the first point above. To address the concern with the “more” label, the navigation menu was changed to instead include “My Books” and “Browse.” The website analytics showed that patrons frequent their Loans page most, so for now, the “My Books” page brings patrons to the Loans page. </p> <figure class="wp-block-image"><img decoding="async" src="https://lh6.googleusercontent.com/dUlCH7IlYIGwXawNXyHUzs6gF5V-bfbsAJ5i4v4J_kSK2rQxONBthyvES-cAK5OzF_BYNrRuLox0E_6VjDAKfZpzSVxi2ag-WrrMV7O-lfc40NsiZWmviBqVcxqsjGwUirgW4cwD1yO6cqtqlNm7z4VIVJwUKidOf1frckerT9RsWaXhleXUlRMNcycbvg" alt="" /></figure> <p>To begin redesigning the main site navigation, I first created a prototype in Figma with some potential solutions that built off of this updated navigation menu:</p> <ol><li>I created a dropdown menu for “My Books” that would allow patrons to select the specific page they would like to go to, rather than automatically going to the Loans page</li></ol> <figure class="wp-block-image"><img decoding="async" src="https://lh4.googleusercontent.com/iBNU1rwEwZZaGYJBFeOyRKQ9q_6u0kq6n04TTa0MtvRtl6ViWBiBmp6E9vjBJ4Y1xfF5pFEs0sugaM8dg-lceZ0NTfGx72vF2CzbSg6lRBBq4AxJXYkuC-T96hoI6Dus6LV2TagdbCg4CWofmRs2_vdZeoMHZvceZjIydeZfI8vAekwA1KxbBvkytEySGw" alt="" /></figure> <ol start="2"><li>I reorganized the hamburger menu to be consistent with the navigation menu and to use the subheadings of “Contribute” and “Resources” instead of “More.” I felt that these changes would make the hamburger menu easier to navigate for both new and long-time patrons. </li></ol> <figure class="wp-block-image is-resized"><img decoding="async" loading="lazy" src="https://lh6.googleusercontent.com/Defz6oJ27edzLstAIiK8FtQYG46ZpXd1HaZ9qHvfmole2TfYkXnU6rWIcGAdQmdnO2DPk0HM2L_6f8FuJRa7Ok5BeC2xpH8NXyGGL1qPxXHzJgFh6ueX13JPLpRd0fsd3K6qT7fT8DHQ3lgyepxjhynwA8hqhwRJoW24nHKclEQ3kOa2-kpEqeCt8adcIw" alt="" width="209" height="560" /></figure> <p>After creating the prototype, my next goal was to get feedback from patrons, so I scheduled user interviews with volunteers.</p> <p><strong>User Interviews</strong></p> <p>I conducted user interviews via Zoom with four patrons to answer the following questions: </p> <ol><li>How do users feel about the My Books dropdown? </li><li>Are users using My Books and Browse from the navigation menu or hamburger menu?</li><li>Are users able to effectively use the hamburger? Do they find it easier or harder to find what they’re looking for using the reorganized hamburger?</li></ol> <p><strong>Results & Findings</strong></p> <ol><li>Three out of the four patrons <strong>preferred the dropdown</strong>, and the fourth user didn’t have a preference between the versions. The patrons enjoyed having the control to navigate to a specific section of My Books. </li><li>All users <strong>used the navigation menu</strong> <strong>at the top of the page</strong> to navigate, rather than the hamburger menu, which supported the switch to “My Books” instead of “More.” This finding also highlighted the need to make sure patrons could access the pages they wanted to access from the top navigation menu. </li><li>Finally, all four patrons found the existing hamburger menu confusing and <strong>preferred the reorganized hamburger</strong>. Some patrons specifically mentioned that the reorganized hamburger was more compact and that they felt that the headings “contribute” and “resources” were more clear than “more.”</li></ol> <p><strong>Synthesis and a New Direction</strong></p> <p>After learning from the user interviews that patrons preferred increased granularity for accessing My Books and a more concise hamburger menu, the Open Library team began discussing the exact implementation. We wanted to keep the navigation and hamburger menus consistent; however, we also wanted to provide many options in the My Books dropdown, which made the hamburger menu less concise. </p> <p>At the same time that we were debating the pros and cons of various solutions, another Open Library UX Design fellow, Samuel G, was working on designing a My Books landing page for the mobile site. Inspired by his designs, I created mockups for a desktop version of the My Books page. Having a My Books page that summarizes patrons’ loans, holds, and reading log at a glance allows patrons to still have increased control over My Books navigation while keeping the hamburger menu concise, since all of the individual My Books items can now be condensed into one link. </p> <figure class="wp-block-image"><img decoding="async" src="https://lh3.googleusercontent.com/jrcn9iAySKfPvuOa5IwhXzVvodz197EtkVfzZkHb4vPDstR2sM1qwknAJEltB23eZd4PP-WOxsVVYiYWnGW10bkmF70tdGYEml-KoNLFu-x_PSAPjWMIBifW6ishTrF7owdmC-9-xutuyw2ng2a93khQUUfgIvcdR3YjuvsVqTpVko6N9cL9pjvpNadJ9Q" alt="" /></figure> <figure class="wp-block-image is-resized"><img decoding="async" loading="lazy" src="https://lh4.googleusercontent.com/goxs-QUA2-6M2Cn3LwklG8XPoZnxd0iEuYlINmz2raz0jpBM0TFv-TTBApX-fquJZSquwNeopjUO4lC2l2B_K8vb9p84PVwR8yR49Qc1y88e9ZUkSM2tr0jnOL9Py4VWfbpE9FGNx7TeS4qITF-sAYkrUwG6T3k_kCYvkur_YskS57ccCFkOAH6HCfw9LA" alt="" width="266" height="671" /></figure> <p>Furthermore, having a My Books landing page opens the door for more ways for patrons to interact with their reading through Open Library. For instance, I’ve created a mockup that includes a summary of a patron’s reading stats and yearly reading goal at the top of the page. </p> <figure class="wp-block-image"><img decoding="async" src="https://lh3.googleusercontent.com/HnbXCT5mjPZOFFSvB_NE1tb8_dsvahCMMOjpEt-iW5zoGhvULK0m4XFiu-00FZOQSXRl4nhT8dvMwnJPdTBX0UWPEwWr7V1_1amY1ZrW95M_D2P5KS-1jZYQYR_lCCI8P87mxEYhpeGlEHUgBtwzQ3wHf9416h0hLn2IPo1AIUbTbPjlvut907GPPbhpMg" alt="" /></figure> <p>As we work towards implementing this design, I’m looking forward to getting feedback from patrons and brainstorming even more ways to maximize the use of this page. </p> <p><strong>Reflections</strong></p> <p>Working with the Open Library team has been an amazing experience. I’m so grateful that I got to lead a UX project from start to end, beginning with user research and ending with final designs that are ready to be implemented. Working with such a supportive team has allowed me to learn more about the iterative design process, get comfortable with sharing and critiquing my designs, and gain more experience with design tools, such as Figma. It was also a great learning experience that sometimes your projects will take an unexpected turn, but those turns help you eventually come to the best possible design solution. Thank you to everyone who provided feedback and helped me along the way, especially Mek, who was a wonderful mentor, and Sam, who was a great collaborator on our My Books mobile and desktop project!</p> <h3 class="wp-block-heading" id="about-the-open-library-fellowship-program">About the Open Library Fellowship Program</h3> <p>The Internet Archive’s Open Library Fellowship is a flexible, self-designed independent study which pairs volunteers with mentors to lead development of a high impact feature for OpenLibrary.org. Most fellowship programs last one to two months and are flexible, according to the preferences of contributors and availability of mentors. We typically choose fellows based on their exemplary and active participation, conduct, and performance within the Open Library community. The Open Library staff typically only accepts 1 or 2 fellows at a time to ensure participants receive plenty of support and mentor time. Occasionally, funding for fellowships is made possible through Google Summer of Code or Internet Archive Summer of Code & Design. If you’re interested in contributing as an Open Library Fellow and receiving mentorship, you can apply using <a href="https://forms.gle/ZpygKGaECbHKYpvx8">this form</a> or email <a href="mailto:openlibrary@archive.org">openlibrary@archive.org</a> for more information.</p> </div> <footer class="entry-meta"> Posted in <a href="https://blog.openlibrary.org/category/fellowships/" rel="category tag">Fellowships</a>, <a href="https://blog.openlibrary.org/category/interfacedesign/" rel="category tag">Interface/Design</a>, <a href="https://blog.openlibrary.org/category/mobile/" rel="category tag">Mobile</a>, <a href="https://blog.openlibrary.org/category/uncategorized/" rel="category tag">Uncategorized</a> | <span class="comments-link"><span></span></span> </footer> </article> <nav id="nav-below" class="navigation"> <h3 class="assistive-text">Post navigation</h3> <div class="nav-previous"><a href="https://blog.openlibrary.org/category/interfacedesign/page/2/" ><span class="meta-nav">←</span> Older posts</a></div> <div class="nav-next"></div> </nav> </div> </section> <div id="secondary" class="widget-area" role="complementary"> <aside id="text-4" class="widget widget_text"> <div class="textwidget"><img src="http://blog.openlibrary.org/files/2016/02/Open-Library-Logo-1.jpg" alt="open library logo"></div> </aside><aside id="block-4" class="widget widget_block widget_recent_entries"><ul class="wp-block-latest-posts__list wp-block-latest-posts"><li><a class="wp-block-latest-posts__post-title" href="https://blog.openlibrary.org/2024/10/03/improving-search-removing-dead-ends/">Improving Search, Removing Dead-Ends</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://blog.openlibrary.org/2024/07/30/improving-open-librarys-translation-pipeline/">Improving Open Library’s Translation Pipeline</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://blog.openlibrary.org/2024/07/05/follow-each-other-on-open-library/">Follow each other on Open Library</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://blog.openlibrary.org/2024/06/17/let-readers-read/">Let Readers Read</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://blog.openlibrary.org/2024/06/16/listening-to-learners-and-educators/">Listening to Learners and Educators</a></li> </ul></aside><aside id="block-6" class="widget widget_block"> <figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper"> <a class="twitter-timeline" data-width="625" data-height="938" data-dnt="true" href="https://twitter.com/openlibrary?ref_src=twsrc%5Etfw">Tweets by openlibrary</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </div></figure> </aside><aside id="block-7" class="widget widget_block widget_calendar"><div class="wp-block-calendar"><table id="wp-calendar" class="wp-calendar-table"> <caption>December 2024</caption> <thead> <tr> <th scope="col" title="Monday">M</th> <th scope="col" title="Tuesday">T</th> <th scope="col" title="Wednesday">W</th> <th scope="col" title="Thursday">T</th> <th scope="col" title="Friday">F</th> <th scope="col" title="Saturday">S</th> <th scope="col" title="Sunday">S</th> </tr> </thead> <tbody> <tr> <td colspan="6" class="pad"> </td><td>1</td> </tr> <tr> <td>2</td><td>3</td><td id="today">4</td><td>5</td><td>6</td><td>7</td><td>8</td> </tr> <tr> <td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td> </tr> <tr> <td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td> </tr> <tr> <td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td> </tr> <tr> <td>30</td><td>31</td> <td class="pad" colspan="5"> </td> </tr> </tbody> </table><nav aria-label="Previous and next months" class="wp-calendar-nav"> <span class="wp-calendar-nav-prev"><a href="https://blog.openlibrary.org/2024/10/">« Oct</a></span> <span class="pad"> </span> <span class="wp-calendar-nav-next"> </span> </nav></div></aside><aside id="text-4" class="widget widget_text"> <div class="textwidget"><img src="http://blog.openlibrary.org/files/2016/02/Open-Library-Logo-1.jpg" alt="open library logo"></div> </aside> </div> </div> <footer id="colophon" role="contentinfo"> <div class="site-info"> <a href="https://wordpress.org/" class="imprint" title="Semantic Personal Publishing Platform"> Proudly powered by WordPress </a> </div> </footer> </div> <style id='wp-block-paragraph-inline-css' type='text/css'> .is-small-text{font-size:.875em}.is-regular-text{font-size:1em}.is-large-text{font-size:2.25em}.is-larger-text{font-size:3em}.has-drop-cap:not(:focus):first-letter{float:left;font-size:8.4em;font-style:normal;font-weight:100;line-height:.68;margin:.05em .1em 0 0;text-transform:uppercase}body.rtl .has-drop-cap:not(:focus):first-letter{float:none;margin-left:.1em}p.has-drop-cap.has-background{overflow:hidden}p.has-background{padding:1.25em 2.375em}:where(p.has-text-color:not(.has-link-color)) a{color:inherit} </style> <style id='wp-block-heading-inline-css' type='text/css'> h1.has-background,h2.has-background,h3.has-background,h4.has-background,h5.has-background,h6.has-background{padding:1.25em 2.375em} </style> <style id='wp-block-list-inline-css' type='text/css'> ol,ul{box-sizing:border-box}ol.has-background,ul.has-background{padding:1.25em 2.375em} </style> <style id='wp-block-image-inline-css' type='text/css'> .wp-block-image img{height:auto;max-width:100%;vertical-align:bottom}.wp-block-image img,.wp-block-image.has-custom-border img{box-sizing:border-box}.wp-block-image.aligncenter{text-align:center}.wp-block-image.alignfull img,.wp-block-image.alignwide img{height:auto;width:100%}.wp-block-image .aligncenter,.wp-block-image .alignleft,.wp-block-image .alignright,.wp-block-image.aligncenter,.wp-block-image.alignleft,.wp-block-image.alignright{display:table}.wp-block-image .aligncenter>figcaption,.wp-block-image .alignleft>figcaption,.wp-block-image .alignright>figcaption,.wp-block-image.aligncenter>figcaption,.wp-block-image.alignleft>figcaption,.wp-block-image.alignright>figcaption{caption-side:bottom;display:table-caption}.wp-block-image .alignleft{float:left;margin:.5em 1em .5em 0}.wp-block-image .alignright{float:right;margin:.5em 0 .5em 1em}.wp-block-image .aligncenter{margin-left:auto;margin-right:auto}.wp-block-image figcaption{margin-bottom:1em;margin-top:.5em}.wp-block-image .is-style-rounded img,.wp-block-image.is-style-circle-mask img,.wp-block-image.is-style-rounded img{border-radius:9999px}@supports ((-webkit-mask-image:none) or (mask-image:none)) or (-webkit-mask-image:none){.wp-block-image.is-style-circle-mask img{border-radius:0;-webkit-mask-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');mask-mode:alpha;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}}.wp-block-image :where(.has-border-color){border-style:solid}.wp-block-image :where([style*=border-top-color]){border-top-style:solid}.wp-block-image :where([style*=border-right-color]){border-right-style:solid}.wp-block-image :where([style*=border-bottom-color]){border-bottom-style:solid}.wp-block-image :where([style*=border-left-color]){border-left-style:solid}.wp-block-image :where([style*=border-width]){border-style:solid}.wp-block-image :where([style*=border-top-width]){border-top-style:solid}.wp-block-image :where([style*=border-right-width]){border-right-style:solid}.wp-block-image :where([style*=border-bottom-width]){border-bottom-style:solid}.wp-block-image :where([style*=border-left-width]){border-left-style:solid}.wp-block-image figure{margin:0} .wp-block-image figcaption{color:#555;font-size:13px;text-align:center}.is-dark-theme .wp-block-image figcaption{color:hsla(0,0%,100%,.65)}.wp-block-image{margin:0 0 1em} </style> <style id='wp-block-columns-inline-css' type='text/css'> .wp-block-columns{align-items:normal!important;box-sizing:border-box;display:flex;flex-wrap:wrap!important;margin-bottom:1.75em}@media (min-width:782px){.wp-block-columns{flex-wrap:nowrap!important}}.wp-block-columns.are-vertically-aligned-top{align-items:flex-start}.wp-block-columns.are-vertically-aligned-center{align-items:center}.wp-block-columns.are-vertically-aligned-bottom{align-items:flex-end}@media (max-width:781px){.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column{flex-basis:100%!important}}@media (min-width:782px){.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column{flex-basis:0;flex-grow:1}.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*=flex-basis]{flex-grow:0}}.wp-block-columns.is-not-stacked-on-mobile{flex-wrap:nowrap!important}.wp-block-columns.is-not-stacked-on-mobile>.wp-block-column{flex-basis:0;flex-grow:1}.wp-block-columns.is-not-stacked-on-mobile>.wp-block-column[style*=flex-basis]{flex-grow:0}:where(.wp-block-columns.has-background){padding:1.25em 2.375em}.wp-block-column{flex-grow:1;min-width:0;overflow-wrap:break-word;word-break:break-word}.wp-block-column.is-vertically-aligned-top{align-self:flex-start}.wp-block-column.is-vertically-aligned-center{align-self:center}.wp-block-column.is-vertically-aligned-bottom{align-self:flex-end}.wp-block-column.is-vertically-aligned-bottom,.wp-block-column.is-vertically-aligned-center,.wp-block-column.is-vertically-aligned-top{width:100%} :where(.wp-block-columns.is-layout-flex){gap: 2em;} </style> <style id='wp-block-latest-posts-inline-css' type='text/css'> .wp-block-latest-posts{box-sizing:border-box}.wp-block-latest-posts.alignleft{margin-right:2em}.wp-block-latest-posts.alignright{margin-left:2em}.wp-block-latest-posts.wp-block-latest-posts__list{list-style:none;padding-left:0}.wp-block-latest-posts.wp-block-latest-posts__list li{clear:both}.wp-block-latest-posts.is-grid{display:flex;flex-wrap:wrap;padding:0}.wp-block-latest-posts.is-grid li{margin:0 1.25em 1.25em 0;width:100%}@media (min-width:600px){.wp-block-latest-posts.columns-2 li{width:calc(50% - .625em)}.wp-block-latest-posts.columns-2 li:nth-child(2n){margin-right:0}.wp-block-latest-posts.columns-3 li{width:calc(33.33333% - .83333em)}.wp-block-latest-posts.columns-3 li:nth-child(3n){margin-right:0}.wp-block-latest-posts.columns-4 li{width:calc(25% - .9375em)}.wp-block-latest-posts.columns-4 li:nth-child(4n){margin-right:0}.wp-block-latest-posts.columns-5 li{width:calc(20% - 1em)}.wp-block-latest-posts.columns-5 li:nth-child(5n){margin-right:0}.wp-block-latest-posts.columns-6 li{width:calc(16.66667% - 1.04167em)}.wp-block-latest-posts.columns-6 li:nth-child(6n){margin-right:0}}.wp-block-latest-posts__post-author,.wp-block-latest-posts__post-date{display:block;font-size:.8125em}.wp-block-latest-posts__post-excerpt{margin-bottom:1em;margin-top:.5em}.wp-block-latest-posts__featured-image a{display:inline-block}.wp-block-latest-posts__featured-image img{height:auto;max-width:100%;width:auto}.wp-block-latest-posts__featured-image.alignleft{float:left;margin-right:1em}.wp-block-latest-posts__featured-image.alignright{float:right;margin-left:1em}.wp-block-latest-posts__featured-image.aligncenter{margin-bottom:1em;text-align:center} </style> <style id='wp-block-embed-inline-css' type='text/css'> .wp-block-embed.alignleft,.wp-block-embed.alignright,.wp-block[data-align=left]>[data-type="core/embed"],.wp-block[data-align=right]>[data-type="core/embed"]{max-width:360px;width:100%}.wp-block-embed.alignleft .wp-block-embed__wrapper,.wp-block-embed.alignright .wp-block-embed__wrapper,.wp-block[data-align=left]>[data-type="core/embed"] .wp-block-embed__wrapper,.wp-block[data-align=right]>[data-type="core/embed"] .wp-block-embed__wrapper{min-width:280px}.wp-block-cover .wp-block-embed{min-height:240px;min-width:320px}.wp-block-embed{overflow-wrap:break-word}.wp-block-embed figcaption{margin-bottom:1em;margin-top:.5em}.wp-block-embed iframe{max-width:100%}.wp-block-embed__wrapper{position:relative}.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper:before{content:"";display:block;padding-top:50%}.wp-embed-responsive .wp-has-aspect-ratio iframe{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.wp-embed-responsive .wp-embed-aspect-21-9 .wp-block-embed__wrapper:before{padding-top:42.85%}.wp-embed-responsive .wp-embed-aspect-18-9 .wp-block-embed__wrapper:before{padding-top:50%}.wp-embed-responsive .wp-embed-aspect-16-9 .wp-block-embed__wrapper:before{padding-top:56.25%}.wp-embed-responsive .wp-embed-aspect-4-3 .wp-block-embed__wrapper:before{padding-top:75%}.wp-embed-responsive .wp-embed-aspect-1-1 .wp-block-embed__wrapper:before{padding-top:100%}.wp-embed-responsive .wp-embed-aspect-9-16 .wp-block-embed__wrapper:before{padding-top:177.77%}.wp-embed-responsive .wp-embed-aspect-1-2 .wp-block-embed__wrapper:before{padding-top:200%} .wp-block-embed figcaption{color:#555;font-size:13px;text-align:center}.is-dark-theme .wp-block-embed figcaption{color:hsla(0,0%,100%,.65)}.wp-block-embed{margin:0 0 1em} </style> <style id='wp-block-calendar-inline-css' type='text/css'> .wp-block-calendar{text-align:center}.wp-block-calendar td,.wp-block-calendar th{border:1px solid;padding:.25em}.wp-block-calendar th{font-weight:400}.wp-block-calendar caption{background-color:inherit}.wp-block-calendar table{border-collapse:collapse;width:100%}.wp-block-calendar table:where(:not(.has-text-color)){color:#40464d}.wp-block-calendar table:where(:not(.has-text-color)) td,.wp-block-calendar table:where(:not(.has-text-color)) th{border-color:#ddd}.wp-block-calendar table.has-background th{background-color:inherit}.wp-block-calendar table.has-text-color th{color:inherit}:where(.wp-block-calendar table:not(.has-background) th){background:#ddd} </style> <style id='global-styles-inline-css' type='text/css'> body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #fff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--blue: #21759b;--wp--preset--color--dark-gray: #444;--wp--preset--color--medium-gray: #9f9f9f;--wp--preset--color--light-gray: #e6e6e6;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--duotone--dark-grayscale: url('#wp-duotone-dark-grayscale');--wp--preset--duotone--grayscale: url('#wp-duotone-grayscale');--wp--preset--duotone--purple-yellow: url('#wp-duotone-purple-yellow');--wp--preset--duotone--blue-red: url('#wp-duotone-blue-red');--wp--preset--duotone--midnight: url('#wp-duotone-midnight');--wp--preset--duotone--magenta-yellow: url('#wp-duotone-magenta-yellow');--wp--preset--duotone--purple-green: url('#wp-duotone-purple-green');--wp--preset--duotone--blue-orange: url('#wp-duotone-blue-orange');--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} </style> <style id='core-block-supports-inline-css' type='text/css'> .wp-container-3.wp-container-3,.wp-container-6.wp-container-6{flex-wrap:nowrap;} </style> <script type='text/javascript' id='qi-blocks-main-js-extra'> /* <![CDATA[ */ var qiBlocks = {"vars":{"arrowLeftIcon":"<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 34.2 32.3\" xml:space=\"preserve\" style=\"stroke-width: 2;\"><line x1=\"0.5\" y1=\"16\" x2=\"33.5\" y2=\"16\"\/><line x1=\"0.3\" y1=\"16.5\" x2=\"16.2\" y2=\"0.7\"\/><line x1=\"0\" y1=\"15.4\" x2=\"16.2\" y2=\"31.6\"\/><\/svg>","arrowRightIcon":"<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 34.2 32.3\" xml:space=\"preserve\" style=\"stroke-width: 2;\"><line x1=\"0\" y1=\"16\" x2=\"33\" y2=\"16\"\/><line x1=\"17.3\" y1=\"0.7\" x2=\"33.2\" y2=\"16.5\"\/><line x1=\"17.3\" y1=\"31.6\" x2=\"33.5\" y2=\"15.4\"\/><\/svg>","closeIcon":"<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 9.1 9.1\" xml:space=\"preserve\"><g><path d=\"M8.5,0L9,0.6L5.1,4.5L9,8.5L8.5,9L4.5,5.1L0.6,9L0,8.5L4,4.5L0,0.6L0.6,0L4.5,4L8.5,0z\"\/><\/g><\/svg>","viewCartText":"View Cart"}}; /* ]]> */ </script> <script type='text/javascript' src='https://blog.openlibrary.org/wp-content/plugins/qi-blocks/assets/dist/main.js?ver=1.3.3' id='qi-blocks-main-js'></script> <script type='text/javascript' src='https://blog.openlibrary.org/wp-content/themes/twentytwelve/js/navigation.js?ver=20141205' id='twentytwelve-navigation-js'></script> </body> </html>