Koha-US KohaCon22, 27 Sep 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Designing a Patron Empowering OPAC

Description

Presenters:
- Jessie Zairo (ByWater Solutions)
- Lucas Gass (ByWater Solutions)

Slides:
- https://docs.google.com/presentation/d/1ofFgNrnRHnoQhBISzlFy_k2bRPumwdPlsfEc0Yz6cq4/edit?usp=sharing

A

Yeah hi everyone Thanks for allowing Lucas and I to talk to you today about designing a patron empowering OPAC um Lucas does some really amazing things for some of our Koh packs that you see around we're going to show some great examples today and share some of the ideas that you can Implement back at your library, um just quick about Lucas and I. We are work at Bywater, Solutions um I, do a lot of kohut training, documentation, marketing and Outreach.

A

So we're going to talk a lot about like personalizing your brand and tying in the seamless integration between your library website and your koha OPEC.

B

And I'm Lucas I'm a co-op developer, um also I've done a bunch of release maintenance on various uh versions of Goa um yeah.

B

So what we're going to talk about today uh is some of the hows of how you can customize your OPAC, some of the tools that are available to you uh in koha. Some of the tools outside of COA that we can use to customize Aero pack um get a little bit into uh some considerations uh to make our Opex sustainable and accessible for everyone.

B

Then Jay-Z's going to talk a little bit about marketing branding those Opex, so they fit your library brand.

B

Okay, so how um what are some of the tools we have in koha to customize our Opex, the big one I think 90 of customizations I do come from. Are these tools here news which is lived in koha for forever, as or as long as I can remember, um which is sort of something where we can do one-off uh events with expiration dates?

B

um Now we have HTML customizations, which is relatively new in koha. um This is where we can insert content with HTML into various predefined places in the OPEC.

B

um These used to be system preferences um like OPEC, header, OPEC, footer and the side, nav bars and stuff, like that, I'm sure kind of hard to find, except to know what system preference was called and go find it now everything lives here and there's like One-Stop shop of HTML customizations, which is pretty awesome.

B

um It's also a lot more friendly to use. We can use wysiwyg editors. We can use a more robust text, editor and right actual HTML if we want um and there's stuff like save and continue buttons, so you can work a little bit on your OPEC go look at it. Save continue!

B

um There's news logs so that we can actually like log these changes just in case we make mistakes and need to go backwards um and then Super exciting. To me is this new new feature in 2211, which is going to be pages, so we're actually going to be able to use all of these same tools and write just unique custom pages in koha.

B

Here's a little mock-up I did using one of those pages so uh yeah you can we'll be able to maybe even abandon Library websites and use koha for our library websites, and maybe next year we can even use uh use koha to make the co-op 2023 um website. So this is a really cool and exciting feature to me. It's a big game. Changer I think.

B

um Okay, so that's HTML customizations um that there are these predefined areas in koha, where we can add stuff that doesn't work all the time, because we may want to insert content in other places, so another big tool that I'm using all the time is OPAC user JS, which system preference um a little example right here, just showing how if you uh successfully register, you may want to change some of the text on a page to suit your library with unique text.

B

Javascript is also great for managing sort of the state of things checking if users are logged in or not logged in um things like that um OPAC user CSS. This is how we make everything pretty on our kohio Opex. We can inject CSS into here and it'll affect every page on our KOA pack and make everything shiny and it's nice and beautiful.

B

um Also plugins are a great tool. There's a bunch of them. We can use in koha to gain some functionality in our OPEC and do various cool things. um I always think. First of cover flow, Opex, I think it's nearly ubiquitous now, um using that a lot and making uh slides book reviews, if you will to uh make things accessible to our patrons and discoverable uh I've I see a lot of uh newly acquired, slides or staff picks, which can be curated by staff.

B

um I've seen recently returned, there's all kinds of things you can do just need reports and um yeah. Let's see what other plugins do. We have uh glad galadriel's one um which, when we don't want to write, CSS or we're uncomfortable writing CSS, we can change colors of things in our Koh OPAC by using the gladriel plugin, changing the navbar colors, changing the logins um stuff, like that uh EDS, which is a great ebsco, plug-in to sort of gain a new wealth of things into our catalog journals.

B

Scholarly articles things like that. um What else kids OPEC right? uh We have a kids OPAC plugin, um which is super easy to use. We just give it a URL, that's maybe different than our regular OPAC, URL and um press a couple buttons uh decide what kind of item types or shelving locations or collection codes. We want to be discoverable only for our children's audience and then we have something neat like this. That can uh pair well with our regular OPEC.

B

Okay, so those are some of the tools that we can use, but I also want to just kind of throw out some of the customizations I do on a pretty normal basis and give you kind of idea of some of the things you can do by using those tools.

B

um Pretty standard is some stuff just like links by using the HTML customization feature uh on your home, page or really anywhere else in your catalog. If you want to put it, but these may be links to your website or uh scholarly articles like you see here, just really anything you want. That is a a value or importance to your patrons.

B

Oh- and this is a big one too- that's on a lot of opac's hours, uh social media contact like to make opacs like a One-Stop shop for your patrons, so they can figure out everything, not only just search the catalog, but they can look at the hours. uh Maybe get a Google map pulled up where the library is website.

B

uh Social media icons which I have about I, don't know five or seven different, iterations different designs of social media icons, um all of which are available. We'll have this code, all the CSS, the HTML and everything in a blog post. For you to look at later.

B

Oh yeah and just a little piece of JavaScript, very simple stuff that you can put in uh your OPAC user CSS can highlight which day it is so when your Patron hits the OPEC. Not only could they search the catalog, but they can see what the library's hours are for that very day, uh just cool in little handy things that make the OPAC experience a little funner.

B

Oh digital library cards, this is uh powered by JavaScript and something I've uh done a lot of recently, pretty cool I. Think it's pretty cool uh when you logged in you could click on a view. Your e-card um pull up, something that looks very much like your library card, maybe use that it's self-checkout or at the desk. If you don't have um your library card- and this is all powered by OPEC user.js and made pretty by OPEC users CSS so yeah.

B

Oh, uh this one's awesome, I think uh there's now a public biblios API route, so with just a little bit of JavaScript, which I'm showing right here uh we can return, we can grab any Mark field. We want uh even the ones that don't display by default in the OPAC um and display those on our OPAC results page or on our Details page um I love this. This is awesome. We used to have to do it with xslt. Does anybody worked with xslt? It's not not.

B

My favorite and I would much rather do something like this with JavaScript and it's it's a lot more sustainable. We don't have to move off of our community xslt style sheets um yeah so and we.

C

Have Annie.

B

Mark field really available to us to put anywhere we want in our OPEC. So that's awesome.

B

Okay, so those are just a few ideas you want to throw out there get everybody's head's Journey about the customizations, and uh so you can go out there and think of your own, um but there's also some other considerations. We want to consider um when we're designing these things and writing HTML or writing CSS, uh so I'm going to design for our entire Community everyone um so who does that include? uh That'll include screen music screen reader users, um so some assistive technology that will dictate the uh the web page to you.

B

We have low vision, users and maybe colorblind users. We want to consider those folks. um Some people use only a keyboard. No mouse and uh I'm gonna really consider like how uh how we tab through the components on our website and if things can be focusable or or not be focusable. So uh we want to think about those kind of users um and then screen sizes like we got a ton of them in this day and age.

B

So uh when I think about everybody when we're designing these customizations, it's easy to uh uh look at it on our big work, computer screens and um on our brand new browsers, Chrome, 105s or whatever and uh I think it looks good, but uh we're not always considering uh all the screen sizes which we should um so, if you're, if you're working on a customization check check it with various screen sizes, see if it looks good on a cell phone or on a tablet.

B

um You also have to remember that not everybody has a really fast internet connection. So um it's probably a lot of rural libraries out there with slower internet still. Unfortunately, um those are users we want to consider um and then older browsers, um like I, said it's easy to be in the newest version of Chrome and see that everything's works and looks good. We have to remember that not everybody uses the same browser.

B

Which leads me to this Tool, uh not in koha, can I use.com. This is great, if you have, uh you know, CSS pseudo classes or jQuery methods, and you could just search for them here, and it gives you this nice little uh indicator of how many browsers support that particular thing.

B

This one, for example, has like 56 Global uh support, so, although I really wish we could use, has uh we can't yet the support's not there, but maybe one day.

B

So uh a lot of times when we're doing customizations we're going to be writing HTML. um What can we, how? What should we consider when we're doing so uh I always take Snippets of HTML, that I write for customizations and throw them into a validator like this one from w3schools um just to make sure your HTML is actually good and valid.

B

um When we add images, we should always be adding alt text to describe to screen readers um what that image means if it has any meaning uh just a couple little examples here that I sometimes see uh like these Center tags, which will work in Center elements um on your page in your customization. But, as you can see here, if I throw it in a validator, it says: error. Center element is obsolete, use CSS.

B

Instead, that's the same with this break uh element, which I see a lot and use to create space between two HTML elements. uh Whenever we're doing anything visually, we should always use CSS.

B

Oh and Aria is, uh is something to consider too, and uh this is uh just a set of HTML standards for accessibility that allow us to uh take HTML elements that uh may not have meaning um and give them meaning with HTML attributes like role.

B

uh We can take this yeah sort of meaningless span element and make it into a check box. uh We can also use Aria to sort of Define. The state of things is this checkbox checked? Is it not checked um and tab index for keyboard users? um Are we building something that we want to be focusable?

B

um If so, we want to use the tab index attribute to give our HTML meaning to um to everyone to all of our users.

B

Oh and then CSS this one's one of my favorites um but CSS uh this can largely be about color. So one of the biggest things here is think about color contrast uh for all our different low vision, users or uh then there are plenty of tools out there to help uh with color contrast, Google color contrast, checker, um there's also browser extensions to do this and we can just plug in a foreground color and a background color and tell us if it's accessible or not.

B

um If we should maybe adjust some of those colors, so they are uh I. Think Chrome devtools has um color contrast, Checkers built into them now too. So there's a lot of options here and it's really easy to check. So uh when you're building things and adding new colors. This is always something you want to consider um and then fonts um I struggled a lot uh when I first started working in Co-op into where I should put fonts um I've I've settled on the best place. To put them is in OPEC users.

B

Css, like you see here with a at import and I love, Google fonts, there's a ton of them, um and this is just an example of how I will usually do things on almost every OPAC I design I will import the font um and Define the main font. I want to use and the body tag, and then, after that, if I want to use a different font on different elements, I will define those next in the CSS. Again, all this is in OPEC user CSS.

B

Oh, some more just cool things and excited quality of life, things uh in CSS that I like to use um these are custom, Properties or like CSS variables, which are Super handy uh in that we can just Define things, and my examples here are color, but you can do this with fonts and margins and all kinds of things, but uh I will Define my custom colors right here at the top and then I will, instead of when I call that color I will do it like this.

B

um That way, if I ever have to go and change a color, I don't have to go through my CSS file and look for 88 version, different lines that have the color on it. I just changed it in one place and like voila, all the colors have changed.

B

Screen sizes: uh we talked about that a little bit and uh they're a bunch of common break points um for mobile devices, tablets different screens, big ones, and uh we should just be aware of those and uh when needed, we can use these like the example here, CSS media queries, which um will apply CSS only at certain widths, in this case uh six 769, pixels or less so as you're adjusting your screen when things don't look right, you can add these media queries um and uh make everything look right at all the different screen sizes.

B

Oh and bootstrap four, uh this is in koha natively, so uh the CSS is already in there, the javascript's already in there. So you don't really have to know a lot about those things and you can still add these really cool components to your koha OPEC and uh got a link up there to uh the bootstrap for components.

B

um There's all kinds of things here uh that we can use and just simply cut and paste, really maybe take out the placeholder text, replace it with this, the content that we want and throw it on our OPEC. uh This is an example of the tabs, so these tab panels that are either hidden or shown.

B

So in this case we can show one cover flow at a time, but have three on the page that users can pick from I use these, but I just straight copied all of this from from the bootstrap website um and there's a ton of stuff out there, there's carousels and nav bars and all kinds of cool stuff.

B

And here's one more example: this is a progress bar um I use this one, because we can see that it is using some of the Aria stuff rolls uh an aria of values.

B

um So when you copy and paste this stuff and replace placeholder content with your own content, um it's great because you can be assured that you're you're meeting a certain accessibility threshold, uh because it's already built in there for you bootstrap's done all the work.

B

And uh Jesse gonna talk a little bit about Brandy yeah, all.

A

Right thanks Lucas, so Lucas showed us some really great examples of how we can customize our opacs and tie that in and now we're going to talk a little bit about how you can personalize your library brand.

A

So the first thing we're thinking about is you know? Why are we personalizing our brand and why is it important? It builds credibility. So when your patrons and your users and your students come to your website or your OPAC, they recognize things your library stands out to them um and it encourages loyalty. So you know whether they're out, maybe your library is close to another neighboring Library. You know they recognize that um that logo or that image.

A

The other thing we want to think about is like how we can keep the personalization for your library. um One of the biggest things we always try to do is keep the keep your voice and your message consistent. You know across the platform, so, whether it's your website or your OPAC, you want to keep that consistency also bring out your personality. Think about all the amazing things that your library offers and the staff that you have that are out there, supporting it like bring that personality to life and then, of course, transparency right.

A

We want to keep everything easy for our users to find. You know. Lucas showed a couple examples on the OPAC, where we have those links that take us out to other information, or maybe a quick snippet that tells them how to log into the OPAC. You know we want to keep that concise, so it makes it easy for them and not overwhelm them with a lot of words and then, of course, you know pushing it out on social media, whether you're sharing a link to your OPAC or your website.

A

You know get that message out there, because that'll reach a lot of people.

A

um This is a kohai user, Huntsville Madison County in Alabama, and we love what they have done. So that's their logo over there in the upper left hand corner, and then you can see they did this little campaign to raise some money and they sold some books uh book bags, some mugs and some T-shirts, and they tied that logo in um you'll, see it on their website on their OPAC, and it's just a really nice way to tie all of those things together. We're always looking for great examples that we can.

A

We can share so now. What we'll do is we're going to show some examples to you of some websites and some opacs that have really beautiful, seamless integration, we'll show you how to Market some third-party products, so all those great subscriptions or databases that you're subscribing to um and then how to easily highlight those resources for your users.

A

So this first one is Bossier Parish libraries in Louisiana. This is their Library website, so you can see that they have embed the catalog search bar. So people can easily search for a title right from that main page. They can go over to their account log in and it's giving them really easy access and then, of course, they're highlighting other information from that main screen. They have their upcoming events on this next one.

A

Now we're going to take a look at their OPEC, so you can see that consistency that they kept with that search bar to make it really easy for them to find it and again. This is another cover flow that Barbara's going to go into more detail in her presentation about, um but you can list as many of those interactions that you want them to have whether you're highlighting you know new adult non-fiction or um you know DVDs whatever it is. This is a great way to bring that information in.

A

Our next example here is Spalding University Library.

A

Now this is their Library website page, so this is linking out where they can search everything or ebooks or journals or databases.

A

Now, if we transition over to their OPAC again you're going to see that seamless integration, so the student in essence isn't really noticing, if they're going from one place to the next, they can still perform that search. They have some beautiful customizations down below that. Take them and show like hours for different locations within the Learning Resource Center you'll, see at the top.

A

um You know links that take them out to the course reserves or their Authority search and they're. Just keeping that consistent. Look between the the website and the OPAC.

A

Our next example here is Clover Park Technical College in Washington state. This is their Learning Resource Center. So this is their website for the library which links them out again, where they can perform the search or link out to other options that are available for students like canvas, contacting the librarian, and then this is their OPAC.

A

So another really nice way that you can connect with your users and and keep that consistency is if you have a chat widget if you're, using Library chat or help3 or olark or any of those chat Services out there. This is a great way that you can either have it pop up from the bottom slide out or pop out from the right or left.

A

Some people just have like a little icon at the bottom, and this is a nice way that you can keep that connection to your students or your users within the system and again you'll see here they have quick information that takes them out to um how they can log in and, of course, the hours for the library.

A

Our next example here is Galveston College in Texas, and this is their Library website so again, they're keeping that search bar there for the user to perform that search, and then they also have links that take them out to their chat and then those quick links over there on the right hand, side if we transition over to their OPEC you'll, see that same thing. Now, right as we were taking that screenshot, their chat widget popped up for us to chat.

A

So you can see that chat option over there on the right hand, side again hours and some quick links over here on the left and then one iteration of that cover flow in the center of the screen, and this is probably something that we're always searching for to get good examples. I love the recently returned. One I think that is such a great idea for people to just go in and browse through those titles.

A

um Our last example here is this is our kind of our model site that Lucas puts all of the amazing work that he's done on, so we could highlight um some of the cool things, so this iteration of cover flow is pulling in where they can see those titles that are available.

A

We have the the hours and the contact information and then, of course, over on the right, underneath the login options that take people out to like koha Community, the wiki um buy water solutions tutorial videos- you know just to like highlight all of that information in there.

A

Lucas mentioned EDS as one of the plugins earlier and Kelly's, going to do a presentation on plugins tomorrow and talk a lot about them, um but this is a great way if you do have the discovery service with ebsco, that you can integrate that information right into the search. You'll notice that the options up top we have is either search the catalog or search the databases, and you can have those in a drop down form or switching back and forth between the two and one of the really great things about the plugin.

A

Is it allows you to customize those facets? So you'll notice it looks a little bit different than what we're traditionally used to seeing in the OPAC for facets. It allows them to narrow down by full text um or expand or a source type or a publisher, or even a content provider.

A

E-Content integration, how many of us have OverDrive or hoopla or Cloud Library right, and are you turning that integration on, so it pulls those results into the OPAC? Yes, all right, um so these are great ways that you can turn that on. You can also customize that message so, instead of it just being like a link that they might miss, you can make it stand out with either a box or some highlighted text, so it makes it easier for them to click on that information and then see that information in there.

A

The really nice thing you also want to turn on is make sure that you have that overdrive circulation turned on if you do use OverDrive and that allows them to authenticate once they're logged in and then they can check items right out from that overdrive screen. So they can see that information. They don't have to leave to go out to the overdrive website or, if they're, on their phone on. You know, if they're on Libby, they can do it all within the koha OPEC.

A

Of course, when they do go to Libby to read it, they can still see that information in there.

A

In this example, we have a hoopla circulation on. So if you have hoopla, this is a great way to bring in your information into the system. This will give you a pop-up, so the user can again check items out and they can see that information in their account summary. So once we log into the OPAC you'll be able to see that information for overdrive, Cloud Library is another option. If you have that e-content provider, you can bring it in and then of course, hoopla. The user can see that item here. They can check it out.

A

They can also check things back in.

A

So we just want to thank you all for listening and sharing some of these ideas, um all of our notes and presentation, links and all the code that Lucas has written. You can either scan that QR code or just go to the bitly, and that has all of our information, like some tutorials on how to set them up. If you want to set up a digital library card like Prosper, um or you know some of that stuff, all of it's in there.

D

All right before they sit down, does anybody have any questions about anything that they presented? I'm gonna? Have you come up here, so you can use the mic you're going to drill your own uh colleagues here.

A

um I missed when that Pages enhancement was coming.

B

A

22 11., okay, thank you.

E

I had a couple quick questions. um First of all, when you're using the the barcodes on the digital barcodes, do you normally have to have a special barcode scanners to to read those correctly.

B

So uh that's actually using a JavaScript library called JS barcode and um there's a bunch of barcodes that you can use there. So if your scanners are code 39 or any of the other types you can, uh you can use all of those different barcode types. So usually there's going to be something that you can find in there that's going to work with your particular scanner. Okay,.

E

So most of them should read from the screen without any trouble. What's.

C

E

Most of them should read from the screen itself without any trouble in.

B

Most cases yes, I've I've ran into some cases where there is trouble. It's usually the barcode reader. But yes,.

E

um My other quick question was: is there a web address where we can go to see the buy water test site that you've set up with some of those those different things? Yeah.

C

That's uh it's on yeah, it's okay! Thank you.

D

And uh just to clarify the barcode scanners, usually if it's reading the barcode as an image, uh they'll read them off of the the phones and screens uh better. If it's one of the older ones, it's just this line, uh it tends to not read those off the screen as well.

F

uh That's my experience too Michael is that you're gonna need 2D barcode scanners to scan off of a screen that a 1D line. Scanner won't do um so it's going to depend on what kind of barcode scanners you have at your in each each library and I know in your situation with what like 50 libraries, 51 libraries I, don't know if you guys are making sure that they all have the exact same scanners. My guess is you're not because I'm in the same situation. So uh there were some comments online.

F

The most comments were about the pages. Everybody is excited for Pages um and then there were um comments too about the mark. Enhancements. um Heather Hernandez was very excited about the mark uh being able to put any Mark field on the screen in the display in the OPEC. So yeah, that's really awesome online. There were just comments, no questions. So thanks.

D

All right anybody else all right. Thank you very much.