Screenr

Ever wanted to show someone (or multiple people) how to use a website or piece of software but didn’t have time to visit them? Screenr is an easy way to create 5 minute recordings of your computer screen and voice. It works by using your web browser and optional microphone without having to install additional software.

Chalkmark

Chalkmark is an online prototype testing tool created by Optimal Workshop, the same folks that brought you Optimal Sort, the online card sort. This tool allows you to test the response time and efficacy of design prototypes, saving you time, money and (possibly) sanity.

10 Tools to Improve Your Site’s Usability on a Low Budget

Although this article isn’t necessarily new, it’s certainly timely, as budgets have continued to shrink and offices are expected to do more with less. Early usability testing prevents wasted efforts later and this collection of inexpensive tools should help.

Color Blender

Having trouble coming up with a web site color scheme? Plug in two colors and let Color Blender create transitions between the two.

If you’ve run across a great article that you think would be helpful to the rest of us, don’t be shy! Post a comment or send an email to our office e-mail account.

10 Examples of Beautiful CSS Typography and How They Did It

The title says it all. This article includes the key CSS that makes the typographical magic happen.

How to Create a Valid Non-Javascript Lightbox

You see lightboxes and modal windows everywhere and most are created in javascript, but not this one. Jenna Smith has developed a lightbox that only uses valid XHTML and CSS. Yahtzee, folks!

Usability Testing Demystified

Author and usability guru Dana Chisnell has fashioned a terrific article in “A List Apart” meant to take away the fear people have over doing usability testing.

Sprite Me

A great way of increasing page load speed is by reducing HTTP requests by using CSS sprites. SpriteMe.org has created a web application that scans a web page and combines all CSS background images into one large optimized image.

We’re interested in your recommendations as well, so if you have links that you’d like to share with the rest of us, post a comment or send an email to our office e-mail account.

Card Sorting: Pushing Users Beyond Terminology Matches

Here’s the summary as it appears at the top of the article: “It’s easy to bias study participants, whether in user testing or in card sorting, if they focus on matching stimulus words instead of working on the underlying problem.”

Doctype

A free question-and-answer site for web designers that will allow them to find solutions to their problems.

Twitter Postings: Interative Design

“Summary: We made a timeline message more punchy, credible, and viral through 5 rounds of redesign.”

10 User Interface Design Fundamentals

As @davemcfarland wrote, “Nice, short list of user interface design basics.” Couldn’t agree more!

Ten reasons to learn and use web standards

Like we said on Twitter, an oldie, but a goodie.

250+ Resources to Help You Become a CSS Expert

A great list to check out if you’re really dedicated to becoming a CSS know-it-all.

6 Ways To Improve Your Web Typography

Let’s face it, you can never read too much about typography on the web! You would be surprised how much the right font can spice up a web site.

25 Classic Fonts That Will Last a Whole Design Career

While we’re on that previous note, check out this piece on classic, durable fonts.

Web citizens trying to kill Internet Explorer 6

Former UF Webmaster Mark Trammell was quote in this article about a campaign against IE6.

An Overview of The CSS Summit

If you didn’t get a chance to attend The CSS Summit, catch up with our overview of it here.

Jobs @ Web Administration

UF Web Admin is hiring! Right now, we’re looking for an OPS Web Designer and a student OPS Web Designer. Feel free to pass along the info if you know someone who’s interested.

Card sorting is a usability testing method in which names of items are placed on index cards and participants are asked to organize those cards into similar piles. In an open card sort, the participants come up with names for the piles they create. This process is repeated multiple times and the cards are then analyzed for grouping patterns among the participants. Card sorting is helpful in organizing all kinds of things, including the information architecture of a website and the collection of information on an individual page.

Instead of actually writing on index cards, we turned to WebSort.net, an online application that works similarly to the analog card sort but allows the participant to drag cards into piles. It also does some of the grouping analysis.

Here are some of the interesting things we learned about this round of card sorting:

Things we liked:

• Participants have opinions! After the online sort, participants had the option of leaving comments about their experience. One of the things we discovered was that we had goofed on a few of the card labels.
• Using an online tool made it very easy for people to participate. Now, instead of having to have a facilitator set up an appointment and go through a testing procedure, the participant could process the card sort at his or her leisure.
• WebSort.net’s analysis tools were very helpful. It was easy to pull out a biased participant out of the group and rerun the analysis, for instance.

Things to fix the next time:

• We should have been clear that we were not asking the participants to create site navigation. We indicated that we were using this information in order to redo the site and many were thinking of the items in terms of where they should go within a site structure, with some even noting that they were frustrated that they could change the order of items.
• Some of the best information one can gain from usability testing comes from observing and listening to the participants, which we missed by using the online application. We did get some great comments from people, but often you learn things from watching the participants move cards and make comments about the sort activity. Had we tested in person, we would have learned very quickly which cards had confusing labels, instead of having to wait for one of them to comment at the end of the online sort.

If you are interested in doing your own card sorts, there are some fantastic resources available. The book listed is available for checkout from us here at Web Administration.

• Online
  • Card Sorting: A Definitive Guide by Donna Spencer
  • Perform Card Sorting
• Book
  • Card Sorting: Designing Usable Categories

The webinar focused on doing stripped down usability tests that provide much of the same helpful information as a fully developed usability test. There were some terrific takeaways, including:

• Opportunities for testing are everywhere. If your tests are informal, the locations can also be informal. Dana mentioned places such as coffee shops, cafeterias and airplanes as great places to administer testing.
• Participants are plentiful. Dana mentioned several examples of people that you can recruit as participants and places to find them - coworkers, friends & family, online social networks, the list goes on.
• Use what you have. If you only have time for testing one or two tasks, that’s fine. As long as the tests are organized well, they can be effective.
• Planning is important.  You should know what and why you are testing and what you will do with the findings. The more specific the planning, the more effective your test will be.

We have presentation slides and a webinar recording (WMV) available for those interested in getting more information. Try some tests out for yourself and let us know how they turn out!

This webinar will be held on June 3rd, from 1 to 3pm at the CITT classroom and requires an RSVP, as we have limited seating.

This webinar features Dana Chisnell, a respected expert in the field of usability testing and research, as she informs and instructs on how to create your own “quick, easy and insightful” tests. Given that site usability testing has been approved by the Institutional Review Board, this webinar comes at just the right time!

If you cannot attend the CITT in person, the webinar is still available to you at a very reasonable price - only $75 dollars. Visit the usability webinar website for more information.

Guerilla testing is a method of usability testing that uses materials you have available to you to conduct a quick, yet effective, test. This method shows that not only could usability testing be done without tight controls, but that a quick and dirty test is better than no test at all.

In working at an educational institution, I’ve seen questions crop up about the Institutional Review Board and whether those trying to test the usability of their sites are always required to submit to them a test proposal for review and approval. The process creates a hurdle for people attempting to conduct guerrilla user tests.

I decided to get to the bottom of the IRB issue by contacting Dr. Ira Fischler, chair of the IRB committee. Here’s what he had to say:

“No need for IRB review, because this is not “human research” in the regulatory sense (designed to contribute to generalized knowledge) but program evaluation / quality assurance (peer review isn’t part of the decision tree).”

In short, usability testing of web sites is not part of academic peer review, so IRB approval isn’t needed.  This is great news for those who were eager to begin testing but were daunted by a lengthy committee approval process.

Dave Stanton, a professor from the College of Journalism, was the first to present and he focused on how his 3-year-old daughter interacts with different interfaces and how it helps him understand how to design usable and intuitive interfaces.

Prentiss Ladkani from the College of Education followed with a presentation on search engine optimization at UF, cleverly disguised by her title “Why doesn’t my site show up on UF Google Search?” Prentiss did a fantastic job of teaching the group how search engines work and how building better web pages using appropriate HTML coding produces better search results.

Web Admin’s Joe Spooner taught us about site analytics and how to interpret (or how not to misinterpret) the information from server logs and tools such as Google Analytics.

Finally, Carl Smith from nGen Works dazzled us with his top 10 list of usability mistakes that web managers can’t afford to make. Carl did the heavy lifting of going through the exhaustive Usability.gov “Research-Based Web Design & Usability Guidelines” and focused on the most strongly supported ones.

Throughout the presentations, we had great questions from attendees in person and on the web, thanks in part to our Twitter backchannel conversation.

Overall, attendees seemed to agree the event was a success. Not only did we get high marks for overall satisfaction, but everyone felt the conference helped make you better at your job.

The entire conference is available on the Spring of Web site, if anyone is interested in reviewing either the terrific content or my horrible cowlick.

Bargain Basement Usability Testing

If you think user testing is time consuming and expensive, ThinkVitamin.com will change your mind with their article on cheap, effective testing, allowing you to get back to designing for your audience.

9 Common Usability Mistakes in Web Design

Once again, Smashing Magazine has posted a gem. This article points out common design mistakes that create obstacles for your users.

SpoolCast: Web Form Design with Luke Wroblewski

If you have forms on your site and wish you knew how to make them easier to use, then visit Jared Spool’s site and listen to his interview with Luke Wroblewski, author of “Web Form Design” — a book that teaches you how to improve the most interactive parts of your site.

If you’ve come across any links from March, let us know. We would love to share them!

It took a while for me to transcribe it, but I finally finished it. Since the interview was so long, I picked out some of the highlights and organized them here:

On Creativity

Q: What sites do you look at for inspiration? What’s the top hit in your Google Reader, or whatever you use?
CL: Well, let’s say I needed to research flowers or something. I just kind of type things into Google, or I’ll go through pictures on Flickr, or I’ll go through my own photo stash. If I were doing a project with flowers, I would just surround myself with paper printouts or photos or create a Photoshop file and just collect them all and just take an overview.

I just put myself into the subject — let’s say it’s a gardening site. So I just research the tools that they would use or things that they would plant, and I just start collecting. Just make a very crazy collage of whatever it is you’re designing. It’s a lot easier to live and breathe it when you’re surrounding yourself with it. I have a collection folders of with pictures for each project.

I just did that for the See Jane Fly Web site. I asked her what her likes and dislikes were. I just started looking up travel photos and the feelings she was trying to convey and I just built upon that.

Q: Do you find time for a personal creative outlet away from what you do for work? Is it very similar to what you do?
CL: I like to take lots of pictures. I like to draw, but I haven’t been, so part of January is me working on this children’s book i’ve been wanting to do for a while. I try. It’s really hard because I like having money to pay rent. I’m just fortunate enough that there are enough geeky events that I can go to, like randomly the Adobe Illustrator meetup was the week before Adobe Max. I love what I do, but I do get tired.

Working with Others

Q: (In regard to your) contract offers, are they just with you or do you work in a team?
CL: Lately, it’s just been me. The contract with Yahoo! was obviously just specifically me. Before I was actually partnering with some of the guys who had an agency. I’ve gotten some projects where they needed a designer, and I was available. For the vast majority, I try to build a little mini-brand of myself that they actually ask for. I get some requests every now and then, which is nice. I pitch myself as, you know, I draw cute. So don’t ask me for a Goth character because I’m not the one to do it.

Q: How do you work with other designers? How do you [handle] the workflow … between designers?
CL: AOL and Yahoo! kind of have predefined roles: visual design and user interface design. In the current position I was in at Yahoo! [I noticed] project managers make lots of comments to designers like, “Hey, why don’t we throw this up over here?” But that doesn’t follow what I’m supposed to do for Luke’s group. Luke’s got his set of rules and I do my best to follow them. So I reference those as the documentation, and I kind of rope them back in.

I’ve been on projects where there are three or four designers and we pitch the same project, like branding, and we do more of a mood board and then business owner or whoever is in charge of the project decides.

Q: Do you pitch that as a team? Or as individuals with different concepts?
CL: As a team. So they’re not biased to which designer it is, instead they just look at the project. So whatever you have, you just put it all up in the room and then one person discusses them. That way, there’s no bias. It’s just focused on the work. Just pick the best presenter.

Q: Do you travel a lot?
CL: Well, Scrapblog was in Miami, so I went there a couple times. I live in San Francisco. Matt — my boyfriend Matt — he lives in England, so I go over there.

It’s kind of cool. There’s this thing in California called Super Happy Dev House, where a bunch of developers and designers just meet at some person who’s gracious enough to allow strangers into their house for a couple days, and they just work on their random projects. So the Brits thought it would be really funny to call it Super Evil Dev Fort, so about 12 of us rented a fort over in the British Channel Islands and we worked in a real fort. It was really cool.

Q: Canon balls and everything?
CL: Yes. So we worked on our projects and there was no Internet, so you’re wondering, “How am I going to do without Internet?” It was actually better because no one was checking Flickr, no one was checking Facebook, no one was checking anything. And we worked on our projects and the guys would go scrape data and we would just work. Work and eat, that’s pretty much it — and hanging out. So, it’s possible to work on things without the Internet.

Q: (Do you use instant messenger with coworkers?)
CL: I’ve done that. I have a couple friends where we have an understanding of what we’re doing. So [we'll say,] “Hey, I’m stuck.” They either have their own agencies or they’re just an independent designer. We’ve have these conversations like, “Hey, take a look at this is it OK?”

I have been known to use Flickr and upload my comps and set it on private and give a guest pass to my client so they can see it and comment right there.

When I was working at Yahoo!, all the designers sat together. I’ve been in situations where it’s one designer and all developers around you. So, it just depends on how the company is organized. It’s been really nice because at Yahoo! there were about 15 in the group and two developers were in the aisle by themselves. They had two remote people and one was a developer in Portland and the other was a designer in Vancouver. It was just nice. I sat next to a more user interface designer, and so when I would get stuck I would [say,] “Hey, take a look at this.”

That’s one of the things Luke has been trying to do. Luke Wroblewski just came out with a book this year about forms and it was a really good book. He worked at Ebay and he went through a sort-of a critique of all the terrible forms out there and what practices to do. It’s a really good book. I use it more as a reference for when I get stuck.

For his group, he was trying a patterns library that they’re trying to implement within Yahoo! So, [that includes] things like standard messaging when you need a confirmation. Yahoo! is so big that any chance you get to standardize something, it will actually be implemented in tons and tons of different areas. That’s one of his goals as the manager. It goes down to check boxes, search buttons; there’s a universal header that you have to use and how you’re supposed to work it into correct designs. So it’s like, the more information you can share between each other [even little bits that you learn.

At Work

Q: How do you balance a desire to be creative with deadlines?
CL: Well, my last project was for Yahoo! and it was Buzz.yahoo.com it’s Digg’s competitor. It’s Yahoo’s version of it. Their audience is completely different than Digg’s, you know, it’s conservative, middle-class America. They’re way more conservative than I ever thought they would be. The progress was do in incremental changes and we have user testing to make sure we are on the right track.

Our project was set up to have a two-week sprint. It is called agile development. We have milestones to complete in two weeks and then set up new ones in the next round. We have daily standup meetings where you say, “I’m working on this. Yesterday I did this.” It is short daily status reports, so we have the front end and the backend development in the same room. It’s much easier than all of us sending e-mails back and forth to each other, like, “Hey, I need so-and-so on this.” It’s nice to have everyone there in one place.

Q: Now, one of the things that comes up repeatedly in our UFCM Web meetings is orange and blue. We have deans and supervisors who don’t like orange and blue. So, how do you deal with a stakeholder trying to steer you off of the established branding?
CL: You remind them what of the established branding, you show them documentation of what the established branding is (as politely as possible).

I worked on a style guide project at AOL and it was big enough where we all worked on our separate little channels, like health, fitness and whatnot. And each of these individual channels had their own color scheme, but then AOL hired this outside agency it was like DNC or something in New York. They got the new AOL branding and they had this whole style guide of color palates and stuff in it. And to actually police the amount of all the different designers working on it to follow suit was not fun, so you try your best to keep them on it.

So like, I realize your personal preference may not be the orange and blue, but the university’s color palate is within this and I’m just doing my job as a designer to follow these rules. If I break them, then it opens Pandora’s Box for everyone else to do the same.

Q: A problem we run into in the university is that there’s a difference between a policy and a recommendation.
CL: Well, if you guys band together, and you create it, then no one can touch it. You never wait until the meeting. You try and pull them aside.

A tactic that I’ve tried many times before is like, “Hey, let’s go grab coffee” and you take them out of the room and you take them and just kind of have a conversation where you’re more on the same level. Because once you’re in the meeting room, it gets very confrontational. So if you try the coffee tactic, or lunch, you end up kind of being buddy-buddies and they become much more receptive to whatever you have to hear, especially when they’re not hungry.

Q: (Could you tell us about your planning process?)
CL: Oh! That’s right. I didn’t actually answer his full question.

So different projects. There was this one that we just worked on with some friends and we actually made personas for each person we thought could use the site, like we listed what their interests were, what their goals were and their age bracket — it got fairly detailed. So, you try to get the goals of the user — the users’ stories.

With the Yahoo! stuff, we got like tools that had demographics and who uses it and how many clicks we get. At Yahoo, they started this thing called Vitality, which is every time you click on a Buzz button, we know you did it. If you comment, we know. You can however opt out with the privacy setting. There was also testing involved..

We slated for 10 users to come and test out the product. Unfortunately sometimes things happen with people who sign up, sometimes they aren’t the right fit for the testing and you find that they barely know how to use a computer. Strange, I know, but it happens.

Another possibility is that people get sick, or life just gets in the way. We ended up with less than we hoped for but we used the data from about six or seven people. We did three different mockups to see what their goals were.

We tried to see if they noticed anything that changed. There are plenty of tools out there like Silverback app that Clearleft came out with. I think it’s like $30 and you can test it. It records your user on video and sees what they’re looking at and you can use the data that way.

You don’t even have to do it that complicated, I’ve done it with people where you just have four different printouts and it’s totally on the fly. You don’t even have to make them work. You can ask them very specific questions and do it for each of them and just write down and record the whole conversation and you can look back on it.

Q: What would you take from that?
CL: Just kind of average out the responses. You know, if they even notice what you’re trying to put in front of them, if it matters to them — because, you know, what matters to us and what matters to them is completely different sometimes. It’s really quite astounding because, you know, you’re in it saying, “Yeah, they’re totally going to get this one feature,” and they have no idea what you’re talking about so it doesn’t matter.
(EDITOR’S NOTE: UF Web Admin has information on user testing and how to conduct paper prototyping, including a video from the Nielsen Group).

Go Gators!

Q: Would you say UF networking pays off?
CL: The UF networking paid off as soon as I graduated. I took off the day after graduation and I asked my professor, Brian Slawson, if he know of any alumni in the Atlanta area, and he gave me a list. I showed my portfolio to every single person that let me through the door. I spoke to many agencies that didn’t have positions open but used those conversations to network myself eventually into a job. I could have given the portfolio presentation in my sleep at that point.

In the end, I got a job at NetChannel, and it was because a former UF that I had spoken to called me once they did have a position open. They weren’t looking for someone at the time I met up with them, but then a couple months later, they were. So they called me back, and that’s why I ended up getting that job. AOL bought NetChannel about six months after.