Results tagged “design” from KPAO

min-tab-width.png
I appreciate what Aza Raskin from the Mozilla Labs team is trying to do with Tab Candy. But the fact that it requires the user to actively manage the organization of tab groups immediately turns it into a 10% feature at best.

People are lazy. They don't want to manage meta-data. Hell, they don't even want to manage their regular data (e.g. finances) but reality is a forcing function. The stakes are higher.

What I like about Tabberwocky is it the simple approach helping you manage your tabs: it reduces the minimum width for tabs to prevent horizontal scrolling. I set my minimum to 54px, which is just enough to show the favicon. I can fit over 20 tabs on my screen this way. If I forget what a tab is, I can mouse over to see the tooltip, or just click it. Or use keyboard shortcuts like Cmd+1-9, or Cmd+Option+left/right.

Tab Candy adds another layer of hierarchy for me to manage, and that is one additional layer too many for me.

Update: You don't need Tabberwocky. Just go to about:config and type tabMinWidth in the search field. Set the value to 40.
Let's say you're putting together a big presentation over the weekend that your great-grand-boss will be presenting to the CEO on Tues. You've got several charts of data, and the the GGB wants them to "pop". After downing several glasses of pisco that's been sitting in your cupboard since your trip to Chile in 2004, you decide to check out the 3D options in Office 2007.

Microsoft revamped their graphics engine in Office 2007 and now they have all sorts of different 3D materials and lighting effects you can apply to any 3D shape: matte, glass, wireframe, transparent, soft light, flood light, sunrise, sunset... So you start playing around with them. It's kind of fun, but then you come to your senses. You're a designer, dammit. All this chart junk just takes away from the readability of the data. You're stuck with 3D, but that's as far as you'll go.

So you attempt to revert back to no 3D effects. And you look. And look. And look. And as unbelievable as it seems, it dawns on you that there is no way to clear these effects once set. You can change the effect. But you can't go back to none. It's a disease with no cure.

But. You think about it, and realize that these effects were only just introduced in Office 2007 and the new .xlsx file format. They aren't supported in earlier versions (.xls). So you Save As, choose .xls, you get a big scary warning dialog trying to trick you, but you're far too smart for Office's conniving UI. You Continue. And lo, the heav'ns op'n'd, and the angels did join in a chorus singing a joyful song of triumph. You have defeated the mighty gratuitous 3D effects monster. Edward Tufte would be proud.
Thankfully I haven't had anything as bad as this happen to me, but the experience rings true.
Read the comic

Here was my favorite laugh out loud moment:
8.png

A better Bing logo

|
new bing logo.png
Update: I worked around the CSS bug and have posted my GreaseMonkey script: A Better Bing Logo (and favicon).

I'm all for search engine competition with Google. Yes Google is great at what they do, and yes I use them 99% of the time. But I am glad—now that Yahoo is getting out of the search engine business—that Microsoft finally has a worthy alternative.

However, as a UI designer, I am still—nearly one year after Bing's launch—horrified by the simply awful amaturish logo they've used for their product brand. The fact that the designer of the logo claims that it was hand drawn and not simply scaled horizontally does nothing to make the logo better. In fact it says that either he is incompetent or lying. My bet is both.

At any rate, designers know that people will judge a UI based on its appearance, and in fact bad visual design contributes to reduced usability. So I wanted to do my part to help Bing be more successful. I've created this new logo for the product, and I'm working on a GreaseMonkey script to rebrand the site.

If  any Microsoft brand folks are reading this and like what you see, please feel free to use it. You don't even need to credit me. Just get your official logo vendor to recreate it and claim it as your own. I'm ok with that. Just please, please, PLEASE replace your ugly logo, and soon.  Thanks.
navigate-to-parking.png
(I think Phil will like this one...)

Back when I was working at Venrock, I had the opportunity to work on a start-up focused on in-car computing. Dash had just come out, in-car GPS units hit the $100 price point and becoming widely adopted, and the partners were excited about the opportunities here and were willing to back it up with some serious funding.

One of the great things of being a part of the incubation group was that I could get involved very early on and help set the (customer-focused) vision for the company. In this particular case, I asked the broad question, "what is the underlying goal people are trying to accomplish when they get in their cars, and how do we help them achieve that goal?"

One scenario I looked at was driving directions. Several people on the team thought this problem was "already solved" and were focused on "differentiating features" like bringing social networking and real-time web into the car. But a close look at driving directions showed that the problem was far from solved.

For one, people today often use a computer to look at a map or get directions, then they have to repeat that task on their device once they get to the car. There clearly should be an easy way to sync the history of maps on the computer with the in-car device.

Another insight: shopping is a common reason to get in the car. Stores like Best Buy and BevMo already allow you to shop online and pick it up at the store. Integrating with store inventories to tell people where items are available and even allowing people to "buy it now" on the way not only helps people optimize their trip, but makes for a great business model.

But the insight I had that I love the most is with driving directions. Every single directions app out there ignores the hidden goal, which is that you first need to park the car before you go to your eventual destination. Yes, in many instances the parking and destination are the same. But in high-density areas (like San Francisco) this isn't so. What people want is a device that will get them near their destination, and then navigate them to a place where they can cheaply and safely park their car, ideally even taking care of any parking fees for you automatically. Once parked, it would then show you directions from your car to your destination also send them to your phone to help you as you walk the final leg of the journey.

Unfortunately, the company decided to go a different direction with their vision. But maybe there is another mobile computing company who will find this information useful. If so, I'd love to hear from you.
The 4×3 aspect ratio is a rapidly becoming a footnote in history. The majority of monitors and laptops these days are wide-screen. This makes them great for watching movies, but not well suited for applications that were designed in the old 4×3 world.

Take a look at this screen grab from the next version of Microsoft Office - Word 2010:

word-2010.png

There are two things to notice:
  1. Notice the big, blank, gray bars on either side of the document? Wasted space.
  2. Notice the scroll bar on the right? It indicates you're only seeing about a half page of the document on the screen.
I used to deal with this by getting a swivel monitor and rotating my screen into portrait mode. That made it great for reading web pages and working on word-processing documents. However, the bulk of my job is working on specs and presentations that are in landscape orientation. It's easier to keep the screen landscape to work on these.

The idea to steal here is a pretty simple one: just move the UI from the horizontal ribbon across the top to a vertical sidebar next to the document. Word for the Mac already does this to great success. It minimizes the wasted space to the side of the document, and it regains valuable vertical real estate, so you can see nearly 20% more of your document on the screen at once.

word-2010-vertical-ui.png

time-picker.png
The date picker UI widget is common. You see it all the time in calendar applications such as airline booking sites. It makes sense. It's a mini-calendar, and the user simply clicks on the day they want.

But time pickers are still in the dark ages. they are usually a drop down menu where you have to scroll down to the time you want. Or worse, 3 spin boxes: one for the hour, one for the minutes, and one for meridian.

My solution is a time picker widget that uses the metaphor of a clock face. Sure, you can type into the text box at the top to simply enter the time you want. Or you can click on the hours, minutes, and meridian on the clock face.

So if you're working on an application that requires users to choose a time of day, think about using this. And let me know in the comments if you do. Thanks!

Update: I wanted to address some of the feedback I received on this. First, yes the parsing of the text box should work for those who want to type. However I still think there is value to having a visual time picker. It nicely parallels the date picker widget, gives them equal visual weight (and therefore equal perceived importance), and—probably most important—it allows the user to keep using the mouse if they were already doing so to pick the date.

And yes, the worst case is 3 clicks to get to the right time, but more likely it will be 2 or 1. For a date picker, it's the same. Next and previous months require an additional click, and further dates even more clicks. You could put two clocks side by side for AM and PM to avoid one click, but I'm not sure that's worth it. Then again, I've always thought that having a Mac OSX dock style date picker with all 12 months shows side by side in a fish eye view would be nice.
dictionary-mac-osx.png
As a designer, I am particularly delighted by well-designed software. The dictionary application that comes with Mac OS X is one of these rare gems. It's a simple app with few features, but what it does, it does extremely well.

It gets all the small details right. Like the fact that no matter where you click in the window, typing on the keyboard will always go into the search box. You never end up with "lost keystrokes" in this app, as you would in an app that followed the strict UI guidelines for keyboard focus.

As a typography aficionado, I also appreciate the use of a beautiful, readable serif (Baskerville) that is not Times. The typographic hierarchy for entries is well-designed too, using font size, bold, italic, small caps and even a smattering of Helvetica to communicate.

Other details: auto-complete as you type, "did you mean" suggestions when you've misspelled a word, a single click to get to thesaurus entries. And a simple yet essential feature: every single word in the definition is clickable, which looks up that word in the dictionary.

I used to use m-w.com before I discovered this app. Now I only wish I could get it on my Windows computer at work.
StevePortigalHeadshot.jpgI spent last Saturday afternoon in San Francisco with a room-full of other interaction designers for Interaction 09 Redux. It was a great chance to see a few of the presentations from the Interaction 09 conference last month in Vancouver, and to mingle with my colleagues.

As I get older and have more experience, I find I don't learn as much at these sort of events. It more just reiterates and reinforces things I already know. But that can be a good thing. And it can help me think about things I already know, but from a fresh perspective.

Such as it was on Saturday. Steve Portigal gave a condensed version of his workshop Well, we did all this research...now what? But the one thing I took away was something so simple, yet obvious in hindsight. When you are doing observational and ethnographic research, the observee is the boss. They are always right. Their knowledge, experience, feelings, work environment etc. is The Truth, and it is the truth that you seek. You are not there to fix things, or correct them, or show off how smart you are. You are there to learn about the world from their perspective.

He told an interesting anecdote about a person he was talking to about digital entertainment systems. The guy kept talking about "Tie Voh", mispronouncing the popular TV recording device. Steve did his best to continue the flow pronouncing it as the guy did. But then a product manager who was also observing corrected the man: "It's called Tee Voh." And that entirely deflated the conversation. Now the guy felt self-conscious, humiliated, and would no longer be giving his genuine, unfiltered perspective.

It's hard for someone smart driven, and with a strong teaching/mentoring impetus to slam on the brakes and let these things go. But in observational mode, you have to. You aren't there to show off your smarts, or retrain these people. You're there to understand how they think. Good stuff. I'll be sure to use it next time I'm in the field.
hanna-choppa.pngFirst, the game: Hanna in a Choppa. I love the visual design. Simple. monochrome. Great use of typography throughout. And the gameplay is really good too. Simple controls, but each level is unique. I really like the planetoid and the lost at sea ones.

The bad interactions:
  1. NorthWest's web site disables the paste command in the credit card number field when checking out. I store my credit cards in a document on my computer. I've always copy and paste them into checkout forms. This is the first time I've ever run into a problem. I ended up working around it by pasting it into the name field, and dragging it into the credit card number field. But seriously, why would you want to do anything in the checkout UI that might prevent a customer from buying your product?
  2. Technorati doesn't place focus in the search field. Isn't this the #1 reason why someone goes to the site? To perform a search? Google gets it right. So does Yahoo. Even Live, Ask, and more obscure sites like IceRocket get it right. Why don't more web sites thoughtfully set the focus into form fields?
  3. The Marriott Courtyard's TV interface always made me laugh. Why bother asking the user for a piece of information (like your room number) if the system already knows it?
you-already-know-my-room-number.jpg

I've been in full-on job search mode for about 3 months now. I've sent out close to 50 inquiries, talked to a couple dozen companies, and did an interview loop through a dozen. Through all of this, I've gotten clear in my mind what would constitute the ideal recruiting process, from the candidate's viewpoint.

  1. Post in popular design forums: IxDA, Boxes and Arrows, 37Signals, Coroflot, Smashing Magazine and Good Experience. It also wouldn't hurt to get on some of the more general forums like LinkedIn, Venture Loop, Startuply, Simply Hired, and Indeed.
  2. Use the right keywords for the role and description: Interaction Design (IxD), User Experience Design (UE/UX), Interface Design, wireframes, paper prototypes, user stories, task flows, UI specs... This shows you understand the role and what they will bring to your organization. If you simply ask for a generic designer, people will think you just want a graphic designer who knows Photoshop and can help you with your business cards and logo.
  3. Do not recruit for a "designer +" dual-role, e.g. interaction designer + developer. I don't know why companies who would never, ever consider hiring a developer + product manager role, or marketing + accounting role, delude themselves thinking they can get someone who is a great designer and great at something else too something else. I'm sure you can find a few of them out there. But only in the most exceptional cases will they truly excel in both areas. Much more likely, they will be a jack of both trades, master of neither.
  4. Great designers understand the importance of designing against clear goals. Every conflict I've ever had over one of my designs was either an aesthetic/subjective issue, or it was due to the fact that not everone had the same goals and priorities in mind when evaluating the design. Over many years, I've learned to spend at least as much time on defining the problem as I do on designing a solution.
  5. Don't use a recruiter if you can get away without one. If you must use one, make sure they add value to the process, both for you and for the candidates. I've run into far too many recruiters who really don't understand what IxD is, and thus they can't really evaluate me and my fit for the role. And that's just frustrating. I'd much rather talk directly to the hiring manager and skip the intermediary.
  6. Communicate impeccably throughout the whole interview process. Start with an overview of how the process works, and about how long it will take. Always follow up promptly minimally with the next step. If you don't want to pursue a candidate at any point, tell them. Immediately. Don't just let it drop. It takes only a minute, and it shows respect.
  7. If you like the designer, tell them. Recruit them. Hiring someone is a two-way street. You are evaluating them for fit into the role and company, but they are doing the same with you. There was one company that really stood out on this point. They mentioned my design portfolio and how they loved my approach to design and the results achieved. I was initially lukewarm on them, but they won me over. I ended up taking a contract-to-hire gig with them.
I'd love your feedback on these, especially if you have specific feedback such as additions or changes.
parking-garage-traffic.jpgI recently had outpatient surgery (a tonsillectomy), so I have had several prep and follow-up appointments in addition to the surgery in the past few weeks. I go to the Palo Alto Medical Foundation (PAMF), and overall I love them. But when they build their new facility, someone really screwed up the parking. I mean really.

The parking lot is so bad, they have hired several permanent workers to direct traffic through the garage. Off the top of my head I can think of 3 places where guys in orange and yellow vests with glowing orange flashlight wands play traffic cop all day, every day.

It's so bad, my wife and I have create the PAMF parking (Pp) scale, which can be used to rate the ease of parking anywhere. Pp = 1 just like c, the speed of light. All other parking facilities in the world are some fraction of a Pp. Like c, Pp is a theoretical maximum for exactly how screwed up you could possibly make a parking facility without resorting to concious malice.

way-in-to-park.pngIn stark contrast to PAMF, there is the Eureka Tower Carpark in Melbourne, Australia. While I haven't experienced it first-hand, the pictures I've seen make this a near zero on the Pp scale. I really love the big, obvious labels painted in perspective smack in the middle of the driver's line of sight. It'd be pretty hard to screw up navigation there. 

My design examples / portfolio

|
I've been working on updating this for over a week now, and I'm finally ready to abandon it. (Designs are never finished; merely abandoned. Or released into the wild.)

design-mafia.jpgDave McClure -- master of 500 hats -- thinks I'm part of the secret society of design hit-men; the design mafia, even. I can see certain advantages to maintaining this image. I'm going to go along with it.

Dave says:

If i'm fighting a guerrilla war and need a design done that will kill El Presidente, you are my man. best slide i've ever seen to get a point across... bar none.

Thanks, man. That means a lot coming from you.
The IxDA mailing list had a recent thread on the 7 habits of highly effective designers. It reminded me that I had sent this exact content out to the Yahoo! Design Group as my farewell message. It was my way of passing along the wisdom I had learned working at Yahoo!.

I cleaned it up for public consumption, and I pass it along now to you. Items 2-4 are really only directly applicable in a large organization such as Yahoo!; Nonetheless, they should give you some perspective on your own situation. I hope you find them useful. And I highly encourage designers to take #7 to heart.

  1. Understand the user needs/goals before you design. I could expound on this one in length, but instead here is my pithy aphorism: "First define the problem, then design a solution."
  2. Partner with a sympathetic PM or developer who will help champion your design. All of my design successes at Yahoo! had this as a common component.
  3. Connect with your fellow designers. This is something I wish I'd done more of in my time here. It not only connects you with other like-minded colleagues, but it also exposes you to other areas of the business and might open you up to internal transfer opportunities. Cross-pollination is definitely a good thing.
  4. Write up design bugs. This is the most effective tactic I've found for keeping important design details from falling through the cracks.
  5. Use a highly responsive tool for creating design mocks. I have tried out many programs over the years including Photoshop, Illustrator, PowerPoint, Interface Builder, Visual Basic, AppleScript, and a host of others for creation design mocks; Visio is my current favorite on the PC, and OmniGraffle on the Mac. They are both very responsive and mostly keeps out of my way letting me focus on the design.
  6. Know Thyself. I highly recommend reading either Now, Discover Your Strengths or StrengthsFinder 2.0 and taking the test therein. I found it extremely valuable to know and focus on my strengths.
  7. Apply your design skills to your passions. There is a huge need for design thinkers in all areas of our lives, not just web and software. I've had success applying my design skills to several non-profits. I'm optimistic that designers can help solve the biggest problems facing us today. I believe that designers will play a critical role in crafting Public Policy 2.0™ in areas as diverse as the environment, human rights, commerce, and law. I'd love to see one of your names in the news when it happens.

Designing with Vision

|


Yes, I borrowed the title from Philip — my fellow KPAO-ian — but I think I have a unique take on it. However, what's more important is what you think. Let me know in the comments!
wf_check-confirm.jpgMy main bank account is at Fidelity, which has no local branches. So when I need to get money out of an ATM, I can choose any one I want. As of late, I've been going out of my way to use Wells Fargo ATMs. Why? Because I'm a design geek, and Wells Fargo has recently rolled out a new UI design for their ATMs. (Well, it has been over a year since they started the roll-out, but I only just noticed it.)

Holger Struppek was the lead visual designer on the re-design project and has a great article documenting the process. Of course half the reason I love the new design is because the font they use throughout is Myriad (the same font used by Apple for its corporate brand). It really makes the whole UI feel a lot fresher and cleaner.

So at least for me — admittedly not your typical banking consumer — the commodity world ATMs has been differentiated by good design and it has turned me into a customer. Do you know of any other commodity products differentiating by design? Leave a comment!

This is a half-baked idea, but as a designer, I've always thought there should be some scale of measurement for the ease-of-use of something. The two ends of the scale are pretty easy to define. At the far end is something that is simply impossible, such as backward time travel or a pain-free Windows experience. We'll call this 0. And the other end is something that is impossible to prevent from happening, like the sunrise or the hype surrounding any Apple event. This will be 10. The midpoint (5) would be for things that are of average ease-of-use, which is more difficult to define. I suppose it would be along the lines of using a standard can opener. "Using" computer viruses are somewhere around a 7 or 8 on the scale, whereas using your average cell phone is somewhere around a 2.

That's about as far as I've got so far, but I thought I'd throw it out there and see if anyone else had ideas on this, or pointers to similar thinking. I'm too lazy  to do the research myself, so I'm trying to crowdsource it here. :-)

An easy fix to a common problem

|
timer.jpgI was out on a houseboat with a group of friends over the long Labor Day weekend. You'd think the control panels on a rental houseboat would be designed so someone unfamiliar with them could figure them out without training or a manual. And you'd be wrong. Just to get power to operate the electrical system, you needed to go to the back of the boat where the generator control panel is, turn on the blower for a minute, turn it off, hold down the on switch while pressing the start button, wait for it to warm up for a minute, then switch a dial over to "boat power".

But the real UI travesty was the engine blower. The blower is there to air out the engine compartment of any built up gas fumes, which could otherwise ignite in a massive conflagration. The problem is, the blower runs continuously when the switch is on, pulling power from not the boat's generator, but from the starter battery. There's no indication that the blower is on other than the position of the switch: no light, no warning beep, and not even a mechanical hum. So it's far too easy to accidentally leave the blower on and drain the starter battery. Which we did. 9 miles from the marina.

Luckily the rental company had the policy of sending a mechanic out to deal with any boat problems. The guy was fast, and for good reason; he's had a ton of practice. We were the 3rd boat that day that needed a jump start. All because of that poorly-designed blower switch.

Problem solver that I am, I decided the best way to solve this problem would be to install timer switches on the blower circuit. You've probably seen these on hot tubs or saunas, where they want to limit the amount of time the heater is on for safety reasons. It wouldn't cost more than a few hundred dollars to outfit the whole fleet with these, and they would save a ton of hassle for their mechanics, not to mention the gas to drive a boat out the stranded renters. 

Craigslist: Love it / Hate it

|
Craigslist is fantastic -- I've used it to buy and sell all kinds of stuff. But why won't they let me search for things in a reasonable way, and beyond my local area? Say (just for example) that I want to buy a BMW K75S motorcycle. I might be willing to go from the SF bay area to Sacramento to get a good deal on a nice used bike. But Craigslist does not let me expand my search beyond the local area -- I have to search multiple times. Worse, searching for "K75" produces different results from a search for "K75S".

Searching Craigslist is so bad, that a whole industry has popped up to fix it:


I have a suggestion for craigslist: fix the problem. Clearly your users are trying to tell you something.

Tags