DesignAday

In the Details: Make up your rewind

I’ll occasionally use the frame animation palette in Photoshop to create an animated GIFF, but most of the time I use it to save different states of a screen mockup in one file. Adobe is blatantly inconsistent with the iconography used for the controls in the palette.

There are four arrows controlling playback. The single, right-pointing arrow starts playing the animation. This is appropriate, as a right-pointing arrow has long been a standard icon for “play”. The single, left-pointing arrow moves back one frame. This is acceptable, as one would not expect to be able to play the animation backwards, though I would have preferred a symbol that didn’t so closely resemble the play icon. The double, left-pointing arrow displays the first frame of the animation. Double-arrows are long-time standards for “rewind” and “fast forward”, so this too makes sense. One might expect, then, that the double, right-pointing arrow would display the last frame in the sequence. However, this is not the case. That button merely moves forward a single frame, much like the single, left-pointing arrow.

A better use of standard iconography would have been something like this:

In the Details: Tabs

I’m still acclimating to Adobe’s CS6. I think I like Photoshop’s new, dark gray color scheme, but there are some quirks that have been tripping me up. For one, I keep clicking on the wrong document tab. Realizing that I was doing this repeatedly, I analyzed the UI to figure out why.

In this screenshot, I have two documents open. One tab represents the document with focus. The other tab is the one I want to click on to switch focus to the other document. Adobe’s designers decided to make the current tab brighter. The background is a lighter gray than that of the other tabs and the text on it is a light enough gray to appear white. It’s a relatively high contrast. The deselected tab, on the other hand, has a very dark gray background, and the text is a dark enough gray to recede. This works okay when there are more than two tabs, as it is easy to tell which tab is different. It stands out from the others.

As you can see, though, I have only two tabs. I’ve been clicking on the already selected tab more often than not. I think I know why, and the reason, interestingly enough, is skeuomorphic in nature. If you think of a tabbed manilla folder, or the tabbed dividers in a library’s card catalog (remember those?), you’ll realize that traditionally, tabs were part of a larger whole and shared the same color. Tabs within a UI work best when they share a background color with the area that they represent.

Adobe made the background of the deselected tab match the background color of the area below it—the very area that the tabs represent. The text in that tab even matches the color of the text in the ruler. The background of the selected tab matches the bar above it, and the text in that tab matches the text on the bar. Color, brightness, and contrast associations all point to the darker tab being connected to the currently viewed document.

My mind subconsciously makes these connections, and I go for the tab that my brain has decided is disconnected from the current document.

A Storm’s a Brewin’!

There are dark clouds on the horizon—Adobe’s Creative Cloud, to be specific. Many seem shocked at the news, but I saw it coming. Given Adobe’s behavior in recent years, it was a forgone conclusion that they would eventually move to a subscription-only model. I’ve been dreading it. They just dropped the bomb.

Shantanu Narayen can try to legitimize the move all he wants, but he will have a hard time convincing me that this is about anything other than Adobe making more money. Sure, I understand that if you buy the entire Creative Suite (CS) and upgrade it every year, the Creative Cloud (CC) subscription would be significantly cheaper. I don’t. I work for a company that is mostly made up of software engineers. As I understand it, their software cost per head is significantly less than mine. It has been a challenge at times to get my software upgraded. Given that the upgrades to Adobe’s products over the past several years have only provided minor improvements to the features that I use regularly, I don’t mind skipping versions. I generally upgrade every other major version. I use their Design Standard suite, made up of Photoshop, Illustrator, InDesign, Acrobat Pro, and a few odds and ends. This has been my core set of tools since Adobe acquired Macromedia and did away with Freehand. I wouldn’t be able to justify $50 per month for my personal use.

However, their education pricing may be my saving grace. If I sign up by June 25th, I’ll get it for $20 per month—$240 for the year. That’s not a bad deal at all. I assume it will then go up to $360 for a year.

My biggest concern, of course, is what my company will do. We just upgraded to CS6, and we had to pay full price for it, due to Adobe’s change to their upgrade policies. Then there is the Mac Mini that I use on my company’s secure network. It never touches the internet. Narayen claims that CC will work on disconnected machines. I’m expecting to have to jump through hoops to get it to do so.

Causing even more of a kerfuffle in Interaction Design circles is their decision to kill off Fireworks. I never used it, as I was so proficient with the tools I had, switching never seemed worthwhile. I know, though, that many IxDers swear by it. I’m given to understand that it was a near-perfect tool for mocking up screens in multiple states, due to the timeline that was actually included for creation of web animations. If you are a Fireworks devotee, you have my deepest sympathies. I know what it’s like to have your favorite tool executed by Adobe.

The thing is, Adobe has a monopoly on design software. When they acquired Macromedia, they took out their only true rival. Yes, Corel is hanging in there, but they were never a serious threat. I never got the hang of QuarkXPress, and I rarely hear anyone mention it anymore. Newer startups like Acorn have a greater chance of winning over we jaded Adobe disciples.

Given the years of experience with the tools, not to mention the vast archive of files created with them, how am I to switch to other software without seriously impacting my productivity? If Adobe says jump, what choice do I have but to ask how high? But I already know the answer: to the clouds.

Do Something Smart

A couple of weeks ago I spent a fair chunk of time opening old Freehand files in Illustrator CS4 and saving them as Illustrator files, since Illustrator CS6 can’t read them. I used Freehand to create a lot of user interface specification documents and diagrams back in the day, so the files I was opening had a lot of linked images. A large percentage of these links were broken, and I had  to relink the files. I happen to have here a transcript of the conversation I had with Illustrator as I went through the process..

Illustrator: Hey, these linked images aren’t where the file says they are supposed to be. Do you want to show me where they are or just ignore them?

Me: Oh, I’ll show you where they are.

Okay, the first one is file1.png. Where is it?

It’s right here: images/screenshots/file1.png.

Great. Let’s see, is file2.png in images/screenshots too? Yep, there it is. Alright, what about file3.png? Hmmm, I don’t see it. Where is that one?

Oh, that one is over here: images/dialogs/file3.png.

Yep, got it. Ummm, I don’t see file4.png in images/dialogs.

Well, no, it’s back in images/screenshots.

I see it. Now, where is file5.png?

That’s in images/dialogs. Hey, can’t you just check both of those folders now that I’ve pointed to them?

Nope, sorry, I can only remember one location at a time.

Well then, can’t you check a location for all of the missing files, rather than stopping for each one you don’t find?

Huh uh. I have a one-track mind. Now shut up and show me where file6.png is.

Oh good grief!

I don’t know what decisions were made during the development of this feature. It could be that a project manager decided that it wasn’t worth spending the extra time. Maybe the interaction designer was lazy and thought it was good enough. It could even be that the feature was implemented years ago without an interaction designer involved, and nobody has thought to revisit it. Goodness knows I’ve witnessed each of those situations on software I’m responsible for. With just a little bit more logic, the application could save me a lot of extra time. Whenever you are tasked with specifying behaviors, be sure to think it through completely. Do something smart.

Adobe Alert

Here’s a warning to my fellow former Freehand users. I just discovered last week that Illustrator CS6 has dropped support for Freehand files. It can no longer open them. Luckily, I had not yet deleted CS4 from any of the machines on which I had it installed. I have Freehand files dating back to 1992, and I would be extremely upset to lose the ability to read them. I spent several hours at work last week making sure that all of my business-related files were converted to Illustrator format. Now I just need to convert my personal files. That’s going to have to wait until my class is done. At any rate, I hope this post is able to save some files.

How I Learned to Stop Worrying and Love Scrubby Zoom

Photoshop CS5 changed the default behavior of the zoom tool, which of course I am now experiencing for the first time in CS6. It was quite a surprise the first time I tried to drag out a marquee around the area to which I wanted to zoom in. Instead, the image dynamically zoomed in on the spot I first clicked as I dragged the cursor across the screen. When you have been using a tool as long as I have, actions like this are deeply ingrained, and the change was a shock. Of course, I immediately disliked it. I continued to dislike it as I repeatedly forgot and tried to draw out my zoom marquee, thus zooming in on the wrong part of the image.

But, being an Interaction Designer, I know that they must have made the change believing it to be a good idea. I did some quick Googling and learned that the feature is called “scrubby zoom”. I learned that I can turn it off by selecting the zoom tool and unchecking the scrubby zoom checkbox in the tool options bar. I never actually select the zoom tool, instead using the command+spacebar and command+option+spacebar key commands to temporarily switch to it, so I’m not sure I would have discovered the setting on my own.

So, safe with the knowledge that I can always switch back to the way it used to be, I started playing with scrubby zoom. After all, I adapted to Apple’s reversal of the scroll direction easily enough. Scrubby zoom is actually quite elegant, even if its name is not, and if I can get my brain to remember to click in the center of the area I want to zoom in on, rather than the top-left corner, I think it’s going to be a more efficient method. The one oddity is that I am able to zoom out until my entire document is about two pixels wide. It seems to me they should limit that, as it makes more room for error than it does utility.

In the Details: I’s & l’s

Because I do a lot of work for the military, I have two computers at my desk. One is a MacBook Pro, which is my primary machine and connects to the internet. The other is a Mac Mini that is connected to our secure network, which doesn’t touch the internet. I have copies of all of my software tools installed on both machines. Having just upgraded to Adobe CS6, today I took the time to jump through the hoops required to install it on the Mini.

Adobe does provide offline activation for situations just like mine. When you launch an installed application the first time, it tries to connect to the internet. When it can’t, it provides an option for offline activation. It generates a long activation code made up of numbers and both upper and lowercase letters. You must then enter the code into Adobe’s website along with the serial number. Then, the website provides you with a response code of the same length and makeup that must be entered on the disconnected computer. The code is displayed in a sans serif typeface. The capital “I” and the lowercase “l” look exactly the same. I had one of these characters in the first code and two in the second. I literally had to try each potential combination to figure out what the correct characters were.

Codes such as this should not include capital i’s, lowercase L’s, capital O’s or zeros. That’s advice for the programmer implementing the code generator. Here’s advice for the designer specifying the stylesheet. Serif faces will do a much better job distinguishing between these characters.

Bento So-So

I’m the drummer in a worship band, and I participate in the planning of our services. We select five songs every week to support a theme or scriptures that the service will be based on. Our repertoire is well over 100 songs, and it continues to grow. To make it easier to select songs, I want to create a database that I can easily search. I should be able to find a song based on its key, tempo, related scriptures, keywords, and a general search of its title and lyrics. To this end, I’ve downloaded a trial copy of Bento. I have read that it is the best option on the Mac for a low-cost database that is easy to use.

It is proving easy to use, but I’m running into limitations. Specifically, there is no good way to add a collection to a record. By a collection, I mean a list of distinct items. For example, I would like to add a list of keywords to each record. There are two ways I could do this, but neither is satisfactory. I can enter them into a single field separated by commas. They will be searchable this way, but I won’t benefit from auto-completion while I’m entering them. Auto-completion is desirable for keyword entry, as it helps maintain a clean list without variations of the same keyword. The other method would be what they call a Simple List, which I thought would be perfect, but for some reason, Simple Lists aren’t searchable. I don’t understand that at all. Why would you have anything in a database that can’t be retrieved with a query?

The Problem with Creative Cloud

Hello Adobe. I’m an Interaction Designer with a Graphic Design background. I’ve been using your software since 1992. I depend on Photoshop, Illustrator, and InDesign for my day-to-day work. These are my tools of choice, and I’ve had to fight the good fight at times to continue using them. You see, there are forces in industry that don’t always put my needs first. I occasionally have to convince them that my tools—your software—are the exact tools I need, that nothing else will do, and that, yes, they are worth that much money. It’s for this reason that I don’t try to upgrade every time you release a new version.

In the past, you provided upgrade pricing for two full versions back. I’m still using CS4, for various reasons, and I’m now trying to upgrade to CS6. I’ve just discovered that you no longer allow this, so my company will have to pay full-price. And it’s not just for me. My fellow designers are in the same boat, and we all need to maintain version parity so we can share files.

Of course, what you really want is for us to subscribe to Creative Cloud. For many people, I’m sure it’s a bargain, especially those that want access to the full suite of applications. But you see, I do a lot of work for the military. Much of it has security restrictions, so I have two computers I use to do my work. One of them is a MacBook Pro that connects to the internet. The other is a Mac Mini that is on a secure network. It does not have internet access. It is not allowed to touch the internet. Your Creative Cloud applications must phone home once a month to make sure the subscription is still in effect. That won’t work for my situation.

I just wanted you to know that there are very good reasons for not wanting to participate in your subscription model. Making things difficult for me will not convince me to switch to Creative Cloud. They will only cause me to consider alternatives, less capable though they may be.

Just sayin’.

Designer’s Toolbelt: Kaleidoscope

Black Pixel recently released the tool for diffing—that is, finding differences between two documents. I’ve made good use of TextWrangler, a free text editor from BareBones, in the past, and I’ve used the FileMerge tool that comes in Apple’s Xcode extensively. Versions, Black Pixel’s Subversion client, integrates FileMerge, which is quite handy. They are both good tools for finding differences, comparing them, and merging documents.

Black Pixel has designed Kaleidoscope to be the single most useful file comparison tool available. It has three different layout modes for displaying differences in text documents with good search and navigation functions. It integrates with Versions, as well as SourceTree and Tower (both Git clients). This alone makes it a match for other tools, but they didn’t stop there.

Kaleidoscope can compare two different directories as well. In this mode, you can filter the content to find what’s important, clone files between them, and drill down into enclosed folders. Of course, you can double-click any pair of files to compare them.

But wait, there’s more! This tool isn’t just for those of us that can pound out code. Kaleidoscope can compare images. Four layouts allow you to view images one at a time, side-by-side, in a split view, or differenced. It supports PNGs, JPEGs, and Photoshop files.

Until the end of January, they are selling Kaleidoscope at half price: $34.99, and there is a 15 day trial if you want to try it out first.