How do you truly embed UX at an institutional level?

At the glorious UXLibs IV Conference (more on which below), Michelle Blake and I presented on embedding UX at York. By this we mean, attempting to move the ethnography and design ideas / techniques / methods which sit under the User Experience in Libraries umbrella, from novel and niche to mainstream and, if you'll forgive the management-speak, Business As Usual. Part of the culture. 

We're not all the way there yet and don't profess to have completely nailed it, but it is something we've consciously tried to achieve in the Library and we're having come success with it. Some of what we've done is outlined briefly in the presentation below, to which I've added an explanatory sentence to most slides so they make more sense without us talking over the top of it.

Embedding Ethnography and UX at the University of York from Ned Potter

I'd reccomend this post from Shelley Gullikson which nicely summarises several talks and sessions from UXLibs IV, and Andy Priestner's 50 Photos post gives a nice flavour of the conference as a whole.

UX-led changes at York and beyond

Reblogged from Lib-Innovation

As anyone who has embarked upon User Experience work will have learned, ethnography is actually the easy part. For all its messy, complicated, time-consuming complexity, getting the go-ahead for fieldwork and undertaking it is relatively straightforward compared to designing (and getting approval to put into place) changes to our services. It is vital to have a cut off point where we as UX practitioners stop collecting data, bite the bullet, and move on to phase 2 of the process. After all, it's the design and service tweaks that make this UX - otherwise all we're really doing is ethnography.

I think it's really important to a) push as many small tweaks through as possible, and then learn from them and assess their impact, and b) make details of the changes publicly available so others can get not just inspiration but a use-case to push through their own change.

So - what have institutions been doing as a result of what they've learned from ethnography? I have several examples from the University of York and some from further afield too.

I thought it might be useful to group the examples of UX-led improvements into categories. In all these instances ethnographic fieldwork has either instigated the change or supported the change - it's interesting that often UX can be the trigger to get something done which library staff and users have been considering and / or suggesting for a while. Often the fieldwork is one source of feedback alongside a couple of others in the examples below, which combined to be a strong enough argument to make a change.

Catalogue improvements

At York we've made several small changes to Yorsearch, the (Primo-based) library catalogue, in addition to the full user-interface change which will arrive shortly.

• The classmark for books now appear in the search results screen, rather than the user needing to click on a title to reveal its location. It's only a small change but we get around 25,000 views a day for Yorsearch - that's a lot of people now having to make one less click to get what they need. This particular change came from our first UX project with Postgrads, along with work from the Discoverability Group, and from seeing that that Imperial had successfully achieved the same thing with their Primo interface already, following their own UX work...
   
• Talking of Imperial, they've made the full report of their 2016 UX work available for anyone to download [*applauds*] - have a read, it's fascinating and useful material.
   
• We changed the terminology in the catalogue on the buttons you press to access books and ebooks - from Get It and View It, to Find in Library and View Online. Again this came out of several sources of feedback, including the Discoverability Group, and front-desk staff reporting that users simply didn't seem to get it when it came to View It and Get It.

Library space and environment improvements

• We made a hot-water tap available 24/7. Our UX work revealed that particularly in winter  students from Asia like to drink hot water in the way that in the West a lot us like to drink chilled water; this gave more context to previous requests for a hot drinking water tap. One has now been installed alongside the chilled water fountain.
   
• We made the Burton Library accessible 24hrs a day. Our library is open 24 hours, but previously only the main Morrell Building (the one with the books) and the Fairhurst (lots of study space) stayed open all the time; the silent reading room in the Burton closed at 10pm. Our UX work constantly demonstrated that the Burton was not as highly valued as we imagined it was - for example several students left it out of their congnitive map of the building, almost no students included it in their touchstone tours, and in our behavioural mapping we even observed students wandering up to the entrance, peering in to the stairwell that led up to the reading room, then just turning around and coming back, apparently not feeling like they wanted to cross the threshold. As part of the UX unstructured interviews we discovered that even some students who knew about the Burton didn't like using it because even if they had no intention of working past 10pm, they loathed the idea of setting up all their work and devices etc and then having to move them to another building at 10pm if they were still there at that time after all.
  
  So we upped our promotion of the Burton, it had a very nice re-design (although that wasn't directly related to anything we'd done with UX, it was happening anyway) and we made it accessible 24 hours a day. We're now monitoring the space as part of a new UX Project and the initial impressions are that it's already busier.
   
• We've given the students blankets. A pile of blankets in a basket near the entrance - people can help themselves and deposit the blankets back there when they leave. I cannot tell you how popular this has been... There are examples of effusive tweets and feedback on our graffiti wall in the presentation below - it's so nice to do something simple but effective! Temperature is always a problem in libraries, and there's often a more or less even split between people who are too hot and too cold. My History of Art students came to me to say they found working in King's Manor (our City-centre site which is nearly 500 years old so not overly warm) really hard when it was so cold. So we managed to get Estates to get some more heaters, and we bought blankets - this idea came from some UX work undertaken at Cambridge in 2015. We also bought blankets for our main library and the Minster library too. 
  
  (Top tip: buy really drab and unexciting looking blankets. They keep people just as warm but are much less likely to go missing...)
   
• Thanks to Ingela Wahlgren and Andy Priestner who gave me examples of their (current or former) institutions having changed the locations of digital screens as a result of behavioural mapping, in order to put the screens somewhere people will actually look at them. This could be displaying key info in areas where people have to queue, or it could be as simple as putting them in the direct line of site as students move forward through a space, rather than off to the side in people's peripheral vision.
   
• Sometimes students describe an area as noisy even though it's ostensibly a silent study zone. Truly observing the space can often solve the mystery of why this is happening - Jenny Foster gave me an example of her institution realising the beep of the self-issue machine could be heard four floors up! So they found the volume and turned it down. At Cambridge they discovered there were loud hinges on office doors so they oiled them...
   
• Like with the noise examples above, small changes really do add up. Carl Barrow told me some of the changes his HEI had made based on their fieldwork: additional signage (both analogue and digital), more printers, phone charge stations (why aren't we all doing these?) and a new coffee cart. Together all those minor tweaks will have a significant impact on the user experience, which is the name of the game after all.
   
• UPDATE: At the #NCLXUX event I've just heard Carl say they also re-positioned digital screens, having noticed no one looked at most of them. One, which was positioned in the entrance as people came through the turnstiles, DID get looked at - so they used that exclusively to promote the Skills Team's workshops, and as a result saw a much bigger uptake for those sessions... I love this - a great example of the impact UX can have in unexpected ways...

Library service improvements 

• At York we've moved academic staff onto our part-time package for borrowing books, giving them a little longer to return items without impacting too heavily on the rate of circulation overall
   
• We've changed the way we run our annual review of subscriptions to allow for more time and stop it clashing with other key things in the academic calendar
   
• We've changed the way we communicate key information to academics
   
• We've used academics' detailed views on our current reading list system to inform the choosing and customisation of the new one
   
• At Cambridge the FutureLib developed a whole app for finding study space

UX and Impact

I'm excited to hear a load more examples of UX-led change at UXLibs III (the third annual User Experience in Libraries Conference). The paper submissions we've had this year are fantastic, and the emphasis of the conference this year is on the impact of UX.

Finally, here are the slides from my Wales talk which mention a lot of the examples above, along with some next steps if you want to try ethnography at your own institution, and introductions to ethnography and design:

UX, ethnography and possibilities: for Libraries, Museums and Archives from Ned Potter

Using PowerPoint as a design tool

If you're a graphic designer you probably use a professional tool like Adobe InDesign or Photoshop to make leaflets, posters, infographics and other digital images. If, like me, you're not, and those tools are beyond both your budget and capacity to learn complicated programmes you're not going to use that often, you need an alternative.

I've written on here before about Canva, which is excellent for more than just presentations, and I like Phoster in the iOS app store for designing digital posters. But an under-rated tool for Design is PowerPoint. The main reasons are it's a lot more flexible than it's often given credit for, and it's incredibly easy to layer content (to put text over images, etc) - something which is maddeningly difficult to do in Word, for example.

So here are the key aspects to using PowerPoint for design.

1) You can make a slide ANY size, and save it as a JPG or PNG file

Go to Design, Slide Size then Custom Slide Size to get to this menu

PowerPoint defaults to a 4:3 or 16:9 slide - but you can edit the slide to be any shape, size and proportions. Open a new presentation and go to Design then Slide Size and choose Custom Slide Size you can bring up this drop-down menu, or just put in the custom dimensions of your choice.

Everything becomes easier with design when your canvas is the perfect dimensions to start off with. Sizes like A3 and A4 are self-explanatory if you're designing flyers or posters, but also think about digital image sizes. For example:

• A Twitter image (which is to say a perfectly sized image which doesn't require users to click to expand when viewing it's tweeted) is W: 116 mm x H 232mm
• An Instagram image can be any square, but optimally is 134mm x 134mm
• A Facebook image is 317mm x 317mm
• A YouTube custom video thumbnail is H: 190mm x W: 338mm

(You can work out any pixels to mm dimensions using an online converter: I used this one for the above.)

Once you've created blank slides in a variety of useful sizes, save them to use as a template more quickly in the future.

2) You can install fantastic typography

As anyone who has attended my presentation skills training will attest, I'm always banging on about how Typography is a hugely underrated part of design. Fonts matter a lot, and can make the difference between something looking and the same thing looking really professional.

As always, I'd highly reccomend fontsquirrel as a souce of fantastic (and free to use) fonts - and see the previous post for more info on font-pairings.

Click to go to the font-pairing post

3) It's easy to manipulate images in useful ways

You can find the ideal image from a CC0 site like Pexels, and make it easier to use - to layer text on top of, for example - using PPTs editing tools. They're nowhere near as sophisticated as those in Photoshop, but it's still really useful. Particularly darkening images using the Brightness slider so that white text clearly shows up on it, or blurring images. Both of these techniques are explained in more detail here.

You can also Crop images to specific shapes, circles for example, which can help with really striking design.

4) You can follow the basic principles of good design, and that's more important than the tool

I've found that I really like design without truly understanding it like a proper designer would, but certain rules apply across the board and help me with whatever I'm doing:

1. Images AS the background most often works better than images against a background (unless you're using icons).
2. Space is good. Leave space.
3. No more than three fonts per design. And use fonts that help you communicate your message - or, to use a phrase I'm not altogether comfortable with for some reason, but it seems to apply here: use fonts intentionally.
4. The most important thing about text is legibility. Make sure text is large, and the contrast is high between the text and the background.
5. Left-align text unless there's a specific reason to Centre-align it (or very occasionally right-align or justify).
6. Avoid orphan or widow words. Just stretch your text box a little more, or narrow it, so words aren't left on a line of their own. Canva's helpful design rules also have this to say on line length:

5) Save slides as images

You can save your PowerPoint as a PPTX to come back to the design later, but you can also save a slide as an image, or a whole bunch of slides as seperate images.

When you go to Save As, choose JPEG or PNG from the drop-down menu - it will then give you the choice of saving just the slide you're on at the moment as an image, or to create a folder into which it will save all the slides in the presentation as individual images.

Saving slides as JPEGs

And finally, while we're on the Save As function, here's a brief guide to which format to save regular presentations in depending on your situation...

Creating images with copy-space for text

This post originally appeared on the Lib-Innovation blog.

As always things have changed in my library over the summer, and we needed some new images to reflect our reconfigured rooms, new signage and new services. We're very fortunate to have easy access to the University photographer Paul Sheilds, who is based in our Morrell Library building, so we booked a morning with him.

We had very specific needs in mind, based on a list we'd drawn up to suit what I wanted for our Induction Project, what my Academic Liaison colleague David Brown wanted for the new LibGuides and what the Comms Team needed. In particular I was really keen to get photos with copy-space.

Copy-space literally means a space to write 'copy' in the newspaper meaning of the word - in other words an area of the image which is less busy and which could be written upon without obscuring a key part of the picture.

In essence I wanted to be able to write directly onto the images (for use in slides, posters, digital screens and social media) without having either a separate area for text, or a back-filled text box - because I think it looks smarter that way and because it allows the images to be full screen at all times. It's a lot easier to do this when the images are captured with that in mind from the outset.

Here are some examples - these are works-in-progress that I'm playing around with for the forthcoming #UoYTips Induction campaign for 2016/17 at my institution. They won't look exactly like this in the final versions but the copy-text principle will remain.

We have borrowable laptops which I wanted to showcase. I've added a piece of text to the copy-space:

Here's an example of an image of the same lockers which is a great pic but which doesn't have copy-space built in (making it a little less flexible to work with in marketing):

It would be possible to write on this of course, but you'd need to manipulate the image to ensure the text was legible, or used a back-filled text box.

Next up is a picture of the copy-print-scan machines - the copy-space in this case being the underside of the lid. I did experiment with having the text at an angle to match it but it looked a little clunky so I went with good old fashioned horizontal text for this one...

Here's a picture of a student - by not putting her centre of the frame (and by conforming to the rule of thirds) we've made space for the text.

Finally here's an example where despite leaving copy-space the background is too busy to write directly onto - the text wouldn't be clear enough. There's a neat divide where the wall ends, so I've inserted a shape over everything to the left of the wall, to make the copy-space more clearly defined. I did this in PowerPoint - inserting the rectangle, filling it black, then making the fill 19% transparent. The white text is clearly visible against it, and the focus of the image (the walls you can write on) is still clear and uncluttered.

Type Genius: the joys of font-pairing

Tweet

I'm a little bit obsessed with nice fonts - I love how they can impact on design and help tell your story. An aspect of design which is often undervalued is the combinations of fonts: pairing up fonts (or sometimes mixing groups of three fonts, ideally not more than three in one design) for posters, or social media campaigns, or PowerPoint presentations.

I've just found a great site called Type Genius that helps out with choosing fonts, more on which below.

Here are four font combinations I like, three of which I've used, and all the fonts for which can be downloaded individually from Fontsquirrel:

BEBAS NUEUE AND MONTSERRAT

The first combination is what is used for the blog and much of the rest of site. The blog title is Bebas Nueue and the body text is Monstserrat. (Whenever I use Heading 2 in the formatting that's also Montserrat, but in all-caps - the Heading 3 used in this post os back to Bebas Nueue again). I chose them mainly because when I rejigged the design of the site recently I wanted a thicker body text font, so chose Montserrat which I've been using since I saw Matthew Reidsma use it for his UXLibs I keynote. Bebas compliments it for titles because it a tall and narrow font in contrast with Montserrat being thick and more rounded.

LATO AND ROBOTO SLAB

The second combination I've not used at the time of writing, but got from Type Genius - which you can find at typegenius.com. You tell it what font you want to use, and it gives you a number of potential companions to pair with it (as it happens when you put in Montserrat it suggests Bebas Nueue, as used on this site).

In the case of Lato and Roboto Slab, I've actually not used the Regular Lato in the example above at all - I used Lato Thin for the first part and Lato Heavy for 'titles'. I do like the contrast of light and heavy.

RALEWAY AND... RALEWAY

Which brings us to the third combination, which isn't technically a pair as it's just Raleway used in three different ways. I love Raleway beyond all other fonts. As long as you have both Raleway Regular and Raleway Bold installed (although PowerPoint will try and Bold non-standard fonts when you highlight them and click the Bold button, it's not the same as actually installing the Bold version that the typographers intended) they work so beautifully together, especially in all caps. The intro to UX presentation I blogged about recently used Raleway in all possible combinations (Regular and Bold in both lower and upper case) with no other fonts involved:

What is UX and how can it help your organisation? from Ned Potter

The other joy of Raleway is it renders perfectly on Slideshare. Some other fonts, even when you save and upload your presentations as a PDF, go a bit blocky on Slideshare, for example my LIANZA Marketing Manifesto slides, which use Raleway along with ChunkFive Roman - the latter looked great at the conference but not so good on Slideshare, but Raleway was perfect in both situations.

MATHLETE BULKY AND CAVIAR DREAMS

I used this combination for my Tuning Out The White Noise presentation which became the most popular thing I've ever put on Slideshare (despite Mathlete Bulky not rendering properely on the site) and I use it in some of my training materials, so I've become slightly bored with it due to over-exposure! I also over-used Mathlete and have since changed it round so it gets much less use in my slides, because it's a little too quirky for any kind of long-term reading. I like the way it looks but usability has to come first.

Further reading

For more info and guidance on font-pairing, check out this article from CreativeBloq, and Canva's Ultimate Guide to font-pairing.

If you have a particular pairing you'd recommend I'd love to hear it in a comment below.