In honor of tax day, here are some thoughts about UX in the paper world. From tax forms to voting, we have the opportunity to present a good user experience… or otherwise.
The discipline of UX looks at a few interesting things that may surprise those unfamiliar with UX. We look at how to make sure meaningful information is transmitted to the user. We look at how to design something that makes learning and understanding easier.
We’ve all seen the opposite. Take tax forms. They are not easy to fill out on your own. Whether a TurboTax robot helps you or a human accountant, it’s an area where it’s hard to know everything. People with less access to the internet or human help are at a disadvantage. Who do they ask for tax help when filling out these forms when the instructions don’t make sense to them?
That’s a UX issue. Someone could make tax forms easier. TurboTax did but they charge for it. Tax forms could be designed to be easier.
And if a tax form and its instructions aren’t clear or easy, which means someone might need human help or a pile of Googling to understand something, whose fault is that? Shouldn’t we blame the tax forms for failing the human rather than blaming the human for not trying harder to learn info the tax forms excluded?
Could we say that that’s too bad? That if you have difficulty with tax forms, you must not care to have done more research and get yourself educated on tax matters? Could we say that if you didn’t get a refund you were owed or you got audited because of an honest mistake that that’s too bad and it’s your responsibility to know everything about the system?
You could, but that wouldn’t be very UX of you. 🙂
A good UX person knows the likely habits and thought processes of the target users. So we KNOW people don’t like to fill out tax forms. We know they’re not easy to understand. We know that Googling for answers sometimes doesn’t help. A UX person would design something that answers itself, keeps you from making errors, and truly helps you with errors rather than just telling them they are there.
If a UX person designed tax forms, we’d design them to be clear, easy, and hard to make a mistake on. Because we want all processes to work like that.
Many years ago, I heard eBay at a variety of events get pooped on for how bad their search feature was. And it was (probably still is). Their answer each and every time was that the user is searching incorrectly. That’s convenient but if so many people are getting the same thing wrong, a UX person would say it needs to be rethought, redesigned, and rebuilt.
That’s the tip of a UX iceberg. But in my industry, if people aren’t understanding things, we blame the method aimed at informing them or we blame the design. We don’t blame the user for not having done more research.
This image has been floating around this week:
I think that anything anybody can do to reach out to people who are hurting and unfortunately considering suicide can only be a good thing. It looks like Facebook carefully wrote a message that isn’t too emotional but lets someone know that friends are worried and there IS help out there.
But What’s Up With The Heart With The Question Mark?
I can’t help but wonder if that’s really the right imagery or icon considering the potentially grave situation. I imagine that you’d want an image that shows care, warmth, and some sort of “people care and we’re here for you.”
So why the question mark? I would hate for a depressed person to see a heart with a question mark and interpret it as “does anybody love you?”
How about just the blue heart. A blue heart is already a little sad.
And there is no question here so we don’t need a question mark. Everything is written as declarative sentences. Someone asked us to look at a post that made them concerned. Click to see that post.
The next screen asks the same question twice: What would you like to do? I’m not sure I want to ask a suicidal person what he or she wants to do. I think that second screen would be FINE without the twice-asked “what would you like to do?” Remove both instances of that question.
I’m glad Facebook is doing this, but I think the imagery and some of the copy could be better given the extremely delicate nature of the situation. This message might come as a surprise to someone who receives it, so how can it be warmer and softer?
Ever since Apple started designing everything they did in black on white with lots of shades of grey, the whole world seems to think that “good design” means lots of shades of grey.
I often disagree. Good design means, among other things, making sure that people notice and find the path they wanted to take. Shades of grey can often obscure that path by hiding choices. If you don’t see a choice designed with a grey background, then that’s a path you might miss.
Of course, there are times the business goal is to hope you miss that choice.
Take this screen from the Network Solutions site. I was in the process of renewing a domain name, which at NetSol includes 900 screens offering you services you didn’t want. It looks like they hope you will buy them by making the “no thanks” buttons rather hard to notice. Click to enlarge:
You might even notice the giant text saying I should call now to renew this domain (AND buy this other service). The green call to action had the phone number they have on file for me; clicking that would tell them to call ME (to sell me these other services). I kept scrolling and finally found the NO choice. It was light grey with white text. That’s going to be hard for some people to see. That probably doesn’t pass contrast tests.
And it was probably designed that way on purpose.
How are you using grey?
I have seen other websites that treated grey as part of their colour palette. Grey backgrounds for tabs (resulting in a product mgr admitting that many people didn’t know those tabs were there, leading to customer service phone calls asking “how do I…”). Grey backgrounds on buttons.
What will always amaze me is a company that uses a grey-backgrounded button as the key call to action. I’ve seen some websites where someone must have thought WELL if we put an interesting text colour on our grey button, people will notice it and click that. I say don’t be so sure. Putting blue text on a grey button is still a grey button.
Grey is the official colour of a disabled interactive element.
It’s the official colour of “You can’t use this right now” and “this is temporarily or permanently disabled.” It’s often the colour of a non-primary choice you’re hoping people don’t see, like a Cancel button.
If you are making real call to action buttons grey, you are probably doing it wrong. And if you still want to copy Apple, even they have moved on to CTA buttons that are more easily noticed. Click to enlarge.
Take what I call the “thumb test.”
Cover a website’s logo with your thumb. OK, what site is it? Is there anything else on the page that creates a mood? Defines the company image? Makes the site stand out from other sites and competitors? Probably not. Unfortunately, that’s what most “website designers” do. It’s a layout more than it’s a design. This is why my slogan is, “Design, personality, and usability are the new white space.”
A typical “website designer” asks you for your logo, the colors you like, and a few pictures of what you sell or do. Very often, this “designer” is looking to you for direction and ideas rather than being a creative designer and coming up with something fresh. You’ll often end up with a website just like dozens that you see every day; columns, lots of things going on, especially on the home page, and maybe some Flash (please Lord no!). Or maybe you end up with a slightly-altered WordPress theme, and your website looks like zillions just like it.
Is that really what works best for your target audience, your company image, and the way your customers are surfing?
Raise your standards! You want more than website design. You want us to make sure that the site or app is going to be innovative, creative, and darn obvious to use. And I can help. 🙂
I was just Googling how the heck my bank card could be “compromised” and what that even means. Google ranked a page highly that came from a bank I’d never heard of. Seems to be local to Oklahoma.
Having worked at Wells Fargo, done consulting for TIAA-CREF and ING Barings, and just starting a contract at Bank Of The West, let’s just say I can’t imagine a bank website looking like this. Here are the home page and the page that came up in search results about compromised bank cards. Click to enlarge.
I’m surprised their slogan isn’t, “Who’s a good bank!”
Well I never thought I’d see this. And I’m glad I did. Cheers to 55his.com for making printable “Yo Momma Is A Shitty Graphic Designer” cards full of design-related Yo Momma jokes.
Click to enlarge:
Remember a month or two ago, I promised this site would get a new design? Well, it’s finally up. Still a few tweaks, but it’s going well.
I know some of my readers may be new to UX/UI, so I’ll explain that the site is designed to look like an annotated wireframe. A wireframe is like a mockup of a site, page, application, or anything someone might use on the web or a mobile device (phone, tablet, iPad). You can “sketch” them, where you use drawn-looking lines, and handwritten fonts. That helps your client know this is just a mockup, and not to go crazy over every 0.001 of an inch. The 960 grid (button at the top right) is a tool we use to line things up. Yes, you can click that button on this site; it’s not just for show.
I wanted to create something that was about what I do and how I do it. I’m fun, fresh, and don’t like to be put in boxes, so it doesn’t make sense for me to make another boring UX Architect website with mostly words, 2 tabs, and lots of rectangles.
One thing I also changed for the new site is that my drop-down menus in my navigation are on click rather than on mouseover. We’re all used to menus dropping down when we hover, but the problem is that the hover state doesn’t really work well on touch devices like phones and tablets. Once you hover your finger somewhere, it’s assumed to be a click, and that’s it. If I can only get to your drop-down menu on hover, it will be harder to use on touch devices. So my new nav menu is on click! Usability, baby! 🙂
And the business card matches.
I hope the site makes everybody smile.
It all started with a weird little Facebook ad asking me if I wanted to work for a game developer in Germany. The job was in Germany.
Well, no and no, but I wanted to click to see where it would go. Before I show you that, let me show you the home page of this company, as I screen shot it that day (click to enlarge):
That’s a familiar website and home page design. I call it “glorified WordPress template.” You see it a lot, and it can be very effective with messaging. It often is lacking a bit in the mood, personality, and uniqueness departments. But you do get the message of what this company is about.
The Facebook ad actually clicked through to this page. Definitely click to enlarge:
What a totally happy world! What a unique page. Don’t you sort of want to work there now? Berlin is evidently a land of happy cartoon clouds and lots of grass! OK, maybe not totally, but this does really make an impression. A positive one. Stuck with me! It was after seeing this that I backed up to the company home page, and saw the purple and white page above. That suddenly felt drab, undesigned, uninspired.
I think you have to live what you do. If you’re a gaming company, there is no reason to have a website that looks nearly identical to a website that might be for a doctor’s office. Or an eCommerce shopping cart. Or a hotel. Your business builds worlds people love to explore. Your website should be a world I’d love to explore.
I was just turned on to TwentyFeet.com, a service that helps track your analytics. I’m trying it now, so I have no opinion yet. But I do have an opinion about the UI and site design.
If you’ve hung out around Brass Flowers for more than a few minutes, you know I’m tired of white space. I’m no fan of columns. And I’m no fan of sites that look like glorified WordPress templates; they are so similar that they are mostly bland and forgettable. The main difference in those tends to be whose logo is at the top.
Now check out TwentyFeet.com. Here is a screen shot of their home page (click to enlarge).
Fresh colour scheme. Fun giraffe character. People really connect to characters. This site passes my “thumb test.” Put your thumb over their logo. Whose site is it? It’s TwentyFeet.com. I’ve seen nothing else like it. The site is easy to read, easy to get around. Gender neutral. Everything is clear and intuitive. And they’re smart to use their character in other places. Here is a screen shot of part of another page (click to enlarge).
Twenty thumbs up to TwentyFeet.com. I rarely see sites that I feel are unique, warm, and will really connect with users. I hope more people will break out of columns and WordPress-theme styles.
When I opened the Brass Flowers Twitter account in October 2010, it offered me the “new” Twitter. I opted in. The new design relies on left and right panels. The left panel is similar to what you’re used to from Twitter. The right side is a much wider version of the right column that’s already there. You have your trending topics, but now if you click to something, it might open in the right panel rather than opening as a new web page.
The main thing I noticed was that the layout doesn’t make sense for the “lowest common denominator” of around 1000 pixels wide. It’s still considered a best practice to design assuming many people still have 1024 as their resolution. And this makes sense when you consider that many laptops are still at 1200 or 1280, and that many netbooks are 1024.
Most people are using Twitter apps from computers and phones. But then why redesign, or why redesign for wider than the lowest common denominator? I asked some of my friends if they were getting a left-right scroll bar. Some are. That’s not good.
Here is a screen shot of what the page looks like on my office monitor and what it looks like from my netbook (click to enlarge). The content takes up 1040 pixels on my office monitor, and it takes up 928 pixels on my netbook. Note that in both cases, you really have very little opportunity to design and brand the background… unless you think people are on really wide monitors, and with the popularity of smaller devices like iPads and netbooks, who can assume that?
Update on 6 October 2010: We scooped Masahble! 🙂 They just covered this today. Here is their look at how you can still be a Twitter background designer.