All about SVG (+ a quick how-to on using SVG with WordPress)

I’ve recently started working with a lot of SVG files in my personal website, and I’m excited to use the format in projects with clients, too. Here you can find a quick overview of SVG: what it is (and what vector graphics in general are), when to use it, and how to use it with WordPress.

Skill level for this article

This is intended to be a very basic guide for those completely new to SVG. If you don’t know or aren’t sure what vector graphics are, this is probably a good starting point for you.

If you’re looking for more advanced articles on SVG usage, I recommend Sara Soueidan’s articles on SVG as an excellent starting point to really delving into the capabilities of SVG.

What is SVG?

SVG stands for Scalable Vector Graphics. We’re talking about vector graphics here, versus raster graphics (JPG and PNG are examples of raster graphics). Let’s step back a second and look at the difference between vector and raster graphics.

Continue reading “All about SVG (+ a quick how-to on using SVG with WordPress)”

Dec/Jan site redesign, SVGs, speed optimization, & more

At the end of 2015, I started designing the newest version of my online portfolio. During this redesign, I focused a lot of my time getting accustomed to using Inkscape — an open-source vector graphics editor (and a good free alternative to Adobe Illustrator).

I haven’t been disappointed with Inkscape. It has a pretty normal learning curve for a graphics editor, in my opinion, with an understandable interface and manuals and other resources available when needed. I found that I was able to figure out the basics for the most part, and anything more complex or confusing was usually solvable with a quick Google search.

After becoming comfortable with Inkscape, I was ready to create SVG files. The benefits of SVG or other vector graphic options over raster images (like PNG and JPG) are already well-known, but just in case: SVG stands for Scalable Vector Graphic, and they do just that — they are vector graphics that scale. What that means is that SVGs preserve shape(s) and pixel quality when being resized, which is great for things like logos, icons, and the type of illustrations I created for this project. (SVGs are not so useful when it comes to photographs or images with a lot of textures and gradients.)

SVG beats PNG in terms of file size, too. I found (at least in this project) that all of my SVG files were noticeably smaller than saving the same image as a PNG. And once I enabled SVGZ (a compressed version of SVG), I was able to save on even more weight.

The weight of the page was another major focus in this redesign project. I used Google’s speed developer tool — PageSpeed Insights — to check the performance of the finished project, and followed (many of) the suggestions in areas needing improvement.

I say that I followed “many of” the suggestions — the main suggestion that I’ve yet to implement is the optimization of PNG images. That’s because, for the most part, all of the PNGs on the current version of the site should only be loading as fallbacks — in case a browser doesn’t or can’t load the corresponding SVG.

Besides researching these tools and resources, I also spent a good amount of time simply… creating the design. Throughout the design process, I knew that I wanted the finished product to be:

  1. Clean, crisp, & flat – I like sites that are clean and simple while still interesting, preferably with flat design elements and a modern color scheme.
  2. Illustrated and presented in a way that features my graphic design work as well as my code – Previous versions of my portfolio haven’t really incorporated much of my graphic design and illustration work, but I always knew that once I had time I would really like to make a new version that did. I built the header design around the idea of a shelf, with various items (books, tea mug, snow globe, etc.) collected on it. This is my portfolio site, so I wanted it to have some fun/whimsy added in to distinguish it and really make it mine.
  3. Supplemented with unique icons – I really like Fontawesome, but I decided that this time I wanted to create my own graphics that could (I hope) represent recognizable scenes and ideas, while also adding that personal feel.
  4. Responsive – Of course, I knew the site would be responsive, and this was a working foundation throughout my design process. The header image, I decided early on, would scale with the screen size (hooray for SVGs!) and work as a horizontal separator above the main page content. And as the main body of the pages developed, I knew it would start out as a single column on mobile devices and smaller screen sizes, expanding into the two-column layout seen in the Photoshop mockup image featured in this post.
  5. Accessible – Accessibility was pretty easy to work into this project. I tried to keep an eye out for color combinations that were not only aesthetically pleasing, but also legible. And, as per usual, I’ve performed keyboard-only navigation tests which have been successful in my findings.

Some WordPress updates

My WordPress theme, Heidi, has been approved by the Theme Review team, and is now available for download from the WP theme directory! The theme review process was pretty straightforward; the longest part was waiting for reviewers to be available to look at the theme. My theme was reviewed by two individuals, and each supplied some minor changes to make in the code. There was no request to change any of the aesthetics of the theme, and overall I found the process simple enough.

I’ve also updated the theme of this blog (previously running the pre-release version of Heidi). While the rest of the site is my own static HTML & CSS design, this blog is running a WordPress theme designed/coded by me that now fits in seamlessly with the other pages.

Following the success of my first public WordPress theme, I hope to have the opportunity to design some more themes for submission to the WP directory!

Library UX Audit

The following is a mock UX audit exploring the ways User Experience can be applied to libraries. Originally created as classwork for the University of Illinois LIS program.

Dear Library Director,

We’re excited that you’re interested in conducting a user experience audit at your organization! We’re happy to present you with this preliminary plan in improving your user experience.

Why UX Matters

  • User experience is everywhere. From the physical layout of a store to the friendliness (or lack of friendliness) of a checkout clerk, there are multiple aspects of a business or organization that determine our experience as users of that particular institution.
  • Good user experience is so simple it can be hard to spot. This is especially true if you aren’t looking for it — and that’s what we’re here to help you start doing. As casual users, it’s easy to appreciate positive user experiences without recognizing them for being that. We appreciate effortless interactions, and part of the UX audit of your library will involve seeing just what makes an interaction effortless and pain-free.
  • User experience is about seeing your users as people. We think this is the most simple thing it comes down to — and the most important. When you start looking at the people who are coming into your library and really understanding how they function, you can start to provide tailored, personable services that will be beneficial to everyone involved.

Getting Started

Who’s involved: Everyone

If you have the staff and resources to create a department/task force devoted solely to monitoring and improving your library’s UX, great! But we know not everyone has that luxury. That’s okay, too; providing the best user experience possible is something that all members of your organization can and should have a part in.

We think that one of the best ways to start getting all staff members involved is by promoting discussion about what user experience is and why it matters. Here are some talking points that we suggest covering with your staff:

  • What are some examples of positive vs. negative user experiences you’ve had in the past?
  • What made these experiences either positive or negative?
  • What examples can we think where our patrons might have had a negative user experience at the library? A positive one?

Research and Evaluation

The real heart of improving user experience involves two things: understanding what experience you’re currently providing, and figuring out ways to build upon or alter that current experience. We believe that this requires a strong foundation in research. Without first understanding the needs of your users, designing a product or service for those users will prove to be a frustrating experience for everyone involved!

Here are some more traditional methods of collecting research that are worth considering.

  • Surveys: Directly asking your users questions to find out their patterns of use, their perceptions of the library, and some of their opinions about aspects of the library can be useful to find out what patrons are thinking.
  • Community demographics: Knowing the numbers and statistics of your community will help you form at least a preliminary idea of who you’re serving.

These can be useful starting points, but we really want to emphasize some other research methods for you to consider. It’s also important to note that without evaluating your research, it more than likely means very little. That’s where you and your UX team step in — as the researchers involved in your library, you can and should be evaluating along the way to figure out what your findings really mean for the current state of your organization, as well as looking at ways to make improvements.

Who are our users?

  • Personas: Personas are a great way to take some information you might already have from demographics, and put it together in a way that puts a face to the numbers — literally.

What is our content? How are we representing ourselves?

  • Content Audit: Keeping inventory of your content can be a daunting task, but the rewards are often invaluable. This is more than just looking at what books you have in your stacks — think more along the lines of intangible content, like website pages or staff files on a shared computer drive.
  • Customer Journey Map: These maps are visual representations of how your patrons physically move through the library and interact with different parts of the library (known as “touchpoints”). Like content audits, they’re a great way to re-structure how you visualize and think of your own library space.

How are our services/products being used?

  • In-depth analyses of your services and products: From the library website to the public catalog to the physical layout of your computer lab or stacks, it’s important to assess and really evaluate what you currently have, and why you have it the way that it is.
  • Usability Testing: Building on your initial assessments, usability testing is a great way to see how people actually use those services and products. Surveys are great to get an idea of how people think they use a product, but you’ll find that usability testing will often illuminate patterns of use beyond what a survey might suggest.

What changes can/should we make?

  • Service Safari: Service safaris are a great way to get some input about user experience while also having a coffee break! Take your UX team and visit another organization or business, while taking note of all the things that contribute to your overall experience, for good and bad. Once you’re back at the library, you can evaluate your observations together as a team — and see what this might suggest for you as librarians and library staff.
  • Contextual Inquiry: Like the service safari, contextual inquiries involve a lot of observation. But this time you and your UX team are purely in that observational role; set up somewhere in your own library, and spend some time just watching how patrons use the space and the touchpoints within that space. Have everyone compile a list of their own observations, and then meet back together as a staff to really evaluate and delve into what you saw, and what it means or suggests for your library.

Summary

We believe that providing optimal user experience is about moving beyond traditional (though often still valuable) methods of research to looking at the personal, community-based needs of your library. We hope this helps you get started, and look forward to working with you to implement some of these UX methods and more!

Thoughts on improving library UX

Originally written as classwork for the University of Illinois LIS program.

Think about the statistics — circulation, reference questions, program attendance — that your library records and reports. Which, if any, report on user experience?

The library I have the most experience working at is the Ricker Library of Architecture and Art at the University of Illinois. While we do report statistics like circulation, reference questions, and library attendance, the librarians working here also seem to recognize that these sort of stats are not the only thing that matter in measuring the success of the library.

What could your library be recording and reporting that are indicators of user experience?

I think libraries in general need a better focus on questions like the 5 Whys that Aaron recently posted. We should be looking less at how many people are coming through the library and more at how they’re experiencing the library, and why. This will open up new ideas about how we can remodel things, like the physical space of the library, to optimize our patrons’ experiences.

The good news is that the new head librarian that started at Ricker a few months ago seems really interested in improving these sorts of things. She’s taken a real initiative to look at the structure of how the library is currently working, and a lot of that includes simply observing — being out in the library at different times of the day and week just to observe what areas and practices could possibly be re-thought.

She also asks a lot of the current staff members (including myself and the other grad assistants), why things are currently being done the way they are, which I think is so crucial for libraries to do. Especially in a scenario where certain practices have been set up for many years, it’s easy to fall into patterns that are explained as “that’s just the way we’ve always done it.” I think libraries need to be working to continually improve themselves, and that includes constant questioning and examining of our procedures and how they are (or aren’t) improving the experience of those using and working at the library.

What are some steps libraries can take to transition from using circulation statistics to using other, perhaps more engaging, methods of reporting what they do?

I think it’s hard to distill user experience down into the sort of quantitative statistics that stakeholders are often very interested in. I completely agree that we need to be moving beyond the current model, to a new one that emphasizes different aspects of value. I think that will require a shift towards perhaps more time-consuming, but hopefully more illuminating and encompassing models of qualitative research and reporting, incorporating many of the practices we’ve looked at in this class.

Ultimately, I think we need to get stakeholders interested in the human value of libraries rather than data and statistics that is purely about numbers. We need stakeholders interested in the quality of the services that the library offers, rather than solely the quantity of people served.

Reflect on the mission of libraries, and how that should impact the future of libraries.

The mission of most libraries, to me, is to provide a space — physical and otherwise — that fosters interactive (whether it be with other people or with the resources we have to offer) learning and experiences for a community. Measuring the quality and success of learning and experiences is inherently more multifaceted than looking at only quantitative statistics, so I think we need to focus on incorporating qualitative methods of evaluation in order to guarantee that we’re measuring the success of libraries on more than circulation stats and headcounts.