Hot Links

Lucy Schaeffer’s photography site is live. Lucy is my friend, so I’m glad her photos are so great or it would be really uncomfortable discussing her work. Phew!

SpiffyWebCo is a fun little collective of little people who are doing some small but cool projects.Keep an eye out, cuz we’re going to blow your mind. A little.

George Washington – who knew history could kick so much ass? No wonder he founded the USA in his spare time!

A Respectable Initial Sprint

Update: Respectr is live!

Huned and I sat down today to attempt to complete a Rails Web app. The bad news is that we didn’t finish, though we made some great progress. Rails is extremely fast – had we been working with a different hacker language like PHP, I think we’d have gotten bogged down in the details and lost focus.

We’re hoping to finish up the build this week, so we can dive into a private beta release, then jump to a public launch when we’re confident the code scales well.

Aside from the obvious “Rails is so fast” lessons, some other lessons we (re)learned were:

  1. Even with a team of two, a shared SVN repository and wiki sped our progress considerably.
  2. Dev environment setup, on the other hand, cost me two hours. Boo eclipse. I should

Lorem Ipsum 2.0: New Greek Text

“Greek” text is filler copy used during the design process. While it’s always ideal to work from real text, there are a number of cases where this isn’t possible, such as cases where a design will hold dynamic content, such as a blog template or a message board page. It can also sometimes be useful to dissociate text from visual design in order to limit the variables in a problematic layout, or to focus an approval process.

In the past, I’ve always grabbed the old school Latin from sources like lipsum.com. It can become tiring to explain the role of

What Do You Show When There’s Nothing to Show?

A hole would be something. No, it was nothing.
Rock Biter, The NeverEnding Story

After countless hours, days, months, or even years of work, your social-networking-slash-content-management application is complete. It’s scalable, it’s rich, it flashes pretty lights and makes every comment sound witty. You throw the launch party, break the bottle across the bow, and send the final check to the offshore development firm. You open the doors to eager users who pour into your site and fill it with …nothing.

Welcome to reality: most users are mostly lazy.

Icons, avatars, and thumbnails are great for previewing a larger, more detailed content item; they invite interaction and self-expression. While the dedicated core of users within an online community might be happy to personalize and enhance their data with photo images, the larger population of casual users rarely has the time or the inclination to upload one more image. So how can you handle those cases where no image is available?

Option 1: Prevention

Make it required

One simple, rather heavy-handed solution is to require an image, either when a user creates a system account or uploads their media. This can be extremely useful in cases where imagery is critical to the success of the system, such as a dating site, where user behavior is heavily influenced by photos of other users. In other scenarios it adds a potentially onerous step to a valuable process – registered users and live content are often far more valuable than anonymous users. It may be more useful to ignore metadata like thumbnail images until the user has completed the task and you can make a compelling case for the value of additional information. Get them in the door first, and then make the pitch.

Display a Default Image

Probably the most common solution to the problem of missing thumbnail images is to display a default image as a placeholder. This kind of functionality is easily implemented and can include a message or image encouraging the user to upload a custom image.

Default images seem to fall across a spectrum: at one end, there’s the textual “No photo yet” message. At the other end is branded imagery like Vimeo’s monkey head icon. Default images can be a great place to inject humor, reinforce a brand, and cajole users into getting more involved.

If you use default images in your site, be sure to make them look like default/placeholder content: do not try to trick a user by displaying an image that mimics likely site content. If the image doesn’t clearly read as default data, users will become confused and frustrated, thinking the image is the result of an error.

Use an Image Library

Some interfaces up the ante by providing a library of default images. AIM allows users to select a buddy icon from an image a library or upload a custom image. iChat follows suit, as does the Windows OS.

Other applications automate the process. I haven’t ever noticed randomly-assigned default images, but some message boards vary a user’s avatar according to the number of posts they’ve made. Linking display information to metadata or member activity can create simple incentives for valuable behaviors.

Find a Related Image

An alternative to using a static default image or library is to use a related image. Meetup allows members to use an event photo in place of a group photo.

Option 2: Treatment

Perhaps none of the above examples fits your needs. Perhaps most of your users aren’t uploading images and you’re not comfortable studding your interface with default imagery. Embrace the nothing: don’t replace missing images. This option can be valuable for interfaces designed to minimize extraneous data, such as applications that target mobile devices or are bandwidth-sensitive. If the default imagery isn’t really adding value to the user experience, why include it at all?

If you decide not to show anything, you’ll have to decide to handle the display space. Do you preserve the empty space or is it more useful to flow the other page elements into the space? Probably the most relevant factor here is the role of the design grid: in cases where many member listings or content items are listed together, preserving the empty space may facilitate visual browsing. In other cases (such as a single content display) it may be more useful to increase data density by moving the other UI elements into the space.

Pimp your Firefox: 4+ Must-Have Extensions for Web Designers

While working with Lacy to build, test and debug the KickApps UI, I was able to show him how Firefox is a web designer’s best friend. Beyond being standards-compliant, it offers several tools that make Web development a lot snappier.

Here are four designer-oriented extensions, plus some built-in features get the job done.

1. The Web Developer Extension

https://addons.mozilla.org/firefox/60/

The holy grail of useful extensions. Install it and take a moment to click through each menu – there’s a goldmine of functionality in there. My favorites are:

  • Disable all CSS (Ctrl+Shift+S) – at the end of the day, it’s fun just to see how totally rad your semantic markup is modified by your rockstar CSS
  • Display Element Information (Ctrl+Shift+F) – this is a nice, stripped-down version of the old Mozilla DOM inspector. Lounch it and mouse over an element to see it’s position, size, styles, and position in the DOM. Great for figuring out why your CSS is turning that span red.
  • Resize. Nice for designers with huge monitors. You can set new sizes in the Options menu (Tools > Web Developer > Options > Resize tab). Add 1024×768.

Huned showed me the simple trick of hiding the toolbar when I’m not using it:

  • Right-click your toolbar
  • A context menu will appear. Select “Customize…”
  • You’ll see a menu of icons. Scroll down to a little gear image – it’s the web developer icon. Drag it up to your toolbar, somewhere near the home icon.
  • Click Done

Now, you can click that little gear icon to show/hide your web developer toolbar. Yay!

Update: Alternatively, Ctrl+Shift+T toggles the web developer toolbar on and off. I prefer this method, because it saves time and UI space.

2. Colorzilla Extension

https://addons.mozilla.org/firefox/271/

This is great for quickly figuring out the hex color of an image or HTML element, but it’s also good for:

  • Quicky DOM inspection – click the eyedropper and mouse over any element in your page to see it’s class(es) and ID. Move around some more to find parent and child nodes. It sometimes has trouble detecting tightly-nested elements though.
  • Click the eyedropper and then click on a webpage. Now, click on the eyedropper again and mouse around the page. Watch the X and Y coordinates – they’re plotting relative to that first click. It’s a great way to get a rough measure of a rendered element’s height or width.

3. IE Tab Extension

https://addons.mozilla.org/firefox/1419/

Install it and you get a handy button to view any tab as though it were rendered in IE. I don’t trust it completely, but it’s a nice preview of all the ways MS will mess up your CSS layouts.

4. View Source Chart Extension

https://addons.mozilla.org/firefox/655/

Another tip from Huned. This one shows a chart of rendered source, which is useful for AJAX-driven pages where a standard view source doesn’t always show all of the DOM elements. I don’t use it often, but I’m always glad it’s there when I need it.

5. Tabs

Hey, they’re build in. Neeto! Some handy Windows shortcuts:

  • Ctrl+T to open a new tab
  • Ctrl+L to highlight the location
  • Ctrl+click on a link to open it in a new tab
  • Ctrl+W closes a tab
  • Ctrl+Tab toggles to the next tab (to the right)
  • Ctrl+Shift+Tab toggles to the previous tab (to the left)
  • Group your tabs: Click on a tab and drag it to the left or right to change your tab order.

I usually have 4-8 tabs open at a time, they’re just so darn addictive.

6. View Source

An oldy but goody. If you’re coming from IE, get ready for some upgrades:

  1. Shortcut key. Ctrl+U pops up a window.
  2. Built-in text search (Crtl+F) is perfect for digging around in your HTML.

The Bad News

Firefox has a memory leak. Some people are calling this a feature, which is a stretch. I find that I have to reboot FF every day, sometimes more often if I’m opening a lot of tabs or viewing pages with a lot of AJAX or Flash.

Well, I’m sold. Get Firefox now!

Simple QA Cheat Sheet

Testing a complex website or web-based application can become especially tedious when you don’t have a good sense of when you’re “done”. After working on several projects where I’ve either handled User Acceptance Testing personally or outsourced to a temp, I’ve come up with a baseline boilerplate QA checklist.

If you’re a web designer or project manager, it might provide a nice starting point for QA. If you’re non-tech person looking to evaluate a website, it’s a nice way to make sure all of the bases are covered.

Step 1: New Functionality

Review any specs, work orders, mockups, etc.

  1. Does the site/application perform the tasks as expected?
  2. Are emails sent or confirmation/error messages displayed as expected?
  3. Are records saved and calculations performed correctly?

Step 2: Design/User Interface

  1. Text
    • Spelling
    • Capitalization
    • Spaces
    • Abbreviations
    • Are dates and times formatted correctly? (Programmers have a tendency to leave unfriendly system-generated dates and times in
      an interface.)

    • No remaining greeking or “Insert text here” messages
    • Is all functional text logically written? (Intro text, field labels, helper text, error messages)
  2. Images
    • Are images sized correctly?
    • Are images compressed appropriately? Nothing looks too grainy?
  3. Branding
    • Are all copyrights, trademarks, etc., displayed correctly?
    • Do site colors match any style requirements?
  4. Colors
    • Are hyperlinks underlined or otherwise marked?
    • Are titles displayed prominently?
    • Is all body text legible?
  5. Layout
    • Are all page elements aligned correctly?
    • Are widths and heights set correctly?
  6. Cross-browser testing. I usually make sure all pages look good in these browsers:
    • Windows Internet Explorer 5, 5.5, 6, and now 7
    • Windows and Mac Firefox
    • Mac Safari
    • Opera (sometimes)
    • AOL’s Browser (sometimes)

Step 3: Functionality

  1. Check every link from every page (there are some free automated solutions for small websites)
  2. Does the HTML/CSS validate?
  3. Do pages render correctly or display appropriate error messages when browsers’ JavaScript and Plugins are disabled?
  4. Do all filters and table sorting options work correctly?
  5. Does the application function appropriately for different user states (logged-out, member, etc.)?
  6. Does the application handle invalid form input appropriately?

Step 4: Goldilocks

And finally, the grandaddy of of gotchas:

Zero, one, many

The basic idea is to fill every dynamic content block or form field with zero, one, or many items and make sure the system works well with all three
situations. Try too little, too much, and none at all. Oftentimes, we design an interface expecting just the right amount of content or data –
this is the time to look for all those weird edge cases.

That’s it! Let me know if you think of anything I could add to this list.