Out to Lunch

Have you ever gone to lunch and then forgotten what exactly you were doing before you left?

When I connect my Canon camcorder to my computer to import video, the camera’s LCD displays the following message:

Do not disconnect the USB cable or the power source while the camcorder is connected to a computer. Cannot turn off the camcorder or change the operating mode.

While in this state, iMovie is able to control the camera just fine, but none of the camera’s controls function. “Ejecting” the camera from my desktop doesn’t return control to the camera. The only thing I can do is yank the cable, which it explicitly tells me not to do.

Somebody didn’t think this all the way through.

Windows 7 tablet features are a little touched

I’m currently adapting a user interface to be used on a ruggedized tablet running Windows 7. You have to understand, this is for a military customer, and they have their reasons, short-sighted though they may be. At any rate, the tablet edition of Windows 7 is not particularly well suited to touch. Here’s the process I have to go through every time the tablet goes to sleep and locks me out.

Just like on the desktop, I’m required to press Control + Alt + Delete to sign  back in. I’ve never understood why that’s necessary to begin with, but this is on a tablet—there’s no keyboard. The OS seems to realize that, because the message on the screen says, ”Press Ctrl + Alt + Delete or use the Windows security button to log on.” I didn’t know what that meant the first time, but eventually found a tiny little button labeled with an iconic key on the side of the tablet. Pressing that brought up a screen with the password field and the onscreen keyboard.

Using the keyboard is very frustrating. It gives absolutely no feedback when you tap a key. The key doesn’t depress or highlight or make a sound. The only way you can tell whether or not your tap registered is to look up at the password field to see if a bullet appeared. Of course, there is no way to tell whether or not you hit the correct key. Being used to the behavior of the soft keyboard on my iPhone, it’s rather off-putting. I’ve started using the stylus, because I’ve found I make less mistakes.

The tablet does support multi-touch interaction, but it isn’t very good. A webpage may be scrolled vertically with one finger or two fingers, but only a two-finger swipe will scroll horizontally. With a one-finger scroll, you get momentum-scrolling, but not so with two-finger scrolling—the page stops moving as soon as your fingers break contact with the screen.

And, of course, there’s the issue of the cursor. It’s invisible, but it is there, and moves to your finger’s contact point. This means that tooltips and hover effects will be enacted after you have touched an object.

It’s frustrating to work with, but it renews my appreciation for Apple’s accomplishments with the original iPhone.

Upgrade Charade

FontExplorer X Pro 4.0 is available, or so I was told. I do use FontExplorer to manage my font library, so of course I’m going to upgrade. Apparently, however, they don’t actually want me to upgrade, as the only options are to ignore the new version or to have them remind me later. Where’s the “Give us your money right now!” button?

When I scrolled all the way to the end of the announcement in the dialog, i did find a link to their website where I could download the new version. The resultant webpage had a beautiful, large photo that took up half the height of the browser window, per the current fashion. Below that was a big, honkin’, green button labeled ”Download Free Trial”, so I clicked it. This displayed a popup with which to collect my name and email address so that they will be able to hound me later about paying for it, but most of the form displayed below the fold. I had to scroll to see what should have been shown to me when I clicked the button.

Eventually, after installing the new version of the application and launching it, I was able to click a link that took me back to the website to pay for a license. I filled out all of the information, and I double-checked my credit card information. When I pressed the submit button, I was told that my order was declined.

Of course, they gave no indication as to why, so I have no idea what I need to do for them to accept it. I guess they didn’t really want me to upgrade after all.

I Gotta Wear Shades

I hesitate to make too many judgments about iOS 7 before I see it displayed on my own phone and have a chance to touch it. However, my first impression is that it is awfully bright. I notice that all of the images on their website are shown on a white iPhone. They’ll probably seem garish on a black one. From the default background image they’ve chosen to the icons on the home screen and the text within apps, they’re using bright, vibrant colors. The translucency introduced to panels like Control Center allow those bright colors to shine through and interfere with readability. Everything seems to be shouting for my attention.

It feels to me like the anti-skeuomorphs won. They made such a stink about stitched leather and wooden bookcases that the designers at Apple went to the extreme, creating an OS that isn’t just flat, but ascetic.

I’ll reserve final judgment until I can experience it first hand, but first impressions account for a lot. My first impression is that the UI is too loud. 

In the Details: Button on Button

Sometimes it makes sense to combine multiple functions into a single widget, reducing the number of buttons cluttering the UI while still providing quick access to actions. When you do that, however, you have to be clear in the presentation of the widget. This is the top-right corner of iTunes:

The iPhone button has an iconic representation of an iPhone, making it easy to distinguish from other buttons. On the right side of the button is the standard eject icon. This button clearly defines itself as the control that will disconnect the iPhone from iTunes. It seems odd to give it such prominence within the application, given that you don’t have to disconnect the iPhone to safely leave the proximity of your computer with it. Of course, if you are familiar with the current version of iTunes, you already know that this button does more than disconnect the phone. In fact, the button itself won’t disconnect the phone—it displays the UI for configuring the phone. When you hover over the eject icon, it highlights:

Clicking the icon will disconnect the phone. Clicking anywhere else in the button will open the phone configuration screen. This is not visually apparent, nor is it expected behavior. A better way to combine the two functions would be to visually segregate the eject icon.

More Acquisitions

Continuing a trend I’ve remarked on before, two Pittsburgh design firms have recently been acquired.

BodyMedia was started in 1999 by a few guys I knew as a masters student at CMU. Chris Pacione was one of my professors, but is no longer with the company. I graduated with Ivo Stivoric, CTO and VP of new products, though I knew him as John. He was an industrial designer doing ground-breaking work with wearable computers. BodyMedia produces fitness armbands for weight and calorie management, activity tracking, and sleep monitoring. They’ve been used by the contestants on The Biggest Loser. A month ago, BodyMedia was acquired by Jawbone for over $100 million. I’m happy to hear that the team will remain intact here in Pittsburgh.

Gist Design was founded in 2002 by two friends of mine that also went through the CMU School of Design graduate program: John Beck and Shelley Moertel. They’ve done work with BodyMedia, as well as other medical device and consumer electronic manufacturers, focusing on “Research & Design with Practical Impact”. Earlier this month, Gist was acquired by TrueFit, a Pittsburgh-based innovation firm that helps entrepreneurial start-ups bring new technology product ideas to market.

Knowing the bright people that started these successful companies, I’m proud of their accomplishments, and I want to wish them all congratulations and best wishes for their futures. I hope merging with their new parent companies goes as smoothly as possible and that they are comfortable with any changes in corporate culture. In my experience, it can be a mixed bag.

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:

Lazy Genericism

Bootstrap is a beautiful piece of work, no doubt. It makes flexible and responsive grid-based layout a piece of cake. It provides transitions and dynamic behaviors without a sweat. It even provides clean, contemporary aesthetics in pre-made components. Add Glyphicons or Font Awesome and you have a web app that will satisfy the CEO built in no time flat.

Of course, you used an accordion panel instead of coming up with something better, because it was easy to do. And the select widgets aren’t exactly what you had in mind, but they were there. Add you used a non-descript document icon for “Add Properties” because there wasn’t a better icon in the set. Oh, and it looks like every other site built with Bootstrap because you started with one of their templates, and you just didn’t take the time to do much customization.

Yes, Bootstrap and its cousins are wonderful things. We should take advantage of them. But please, I beg you, don’t fall into the trap of quick and easy. Don’t forget that your user interface is your brand. Excellence will not be found in lazy genericism.

IxDA Pittsburgh Workshop Open for Resgistration

My workshop, Sitting in the Driver’s Seat: creating production-ready CSS, which I led at Interaction 13 in Toronto, is getting a second run in Pittsburgh. All proceeds, beyond the rental of the space, are going to IxDA Pittsburgh for use in future programming. Since this is the first event to which we are charging admission, we’re keeping it very accessible. It’s only $100 for professionals and $50 for students. Spots are limited, so register now through Eventbrite. After you register, RSVP on IxDA Pittsburgh’s Facebook event page to let everyone know you’re going.

CSS 3 has handed the keys back to designers. With a syntax and structure that speaks our language and a fine-grained level of control, it empowers designers to not only prototype in the actual medium, but to contribute production-ready code. The days of pointing at the screen over the developer’s shoulder and trying to explain how something needs to shift three pixels are over. In fact, much of the JavaScript currently employed for simple UI behaviors can be replaced with well-architected styles. Take the driver’s seat, and make the CSS your UI specification document.

This workshop is intended for intermediate designers interested in gaining more control over their team’s final product. Participants are expected to possess a working knowledge of CSS. They should be able to read a stylesheet and understand what it is doing in the HTML page that references it. They should be able to write CSS styles and apply them to HTML elements to achieve a desired layout on a page.

As a participant, you will:

  • Familiarize yourself with the tools you’ll need to integrate with your development team.
  • Learn how Object Oriented CSS (OOCSS) can lead to cleaner, more maintainable code.
  • Discover how to replace heavy-handed, inefficient JavaScript with CSS-driven behavior.
  • Get started on your own library of CSS components.

About Jack Moffett
With a BFA in Graphic Design from West Virginia University and a Masters in Interaction Design from Carnegie Mellon, Jack has been designing web, desktop, and mobile applications for over a decade. He has worked in both research and industry environments and has been teaching design part-time for more than eight years at WVU. As Senior Interaction Designer at Inmedius, a Boeing Company, Jack’s responsibilities cover the gamut from initial user research and product conceptualization through to implementation and testing. As such, his skill set includes visual design, information design, and front-end implementation. He has designed software tools for Lockheed Martin, Shell, DaimlerChrysler, Eaton, and many organizations within the U.S. military, including Joint Service Explosive Ordnance Disposal, Naval Reactors, and NCIS. Jack has spoken at conferences and led workshops to teach designers how to integrate with their development teams and participate in implementation. He writes about design on designaday.tumblr.com.

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.