DesignAday

The Extra Step

Beware of the extra step. If it is part of a procedure that the user carries out within a software application, chances are that it is an action that will be repeated many times over.

When creating diagrams, a common action is to center a connecting line with the object it connects to. In Freehand, this could be accomplished in three clicks: 1 each to select the objects to be aligned, and one to press the align button. The default behavior in Freehand dictates that if one object is narrower than the other and is within the bounds of the wider object, it will center to the current position of the wider object without the wider object moving. 99.9% of the time, this is the desired behavior.

In Illustrator, this is not the default behavior. Instead, both objects will move an equal amount of distance toward each other to center on the space between their previous positions. To achieve the aforementioned behavior, you must select an option to center on a key selected object from a menu. Then, if the wider object isn’t already selected as the “key”, you must click on the object that you want to be the key. This takes twice as many clicks to accomplish in Illustrator, and I’ll likely do it over a hundred times while creating a diagram.

Let the Griping Commence

May 18th, 2007, I made a post titled “R.I.P. Freehand”. Today, I finally laid Freehand to rest. I’ve upgraded to Adobe CS4 Design Standard, and have begun working in Illustrator. For the most part, I’m able to function just fine. However, I keep running into speed bumps.

Keyboard shortcuts are one source of problems. For example, in Freehand, “group” was command+g and “ungroup” was command+u. In Illustrator, it is command+g and command+shift+g. Every time I hit command+u, I turn off the smart guides—one of the new features that I very much appreciate. Freehand’s shortcuts are so ingrained, it will take a long time to relearn them.

Another cause of annoyance, and I knew it would be, is Illustrator’s reliance on separate cursors for selecting objects and points. This is going to take a lot of getting used to. In Freehand, clicking on an object selected the object. Clicking on a point selected the point. In Illustrator, I have to think about what exactly I want to select, and then pick the cursor that will allow me to select it. And heaven forbid that I would want to select one entire object and a few points from another object, say for purposes of alignment. Switching cursors switches what is already selected too.

The biggest befuddlement came when I couldn’t get my text to wrap. I’d drag the text box to resize, and it would scale the text, rather than causing it to reflow. After some research, I found that there are two types of text objects. If you just click on the page with the text tool, you get a single line of text that doesn’t wrap. If, however, you click and drag with the text tool, it will draw out a text box that behaves as I would expect it to, allowing text to reflow as the box is resized. I can’t find a way to switch text that has been created one way to the other kind. Nor can I find a way to get a resizable text box to automatically expand to fit its contents as I could in Freehand.

Don’t get me wrong, there are lots of things that Illustrator does better, but the details are going to slow me down for awhile.

Designer’s Toolbelt: Parallels

Most of the projects that I work on are for the military or industry. As such, all of the software that I design runs on Windows. Even the web-based applications are built for IE without cross-browser support being a priority. In the past, I’ve had to remote into old, slow Windows machines or VMs to run IE or native applications. Now that I have a Mac with an Intel processor, I’m able to run Windows on it. I installed it yesterday using Parallels.

Parallels made the installation a piece of cake. All I had to do was insert the install CD, enter a license number, and away it went. I turned my attention to other work and in a matter of minutes, I heard the Windows startup sound.

Parallels has a few different view modes. You can run Windows in a window, where the window contains the Windows desktop, and all applications are opened in windows within the Windows window (catch that?). You can run it full screen so that you don’t see your Mac’s desktop at all. The best way to use it is in “Coherence” mode. This hides the Windows desktop altogether and presents each window as a window within your Mac OS X environment. Pressing the minimize button results in the window moving to the dock, genie effect and all. Windows can be moved between spaces, and they are sorted by Exposé. Clicking the Parallels icon in the dock results in the display of the Start Menu. Notifications are displayed in the standard Windows speech bubble in the bottom-right corner of the screen. The clipboard is shared between operating systems, and you can drag and drop between Windows and Mac applications. Network connections were made automatically without needing any of my input.

I showed it to one of the developers I work with, and he was surprised at how fast it runs. I’m impressed by the seamlessness with which they have integrated the Windows UI with the Mac OS. If you have to run Windows for testing, this is the way to do it.

I must admit, though, I do feel a little dirty having done it.

Google’s App Gains Cachet

I’ve had Google’s app on my iPhone since it was released, but I have rarely used it. I thought of it more as a gimmick than a useful feature. In case you aren’t familiar with it, I’ll provide a brief explanation. After launching the app, you can raise the phone to your ear and speak a word or phrase that you wish to search for. The application listens to your speech, transcribes it, performs the search, and returns the results. I suppose it could be handy if you are on the move and need to look something up, but don’t want to stop to type. I think I have used it in such a fashion once or twice.

I was recently writing something in which I wanted to use the word “cachet,” but I couldn’t remember how it was spelled. All I could think of was “cache,” but as that is a different word with its own meaning, it kept me from using the auto-complete feature in my dictionary widget to find “cachet.” I knew how to pronounce the word, and Google’s app came to mind. I turned on my phone, spoke the word, and sure enough, Google promptly returned a list of results containing the word “cachet.”

Update: Something happened to the second half of this post when I saved it. I just discovered that it was incomplete and have re-written it. I’m sorry for the incomplete post.

In the Details: Mail Bounce

I’ve had an annoyance with the bouncing mail icon in the dock for quite some time. I like the notification mechanism, but I don’t like the fact that it bounces even when the Mail application has focus. In the past, I would ignore it while reading my mail. Then, I would minimize Mail, or switch to a different space, and remember, too late, that the icon was still bouncing. Clicking on the icon would stop the bouncing but bring Mail back up at the same time.

Snow Leopard hasn’t entirely fixed this, but it has mitigated the annoyance. I noticed that when an icon is bouncing in the dock, simply moving the cursor over it will stop the bouncing. It takes that as a sign that you have seen and acknowledged the notification.

Foiled Again!

Please excuse me for wrapping up the week with another post related to my new MacBook Pro. It probably seems rather quaint to all of you that have been using laptops, but I am rubbing my wrists, freed from the shackles of a desktop, so it’s on my mind.

I’m on a short business trip and will be participating in a meeting with a customer. I have a few slides to present and can finally do it from my own laptop, rather than handing somebody else a thumb drive. I stopped at Tyson’s Corner on my way here to visit, as I understand it, the very first Apple Store and pick up a mini display port to VGA adapter, so I can plug into the projector. I happily created my slides in Keynote, instead of that other program, and I purchased the Keynote Remote iPhone app. It’s a nifty little tool that lets me control the show over a WiFi network. You just swipe to change slides backwards or forwards. It also displays your notes, if you need them.

I was quite satisfied with myself. Then I realized that my meeting is on a military base. I’m not allowed to have my phone in the building.

I guess I’ll just have to do it the old-fashioned way.

JavaScript Dialogs Must Die

There are three types of JavaScript dialogs: prompts, alerts, and confirms. A prompt displays a field to collect information from the user, while alerts and confirms can only display messages. An alert box has a single button labeled “OK”, while a confirm provides both “OK” and “Cancel”.

Developers tend to be rather fond of these boxes because they are so easy to implement. Unfortunately, they are not optimal methods by which to communicate with the user. Let’s take a simple confirmation dialog for example. We’ll say that the user has just pressed a button that will delete something. Assuming there is no undo feature, best practice is to display a modal confirmation dialog that asks the user if they are sure they want to delete it. Because the button labels are not customizable, the message must be written as a question that can be answered with “OK” and “Cancel”. So, you end up with a message like “You’re about to delete something. Are you sure?”

I typically specify custom alert dialogs that are implemented as divs. This gives me the freedom to state the message as I see fit. More importantly, it allows me to customize the button labels to be more specific to the action the user is completing. Let’s face it, we’re often deluged with dialogs, and we tend to quickly dismiss them without reading them word for word. I’m much less likely to make a mistake if the button is labeled “Delete”, rather than “OK”.

Finally, the dialogs can become much more useful than simply confirming an action. For example, if the item being deleted is a node in a hierarchy containing other items, I could specify a dialog that provides specific options.

The node Foo has the following children:

Fee
Fi
Fo
Fum

(Delete Node and Children) (Delete Node Only) (Cancel)

The ease of implementing a JavaScript dialog is no excuse for poor usability. The flexibility to provide tailored messages, button labels specific to the actions they perform, and additional actions makes the extra effort worth it.

Page Mess-up

The very first project I was assigned in Visual Interface Design during my first semester of graduate school at CMU in 1996 was to redesign the QuarkXpress print dialogs. There were several different dialogs that were accessed individually from the File menu. My solution combined them all in a single dialog where options were grouped based on whether they applied to the page, the printer, or were specific to offset printing. You could choose Print from the File menu and have access to all of the options, rather than having to change a few settings in one dialog, close it, and open another to specify something else.

It still aggravates me today every time I use an application that doesn’t allow me to change the page orientation in the Print dialog. Sometimes a button will be provided that will open the Page Setup dialog where you can do this, but sometimes I still have to cancel out of the Print dialog and select Page Setup in the File menu. Take the Print dialog from the most recent version of Adobe Reader, for example.

It does have an option to “Auto-Rotate and Center”, which orientates the page based on the orientation of the document you are printing—and this is typically what I want to do—but it doesn’t allow me to specify the page orientation otherwise. To do that, it’s another trip to the File menu.

You would think that in 13 years this little problem could be solved.

Flashing the iPhone?

For whatever reason, Apple has not allowed an Adobe Flash plug-in on the iPhone. If you visit a website that has Flash content, tough beans. You’ll see a box with a big “no” icon. I must also assume that Apple has disallowed a Flash player iPhone application, as that would be a no-brainer for Adobe. Now Adobe has done something really interesting.

Flash has become a standard platform for many reasons, one of them being that it is accessible to designers. We don’t need a degree in computer science to build interactive applications using it. Adobe is leveraging that advantage by turning Flash Professional CS5 into a development environment for iPhone applications. You can build an application within Flash just as you currently do for the web and then export it as an iPhone app that can be submitted to Apple’s App Store. And this isn’t theoretical. At MAX 2009, they demonstrated several apps built in a prerelease version that are currently available for download on the App Store. A public beta is planned for later this year.

This is going to open up iPhone development to an even wider range of developers. I think it was a brilliant move on Adobe’s part. Flash could very well become the most popular platform for iPhone development.

Update: Okay, maybe it isn’t so interesting as I thought. You don’t have access to any of the native iPhone UI. That means you have to implement everything in Flash: swiping, pinching, momentum-scrolling, etc. Good luck trying to get the exact feel of native applications. Here’s more information about the limitations from Jeff Rock (and a tip of the hat to Daring Fireball for pointing it out).

Designer’s Toolbelt: Acorn & Pixelmator vs. Photoshop

I’m still using Photoshop CS2 at work (CS3 at home). It’s well past time to upgrade, but it is a struggle to get approval to do it. Adobe’s creative suite is really expensive, and there are two of us in the office that need upgrades. Part of the reason we need upgrades is that we are due for new Macs, which will come with Snow Leopard. All the software we have currently will be running in Rosetta and no longer supported.

So, I decided I should finally take the time to evaluate other options. I’ve heard good things about the little Davids out there (to Adobe’s Goliath). I actually got a copy of Acorn in the latest MacHeist bundle, and both Acorn and Pixelmator have free trials. It didn’t take me long to come to a decision.

Both applications are well designed, very Mac-like, and take advantage of the modern capabilities of OS X. They feel fresh. They seem like applications I would enjoy using. And, compared to Photoshop, they are cheap. They aren’t crowded with hundreds of features that I’ll never use.

Unfortunately, they aren’t crowded with the features I rely on either. I am dependent on layer groups. I remember using Photoshop 3, in which I added extra, empty layers to use as section dividers in the layers palette. I am married to layer effects. The ability to add drop shadows, gradient overlays, and the like to a layer, and then copy those styles to other layers saves me untold hours of work. I use Photoshop’s actions to automate tasks I repeat often, and I use its batch capabilities to process large numbers of files. I am wedded to the robust history palette. Finally, I have hundreds of files that may open in those other applications, but would be missing a lot of data.

As much as I dislike the current state of Photoshop’s UI and the bloat it has built up, I am shackled to it—the old ball and chain. For better or for worse, in sickness and in health, and all that jazz.