Best Firefox Plugins for Web-based Design

Way back when Firefox was first released, I remember riding on a train and listening to my friends rave about it.  I asked them “Why should I switch to Firefox?  It’s not widely supported and if I design for Firefox I’ll still have to test in IE and Netscape.”  (Yes, this was that long ago.)

My friend responded with a two-word sentence that would change my life:  “It’s extensible.”

I downloaded Firefox that very night, and I was giddy within minutes.  It was like the good old days, when we were running BBS’es out of our houses using our phone lines and 2400 baud modems, and RipTERM came along.  It was like the clouds opened up and god rays shot down with celestial voices.  “Aaaaaaahhhhhh, web design will be so much easier nowwwwww”, they sang.

Several years later, I’m still using Firefox.  I’ve become very attached to some of the plugins, and they’re invaluable in doing my job.  I’m sharing with you a list of my favorites, so you can hear celestial choirs too.

#1:  HTML Validator + accessibility option

HTML Validator does exactly what it sounds like: it checks your HTML and Javascript to make sure it’s all correct.  You can choose the standard and control how strictly it checks.  It’ll give you warnings as well as errors, and best of all, it comes with an accessibility option.

The accessibility option lets you set levels and it’ll validate your site against the ISO standards.  This is fantastic if you care about accessibility, and you should.

The interface for HTML Validator isn’t the best, but the functionality is so awesome that I forgive it for not being the most usable plugin.

#2:  Window Resizer

Many designers work on large monitors set at high resolution.  It’s great for productivity, efficiency and artistic freedom, but it sometimes leads us to forget how the rest of the world sees things.

Window Resizer lets you view your designs in whatever size you like with the click of a button.  You should never release a new design without looking at every possible permutation as your lowest-resolution customer sees it.

#3:  Screengrab

We often have to take something that exists and rather than redesigning it, make incremental improvements on it.  Or, we just have to add something to it and the engineers flinch when we start talking about redesigning the rest of the page.

If you don’t have the original design files, Screengrab is the place to start.  You can copy the visible screen or the entire page to your clipboard, or you can save to a file.  I strongly recommend PNG, as the JPG image quality is really crappy.

#4:  Palette Grabber

Likewise, it’s sometimes inconvenient to reverse-engineer a color palette with the color picker tool in Photoshop.   Maybe you were browsing around and saw a site with such a brilliant color palette you absolutely must use that for your next design.

Palette Grabber gives you an icon in your status bar – one click and it creates an Adobe color palette for you based on the current page.

#5:  DownThemAll

Oh DTA, how I love you.  You’ve saved me so much time when I need to grab all the images off of a client’s site, or pull everything out of a folder!  DTA allows you to download the result of every link on a page, or download every image on the page.  You can filter by file type, and you can pick and choose or just grab the whole lot.  It’s brilliant.

#6:  Firebug

I don’t know how I lived before Firebug.  I use it for everything – QA’ing developers’ work, finding code errors in my own work, tweaking code, identifying classes for use elsewhere.  I could write a whole post just on Firebug.

The most useful feature of Firebug, for me, is the Inspect option.  You open up Firebug on every page and it uses HTML Tidy (the same engine that HTML Validator uses) to show you the document object model in a very easy, navigable way.  Then, you click inspect and as you move your mouse around elements on the page, it’ll put a little outline around each one, and in the lower panel it’ll show you the specific code that affects that element.  It’s magnificent.  You can figure out what class a div uses, why it’s not as wide or narrow as it should be, why the inheritance isn’t working like you expect it to, more and more.

I think that Firebug can answer existential questions, too, like why the sky is blue and what is outside the Universe.

#7:  FireFTP

If you’re uploading using FTP, FireFTP is a great option.  It’s an in-browser FTP client.  It’s easy to use and full-featured.  I don’t use FTP much anymore, but when I do this is my tool.

#8:  MeasureIt

Sometimes you just need to know how wide a column is, how many pixels separate that image from that other one, or what the viewable area of a div is.  And that’s where measure it comes in.  You get a little measuring tape on your status bar, and you can click it to measure anything visible.

#No-more:  ColorChecker

Color Checker isn’t compatible with the most recent Firefox versions, and Check My Colors doesn’t seem to be available anymore for any version.  My toolbox is sadly bereft of anything that will show me what my design looks like for people with color vision impairments.

Thank goodness I keep a color-blind tester on hand!

######

Now that I’ve shown you my toolbox, tell me – what are your favorite Firefox plugins for web development and web design?

---

Today’s Glossary Term:
Data-driven design – there are a lot of connotations for this phrase, but at its most literal level, it means designing based on metrics and research, rather than on instinct or preference.  A data-driven method involves research before the design is created, and strenuous research afterwards to measure every aspect and let science speak for efficiency and speed.  You can’t always have a perfectly data-driven approach, but you should always try to let metrics inform your design where possible.

Today’s Interesting Link:
http://aviary.com/ – This site is hard to pin down.  At its most simple, I’d call it a free, web-based image editor.  It’s so much more than that, though.  It’s collaborative, powerful and full of unlimited potential.  However, it’s a bit like Google Wave in that new users feel overwhelmed by the sheer quantity of functionality.  It’s in its infancy, as far as I’m concerned, but it’s also well worth the investment of time and energy to learn.  It’s a powerful tool.

Today’s Usability Quote:
“Innovation is creation that comes from experimentation and study” – David Blakely, Director of Technology Strategy at IDEO

Today’s Music To Design To:
I think of VNV Nation as “baby goth” even though they’ve been around for 14 years now.  Their sound is heavily influenced by the industrial stuff I listened to during my “rebel years” but with a positive tilt to it.  Some of it is very atmospheric, lending very well to dramatic designs, artistic designs and enormous, daunting projects.  My favorite of their albums is Empires – it’s easy to feel energetic and inspired while listening to it.
Buy the CD
or Download the MP3s

P6WDVN98WWED

Review: Facebook App – GroupCard

About the app:

GroupCard (www.groupcard.com) is a Facebook app that allows you to create an e-card, sign it, and then send it around to all your friends so that they can sign before the scheduled delivery date.

What you can learn from this review:

What to do for fun, flexible personalization interfaces.
What not to do for signup workflow.
What not to do for post-task workflow.
What not to do for primary page information architecture.

The workflow:

After the typical (clunky) Facebook app installation flow, you are presented with a list of card designs.  There is a dire warning at the top in bright yellow that tells you they don’t have your email address, and to fix the problem.  I suspect that this would worry some, and it would distract them from the main task flow.

If the user does get distracted and clicks that link, there’s an intimidating popup that asks you to authorize GroupCards to email you.  It says that you can receive GroupCards in Facebook, but not via email.  If you cancel out, it actually shows you a JavaScript alert that says you CANNOT receive GroupCards.  Not very friendly at all!  You have to acknowledge this to close the alert.

Once you refocus your attention on the card designs, there are a lot of great designs.  They’re laid out in a grid that feels a little overwhelming, but also makes it very clear there are plenty of options.  You can use an easy-to-find dropdown at the top to choose occasion, to narrow down your selection.

Text instructs you to “click a cover to view it”, but when you do so, you actually can only see half the cover.  The other half is obscured and there’s nothing to click to see it.  The left side of the page, which could be used to show the card, is dominated by what I call the “give us money screen” – you choose your option of free, basic, premium or ridiculously overpriced.

There’s an interesting contrast between a Free Card, which expires 7 days after creation, and a Freebie GroupCard, which expires 10 days after creation.  Having gone through both flows, I can’t tell what the difference is, and nothing on the page indicates this.

After you choose your pricing option, you’re asked to enter the card information – who to send it to, when to send it, and whether or not to share it.  This was pretty easy and user-friendly, though I very much wanted to pick and choose the peopel to send the card to for signing, rather than just email-blasting all of my friend’s friends.

The button for this step is called “Sign the Card”, which leaves me with a brief question of “Is this me signing the card, or am I about to be taken to the sign the card step?”  However, clicking it plays a neat animation that slides the card cover left, and shows you the inside of the card.  There’s a great splat graphic which follows your mouse around, and wherever you click, it inserts your picture and a blank message.

This is GroupCards’ a-ha moment.  This is the piece of interface that makes their entire app worthwhile.  This is the one piece of their entire interface that they got right.  However, it was buried behind “give us money” and “fill out forms” and a lot of other steps that were way less exciting.

You see a help bubble right above the blank message that tells you you can drag your text around.  Indeed, you can type to edit the text, you can drag it anywhere you like, you can change the font, change the color and even rotate it left or right.  Fantastic!  Discovery of features was great, and although it’s slightly buggy, it was honestly fun to use.

After this step, you are nagged about your email.  I dismissed the nag, and was immediately presented with my entire list of facebook friends, and urged to share the card with them.  I would have liked to have this pick-and-choose functionality earlier, and now that I’ve shared the card I’m kind of done with it.  I’m unlikely to share it with people who don’t know my recipient.  I skipped the step.

Then you are presented with a “share this card on your profile”.  You’ve been through so many screens at this point, that you’re starting to feel fatigued, and I had no interest in sharing the card on my profile.  It would just ruin the surprise for my recipient.  I closed that window and was immediately presented with another.

This one is GroupCards’ shame-on-you moment.  It showed me a card for Daniel X.  It looked like it was a design that someone had chosen.  It said at the top “sign Daniel X’s GroupCard”.  Everything about the screen made it look like my friends already used GroupCards and that someone had already created this GroupCard for Daniel.  I signed it.

The next screen presented me with another one, for Stephanie Y.  I signed it.

The next screen presented me with someone I don’t know, who just friended me randomly.  I bailed out of the endless screens, by closing the window.

Curious to explore their interface further, I clicked the My Cards tab at the top of the page.  You are shown a list of upcoming GroupCards, but no information about who created them.  Clicking on a card shows you the full-size cover of the card (for the first time!) and information about who created it.  the information and action links are all combined in one clump of data on the left hand side, dominated by two buttons of equal prominence that urge you to sign again and print the card.  Sign again allows you to edit your signature, but Print This Card is an upsell.  Overall, this page shows no cohesive information architecture thought.

This is the first point where a user can  learn that they were tricked into creating cards for their friends.  I had a moment of panic, worried that my friends would get spammed by something I was just exploring.  I wasn’t able to find any way to cancel a card, so I emailed them feedback.  At the end of feedback, you are presented with a link to help.  Clicking this shows an FAQ, and in the FAQ I was able to uncover the steps for cancelling a card.

To cancel a card, you have to go into Edit This Card’s Information, a link buried in the paragraph of links under the dominant buttons on the left hand side of the page.  Then you have to scroll down and click what looks like an input field, which then gives you a confirmation screen – are you sure you want to cancel?  You click the very easy to find Cancel button on this screen, and it refreshes to show you a message that your card has been cancelled.

There is a “undo this cancellation” link that is buried in a long sentence of text – it looks like that’s what you’re supposed to do next.  It even uses the text “clicking here” to hide what it will do.  In reality what you want to do next is Close the window.  Then the page refreshes, with a light text message very low on the page that says Card Cancelled.  It has no icon to draw the eye, and no background color or border, and it’s the exact same as all the other text on the page, so I suspect some users will be worried their card wasn’t actually cancelled.

Summary and recommendations:

GroupCard buries its a-ha moment behind a long workflow, and then follows it up with a long workflow.  This is probably fantastic for viral spread in theory, but can’t do much for user retention.   The bait-and-switch of the followup is unacceptable from a privacy standpoint, and will lose them a lot of users after the fact.

• GroupCard should switch their flow – ask for less info upfront and get users to the a-ha moment sooner.
• Ask users to choose a pricing option after the card is created and sent out, not before.
• DON’T ever trick users into creating cards.  Sure, present them with the option.  The way it’s done is clever, simple and works fantastically with the flow.  But make it clear that the user is creating a card for someone, not signing an already-created card.
• The My Cards page is fine, but the Card Details page seriously needs some information architecture work.  This is a page where a lot of info and actions are presented, but there’s no hierarchy, no guidance and a common action like Cancel is buried behind a link that doesn’t give any scent of cancellation.
• Speaking of guidance, there should be far more topical help, on just about every page.
• Add a progress bar to the creation process, so users aren’t constantly wondering what will happen next.
• Allow users to preview the entire card before sending.  Few people are willing to send a card they haven’t seen yet.
• Skip the viral step of  “share on your profile”.  Instead, make this a checkbox somewhere, or let them do it when they’re viewing the card after it has been sent.  It’s unlikely to be something many people do.

My review of GroupCard does not in any way reflect my opinion about whether or not you should use this app/website.  I was not paid by this company, nor am I affiliated with them in any way.  Please learn from the mistakes and successes of this app/website and use these learnings to make your own apps/websites more usable.

If you would like me to review your app/website, feel free to email me at krys at swankster dot com.  Reviews are at my discretion and are not subject to editing or moderation.

Rapid Prototyping: Slideshows

First of all, let me express to you how important rapid prototyping is.

You absolutely ought to do requirements gathering first, then come up with a theory of what your users want, then build a quick-and-dirty prototype and take it back to users – both the ones you gathered requirements with, and others. This can take you a few days and cost a few hundred dollars, and it can save you hundreds of thousands in development, materials, or man hours.

So now that we’ve established that you all agree and will employ rapid prototyping before you build anything big, let’s get into the meat. There are a lot of ways to do make a prototype. Depending on your medium, you can build a cork-board model, draw pictures on a piece of paper, or whip out wireframes and screenshots. Regardless, you shouldn’t spend too much time on them – depending on the size of the project, we’re talking an hour to 2 days, no more. They don’t have to be perfect, fancy, interactive, or anything along those lines. They are nothing more than a tangible representation of an idea or concept. Nothing more.

One way, particularly useful for an experience (like a tour), or an application (web-based or desktop) is to use a slideshow.

Irfanview is a free, easy to use downloadable application. It has lots of features, but the only one I ever use is the slideshow builder. You can drag screenshots in, and then set controls on each for mouse click, arrow, etc. This enables you to get on the phone with a remote user, and bring up the screenshots in any order you want, without opening gifs from a folder. It can completely fake user interaction, as far as clicking goes – click with the mouse and it can take you to a next screenshot that shows a list expanded or a field filled in.

It saves out to an .exe file, so you can then send the “prototype” to anyone you want. You can make it go from slide to slide automatically, or control each slide individually. File sizes are reasonable. I also use it for training, and believe it or not – I have a version of my portfolio in an executable slideshow. Many possibilities for a little free gem!

Irfanview’s interface isn’t the prettiest or simplest, but the basic functionality only took me a few minutes to figure out. It’s incredibly powerful, when you’ve got a test you need to keep running smoothly.

Enjoy this tool, and if you find others like it, please comment and let everyone know!

---

Today’s Glossary Term:
AEIOU – A research method focused on Actions, Environments, Interactions, Objects, and Users. It’s primarily used for ethnography (studying people and making a mental model of how they see the world) but can also be a good mnemonic to spread throughout your team. It helps to get everyone thinking of the world from the user’s point of view.

Today’s Interesting Link:
http://www.csszengarden.com/ – Is one of the places I go when I’m feeling boxed in by a design. It’s a great resource for inspiration, or if you’re looking to improve your CSS skills. If you don’t already have Zen Garden bookmarked, you really ought to.

Today’s Usability Quote:
“The greater danger for most of us is not that
our aim is too high and we miss it, but
that it is too low and we reach it.”
– Michelangelo

Today’s Music To Design To:
Getting away from the edgy electronica, it’s time for a Jazz recommendation. However, Jenna Mammina is not “just” jazz. She uses her voice like an instrument, switching between belted lyrics and then lilting back into a soft, sultry croon.
Download the MP3s or Buy the CD