Web Design

The Creative Group

by David Lee King on September 20, 2011

Creative Group

The Creative Group

In my last blog post, I mentioned my library’s Creative Group. What is that, exactly?

My library decided that Public Relations and the web team did a lot of similar things, and needed to work together. PR routinely creates print ads, newsletters, posters, banners, and PR campaigns. The web team does much the same thing, just online. Why not collaborate up-front, so the message online and in-print is the same?

And hey – while we’re at it … both teams are highly creative. What’s not to like about schmushing two creative teams together into the same physical space, to see what happens?

So we stuck both teams into the same work space. We also started holding regular weekly meetings. So every week, our three PR staff, two web developers, me, our Programs Supervisor, our Digital Content Librarian (new position that’s part of Public Services), the Deputy Director, and sometimes our library director meet. Anyone else in the library is invited, too.

What do we do? We talk about projects. Last week, we talked about our Personalized Reading List service – we’re reworking the form and the page the form lives on. The staffer in charge of that service and the Public Services Manager came for that part of the meeting. We also talked about creating some database widgets (did you know database vendors like Gale and EbscoHost have widgets now? Who knew?), guest posts for book reviews, and a new blog we’re creating.

So what do you think? Is it helpful for PR and the Web team to meet regularly? It’s sure been helpful for us!

And – boring pic by me, using my Instagr.am account. Follow me at davidleeking on instagr.am if you’re interested!

Tagged as: , , , , , ,

6 comments

Copying Other Websites During a Redesign

by David Lee King on September 16, 2011

During my library’s last website redesign, we went through quite a few design iterations, and we still weren’t happy. Two people in our Creative Group team (more on that in the next post) … ok, our head of marketing and the deputy director … kept sending us website examples they liked. Sites like shoe stores or clothing shops. Yes, they were beautiful websites, and nicely designed. But they weren’t really all that similar to a library website.

One big difference – these attractive websites did one thing well – they sold shoes or clothes. They didn’t have any catalog to speak of. The websites were full of single pages that pointed to single items.

But a library website has at least two basic needs – a site that talks about the library, and shares useful stuff. And we have a library catalog. So it didn’t really make much sense to me to base our library website design around a site that only does half of what we do.

So I started poking around, looking for websites that focus on two things:

  1. stuff, like a storefront.
  2. a “catalog” of some sort.

Amazon and Zappos? Pretty much all catalog. News sites? Pretty much large multi-blog sites – focusing on stuff. Then it dawned on me – library websites are like Apple. Apple essentially has two separate websites – the main site that focuses on their stuff, and their “catalog” – their online store.

We based our redesign around Apple, in these ways:

  • Top horizontal navigation with drop down menus. We also found some “nav bar inspiration” at NPR’s website.
  • Focusing on a single large ad, then a couple of smaller ones, then more detailed content below that – based on many of Apple’s pages. This directs customers to a few things that you REALLY WANT THEM TO DO, while still having easy access to everything else.
  • A prominent link to the store. That’s where you’d click “Find Stuff” to get to our three catalogs (catalog, digital downloads catalog, and DVD dispenser catalog).

So far, it’s working out great – few complaints, lots of compliments. Our public trainers have told us they cut down training on how to use our website from an hour to 10-15 minutes. Fingers crossed that it stays that way for a while!

Tagged as: , , , , , ,

1 comment

Three Questions every webpage should answer – conclusion

by David Lee King on August 29, 2011

Last week, I focused on three questions every webpage should answer. The questions were:

  1. What can I do here?
  2. What should I do next?
  3. Why should I care?
And now, I have a question for you. Are there other questions a website or an individual webpage should answer?
Said another way, what do your website visitors need to know … at a glance? And what’s the best way to provide this info?
Discuss in the comments please – thanks!

Tagged as: , , , , ,

5 comments

Three Questions every webpage should answer, #3: Why should I care?

by David Lee King on August 26, 2011

Why Should I Care?

One more question every webpage should answer – #3: “Why should I care?”

This one comes from my library’s Executive Director, Gina Millsap. Another way to ask this question is “Why would I want to do that?” or “What’s in it for me?”

This is where your PR, marketing and promotion skills come into play. Why? Because you need to sell your content to your customers.

Selling? I hate selling – I’m a librarian, for peet’s sake!

Yep – I get that. But just putting information about something up on a website doesn’t mean people will attend that event, read that blog post, or check out that book. Sometimes we need to go a bit further, and work on convincing our customers to take those next actions I talked about in my last post.

The goal on a website is to move people from point A to point B – from reading a book review to actually checking out the book, for example. This isn’t selling as in “smarmy used-car salesman” selling … but it IS a form of selling, and a good organization learns to do this – on posters, in person, and even on our websites.

Answering “why” can be as simple as a brief explanation on why something is useful. For example – why should I apply for a library card? Because you get to read all your favorite books, and check out movies … for free! And you have already paid for it anyway (via taxes).

Look around your website, and see if you are answering the “why should I care” question. If not – rework your content so this question is answered up-front and often.

Tagged as: , , , , ,

1 comment

Three Questions Every Webpage Should Answer, #2: What do I do Next?

by David Lee King on August 24, 2011

What do I do next?A couple days ago, we looked at the 1st question every webpage should answer: What can I do here? Today, let’s look at the 2nd question I think every webpage needs to answer: What do I do next?

This question is #2 for a reason. Question #1, What can I do here?, is pretty important – that’s the main focus of the page, after all. But once your webpage visitor has done that thing – read that article or filled in that form – they need to know what they can do next? Good webpages direct those next actions.

Here are some examples:

  • When you have finished reading this blog post, you’ll get a list of related blog posts at the end of the article. Those suggestions (created via a WordPress widget) are next actions.
  • In my library’s catalog (catalog.tscpl.org), if you do a search and don’t find anything, you get an Ask a Librarian chat button (assuming we’re open). “Need help? Click the Ask Us button to chat” is a next action.
  • Amazon is the King of Next Actions – each page is full of the “main event” – buying the book. But there are other, alternative next actions there, too – like adding more books to your order.
Take a look at your website, and see if individual pages answer the question “What do I do next?” If not, you are missing out on an easy way to point your customers to your great content, and to keep them on your site longer.

Tagged as: , , ,

1 comment

Three Questions every webpage should answer, #1: What can I do here?

by David Lee King on August 22, 2011

Question #1Ever visited a webpage, then looked around, wondering “what can I do here?”

If you have … that web designer failed!

I think every webpage should answer the question “what can I do here?” either visually, or by spelling it out:

  • Visually: design in such a way that the stuff you can do on a page, like clicking a button, filling in a text box, or even just reading or watching content, is extremely noticeable. Amazon does this by using complimentary colors that “pop” out on the page. They often use blue as a header or sidebar color, but the buttons they really want you to see (ie, the “buy now” button) are orange – a complimentary color.
  • Spelling it out: Use words, colors, graphics, etc to “spell it out” for people – tell or show website visitors what to do on the page. For example, we try to do this at my library’s website. The main page directs people to “Get a Library Card,” “Donate Now,” “Find Stuff,” “Ask a Librarian,” or Subscribe to our blog posts. People know what to do on our site, because we direct them.

On your library’s website, do people know “What can I do here” when they visit the main page? How about the catalog page, the “you didn’t find anything” page, or on your blog? At the comment box? On your Facebook Page even?

Think about it … and make sure to answer the question “What can I do here?”

Tagged as: , , , , , ,

2 comments

Is the Web Modern Yet?

by David Lee King on August 16, 2011

Today’s web is the “modern web” – css, HTML5 coming soon, websites designed with grids, lots of functionality. Yes-sirree, this is the modern web.

Just like this was a modern car:

This “modern car” could’t move fast enough for today’s modern highways (top speeds of 40-45 mph), wasn’t automatic, and didn’t have a/c, radio, or an iPod hookup. Or windows, for that matter. But I’m guessing that to the buyer back then, it was a pretty modern car, and a major change for them. They had to figure out the details of the change – i.e., what should we do with Bessie the horse? Where do we park it? Where do we get gas? How do we maintain it?

My point? That’s where the web is today – roughly 20 years after the first web page went online, we have today’s “modern” web. It certainly looks pretty modern to us, much like those cars from 1927 probably looked to the buyer.

Guess what? Much like that Model T … I don’t think we’re done yet. With websites or with libraries.

Car photo from Wikipedia

Tagged as: , , , ,

1 comment

Check out builtwith.com

by David Lee King on June 23, 2011

Mark this down as a cool tool for your website-building toolkit…

Ever wondered what CMS or web server a certain website was using? Wonder no more! Simply enter the URL of that interesting site into builtwith.com and voila! – this site will tell you all that geeky stuff!

For example, look at their CMS page. For the top million websites that BuiltWith tracks, they find that 62.87% of websites use WordPress, 14.77% use DotNetNuke, 10.25% use Joomla, and 3.40% use Drupal. Then when you move to their Top 10,000 sites graph, those percentages change quite a bit.

Or look at the Top Payment Distribution Services – look at the top 10,000 sites graph. % us Paypal (duh), 35.94% use CCBill, 10.94% use Google Checkout, then Flattr, Mollie, and Amazon Payment Services are there, too. CCBill, Flattr, and Mollie? Never heard of them.

So – use it to check out your website against others, use it as a discovery tool to learn about new services. Pretty handy!

Swiss Army knife by AJC1

Tagged as: , , ,

3 comments

Creative Briefs for the Website

by David Lee King on June 21, 2011

Our Marketing department frequently uses a Creative Brief to plan the marketing and promotion process for events, services, and other stuff the library does.

Marketing and our web team meet weekly, and are part of a team we call our Creative Group (we’re big on team-based planning at the library).

So when we started redesigning our website, our friends in marketing suggested we use Creative Briefs to figure out some goals for the website, and the idea worked wonderfully.

Here’s what we did: we looked at every major section of the website – areas like About Us, Blogs, or Research – and went through our creative brief planning process for each.

We focused on these areas:

  • Purpose – what’s the purpose of this section of the website? For example, one purpose of the Research section is to connect customers to our databases.
  • Goals – slightly different and more specific than Purpose. Here, we set goals, like “We want a 20% increase in database usage in 2 years.” Or for our About Us section, it might be something like “we want fewer calls asking for our phone numbers” (since we now list out everyone’s phone number).
  • Primary Audience – Who’s the target audience? We try to choose 2-3 targets, usually based on market segments from a GIS study we’ve done (with help from Civic Technologies). This could also just be simple targets, like “the Kids pages focus on kids 8-12 years old.” This way, you can then focus the design and content on that target group.
  • Why Viewers use section – answer this question for the target audience – “Why would I want to go there?” For example, for the research section, the answer probably isn’t “because I want to find EbscoHost.” That answer focuses on the library. Answer this question by putting yourself into your customers’ heads. Do that, and the answers, more likely, resemble these: “I need to do research for my paper” or even better, “I want to get an A in History” or “I want to increase sales in my business for next year.” Then focus your design so those types of questions can be answered.
  • Tasks section accomplishes – This one is a bit more library-centric. What can you do here? List it out, then design those tasks to be as easy as using a light switch.
  • Content Requirements – What content do you need for this section? This isn’t a list of tasks – instead, it might include directions, explanations, links to more information, etc. You should also include any graphics needed here, too – graphics should support the content, and help make the main content easier to use.
  • Functionality Requirements – All the web stuff goes here – i.e., for a blog, you should list things like RSS and email subscription functionality. For the kids site, maybe you want things to move around on the page – list those ideas here. Basically, anything your web wizard needs to build.

Going though this process was great – it gave us some goals to shoot for on each section of the website, and helped make our redesign efforts more focused.

Here are a couple of articles with more info on creative briefs:

Anyone else use this or similar tools? Tell us what you do in the comments!

photo by insomnia

Tagged as: , , ,

4 comments

iPads, iPhones, and Flash

by David Lee King on June 13, 2011

I have an iPhone. I also have an iPad2. And apparently, I don’t have Flash.

I say “apparently” … because I haven’t really missed it. Sure, there’s been a couple of times that I’ve run into the “you need to install flash to view this” message – usually on a poorly-designed website that I tried to get to from a link in an article I was reading.

But have I missed Flash? No, not really. Most of my browsing activity comes from reading RSS feeds, which I get just fine. Most of my video viewing comes via Youtube, which I also get just fine.

If I need to test something from my library’s website, our library catalog, or our databases, I get those just fine too. No Flash required.

How about you? Do you find yourself missing Flash? Is it a problem? If so, how come? Please share!

Tagged as: , , ,

15 comments

← Previous Entries

Next Entries →