5 UX insights for library web-design

For the last few months I’ve been leading a project to completely redo my library’s website from scratch. It has been full-on, and rewarding, and most importantly the new site is live as of midday today.

I’ll post about the project process later, but for now I want to focus on what the UX fieldwork with our users told us, as these insights will hopefully be useful for anyone redesigning their org’s website.

I’d love you to go to york.ac.uk/library (opens in a new window) and take a look, then come back here and tell me what you think!

This post focuses on the organisation of the site; part 2 will be on the content.

Use colour with intention

As you can imagine, we’re working within the limits of the University CMS (Content Management System) and don’t have a lot of control over colours - most of the content types are white, but several can be set to cream, teal or dark blue. I must admit when I first started designing the pages, I just used colour to mix things up a bit and add some visual interest - a strip of colour here, a nice accent there. But the users told us in the UX sessions that they wanted the colours to mean something - they expected consistency across the pages (for example opening times always one colour, as shown below; quotes from students always another colour) and in particular they wanted the darker colours to signify something especially significant - a call to action, or really essential information.

The teal strip showing opening hours. The fact the Help Desk opening hours are on there too, and the fact that the Easter vacation is explicitly mentioned even though the hours aren’t changed, are both as a direct result of student suggestions during the UX.

Topic based organisation beats audience based navigation

A perennial debate for designing anything for users, websites included, is: do we organise things by theme, or by who is accessing information? Do we say ‘PGs go here, UGs go here’ or do we talk about space on one page, resources on another?

In a literature review carried out at the start of the project, my colleague Alice Bennett wrote, on the topic of a particular study finding topic-based organisation to be significantly preferable: “This is potentially a more inclusive approach, as it better allows for intersectional user identities and better accommodates search behaviour, with users typically searching for specific information, rather than looking to find themselves in the menu.”

This was really borne out by the UX. I asked one distance-learner where all the distance-learning information should sit in the new structure. They said “I wouldn't separate it. Because you don't like to treat yourself as a second class [citizen] and just look for, okay, where is the info for the distant learner people?” And to Alice’s point about intersectionality, we also had an International Students guide - many of our distance learners are also international students, so where do they look? And of course the contents were extremely similar. In the end we have a nice ‘basic introduction to the library essentials’ page which is for everyone: universal design wins again.

Your users will tell you which compromises are worth making

Compromise is inevitable in this sort of process - library websites have too much complex information and too many responsibilities to our users to just make a super slick, neat website. The top-level navigation is one of the biggest changes between the old site and the new - the old site had about 15 overlapping ways in to the info down the left of the screen; the new one has just six top-level landing pages.

The top-level navigation of the new site

We thought loooong and hard about how to group the information - we spent weeks planning this before we even had access to the CMS. But still we changed it during the UX process, because our users told us the compromise we’d made wasn’t the right one.

Our info for Researchers was split across the Skills & Training page you see listed above, and a Facilities page. The Facilities page has loads of useful info, but no flow and no cohesion - and more importantly when we spoke to Researchers in the fieldwork we set them tasks to find Open Access info, and they couldn’t do it. The split of info which had internal logic for us simply didn’t make sense for the user, and they couldn’t get to what they needed.

So we now have Research and Digital Creativity. This too is a compromise because that pairing isn’t as natural as the others (skills & training, for example) but those are two important aspects of the library offer that are really easy to find, so it’s a better way to go.

KnowING it’s important to invert the pyramid isn’t enough!

We all know about inverting the pyramid, right? I talk about it all the time. But knowing how important it is and ruthlessly acting on it turned out to be two different things… Even when I actively tried to do it with the website, I wasn’t doing it enough. One participant in the UX literally said ‘this page is upside down’… It’s so tempting to try and set the scene and lead people through the information, but they just want the important stuff at the top and that’s what we should be doing.

So: invert the pyramid, and invert it hard. (And then come back later and check it’s still fully inverted.)

Pictures have more than cosmetic valuE

“I’m never going to read that.” This a common refrain from students when faced with dense, lengthy text. We tried to simplify and reduce where possible, but sometimes in libraries there just IS detail - so breaking that up with images really helps. It’s not just that the images can help illustrate what you’re talking about, it’s that they make the user more likely to read even long passages of text because it’s broken up into chunks. It makes it manageable.

We also made sure to use the same image for thumbnail links to pages, as you find at the top of the pages themselves when you click the links. This reassures the user that they’ve clicked the right thing, and creates a sense of familiarity which helps make the info less intimidating.

---

A part 2 post detailing what the users told us about the Content of the site will be coming soon!

Squarespace: A comprehensive review of the website building platform

Tweet

If you listen to any podcasts at all, you'll have heard of Squarespace.com - they seem to sponsor every single one. If you don't do podcasts and you're not familiar with them, Squarespace offer a complete website publishing package: you build it using attractive templates, they host it, and you pay them an annual fee.

After mulling it over for ages, and building a mock site using their free-trial, I eventually made the switch from my old wordpress.org site to this new squarespace.com site in August, and overall I'm very glad I did. So, for those I've spoken to online and in person who are wondering about making the switch, here's a (fairly long and comprehensive!) review of Squarespace.

The Design

One of the big reasons I switched to Squarespace was their designs. Their sites are above all clean - I find them engaging to look at and interact with. I spend most of my working life on the internet so I do appreciate when a site looks nice and is easy to use. Squarespace designs make great use of images and the full width of the screen. They allow you to highlight key information - your website may contain a lot but you can still direct people primarily to just a little of it, allowing those who want to go deeper easily to do so.

Squarespace uses a template system, but in the best possible use of the word 'template' - loads of different ways to present information which are easy to customise and make your own. At the time of writing there are 32 templates to choose from - here's a selection:

Click the pic to go to Squarespace's templates page

For each template there are a number of example websites (from actual Squarespace users) so you can see how they work in the real world. I chose 'Bedford' for this site because I liked the large image at the top of the page (if you're reading this blogpost on its own direct URL you won't be able to see this - have a look at the blog homepage in a new window, or the Past Talks page for example, to see how the site normally looks with a featured image)  and because I could see examples of the Blogging side of it working well; Squarespace is NOT primarily a blogging platform, so I needed to know I could still have columns, subscription options, and other things which a totally minimalist design might get rid of in the name of style over substance.

Essentially there are templates which allow you to present most types of information engagingly. Some are very commerce orientated, some are detailed, some are extremely sparse, some are designed to work as an online CV or portfolio. They all look lovely (and can all be completely changed as part of the customisation process anyhow) so you can choose one to suit the type of content you wish to have on your site.

There's no comparison between the way my old site looked and the new one looks. One is dated and the other is fresh. In fairness that's partly because I designed my old site myself using my limited html skills - there are plenty of Wordpress themes which look a lot more contemporary and usable (albeit, in my opinion, not on the same level as the Squarespace designs).

Mobile Ready and Responsive

The other key thing about the design is they're all Responsive Design sites. This means they recalibrate their content to suit whatever size of screen you look at them on. This is much, much better than an Adaptive Design site (which basically means having a mobile-friendly version and a desktop friendly version) in a number of ways, but primarily 1) you don't lose any content like you do with Adaptive; it's just rearranged to suit the screen, 2) it looks brilliant and works well on any device and 3) you don't have to limit the width of the screen because it responds to any width of screen, meaning it makes the most of widescreens. (My previous site was 1000px across, meaning anyone looking on a wider screen than that just saw wasted white space either side of the content.)

We all know being mobile-ready is essential these days. So far since August a bit over 3,200 people have visited this site on their mobile devices, which is relatively small as a proportion of the total visitors, but nevertheless I'm glad each one (hopefully) found it a useable experience.

Building the Site

Building the site is done via Squarespace's drag and drop content system. Once you get the hang of it it is much easier to use than any other system I've come across. I can write code but it takes me ages and I can't do anything flash with it, and Blogger and Wordpress simply don't the flexibility and power of the Squarespace engine.

Here's what this part of the blog post looks like in edit view, when I go to add a new piece of content. The things I use all the time from the Basic section are Text and Image (obviously), and I use Quote on the Training pages. From the More section I use the Code section to embed presentations, Storifys etc (it seems to work better than the Embed tool, for me) and the Spacer tool which basically allows you to arrange elements of your site precisely where you want them, for example by filling up the left hand side of the screen with a Spacer so your content appears on the right. There are more features you can't see in the screengrab, some of which I used in the building of the site but don't have cause to come back to when writing posts like this one. Squarespace provides clear instructions and some nicely illustrative videos that explain how it all works.

As well as types of content and tool, there are overall Page types. Clearly this section is on the 'Blog' type, but I use the regular 'Page' for most of the rest of the site. For the Upcoming Events page I use the 'Events' page type, which is terrifically useful; it makes it very easy to create actually useable events pages which have timings, maps and so on built in. Although I don't have use for the 'Gallery' page type it's also very nice and works really well.

As you can see in the screenshot above, my site is visible in the background in edit mode. This is because there is one interface which does both Content and Style - you edit the site as it appears to viewers rather than in a separate edit view with a preview mode. What You See is very literally What You Get.

The Bottom Line

Squarespace costs money and, as previously discussed in various posts on this site, it is perfectly possible to create an excellent blog or full website for free.

At the time of writing there are three Squarespace plans: Personal, Professional and Business. Rather than list the differences here's a screengrab:

Click to go to Squarespace's Pricing page

I've got the Professional package - the dollar per month pricing works out as about £120 per year (billed annually), although I got 10% off by using an offer code from a podcast. Listen to any episode of Football Weekly, WTF, This American Life, I'd Hit That (for the drummers!), Freakonomics, Serial - basically any popular podcast - and you'll hear an ad with an offer code you can use to get the saving.

The reason I went for this plan rather than Personal is the unlimited bandwidth. Bandwidth stresses me out because you can't really control how much of it you use - there are things you can do to influence it but ultimately it comes down to how many people visit your site. Every time someone views a webpage it uses up bandwidth. I've had to spend extra money before to get extra bandwidth allowance on the old site, so I wanted an entirely hassle-free experience where I know I'll never need to change my current package - 500gig may well have been enough, but I prefer not having to think about it. (More on understand bandwidth requirements here.)

So £108 each year with the discount, or £55ish if you go for the Personal spec. Is it worth spending that kind of money on a website? Clearly the answer will vary depending on what you use your website for and how important it is to what you do.

I used to spend around £60 per year on hosting for my wordpress.org website, so Squarespace is more of a cost - I decided it was worth the extra cost for me because of the simplicity of the way it works, and the ease of maintenance / lack of upkeep, and because it looks a lot better. I also, quite honestly, wanted an excuse and the motivation to completely redo my website - next year I'm part-time in my main job so I can do more training for organisations, so as this website acts as a sort of HQ for my freelance work I figured it was worth the investment.

The other reason I think it's worth the money to me is that I think it's extraordinary that you can have a fully hosted, fully responsive to mobiles, fully SEO optimised, contemporary looking website for this amount of money. The amount of time it would take me to make something like this from scratch I can't even imagine - weeks and weeks. I think for what it is, it represents great value. Imagine how much you'd have to spend to build, or have built for you, a website like a Squarespace site even just two years ago! An absolute fortune by comparison. A feel bad for web developers.

Finally, a brief summary of the good and the bad of the platform.

Cons

So what are the downsides of Squarespace? Here's my take:

• It's a relatively new company, so who knows what its long term future is? (Squarespace has actually been around since 2004, but only in its current form and with its current high level of popularity and use since 2012.) Wordpress, which I used previously, had been around for a long term and was sustained by input from the developer community as well as its own employees. It's free and open-source. There's every reason to expect it to be here and usable for a long time. We just don't know enough about Squarespace to be able to say it'll be around for a long time - and it's a for-profit company which means it could go bankrupt. So there's a risk.
• It's a relatively new company so they change stuff all the time - features you like may disappear. In the short time I've been using it they migrated to Squarespace 7, an all new version which, as described in the Building the Site part above, essentially allows you to design your site without using a separate edit interface. This is great for site design but once your site is up and running and you're no longer tweaking it, I actually find it gets in the way somewhat. Also since I've been using it they've got rid of the option to add an image via a Flickr URL - you now have to save the image to your PC and upload it. It's a minor inconvenience but it's a feature I used to use but can't anymore - there may be more of those to come...
• It represents great value for money - for now. By which I mean, if Squarespace turn around and hike my yearly payment by 100% next time around, what do I do? I can export all my data of course, and build a new site on another platform using all the words and images from this one, but that would be a LOT of hassle. So I'm relying on them not getting evil and greedy.
• It's not a blogging platform. Blogging still a central part of what my site is for but it's not the be all and end all like it used to be, so this isn't so much of an issue for me. But not being a dedicated blogging platform, Squarespace does lack features which wordpress.org had that made life easier - more details statistics, useful plugins and so on.

The top statistics are from Squarespace (which sadly doesn't provide 'All Time' stats so this is just for the last month); as you can see, search engines not nearly as important as they were in the Wordpress days, which are the lower stats.

One final thing is that I was unable to switch over without losing some SEO. This almost certainly isn't Squarespace's fault (it is, after all, 'SEO optmized'), but rather due to changing my site's URL to something brand new at the same time. I used to get at least 300 people a day finding my site via Google etc even if I didn't post anything - that no longer happens, and I effectively have to generate traffic myself via Twitter or it's a much smaller figure. (I am trying not to be sad about this! Changing to a proper URL was still worth it, I think.) I've put redirects on but that doesn't seem to have counted for that much - however as I say I think it's probably something which would have happened whether I'd switched to Squarespace or not. I just can't be 100% sure because I don't know enough about this sort of thing.

Weirdly the number 1 source of traffic for the new site is 'Direct' which presumably means people typing the URL directly into thier browsers - I'm baffled by this and can't help thinking something has got lost in translation between what's actually happening and how Squarespace is rendering the statistics.

Pros

• Everything is included. For me the main pro is that using Squarespace makes things simple and unambiguous. I have the editor, the published site, the custom URL, the hosting, the unlimited bandwidth (and also unlimited storage and unlimited pages) and the ability to do other stuff I don't currently need to like add Podcasting or Commerce options - this is all in the same package, with no ambiguity or add-ons. I like this a lot.
• It looks great: contemporary and nice to use. The interface is easy to work with and I love the way the website looks on all devices. The content is engaging and usable. Should I tire of this design I can just choose one of the other 32 templates and it'll completely rejig my site in one fell swoop.
• It is amazing value for money. As I mentioned above, the idea a few years ago that you could get basically any kind of website you wanted, beautifully rendered, for just over a hundred quid a year, would have been bonkers.
• The Support is very good. Squarespace are based on New York and Dublin and that's where their support teams are too. They get back to request for help within a couple of hours, they know what they're doing, they speak perfect English... All that stuff helps. Also the developer community are great - they helped me with the fact that wordpress.org uses a different style of URL to Squarespace, so all my URLs have to be redone individually for the old thewikiman links to work, and they wrote some easily editable java script which allows me to have the feature images take up the exact proportion of the screen I want them to (by default in this template they took up too much of the vertical space, and when I tested my proto-site on my wife she said people might not even realise you can scroll down to find more content) - whatever you need to do the chances are someone on there knows how to do it...
• It's constantly evolving: I mentioned this as a con above, but it can be a pro too - they've added loads of new templates just in the time I've been using Squarespace, so you can always stay ahead of the web-design curve.

So that's the end of a pretty epic-length post by my standards. If you have experience with Squarespace (good or bad!) or have any questions about it from a user's point of view please leave a comment. If you fancy trying it out, sign up for the free trial and play around - it's not one of those free trials where you give your credit card details and it automatically starts unless you cancel it, so there's no harm in giving it a look. And if you build your own Squarespace site, let me know!