On Web Usability

by Kristen Abell

Lately, I’ve been digging into the book Don’t Make Me Think by Steve Krug (if you’re tempted to read it, I’m going to suggest you read his updated version – we just had this one at work, so that’s what I’m reading). I often talk with my clients about the end user experience on a website – something we all too often forget to consider when we’re planning a redesign or new website. We think about how we want it to function without thought for how the end user will want it to function. This book is a great reminder that the end user is always who we should be thinking of when planning. A few takeaways from this book:

  • Usability testing – Do it and do it often. This is usually the first step to get cut from our website development process, but after reading this book, I know I’ll fight harder to keep it a part of the process in the future. It usually doesn’t take much time, and we always learn something from it – even if it’s that there is no “typical” user. I especially loved the idea Krug presented about pre-testing – having users test websites you’re looking at for inspiration to see what works and what doesn’t.
  • Accessibility – Do it because it’s the right thing. To be fair, I’ve been trying to work on accessibility on most of my sites for awhile now, but I’ll be the first to admit that I’ve been doing the minimum. This book makes me want to do more than that. I suspect I’ll be digging into some reads and training on accessibility next so I can take this further on my sites.
  • Good design does not always equal good usability – Not that I didn’t sorta already know this, but this clarified it a bit better for me. For example, one of the current trends in design is to make links as unobtrusive as possible. However, that means that a user has to work harder to find these links – which means they are more likely to get frustrated. Even looking at my personal blog, I’m frustrated by the fact that the links are barely noticeable compared to the regular text (will be making changes there soon). This means that when we’re designing websites, we may have to compromise on our aesthetic to make a site more user-friendly.

After reading this book, I’m looking forward to digging into Krug’s other book – Rocket Surgery Made Easy which delves a little deeper into usability, as well as putting some of his thoughts and approaches into practice.

What are your usability tips and tricks? How do you approach usability when building a new site?

Advertisements
On Web Usability

When Did August Get Here?

by Kristen Abell

Hello and welcome back to another academic year of blogging by the fine folks at Student Affairs Women Talk Tech. I think we have all been enjoying our blog vacation, and we are ready to be back and writing scintillating posts for your reading pleasure. We recognize that summer is a good down time for many student affairs professionals, and August for many of us is, well, August.

As for myself, I am in the middle of my second year of my current position as a web developer for student affairs and the university, and I’m still getting used to the fact that my schedule looks quite a bit different from your average student affairs practitioner. Think about it – how many of you wait until the students are gone to turn attention to your websites? I know at my institution that is certainly a trend, and it has resulted in quite a few projects cropping up at the beginning of the summer and winter breaks, as well as at spring break. This means that when many of my student affairs colleagues are enjoying some downtime, I’m deep in the throes of a number of projects. Try adjusting to that after 15+ years on a student affairs schedule!

But this also begs the question why we only think of our websites when the students are gone. As I’m sure I’ve argued before, we need to make websites more of a priority in our offices and make sure they are up-to-date and well-maintained. This is often the front door to our office as far as students are concerned (not to mention other staff, faculty and parents). We should take the same care with our websites that we do in making sure our front desks are staffed with trained individuals and kept neat and orderly.

As I have visited different universities, I have found that one of the main things we need to shift when we are strategizing about our websites and our social media for our offices is our overall approach. These can no longer be those things that we do as we have time. These need to be priorities, and they need to be addressed on a regular basis – whether the students are gone or not.

How often do you update your website? When is the last time you got a new look for your website or refreshed your content? I’m curious to hear how other institutions handle their web presence.

When Did August Get Here?

Making a Site Map for Your Website

by Kristen Abell

One of the things I do in my current role as a web coordinator at our university is information architecture. In layperson’s terms, this means I organize content for websites in a way that makes the website user-friendly. This also means I create site maps for the sites on which I’m working. Many of these sites have probably never had a site map created for them before. Others have had site maps at one time, but have stepped so far off the map, they don’t even look like the same site. It’s my job to whip them back into some semblance of an organized site before we go about designing them a new look and building the site out for them.

Why would you even want to create a site map in the first place? Well, what you may not realize as an administrator of a website (or even just a member of a department with a website) is that site content really fuels the user experience. Sure, look and branding is important, but even that is driven by the content. And if your content sucks or is poorly organized, no one is going to want to return to your site. Think about those sites you’ve visited that take forever for you to find the one thing for which you’re looking, or within which you get so lost you can’t find your way out. Those sites probably didn’t have good site maps.

The key to building a good site map is primarily being able to put your content into buckets. Try to organize your content into as few buckets as possible, while still making sure that the buckets make sense and aren’t too vague. Yes, there’s a bit of an art to it, but with practice it is one you can master. Think about how your navigation is going to look and feel – will a user have to scan through tons of navigation items to find the one thing they want? Or are the buckets so very broad that their particular topic could be in any one of several different navigation items? And remember, not every single thing about your department must be on your website – a website should work with the face-to-face and print aspects of your office to provide an overall message to your students or customers.

After you start organizing your content, it can be helpful to see a visual map. Site Map

There are plenty of tools online that will help you create a visual site map, but one of the easiest tools I’ve found to use is actually Power Point (yes, there is actually a use for Power Point in today’s world!). Check out the “hierarchy” tab under “smart art,” and you can easily create a site map complete with pages and connections. In the site map above, there are actually two external pages/sites that will be linked to from the main page, and then there are seven main pages off the home page. Depending on how large your site is, you may be able to organize the site with just one site map, or you may need to use multiple maps to fully encompass the site.

Even if you are not currently undergoing a website revision, I can’t recommend creating a site map for your website enough – both for you and for colleagues in your department now or in the future. This can also help your site from growing into a monster site at some point (you know the ones – someone figured out how to add web pages, and they never looked back). By sticking to the core buckets, your department can continue to build onto your site in a way that is user-friendly and maintains the vision of your department.

Does your department currently have a site map? Do you have other tools you recommend for building a visual display?

Making a Site Map for Your Website

Linkage Love: Web Development

by Kristen Abell

Since I started developing websites as my full-time job this last January, I have gotten to be friendly with quite a few different tools and sites on the interwebs as resources for me while I’m still learning all about web development (aside: I’m pretty sure there is no way to know all about web development – just a never ending learning process. I sort-of love this about my job). For those of you that also develop websites or who dabble from time to time – or even for those who want to learn more – I thought I’d share a few of my favorites so far.

Codecademy – This was possibly the single most helpful tool I used in learning about CSS and HTML when I first started. If you are wanting to learn more – or if you’re just wanting a refresher – I cannot recommend this enough. I have also used this in training others on website editing around the university. This is definitely one of my favorites.

A List Apart – This blog has all sorts of tips and tricks for developers and designers. These bloggers tend to be on the cutting edge of trends and more than willing to share whatever they’re learning with the rest of us humble developers. One of my favorite things about this blog is all the information they share about responsive design. As it still tends to be few and far between elsewhere, this is like an oasis in a web development desert for responsive design.

CodePen – Admittedly, I haven’t used this one as much as I should. This is a great tool for figuring out bits and pieces of CSS for your websites. Or, as my fellow web developer here says, it’s extremely effective at making you feel inadequate as a coder – seeing what others can do with CSS is both extraordinarily cool and horribly daunting. But there’s no time like the present to learn, right?

Codrops – This is another site I’m just familiarizing myself with, but it looks to have some great resources for website developers on it, including some stellar blueprints for different website tools and some ideas for tackling some of the more difficult challenges in web design. I can’t wait to play with it more.

What web development/design sites are you using? Please share!

 

Linkage Love: Web Development

Higher Ed Websites: a Work in Progress

By Kathryn Magura

As I sat down to write this post tonight, I felt uninspired for a topic. I asked Twitter if anyone had a suggestion, but came up empty handed (to be fair, I had only given people about 30 minutes to respond). I then decided to check the #sachat hashtag to see what the Student Affairs community on Twitter had been talking about today. Perhaps I could find inspiration there? Sure enough, I came across this tweet from Erica Thompson that got my attention:

[blackbirdpie url=”https://twitter.com/EricaKThompson/status/341757292775104512″%5D

 

Before I get into discussing my thoughts on websites in higher ed, a disclaimer: I am not responsible for my departmental website. I do not get to say what goes where, or edit the content. That said, I am part of a team that continually revises our website, and am responsible for the customer experience our current and future residents have via our website. I’m also a big fan of social media, and helped get our department started on Facebook and Twitter years ago. What does this mean? While, I do not have the web development or programming background to make a quality website, I DO have strong thoughts on how a website should be organized. Basically, when I don’t like something on our website, I’m that pain in the ass who will continue to talk about it until something changes. 😉

I have spent a lot of time looking at higher ed websites. If I have a job interview, I like to research the website for the office and see what information is available to me. I have also done quite a bit of research for the work I do with my national association in terms of benchmarking best practices based on what I can find on other university websites. So when I say this, know that it comes from a lot of experience. For the most part, I find most higher ed websites I encounter to be difficult to navigate and unintuitive. Basically, they suck. Sorry, it’s the truth. Why can’t I find things like a staff list or departmental policies easily? Why can’t I figure out what your department does when I go to your website? Isn’t that sort of the point?

One thing I stress with our web management team is to continually look at our website through the eyes of our customers. Can a student find everything they need to know to make an informed decision about the services we offer? Can a parent find who to contact about a specific concern? Why do we in essence “bury the lead” so often? In my experience, most higher ed websites are organized in ways that align with various departmental desires and goals, not for easy navigation by a customer. Does the content on your website help a customer (yes, students are customers, that was the topic of another post) get the information they need without having to call or email you? Does your website look like a boring link farm of over-saturated information? Do YOU know how to find information on your website without using the search tool?

So here’s my challenge to you: I would love to see examples of higher ed websites you perceive are doing things well. What do you like about their site? Let’s share examples of best practices with each other so we can help each other improve for the better.

 

Higher Ed Websites: a Work in Progress

Women in Tech Profile: Alia Herrman

by Kristen Abell

One of the beautiful things about this series of posts is the fact that we can highlight women that don’t always get the spotlight – whether on our campuses or beyond. Today I hope to do just that in highlighting our web manager at the University of Missouri-Kansas City, Alia Herrman.

I first met Alia back when I started at UMKC in 2007, and she was a graphic designer for our University Communications division working with the Women’s Center on our marketing. Since then, she has acquired all the skills necessary to be a pretty kick-ass webmaster (or mistress or, as I like to think of it, Web Wonder Woman – WWW), no small feat. Alia is my go-to whenever I have any question about websites, and she has yet to fail me in answering them.

I often say that there are two paths to becoming a WWW – either from the field of design or from the IT side. To be fair, these days there are those that come straight up the middle as web designers, but they haven’t quite taken over the field yet. One of the benefits of coming from the design side is an eye for usability – if a site is simple and looks good, it is often easy to use. I think this is a particular skill of Alia’s, as she frequently keeps in mind the needs of the user when designing or working with sites at our university. She has taken us through one progression of the website, and I anticipate she’ll see AT LEAST one more in her time here.

In addition to the challenges of mastering the web, Alia has taken the time to train a number of our other graphic designers to work with web designs. She also serves as a resource to those of us still tinkering with websites throughout the university. She leads our “web liaisons” team on campus to make sure all of our websites stay consistent with standards, and she finds ways to train and develop other WWWs (and WWMs) across campus to hone their skills with web design and maintenance.

In addition to her work as a Web Wonder Woman, Alia also enjoys gaming and is known (by me, at least) to be pretty wicked awesome.

Who are some of the unsung women in tech on your campus?

Women in Tech Profile: Alia Herrman

Linkage Love (Late)

by Kristen Abell

University Websites Venn
from xkcd – http://xkcd.com/773/

Tis the season in our division to start re-designing websites. And since I generally play an integral part in this process, I’ve been brushing up on my website standards (okay, not really – I pretty much have what I look for in a good website design memorized at this point, but it makes for a better post if I’ve been “brushing up.” Or something.), and I thought I’d share some great resources with other folks looking at web design – either from the design point of view or the client point of view.

And let’s just be clear – if you have a crappy website as a client, it’s as much your fault as it is your designer. Know what you want/need, and make sure you get it. No one blames the web designer (except maybe you).

So, to start, here’s a brief list of ten standards to abide by when re-designing a website. No, copy would not be number one on my list, but it is important. Usability might be one of the top things I can recommend when looking at a website design. Too many people try to use all the bells and whistles or focus on design only. Let me break it down for you – if a student can’t use your website, it doesn’t matter what cool tools you have or how pretty it is – it’s just a bad website at that point.

And speaking of usability, here’s a list of accessibility guidelines for websites that defines some best practices when designing them.

For those who are web designers or will regularly be working on websites, I’m loving the site for A List Apart – lots of great resources and sections on everything from code to usability, from design and content to mobile applications. Seriously good stuff here, people.

If you’re brand new to website design, or websites in general, give Code Academy a try – it’s a fun, interactive way to learn coding. You’ll be learning code before you know it – I promise!

And finally, it can be hard to know what’s good without understanding what a bad page looks like. For this, I highly recommend a gander around Web Pages That Suck – where there is so much suck, I don’t even know where to start. Except with what I think might possibly be the worst web page of all time. I cannot guarantee you’ll ever want to open your eyes again after looking at this site. You have been warned.

So what web design resources do you use when designing or working on websites?

Linkage Love (Late)