So, you want to be a UI Designer?

Posted on by krys

You’ve been thinking about changing careers? Or evolving your career? You’ve decided to join the glamorous ranks of the rich and famous, all-hallowed User Interface designers.

Oh boy buddy have I got some advice for you! Here are 13 things you’ll need to know to be successful:

  1. Be prepared: Everyone, and their cousin and their dog thinks they can do user interface design.  
    UI design looks easy.  It looks like art and common sense.  And honestly, that’s one small part of it.  However, because it looks easy, everyone you will ever work with will think they can do it better than you.  It’s ok.  Let them try, because sometimes non-designers come up with really neat ideas just because they don’t know what they’re doing.
  2. None of your perfect first-draft designs will ever go live. 
    Being a UI designer means balancing the needs of the user and the needs of the business.  If you’re lucky, you work in a company where this isn’t a big conflict.  But unless you are a one-person company, your designs will need to change to accomodate other peoples’ tastes and needs.  Don’t take this personally.
  3. Some of your designs will totally and royally fail.
    Be glad when this happens.  You aren’t a real designer until you have had a colossal failure.  Seriously.  I won’t hire someone who hasn’t failed.  The lessons it teaches you sting like hell but it makes you so much better.
  4. Pay attention to the small details.
    Every detail is important.  Every pixel counts.  Pay attention to dimensions, fonts, letter spacing, shadow directions – everything.  Look at every bit of every design with a critical eye because each iteration will be subconsciously used to measure your skill and worth to the company.
  5. Do one project, for a non-profit, for free.
    A lot of people out there will jump up and down and tear their hair out when they read this.  There’s a big stink in the creative community about “don’t work for free”.  I say that’s BS.  Pick a non-profit or charity.  Do some design work for them for free.  This gives you a chance to fill out your portfolio, lets you meet really nice people who can recommend you later (and will) and does some good for the world.  Everyone should volunteer.  Don’t listen to the grumpybutts who say you’re devaluing their work by doing yours for free.  One project won’t crash the economy.
  6. Be ready to explain every decision you make.
    You’ll be asked why you made something blue.  Why it’s on the right. Why it’s round.  Have a reason.  Don’t ever make arbitrary decisions.  It’s ok if, occasionally, you say “I can’t really explain it, but it just felt more aesthetically pleasing” – every once in a while.  But MOST of the time, you need to have a valid, logical reason.
  7. Ask yourself WHY often.
    When you finish a design, ask yourself why you made every decision you made.  Why did you make that font blue?  Why is that all caps?  Don’t be afraid to say “I don’t know” to yourself, but then don’t be afraid to make changes as a result.  If you can’t justify a decision to yourself, it’s not going to hold up for your stakeholders or your users.
  8. Get other opinions.
    You need to become used to being a collaborator.  You’re not a holy artist up on some mountain, working in isolation to create the golden idol of design.  You’re designing something for people to use, so you need to ask people what they think.  I’m not just talking about user testing – I mean ask people if they think that radio buttons are the best way to do that, or if they’ve seen something new and better.
  9. Get ready to lose some battles.
    Sometimes, no matter how right you are, you will get overruled.  When this happens, you have to think: how important is this?  I ask myself how many users will be affected, and how much it will affect the user’s experience.  Is it just not ideal, or is it truly bad?  Go to the mattresses to prevent something from being bad, but consider letting not-ideal go live, and then testing into the ideal design.
  10. Familiarize yourself with standards.
    Computers are confusing and complicated to a lot of people.  Make life easier for them by doing things in a standard way as often as possible.  Make life easier on yourself by using established design patterns.
  11. Make yourself some PSDs and use them.
    I have PSD libraries of widgets and elements I use often.  This is everything from a sample flash message to radio buttons to a grid template for spacing.  They save me immense amounts of time and repetition.
  12. Test like a fiend.
    If you’re ever not sure, test.  If you’re ever sure, test.  No matter how awesome you are, your users will show you that you don’t know as much as you thought you did.  Be humble and be prepared to let your users teach you.
  13.  Don’t take things personally.
    You are not a diva.  You are not special.  You are not granted some gift that others don’t have.  Also, your designs are not YOU.  If someone doesn’t like one of your designs, it’s not because they don’t like you.  Don’t take anything personally.  When you have a bad day, go home and grouse about it, and then let it go.

There are plenty of technical skills you should learn – html, css, javascript – and tons of art concepts to grasp – color theory, composition, balance – but those are all easy to learn. These 13 pieces of advice were hard won with fifteen years of greying hair. They’ll make the difference between a passable designer, and a really great one.

Today’s Glossary Term: 
The glossary term was boring me.  So, I can safely assume it was boring you too.  I’ve decided to stop doing terms, and if you miss them, I’ll be happy to start again.

Today’s Interesting Link:
hack2work.com is a great blog that has tips for the working designer.  I love them because they grok the real world, and you should too.

Today’s Usability Quote:
“If something feels inefficient, it IS inefficient” – Jensen Harris

Today’s Music To Design To:
I don’t have an Amazon Affiliate account any more, so I’ll make my recommendations without links for the time being.  Enjoy!
dubnobasswithmyheadman is a fantastic album by Underworld.  It’s energetic, it’s magical, and it sneaks up on you.  You’ll find yourself in that space where you design without any thoughts… it just flows.  And, it’s great for imagining superhero battles in abandoned warehouses.  I’m just sayin’.

User Experience goes beyond your website

Posted on by krys

From time to time, I find myself inspired to remind a company:  User Experience is the ENTIRE experience your customer has.  It’s not just the clicks and pixels on your website.  It’s how your customer feels that you, as a company, feel about them.

With this in mind, there are a few rules you should follow on your website, even though they might seem counter to your business needs:

1.  Make sure it is easy to contact you by email and phone.  Make sure this contact information is displayed on your home page at LEAST.  Better is that it should be displayed on EVERY page of your website.  Most users will look to the footer of your site, so you can either put the contact info right there (best) or have a “Contact Us” link (not bad).
I know that there’s an objection to this because if you give customers a way to contact you, you’ll have to pay someone to answer emails and phones.  Expenses go up.  However, if you do NOT give customers a way to contact you, they will choose to do business with your competitor who has a prominently displayed 1-800 number.  Trust me on this.
By not giving them a way to speak to you, you are essentially saying “We don’t care what you, the customers, want or have to say.”

2. Make it easy to unsubscribe.  In emails, have the word “unsubscribe” be a link to an instant unsub. Don’t use some funky sentence that beats around the bush but makes marketing people feel comfortable.  Use the word “Unsubscribe”, because that is what users are looking for.
On your website, have an unsubscribe link in your megamenus or your footer.  My rule of thumb is that a completely new user should be able to find the unsub link within three seconds.
The objection to this is that if you make unsubbing easy, your unsub rate will go up.  I won’t lie; it might.  But honestly, the RIGHT way to get unsubs down is to improve your offering.  Make it better, and people won’t even look for the unsub link.
By making unsubscribe hard to find, you are trapping users into a subscription they don’t want.  They will resent your company, which does harm to your brand – and they will either delete your emails without opening, or set up a filter so they never have to see them.  Worst case scenario, they’ll mark you as spam.

3. Don’t make your users pay for basic support.  If they paid for your product, it’s in your best interest to give them basic support for free.  The more they use your product, the more they will want to buy the next version, and the more they will want to  tell their friends about it.  If they have a problem, and you don’t support them, then they will give up on you and tell everyone they know that your app doesn’t work.  This is most especially true in the first week of a user’s acquisition.

3a. A knowledgebase is not enough support.  Unless you are an open source application, then you need more than a knowledgebase.  You should have some version of live chat capability, a support phone number, and a good support ticketing system.  Don’t make your users rely on FAQs and poorly edited form answers to get help.

There are plenty more rules for making sure your customers have a good all-around user experience.  What are some of your favorites?

Today’s Glossary Term: 
Multivariate Testing – Everyone knows that A/B testing is when you show some of your audience one version of a page, and the rest of the audience another version of the page.  This is great for testing drastically different designs to see which one performs better.  Multivariate testing is what you use next – once you pick a design, you start to tweak things.  You will run five, ten, maybe twenty MV tests at once, changing a tiny thing here, a tiny thing there.  It’s a very rigorous, scientific test that allows you to learn that the combination of headline A with button color B and button placement C and image D works best for your audience.

Today’s Interesting Link:
whichtestwon.com/ is a fascinating look at A/B tests and what did better.  The author of this blog has a great understanding of the fact that every audience reacts to things in a unique way, and there’s no best practice that works for everyone.

Today’s Usability Quote:“Things should be made as simple as possible, but not any simpler.” – Albert Einstein

Today’s Music To Design To:
Have you heard the TRON: Legacy soundtrack?  The incomparable Daft Punk does classical.  And it’s brilliant.  It will totally put you in the creative mood.
Download the MP3 Album or Buy the CD

What Not To Do: UPS.com

Posted on by krys

A lot of times, when I’m designing something that doesn’t have a clear standard I will look at what other sites do.  It’s important to know what the competition is up to, it’s important to know what your users are seeing in other places, and it’s sometimes inspirational.

However, I’ve been in companies where that competitive benchmarking is taken too far.  Whenever there’s something to be designed, these companies look to the big players, and copy what they do.  The problem is, the big players aren’t always USABLE.  Sometimes they get away with bad usability because they’re so big, and sometimes because their offering is so unique that users have nowhere else to go.  But just because they are big does not mean they are good.

Case in point: ups.com.

Don’t get me wrong, these guys do a lot of things right.  They’re a good and useful website.

However, they miss on a very key point:  they do not make me successful in my #1 task on their website.

I ordered some T-shirts that I designed to wear to a midnight movie premiere.  (yes, I’m that kind of geek)  I wanted to know if they’d be here in time, so I clicked the tracking link provided to me by the vendor (good usability, Cafepress!) and went to the ups website.

Win:  My tracking number was embedded in the link so my package came up without my needing to hunt for a number to paste into a field.
Win:  The info about my package is front and center on the screen, with a colored background to draw my eye.

Fail:  Number one question a customer has when checking status of their order: when will it get to me?  This answer is nowhere to be found on the screen.

Win:  there’s a status.  It says “in Transit” and has a hyperlink.  When I mouse over this, I get an instant help flyout.  Hooray for contextual help!  However…

Fail:  The help flyout tells me that “In transit” means my package will be there on my Scheduled Delivery Date.  It even caps Scheduled Delivery Date.  Which tells me there should be a field on this screen that tells me what my Scheduled Delivery Date is.  But there isn’t.
Fail:  There are tabs across the top of my colored area with my info in it.  Everyone knows that tabs are for different display of the same data, right?  So clearly, these tabs marked “Quantum View” and “Flex Global View” must be different views of my order, one of which might have my Scheduled Delivery Date.  Wrong.  They are upsells.  Not only are they upsells, they’re texty, vaguely written upsells that are obviously not aimed at the casual shipping recipient.

Epic Fail:  As I realize that these are not for me and try to click back to my order, I am taken to a generic “Track Packages and Freight” page with a field where I can enter my tracking number.

Dear readers, do not use tabs for upsells.
Do not use tabs for navigation unless you can’t avoid it.
Do not use tabs for decoration.
Do not use tabs for emphasis.
Do not use tabs to make your managers happy.

Please be gentle with your users.  Use tabs to display different views of the same data.  Or if you must, closely related data.

Please also let your users get back to where they came from without making them close a browser tab and return to the original email they clicked on.  It’s just nice.

And please make sure that every page of your site answers the #1 question that your user comes there to answer.  At the very minimum.

Thank you for being kind to your users.  :>

Today’s Glossary Term:
CPC: This stands for Cost Per Click, which is an advertising business model.  Advertising is how a lot of websites pay their bills and keep the awesome content coming to you.  If you’re running a blog or a content site, CPC might be a very interesting term for you.  However, I’d advise you to diversify – advertising alone won’t necessarily do the job unless you have some really impressive traffic.

Today’s Interesting Link:
http://www.thereisnopagefold.com/ – ‘Nuff said.
Shout out to the awesome Eric Ritchey for sharing that link with me.

Today’s Usability Quote:
“The computer culture has learned from human interface research that the most supreme form of interaction is the lack of it; less is more” – Nicholas Negroponte

Today’s Music To Design To:
I’m not feeling very musical today.  What are you listening to lately?

Best Firefox Plugins for Web-based Design

Posted on by krys

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

Posted on by krys

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.

Finding a UX Job – In a Recession

Posted on by krys

We’ve all heard the lines – if not delivered directly to us, delivered to someone we know:

“We’re tightening our belt right now, and User Experience is not core to our business model”

“We’re taking the interface in a new direction, and we need fresh eyes to do that.” (and then they hire someone at half your salary)

“The product managers have learned so much from you, they’re going to take over your role.”

Whether you’ve been laid off, or you’re just looking to move on, job hunting for UX people in a recession is HARD.

Eight months ago, my employer (at the time) and I mutually decided it was time for me to move on.  I spent two months looking, and in the end I found what I love to refer to as a “pony” job – the perfect job in the perfect company, working with the perfect team.  I’ve never been happier.

Unlike the dot-com crash of 2001, when there simply WEREN’T any jobs out there, there are still plenty of UX openings for the taking.  I still get 3-4 emails a week from recruiters who have opportunities that are great matches, in my area.  The challenge comes from the fact that there are a lot of really excellent candidates out there, hunting for good opportunities.  The competition is stiff, my friends.

But it’s not hopeless.  If you’re in the job market, expect to be looking for around two months.  If you’re not picky, possibly only one month.  I applied to 93 total positions.  I interviewed at about a quarter of that.  I got several offers, but it was important to me that I find the RIGHT place, not the first place.

Whether you’re looking for the perfect job or just a paycheck, here are a few helpful hints:

Job Boards

Post your resume on every single one you come across.  Update it weekly.  I don’t care if all you are updating is your skillset or one word in your description.  Every time you update, you get bumped up in search results.

Resume

I’m not going to enter the debate about one page or multiple pages.  Do what you think is best, there.  However:

  • Have a list or grid of skills.  Not sentences, phrases.  Example:  graphic design, user interviews, heuristics
  • Forget the “goal” – that’s an outdated relic.  Instead, have an introduction that describes what you can do, and how long in total you’ve been doing it.  It’s like a two sentence cover letter.
  • Treat your resume like an Information Architecture project.  What’s the most important info?  Make that very prominent.  What’s next?  Put that nearby.  Etc.
  • Include all your contact info on your resume.  Recruiters will tell you to take it off, but the job board resumes should have it.
  • Include a link to your portfolio.   If you do ANYTHING, people are going to want to see samples of your work.

Recruiters

A lot of people feel recruiters are like used car salesmen.  Honestly, some are.  However, I’ve had fantastic success with particular recruiters and I swear by them.  I like them so much that I keep touch with them for years afterwards, and refer friends.  Build relationships with some good recruiters and they’ll take great care of you.

  • Reformat your resume however the recruiter asks you to, for them.  You don’t have to use that format anywhere else, but the recruiter knows his clients the best, and he knows what they are looking for.
  • Insist that your recruiter tells you every company/position they submit you to.  Bad recruiters will send your resume to positions you don’t fit, and it reflects badly on you.  Plus, if you then submit your resume directly, the hiring manager will only remember that your name is associated with something negative and you’ll hit the round file.
  • Communicate with your recruiter.  Think of them as your advocate.  Or your best friend, or your bodyguard.  Whatever it takes for you to treat them like a partner.

Social Web

Use your friends and your social networks.  Announce that you’re looking, unless you’re doing it in secret.  Talk to everyone.  Go to networking events.  Do side projects.  Offer free advice, consultations or etc.  Word of mouth is invaluable, and nothing gets you an interview faster than some impressed acquaintance saying “I know this amazing person…”

Also, momentum is a great thing.  If you know people with similar skillsets, ask them to pimp your resume out when recruiters reach out to them.  I regularly pass on resumes when recruiters touch base with me – it helps the job seeker and the recruiter.

Keep Upbeat

I know this sounds weird, but the more positive, cheerful and upbeat you are, the better your chances are.

As a job hunt drags on, you can start to wonder, “What’s wrong with me?  Why don’t I have 10 offers and a bidding war yet?  Am I unemployable?  Am I outdated?  Are my skills too weak?”

Don’t fall prey to this way of thinking.  It shows through in your body language, your written communication, and it even causes you to make bad choices about where to apply.  Keep your eye on finding a “perfect” fit.  If you haven’t been hired yet, it’s because you haven’t been exactly the right fit, not because you haven’t been good enough.

Interviewing

Try to find out as much about the people you are interviewing with, how long the interview will take, and what you should bring before you ever go in.

  • Take a printed copy of your resume AND the job description when you go.
  • Take the time to read the website, try the product, and get familiar with the company you’re interviewing with.
  • While you’re doing that, come up with three questions about the company or product that dig deeper in than their website, FAQ or press materials go.
  • Dress nicely, but not TOO nicely.  There’s nothing wrong with asking how you should dress for the interview.  Especially with dot com companies, wearing a suit might lose you the job.  They might decide you’re too stuffy.
  • Be prepared to answer some canned questions.  Think through the answers ahead of time so you aren’t caught off guard.  Do an internet search on interview questions and you’ll find a ton of lists.
  • Be prepared to do a test project.  This isn’t free work for the company, so don’t get irate.  They aren’t going to use what you’re doing, unless they’re really unethical.  They just want to get a sense of what it’s like to work with you.  Be pleasant, flexible and fast and your skills will speak for themselves.

Be Ubiquitous

Unless you’re looking for an entry level position, your potential employers are going to Google you.  Be found.  Blog posts, forum comments.  LinkedIn profile, facebook profile, livejournal.  Make sure you’re everywhere and that everywhere you are reflects your professional persona.  You want potential employers to know you’re not going to embarrass them, and that you’re respected and passionate about your profession.

There’s no magic wand that will fix the economy and make our 10% unemployment rate go away.  But at least for UX people, the situation isn’t as dire as it was eight years ago.  Chin up, carry on, and go find that “pony”.

Today’s Glossary Term:
A/B Testing –  this is a process by which you create two versions of something, either slightly different or very different.  You then serve up version A to some of your users, and version B to the rest of your users.  This is, of course, simplifying the concept, but you get the idea.
A/B testing can answer little questions like “does a red button or a green button encourage conversion?”  It’s invaluable, but it takes some infrastructure to set up unless you have…

Today’s Interesting Link:
Google Web Optimizer – GWO is a free (for now) tool which lets you do A/B testing without building an enormous infrastructure on your own.  It’s not going to tell you everything you might want to know, it’s not going to be as convenient as having a home-grown system, but it’s nearly immediate, and it’s darn easy to use.

Today’s Usability Quote:
“Perhaps the most difficult thing an artist has to do is evaluate the quality of his own work.” -Peggy Hadden

Today’s Music To Design To:
Boards of Canada was introduced to me by an artistic genius and all-around neat guy a few years ago.  You can’t go wrong, with Boards in your headphones.  It’s downbeat, but happy, musical but not lyrical, and energetic without being thumpy or making you anxious.  It’s good driving music, and great for those long hours coding.
Download some MP3s or
Buy a CD

What a Technophobe Can Teach Us

Posted on by krys

“If it was easy, how would it work?”

I recently finished a usability study on the golden path of my employer’s website.   Our primary demographic is mothers, aged 25-45, who shop online.  Mostly, I test within this demo, though I like to include people from outside the target with every round of testing.

This time, I had the pleasure of testing with the mother of one of our founders.  She’s older, midwestern, and completely computer illiterate.  When I say completely, I’m not exaggerating.

And she was invaluable.

It’s important to test within your demographic.  You want to make sure that the people who are most likely to use your app or website CAN do so.  However, you should make sure to test AT LEAST your golden path on someone who’s completely unfamiliar with computers and the internet.

Why?  Because it will uncover all your assumptions.  For example, have you assumed that people know what the cancel button will do?  Have you assumed that people know how to enter their name in a form?  Have you assumed that people know how to choose a file from their computer?

You may not have to design your site to cater to a user who is that extremely novice – however, you had better THINK about the person.  It’s fine to make assumptions and draw lines, but it’s crucial that you know you’re doing it, and that you understand why.  After all, ubiquity is the holy grail of any brand – and if your app is ever going to be widely adopted you will eventually have to serve the technophobes.

Even standards (which I evangelize at every opportunity) aren’t enough if you’re designing for the whole planet.

It’s worth noting that your testing techniques may need to change for the computer-wary.  I recommend sticking to in-person methods, because if they’re illiterate already, figuring out a remote method is just going to make them uncomfortable.  Give extra reassurance, because they’ve probably never done anything like this before and they’re going to feel like a fish out of water.  And be willing to skip testing advanced features – just walk through the basics.  Advanced features are for advanced users, don’t whomp your novices with them.

One thing you’ll notice when testing with internet newbies:  when you ask them what they expect, or what they’d like, or how they’d like something to work they’ll draw a blank.  They have no experience from which to draw expectations.  Instead, I ask the question “If it was easy, how would it work?” and I get them to dream.

Test with technophobes.  They will teach you more than you can imagine, even if they aren’t the people you design for.

Today’s Glossary Term:
focus group – A method of gathering user feedback.  Gather 6-8 users in a room together, for an hour.  Have a list of questions for the users.  This method is great for learning how people talk about your product, how they feel about it, and how they interact with each other in regards to your product.  Focus groups are great for testing ideas and concepts, and not great for testing specific single interactions or detailed workflows.  Focus groups are a great way to gauge the social impact of your product idea, too!

Today’s Interesting Link:
http://www.smashingmagazine.com/2008/08/17/10-futuristic-user-interfaces/ – this is a fantastic mental playground, and it gets the imagination going.  Where do you think user interfaces are going this year?  The next five years?  The next fifty?  How about five hundred years from now?

Today’s Usability Quote:
“If we knew what we were doing, it would not be called research.” – Albert Einstein

Today’s Music To Design To:
You have to be careful when you’re listening to BT, or you’ll find you’ve designed something awesome and forgotten to eat, sleep or exercise for three days. It’s that kind of music; energetic, inspirational, and melodic enough to lull you into a creative coma. I highly recommend the album ESCM, which is available on CD.
Buy the CD or
Buy some of his MP3s

AJAX abuse hurts your users – and you

Posted on by krys

Sorry for the long absence, dear readers.  Life got in the way of my proselytizing.

However, I’m back and I’ve got a piece of solid wisdom for you:  AJAX is new and fun and exciting, and it makes things much more interactive and powerful.  But it’s also highly non-standard and therefore often unusable.  Just because you CAN do a thing, doesn’t mean you should.

Yeah, I know, sit back down and put your pitchforks away.  I’m not saying “don’t AJAX in your interaction designs”.  I’m just saying you have to THINK about it.  Think carefully, and look at things from your users’ points of view.

On the web, you get everyone from grandma to my 13 year old to Bill Gates clicking around.  I sincerely hope that you know the full range of users your site gets, and that you’re designing for the lowest common denominator (LCD).

Standards are crucial for LCD design.  On a Mac, the positive (moving on) action button goes on the right.  It’s always on the right.  Users can know to click the rightmost action to progress, without ever reading what the button says.  (And they do, trust me)  On a PC, it’s the opposite – positive action button always on the left.

The key is, ALWAYS.  People like to form habits, and they don’t like to think.  They like things to be consistent and comforting, especially if it’s new.  Humans want something to feel familiar, or they’ll resist adopting it.

So then we come to web standards.   Checkboxes are for when you can select multiple options.  Radio buttons are exclusive.  Cancel is your escape hatch.  Links are underlined.  These are the things that even grandma relies on, to help her as she wanders through our labyrinthine web apps and content portals.

The problem is, these standards are often clunky and inefficient.  Enter information in a form and click a button to apply it to your page.  Wait.  Lather, rinse, repeat.  Yes, it’s tedious, and our users are always hollering at us to save them time.

Enter rich internet design patterns.  Regardless of the technology behind them, real or faked or kluged, these design patterns make our web browsing experience a million times more lively, responsive and dynamic.  Suddenly our users can drag and drop.  They can enter info and then hit the enter key to submit it.  They can update displays in real time with sliders and spinners.  OOOOH, shiny.

Except they don’t.  How many of the top websites out there use drag and drop?  Guess why?  Although it’s getting better, very few users on the web know they can drag and drop.  No standard has yet emerged to indicate what is draggable, and where the drop targets are.  The idea of submitting a form field with the enter key is just barely starting to get traction in the savvy crowd, so it’ll be years before my technophobic mother is comfortable with it.

So you have sites whose functionality is powerful, but whose usability is abysmal.  Take Remember The Milk, for example.  Don’t throw tomatoes; I know this site is a darling of efficiency buffs.  And sure, it’s efficient.  Once you’ve figured it out, you can zip through task creation and management like a whirling dervish.

But when it comes to metrics of ease of use and learnability, Remember The Milk scores ridiculously low.  Why?  Because they’ve plunged headfirst into AJAX design patterns without looking back.

The primary function for Remember the Milk is the adding and managing of tasks.  You want to add them, and then later you want to mark them as done.  This is your golden path.

To add a task, you click a small link in the upper right hand corner.  Then, you are given an editable text field, but that’s to the left and below where you clicked so you might miss it.  You type in the text field, but there’s no way to assign any details to the task – and there’s no button to save it.  You hit enter, and your task appears in the list – and then a second later it moves to the bottom of the list.  This is, needless to say, confusing.

When you mouse over any task, you see the details in a right hand pane.  This is great!  Except, you can’t get to them.   If you click on a task the right hand pane will “stick” – sort of.  Nothing tells you that the right hand pane is sticking on that task, and as you mouse over stuff on the way to it, it changes – so you have no way of knowing that when you get there, what you want to edit will be there.

To edit a task, you click a little icon to the right of what you want to edit.  Each item has a different icon.  Let’s try the golden path item: the date.  The icon you click is a calendar.  Great!  You click it, and you’re presented with an editable text field, which has a calendar to its right.  Well, everywhere else on the web, clicking on a calendar to the right of a text field brings up a little widget where you can click a date.  So you click that calendar icon, and poof! The text field goes away.  Turns out, that’s how you submit your changes.

I’ll leave off my criticism there.  RTM is a great app, and I do use it.  And I recommend it to people who are willing to take the time to learn it.  However, it drives home the moral of this post:

Just because you can do a thing, doesn’t mean you should.  Stick to standards and be sparing with your bells and whistles.

There are exceptions to this rule.  I’ve seen some rich internet apps which use all the bells and whistles but also let users do things the standard way.  I’ve also seen apps that give their users little pointers as they go along, using more RIA widgets that fly out and point to things.

Certainly, you can “flex” all those new muscles the internet is building us.  But for goodness’ sake, don’t beat your users over the head with them!  If you design a fancy AJAX interaction, make sure the standard “legacy” interaction is there too.  If you’ve got drag and drop, also allow clicking to fill that spot.  If you have a widget that changes stuff somewhere on a page, make that change apparent by using bright colors, animations, or callouts.  Treat your users as if they’re not psychic, and they’ll thank you.

Go gently into that rich internet, my chidren.  Go gently.

Today’s Glossary Term:
crowdsourcing – This is one of those buzzwords you’re hearing all over the place.  It’s a fantastically useful concept for designers and UE professionals, from two angles.   Its definition is literal – getting ideas, concepts, or even work from the masses.  Employ crowdsourcing within your own company to get interface ideas, or without to fill in gaps in your creative needs.  Or, join a crowdsourcing community and offer your services within the crowd – it’s a great way to drum up business.

Today’s Interesting Link:
http://failblog.org/2008/10/15/optional-fail/ – We all love UI humor, and this one is a classic example of what happens when we’re not paying attention to what we build.

Today’s Usability Quote:
“Fail often to succeed sooner.” – Tim Brown, CEO of IDEO

Today’s Music To Design To:
This is an oldie but a goodie – the Hackers Soundtrack.  Let’s leave off the complete unreality of the movie, it was relatively fun and the eye candy was good.  However, the soundtrack is a fantastic blend of mid-90’s alternative and electronic music, with some stuff that’s strongly relevant and even slightly edgy for today.
Buy the CD

How to manage stakeholder feedback

Posted on by krys

One of the hardest parts of a UE person’s job is to reconcile the needs and priorities of users with the differing needs and priorities of internal departments. Inevitably, you’ll get great feedback that either doesn’t work because it conflicts with someone else’s, or because it doesn’t take all factors into account. Inevitably, you’re going to have to tell someone “Thanks but no thanks.”

Realistically, this is why we’re paid what we are.  It’s not because we have design school degrees or can write three languages by hand.  It’s because we take the pressures from all concerned parties and turn them into the best realistic solution.  It’s like being the rope in a multi-dimensional game of tug-of-war.

Sometimes, that means choosing the lesser of two evils.   Every designer has at least one story of where they had to throw band-aids all over a terrible situation with no time, no user testing, and without the buy in of half the stakeholders.

Today, I heard a stakeholder say, “Why are you asking for my input if you’re not going to listen to it?”

His frustration is universal.  It’s the same way I feel when my daughter asks “blue or purple?” and then chooses the opposite of what I answer.  Why waste my time?

There’s a good answer to this question, though, and it’s worth your time to explain.

Good user experience can’t happen in a vacuum.  It also can’t happen by committee.  If you’re worth your salt as a UE person, you absolutely must take the time to gather every viewpoint and perspective you possibly can.  However, if you implemented every suggestion that was made to you, not only would NO ONE be happy with the result, your product would be an unusable hodge-podge.  (Believe me, I’m tempted to make a mockup with everyone’s suggestions someday, just to let them see what the alternative is!)  Someone has to mediate.  And at the end of the day, that Someone who has to weigh all the information and make a choice, is you.

So if a stakeholder ever expresses this frustration, here’s what you need to do:

  • Tell them you understand how they feel.
  • Tell them you ask for their feedback because it’s both good and important.
  • Remind them of times in the past when you’ve acted on their feedback.
  • Explain that you have to weigh everyone’s feedback, and this time you had to make a tradeoff that they didn’t win, but next time they might.

This is the worst part of our job; thanking people for feedback we can’t act on.  But it’s also the best, because it builds a relationship of honesty and trust between you and your stakeholders.  Remember that they’re as invested in your product as you are, and you’ll all get through, just fine.

Today’s Glossary Term:
Ubicomp – Ubiquitous computing.  This term describes the phenomenon that we and our users experience every day – every aspect of our lives is becoming computerized.  There are computers in our watches, our cars, our refrigerators.  We are living at the birth of the Era of Ubicomp.

Today’s Interesting Link:
http://www.yellowpagesgoesgreen.org/index.html – This site is a prime example of a great idea with a suboptimal UI.  The main purpose of the site is lost in all of the clutter.  It’s attractive, it’s modular, it’s organized – but there’s no hierarchy at all.  I suspect that no one told the designer what was highest priority on this page.

Today’s Usability Quote:
“You can please some of the people all of the time, and all of the people some of the time, but you can not please all of the people all of the time.” – Krys Taylor, revising Abraham Lincoln

Today’s Music To Design To:
Sparky’s Flaw is a relative newcomer to the music scene, but they’ve got charm and talent in spades.  Their music is a fresh style of rock, and their lyrics are both endearing and thought-provoking.  Their tunes are catchy enough that you’ll find yourself tapping your foot even if you’re only listening in the background.
Download the MP3s

Evolution vs. Revolution: How to effect change

Posted on by krys

There’s a term that people use for a job that is everything you could ever want, right off the bat: a pony.  For a designer, the pony job is one in which you come in to a well thought out, well researched product that has no pre-existing interface and will be built using the best technology for the job, after you’ve had ample time to do  your user research and design.

But that NEVER happens.

More often than not, the case is that you hire on to a company that either has an existing product with established design conventions (good or bad), or an emerging product whose original design was done by engineers and the CEO while they tried to find and hire you.  Don’t get me wrong – great products can and have come out of these situations.  But frequently a designer joins a team or a company and in addition to designing the ever-flowing panoply of new features required to stay competitive and build brand, they also have a mess to clean up.

So how do you do this, without losing ground a competitive marketplace?  Design takes resources – Product, Marketing, Engineering, QA, sometimes even executive.  While those people are working on requirements, testing, coding and verifying all these fancy fixes you want, they’re not doing the things necessary to whoop your competitors into forlorn lumps of also-ran.

Yes, we all know that having a usable website or application is an integral part of remaining competitive.  I take great pleasure in reciting a story about a director of E-commerce at a Fortune 500 company that hired me as a consultant.  When I was giving him the standard ROI speech on usability, he actually said to me “We got this far without doing any usability.  Why should we start now?”
That director no longer works for that company.

Joking aside, though, it is a tricky balancing act – how do we update our past code while still driving forward with new?

The answer is evolution.
Evolution is a multi-general process in which an organism changes to adapt to its environment.  Your website or application SHOULD be a living organism of sorts, growing and shedding and hopefully healthy.  There’s no reason your website can’t evolve.

If you think about it, stopping everything to have a revolution – major relaunches, complete identity changes – is an enormous and painful act.  It costs unimaginable amounts in money and time, not to mention your users’ pain as they relearn everything they were comfortable with.  It sets you back in brand identity, because you have to rebuild everything you’ve built.  And the potential for things to go wrong, the risk of failure, is enormous.
It’s not that there’s never a time for revolution.  We can all think of one or two incredibly successful relaunches, or prominent redesigns.  But honestly, it’s a drastic measure that should be left to the giant behemoth corporations, or used as a last resort.

Because you can always evolve.
Start with a plan, a vision for your end goal.  I like to draw pictures and make spreadsheets, but other people might work differently.  This becomes your strategy, and is much more powerful than any buzzword-filled strategy statement will ever be.
Then take the most heinous wrongs and right them first.  What are the usability holes your users are complaining about?  Will converting static pages to AJAX enable ten other improvements later?  Can you revamp the golden path all in one fell swoop?  Start one at a time and break out all the tiny tasks that make up the grand vision.  Let your site mutate.

Your users will complain.  Unless you have the most complacent user community on the interwebs, SOMEONE is going to complain about every single thing you change.  I have actually had users complain when I reduced clicks.  Listen, but don’t be discouraged.  Most of the time, if you did your research well enough, those same users will fall in love with the new stuff after a few uses.  They’re habit driven.  And if you were wrong, and what you did actually DID make things worse, well, you only have a small mutation to roll back, rather than a huge redesign.

It’s not ideal.  Who wants to change one page at a time and have potential inconsistencies with their names attached?  Who wants to wait a year or two for pages to be tiled?  But in the big scheme of things, it’s worth the wait, and it’s a great way for a design team to empower the corporate strategy, rather than slowing it down.

Today’s Glossary Term:
Golden Path -The primary task flow or navigation flow of a website or application.  If you can’t instantly identify the golden path for your app, you should immediately sit down and figure it out.  What is the one thing that everyone should or wants to do when they come to you?  And how do they do it?

Today’s Interesting Link:
http://www.dontclick.it/– Both beautiful and brilliant.  Imagine a web interface in which you don’t click.  Then follow that link and go experience it.

Today’s Usability Quote:
“The greatest mistake you can make in life is to be continually fearing you will make one.” – Elbert Hubbard

Today’s Music To Design To:
Dead Can Dance have been around for too many years and have too many albums for me to recommend just one.  Honestly, almost anything you find from them is great, and it’s all got a mellow, exotic groove that lends itself amazingly well to creative work.
Check them out at Amazon.com