Entries Tagged as “usability”
Showcase of Beautifully Designed Mystery Meat Navigation
I was looking at one of those design showcase sites today, and was surprised to see such a strong resurgence in mystery meat navigation. So I thought I would throw out my own showcase of beautifully designed websites with mystery meat navigation.
Bert Timmermans
Cavica
Got Milk?
Hull Digital – (recently updated to include text)
Harry Ford
Square Girl
The Box
→ Respond NowTags: General · Inspiration · usability
Redesigning the Desktop Calendar
Most people use a calendar of one form or another in their day to day lives. With so many people using calendars I am really surprised that nobody has gotten annoyed by their functionality to the point where they felt that they needed to rewrite the way calendars work. Maybe I am alone on this idea but stay with me.
It seems to me that the computer calendar was simply a copy of the old paper calendar. The ones that hang on the wall in your cubical with the last month still in view because you never look at the thing except when you finally remember to flip the thing to the next month. Yeah that one.
It seems to me that when designing the desktop calendar programmers took the tried and true route. They built the calendar to look just like our old trusty friend the paper calendar. Granted they gave us more views like week view, day view, and even year view. But I think their needs to be one more view. "Rolling Month View"
Rolling Month View is for people who like the birds eye view of the month, but also want to see the next three or four weeks in addition to the current week. The problem with the traditional calendar system is that if I am at the end of the current month I have to click over to the next calendar month to see what's going on in two weeks. flipping back and forth counting days, trying not to count those extra days that are dimmed out but added in there to complete the boxes in the grid.
I just want to see what's happening in the next week or two. I never care about what happened last week unless the police are asking me "Where were you on the night of…" Anyway, you get the point.
Below is a screen shot of my calendar for the month of May. Assuming today was the 25th of May, it is nearing the end of the month. Granted I can see a few days ahead, but what if I want to see what's happening the week after? I have to toggle to the next month. Meanwhile the calendar is happy to show me what I did 4 weeks ago. What a waste of space! And totally useless in my opinion.
Rolling Month View might be the solution. It continues to roll the calendar forward a week at a time so you always have the next two or three weeks ahead of you displayed in the familiar monthly grid view.
Here is a very rough screenshot for conceptual purposes. There is probably a nicer way to do the rolling calendar, but this took me all of 1 minute to put together. The point is, it makes sense even if the presentation needs some work.
If your a developer for Apple, or know a developer for Apple, can you please get this worked into the next version of iCal? I will love you long time.
→ Respond NowTags: Design · Opinions & Rants · Software · usability
Open links in a new window
If you perform a search for "open links in new window" you will typically find two groups of people. Ones the hate it when links open in a new window, and ones that hate links that don't open in a new window. It seems that people are pretty picky (and vocal) about the manor in which links open. Oddly enough searching for a good solution proved more difficult than I thought.
Basic Criteria
Because people are so particular about their links opening in new windows. I wanted to give users an option to open linked pages they way they want them to work. A preference toggle of sorts. I also wanted to default option to xhtml valid and it has to be accessible in it's default state or with javascript turned off.
Thanks to a friend and fellow web developer Andy Ford, who helped me with the final piece of the puzzle to make this work.
The Code
The code is pretty straight forward. We have a form with a checkbox with with text that reads something like "Open links in new window" This works as the preference toggle. If the box is checked do some dirty and non valid stuff to the code to make it work.
See a demo of this script here
<form name="targeter">
<input type="checkbox" name="targetbox" id="tcheck" onclick="targetLinks(this.checked);">
<label for="tcheck" style="cursor: hand;">Open links in new window</label>
</form>
<script language="JavaScript">
function targetLinks(boNew) {
if (boNew)
where = "_blank";
else
where = "_self";
for (var i=0; i<=(document.links.length-1); i++) {
document.links[i].target = where;
}
}
</script>
I thought this was a bit easier to implement than most of the solution I found out there that required you to add a new class to the link. Some people suggested using rel="external" on the links. My response to this is simple. Not all links that need to open in a new window are external. Adding rel="external" is not semantic so I would prefer not to add that markup to my code in that way.
I am sure there is a better way to make this work. But this is what I scabbed together. If you have a better way, I would be interested in knowing about it.
→ Respond NowTags: Code · usability
Common Accessibility Mistakes
I gave a presentation at the Sacramento Web Standards Group about improving your sites accessibility. When I began the presentation I full expected to show lots of code. But what I ended up with was a list of common mistakes made when trying to implement accessibility into a site.
Little would I know that this list sparked some excellent conversation for the evening and maybe--just maybe--changed the way a few people create websites, and that is good for everyone.
So here is my general list of accessibility mistakes and a few ways to improve the overall accessibility of your site for everyone and not just disabled users.
→ Respond NowTags: Accessibility · usability
Usability Testing On A Budget
I recently participated in a meeting with a client about a homepage redesign. They wanted us to put a pretty face on it hoping that would fix some of their usability issues. Granted a better design may increase usability by a small percent, but the real problem with the site is that nobody once stopped to consider the users when making critical decisions. When I asked them about user testing, and focus groups, their response was typical. It's really expensive. They explained that they had intentions of doing user testing sometime in the future.
It makes more sense to me that you do user testing now, before doing yet another site redesign. Proceeding with a redesign would only be treating the symptom, not the cause of the problem.
Usability testing does not have to be expensive. There is a plethora of tools available nowadays for low cost usability testing that do not require elaborate testing centers or large budgets. In the list below, I have compiled a list of tools that will cost you next to nothing to run. I think of it as guerilla usability testing for those on a shoestring budget.
Index Cards
Costing less than $3.00 and a little bit of your time you can easily run card sorting exercises with some friends or office personnel. I prefer to enlist the help of user that do not have a personal investment in the site. Choose someone like an intern or office secretary. Persons that don't have an agenda in mind, will give you a more accurate test and a better representation of an "average user"
Card sorting is the first step in determining a good structure for your sites navigation system. After all if your sites navigation fails to get visitors to the pages they seek, then the site has failed for them, and they will likely leave.
If you prefer an online card sorting tool, Optimal Sort offers a free online application allowing you to run a free test with up to 10 users, and a max of 30 cards per project. If your testing a small to medium site, this should be all you need!
Crowdsourcing User Feedback
Sometimes getting feedback from users that have absolutely no investment at all in your site can have a significant impact on how you need to look at your website. What if you can stop 10 people on the street, ask them each 5 questions about the site. How valuable would those responses be to you? A dollar each? Probably more if you ask the right question! Feedback Army can provide you with responses from a large number of users for $1 per user. Not to bad if you need to generate responses quickly or in large volumes.
For just a little bit more money, Usertesting.com allows you to crowdsource your user testing, but you have a little more control by specifying the demographic profile of your target audience. You can even choose what tasks you wish for them to perform while on your site. The service costs less than $30 and you get a video screen capture with users talking through their experience as they browse your site. Not a bad option and it's not too expensive.
DIY Screen Capture
Nothing beats being able to watch your test users navigate your site, hear their feedback, AND see their expressions. It's not uncommon for users to experience a problem but not say anything about it chalking it up to their lack of understanding, or confusion about what they are doing. Thats where desktop software like Silverback App (Mac) and Camtasia (Windows) come in handy. Both applications offer a picture in picture format so you can see the screen as the user is navigating it, but you can also see their expressions too. Perfect for discovering the tiniest nuances.
The biggest benefit to using a software based app like Silverback and Camtasia is that you can hand pick your test subjects. My problem here is that your starting to get up into a higher cost per test. I thought it was worth mentioning because if quality testing is what your after, this is definitely a budget minded alternative to an expensive set of tests.
Five Second Test
Finally a site that makes it easy to run five second tests on your designs. Thought it won't let you test your site with users, it will allow you to get feedback on what people remember to be the most prominent elements of your design. This would be critical if you want to determine if people are seeing your calls to action, or some other important page element. It's free to use the basic, with an option to upgrade for more features, like custom instructions, more feedback, and more results in less time.
Another feedback tool useful while your in the design stage is Concept Feedback. It works similar to the Five Second Test Site except it is geared more towards designers and marketers. You get feedback from other designers in the community through a standard set of questions. It also uses a Digg style voting system so users that provide thoughtful and useful feedback are given a higher score allowing you to determine just how reputable they are, and help you to place a value on their feedback.
As you can see there are a ton of tools available for you to use that do not have to cost you an arm and a leg. Usability testing can be done on the cheep, if you just don't have the budget for more advanced tests now. In the end, even just a little bit of guerilla style usability testing can go a long way to improving your site for everyone.
Do you have a tool or resource that you would like to share? Please do so in the comments below. Share the knowledge and lets help make the web a better place for everyone!
→ Respond NowTags: Inspiration · usability
