Links: Field Day 2009 Edition

I have the fondest memories of field day in elementary school. All the classrooms would have their own shirts with their teacher’s name and a mascot. I’ve been a Haines Hound, Vickers Viking and Strickland Spartan. We competed against other homerooms in the same grade levels and won ribbons at the end of the day. I still have my good sportsmanship ribbon from first grade. Probably the only time I ever deserved it

Imagine my surprise when I went to field day at our main elementary school when my daughter was in first grade (she’s in ninth now). The whole school wears one t-shirt (there may be color variations) and there are no ribbons or anything. Just a fun day with lots of group activities ending with a teacher’s tug-of-war. I think it’s a wonderful way to emphasize good sportsmanship and having fun while exercising.

• Tips for Usability Professionals in a Down Economy (applies in an up one, too).
• Social PR Survey II: Continued disconnect between clients, agencies
• Ten Twitter Mythconceptions
• 31 Ways to Get Inspired
• Industry-specific Twitter Guides by Profession
• Styling your Lists: 20+ Brilliant How tos and Best Practices
• The Ultimate Collection of The Best Light Swirl Photoshop Brushes

• 11 Geeky Mouse Pads: I have the color code, but don’t use it as a mousepad (not enough traction).
• Invisible cat door
• *PEW PEW*, NOM NOM: An AT-AT Cake
• If Microsoft ruled the world

Links: Here Comes April Edition

Can we expect showers to follow? To be continued…

• 27 Twitter Applications Your Small Business Can Use Today
• The Top Five Innovation Killers: Go on. I dare you.
• 10 Free Things for Writers: Contains stuff I hadn’t seen before reading this list.
• Angry Editor Rant: Want to know why things aren’t going so well for some freelance writers? This could explain why. [Link: Anne]
• How to Land a Writing Job: Another winner from Anne. She’s on a roll!
• Experience Design: Why pages are the last thing you need to worry about. Lovely presentation by Tim Richards.
• 175 strategies and places for link building. Step 1: Find time. A 17-year-old has more time than a parent of three with a full-time paid job and part-time job as volunteer.

And for fun because we’re allowed…

• Drawings by Craig Frazier. Words by You. Submit your captions.
• Super Mario Brothers Rubik’s Cube: And I can’t even solve the original — just one side.
• Passover Does Facebook: Hilarious.

Web Site Drop Down Menus

While we’re seeing more drop down menus on web sites, designers don’t always do what’s best for the users. How many times has a drop down menu unexpectedly popped up and you try to make a selection only to have it disappear? It doesn’t matter if a person has arthritis or other hand mobility issues, even folks with steady hands don’t always make it before the menu disappears. This disappearing menu problem also shows up in Windows.

So I’ve advised people not to use drop down menus. After all, users make a decision only to see another menu and have to make another decision. However, I don’t feel that way anymore as drop down menus become a standard and do work when done right.

A new trend has appeared with regard to drop down menus. Rather than disappearing, they stay until you close the window or click outside of the window. It also helps when a little down arrow appears next to the menu hinting more options will pop up.

Jakob Nielsen believes the X to close the window isn’t needed and that these drop downs should go away on their own when the user selects another item. This again is tricky because of the steady hand issue. But I would think if a user selects another top menu item, it’s by choice. It’s the selecting of a submenu item that proves hard. Like Nielsen says, timing can help here.

Also, some menus expand the sub menu directly below the top menu item instead of off to the side. This works much better since the users just have to go straight down instead of carefully navigate to the side. The image above shows an example of this from the Dallasnews.com web site. This menu leaves little room for error since the submenu starts at the left of its top menu and goes a little wider. Many submenus tend to start at Sports (shifted).

While the Blue JMR menu goes off the side, it has a timing mechanism so the user has time to select or pick another top menu item. This method works.

Even with this changing navigation menu practice, it’s still helpful to accept the user’s clicking of the top menu item. Of course, this depends on the site’s navigation design and content.

In sum: Drop down menus work well — as long as the design handles them right.

Navigation testing has one advantage. You can ask friends, family and colleagues to check out the menu’s functionality for you even if they’re not the dream user. These folks, however, aren’t the ones to ask about findability. For that, you need to go to your target audience.

What menu styles do you not like? Why?

Game Site Coming Soon

After two years or so of reviewing casual games, I discovered a new passion: writing game reviews and announcing game news. I thought it was time to create a separate games web site as not all of you care about computer, mobile, and handheld games.

But every single one of you offers great insight. So I’m asking if you would please take a look at the test site and provide feedback: good and needs fixin’. Ready to meet my latest baby?

http://test3.spyrestudios.com/

I want to make the launch fun and exciting for you. So I think I shall seek out prizes. Yes, the catch is that the prizes will promote the new site. Contact me if you’d like to donate a prize or two.

Button Placement on Forms and Popup Windows

How many times did you complete a form only to push the “Clear” button instead of “Submit”? What about “OK” vs. “Cancel” on a popup window? (Raises both hands — one for each.)

Why does this happen? Do we expect one button on the left and the other on the right? Are they too close together?

Jakob Nielsen reports that Windows applications put OK first, Cancel second while Apple places OK last. In this case, he advises developers to design OK/Cancel based on the platform they design for. The above screen shot comes from Thunderbird in Windows. The below image comes from Microsoft Word.

For Web forms, I suggest using one button. Of course, circumstances may prevent that. For example, you’re completing an order and you’re on the last page. Ecommerce sites certainly don’t want to give you another button to cancel the order, but users need assurance that they’ve canceled the order by pressing “Cancel Order” rather than just closing the window.

From my experience, I tend to read popup windows and zip through Web-based forms. I always assume software developers don’t create their popup windows the same way. But online forms — that’s another story. Silly, isn’t it? We shouldn’t expect Web designers to create forms the same way either.

Here, Nielsen gives two guidelines that make sense:

• Name a button based on what it does. Instead of “OK,” consider “Yes” when the dialog box asks if you want to do something.
• Highlight the most often used button except in cases where the action is drastic (of course, I can’t think of an example at the moment).

I think one more guideline would help especially where Web-based forms come in:

• Avoid putting the buttons close together: This forces us to pay attention and lowers the incident of “mouse slippage” that causes us to accidentally select the wrong button.

Many of us hit “Enter” when we finish a form or to begin searching (after entering keywords). Take care to prevent the application from executing something big when someone presses “Enter.”

You have to give Microsoft credit for its Windows XP shut down dialog box as shown below. Three options appear (Stand By, Turn Off, Restart) and each in a different color (yellow, red, green respectively) plus a Cancel button in gray and away from the others.

As users, we should look closely these windows and form buttons. In our fast-paced and overloaded world, we forget. Hence, keeping buttons at a reasonable distance from each other can give us the visual cue to look at the buttons.

What works for you? What doesn’t work?

Stop the Graying of Sites Trend

The messages many sites send when they use gray text on a white background is, “We don’t want you to read our content,” “Our content isn’t worth your time,” and “We want you to struggle reading our content because we think black is boring.”

#333333, #666666, #999999, and #cccccc (various shades of gray) are almost black, but not as good as black. Those sites don’t make this list.

It’s an epidemic that I alone can’t stop.

To reward those sites doing it right, they get a mention and a link here. Add your site to the comments section. However, we will check every link. If a site’s text hides in a fog, it will disappear.

Note — this only looks as the contrast between text and background — not the font choice, font size, text formatting style, or design.

1. Adversity University Blog
2. Be the Story
3. Blogcritics
4. Bob Bly
5. Book Marketing
6. The Book Sistah
7. Caroline Middlebrook
8. Chronicles of a Mompreneur
9. D. Keith Robinson
10. Dosh Dosh
11. Geekpreneur
12. Global Neighbourhoods
13. The Golden Pencil
14. Graywolf’s SEO Blog (yeah, even the guy with “Gray” in his name passed!)
15. GTO Management
16. How Not to Write
17. InternetVIZ
18. ISIPP
19. Melle.ca
20. Men with Pens
21. Molly
22. Niroze
23. PoeWar Writer’s Resource Center
24. The Program Witch Pages
25. Sparkplug CEO
26. Stowe Boyd
27. Strategic Public Relations
28. SuccessCREEations
29. Verge New Media
30. Writer’s Helper

You wouldn’t believe how many sites I looked at before my eyes begged me to stop. List is disappointingly short.

Moral: Black on white is NOT boring. It’s readable.

P.S. I skipped those with different colors because they may not be readable to those with various forms of color blindness.

How I Became a Full-time Freelance Writer

I generally don’t talk about myself as I accept that people don’t come here for my personality. Instead, people like you come for the information I provide that I hope helps you in your life.

From reading other blogs, it looks like many love to hear how writers and freelancers went full-time. So here’s the full story.

In the beginning…

After kid #2 arrived, I started New York University’s online program in Internet Technology while on maternity leave. Initially, I wanted to do web design. After few Web design projects, I discovered web design was more frustrating than enjoyable.

Around this time, an e-mail newsletter for web designers had a contest where readers could submit an article related to web design. The winners received high quality software like Photoshop, so I gave it a shot. Readers loved the article, so I wrote a few more in the series for the newsletter.

The series started my writing portfolio and helped my land my first paid professional writing gig with a web design magazine. Slowly, I picked up more paid writing assignments discovering I loved working as a writer.

However, I was apprehensive about pursuing a career as a writer. I heard from many people how they wanted to be a writer. I honestly didn’t think I offered anything special as a writer. It also didn’t help with many talented bloggers and web site writers hitting the writing circuit. Regardless, I kept my eyes open for gigs and considered writing a sideline since I still had my corporate job.

Furthermore, I never dreamed of having my own business. I feared the sales aspect — getting more clients — because I couldn’t make normal phone calls. Cold calling was always awkward no matter how comfortable I was with making phone calls. Then there was finances, bookkeeping, the usual business stuff.

Returning to the Dilbertesque world

I returned to work a couple of weeks early from maternity leave on a part-time basis in hopes to convince management that I could do the job part-time. Management wasn’t receptive to the idea.

I wrote a memo with various options supported by data. Eventually, the company let me work part-time because there was another part-time employee who joined the team. We didn’t job share, however. Together, we made up one employee.

Eventually, she went with the wireless part of the business and I stayed with long distance retaining my part-time status. This let me build the writing business.

Dot com blah

I lost several clients when dot com went boom. This was a turning point because I could either scramble to get more clients or resign myself to a corporate career.

While feeling a pit in my stomach stomach I hit send and emailed people in my network including those I had interviewed for articles. I landed two new clients, one of which I met in person for the first time after working with him for six years.

I worked part-time until March 2005 when my company required me to return to a full-time schedule. By this time, I had plenty of business writing experience and a healthy portfolio.

The benefits… the benefits…

I couldn’t quit my job yet because my husband didn’t have health benefits. We had three kids, so it was important. My husband landed a job with decent benefits in June 2005. A month later, I retired from corporate America for full-time freelancing.

Just found this article on health insurance for freelancers for those who don’t have the luxury of relying on someone else for benefits.

Other becoming a writer stories…

Mary E. Lyons

Bob Younce

Many at how we became writers

Delaune Michel

Philip McCord

Catherine Shaffer

Catherine Leigh

Geoffrey Zimmerman (video)

Earl Pomerantz, TV writer

Jared Head (video)

Yours?

When Web Content and Software Collide

In 2000, I earned a certificate in Internet Technologies in hopes of becoming a Web designer. Working on the blog today reminded me why I changed my mind and went into writing instead.

Based on advice (you know who you are — I don’t want to put your name in here again and have people thinking I’m trying to make nice nice), I took off the excerpts on the main blog page so you don’t have to click the entry to see the full content.

But in doing this, my paragraphs disappeared (the extra blank line). The blog entries looked like a ruddy mess and hard to scan. I looked at the code and don’t see anything that would make paragraph <p> not add a blank line.

So back to excerpts because the unformatted content broke too many web content rules. Oh, the bolding was there as were the bullets, but the whitespace was terrible. Content overrules features when it comes to the following:

• Bold headings.
• Bulleted lists.
• Easy to find paragraphs.
• Short paragraphs and sentences.
• Text and background color contrast (too many blogs and web sites use gray for text with white backgrounds — this resembles reading in a fog. Black isn’t boring — black works.).

If my blog breaks these rules, then the feature will have to go away until I can solve the problem. So, the main blog page continues to use for technical and readability reasons and not for usability reasons.

Using a blog application, bloggers deal with the application’s quirks, CSS, templates, plug ins. So a problem might be buried in layers of CSS or code. In fact, Peter Shankman had problems with his WordPress: “… all of a sudden, after switching to Firefox and upgrading AVG, I can no longer upload photos to WordPress.”

I’ve had problems like this happen in the past where the solution meant disabling a plug-in. The problem with computers (especially Windows-based) is there are too many variables that can cause a problem. Even if you add one thing, it could be something you installed long ago that could be the cause of problems.

My computer needs a clean up as it has various problems. However, using registry cleaners and other cleaners could make things worse. I’ve used Registry First Aid, but it requires carefully reviewing changes before accepting them — and that took time.

Also tried CCleaner a long time ago — don’t remember why I stopped using it. I downloaded Revo Uninstaller, but haven’t tried it. Anyone have luck in safely cleaning a computer?

Usability Testing Cheap and Fast Part II

Dennison asked excellent questions in response to How to Do Usability Testing Cheap and Fast:

Tell me if I follow correctly: Do you do the test only on users that have their own PC with them? So if you happen to be in a store where nobody has a machine or is willing to take the test, then, tough luck?

Why worry about having the users test in their own environment (PC)? The focus of the test is on usability. Testing to see if the site works properly across different systems should be part of QA work and can be done separately.

Bill Moore from RadioTime responded:

Read the rest of …

Using Bulleted Lists in Web Content

Bulleted lists on Web pages help readers scan and find what they want. Two situations that do well with bulleted lists are series and instructions. Also, beware of indenting, spacing, formatting, and whitespace.

Series
For situations where three or more items appear separated by commas, they might work better as a list. Instead of, “Bring an apple, orange, and banana” use…

Bring:

• apple
• orange
• banana

This doesn’t need numbers as order has no impact. The space between “Bring” and the list might be too much as people might not instantly associate the two with the distance, but CSS can fix this.

Instructions
When steps call for doing tasks in a specific order, numbered bullets work well. eHow.com does this nicely. Take care in situations where you have a choice. For example…

1. Peel apple.
2. Cut apple using one of the following ways:
   • Dice the apples using the chopper.
   • Cut the apple in half. Cut both halves in half for four wedges. If you want smaller wedges, cut the four wedges in half.
3. Serve.

With instructions, you can also clarify a choice like this:

• Dice the apples using the chopper.

• or

• Cut the apple in half. Cut both halves in half again for four wedges.

In this version, it’s clear you have a choice since “or” separates the choices.

Indenting
Notice Step 2 takes up more than one line and uses the indent? Some sites don’t indent lines beyond the first and it’s hard on scanning like this:

1. Dice the apples using the chopper.

2. Cut the apple in half. Cut both halves in half for four wedges. If you want smaller wedges, cut the four wedges in half.

Spacing and Long Lists

It’s also possible to break up a long series such as what to pack for sleep away camp. That list can easily get long. Break up the series by categories (i.e. clothes, toiletries, linens). Also, instead of one long list — put the list into columns to avoid wasting white space.

But what about a long list like 175+ Data and Information Visualization Examples and Resources? Do the numbers throw you? Numbers typically represent order, but this list uses the alphabet. The numbers determine the number of resources.

Furthmore, the list divides into three categories. Can’t do more than one column simply because the content space is narrow. Plus, some of them have comments.