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.

Select What?

Before I left for Japan, I added AT&T’s international roaming to my mobile plan. After selecting the services that I wanted to add (voice, SMS, and data), I was presented with this screen.

I can’t for the life of me figure out why the instructions are to select an “Effective/Expiration Date”, rather than just an effective date. This step is to pick the date that the service starts. You don’t pick an expiration date. There is a big difference between selecting a start date and an expiration date. If you take the label beside the radio button literally, you would think that it was going to start and expire on the same day. The first time I went through the process, I assumed that the service would expire automatically at the end of my billing period. That, of course, didn’t happen, and I had to call them to have them remove it retroactively. I bet they could significantly reduce customer support calls by changing the wording on this screen.

Oh no they didn’t!

I assumed the headline was tongue-in-cheek link bait. Wired would know better than to publish something so mind-numbingly stupid. “Car Tech Isn’t Failing. Owners and Infotainment Interfaces Are”. That has to be a joke, right? What’s the date on this article? No, it’s not an April Fool’s Day joke, and it’s not from 1996.

The gist of the article is that computer systems in cars have become very reliable—very few software bugs are reported. This apparently means, then, that any problems drivers have using the infotainment systems are due to their own stupidity. It’s the user’s fault.


Here are a few quotes from the article that blew my head gasket:

Reynier [owner of a small interactive design agency] admits that “it’s definitely user error. I never have the idea that something is broken.”

While investigating whether the current explosion of automotive technology will cause owners of a [sic] late-model cars to visit a shop more often, everyone we spoke with agreed that he [sic] biggest failure with in-car technology has little to do with vehicle systems and more to do with owners.

“The hardware itself is really pretty bulletproof,” Kato adds. “It’s very robust and reliable. Occasionally we’ll get a bad hard drive or a bad screen. We are having challenges, but it has less to do with the components of the vehicle and more with dealing with customers on how to properly pair their phones.”

And what is the solution to this problem? Is it to improve the usability of the user interfaces? Is it to make sure that the software is not becoming a distraction to the driver, giving them very clear choices that require little thought and minimal attention? No, apparently the solution is to educate drivers on the correct way to use the software. They’re stupid, remember?

To address this problem, luxury brands like Cadillac, Lexus and BMW are staffing dealerships with dedicated tech support specialists, and even everyman automaker Chevy recently doubled its “connected customer specialist” staff stationed around the country from 25 to 50.

Here’s a better idea: automobile manufacturers should pull their heads out of their gas tanks and, instead of doubling their support staffs, hire interaction designers to improve their software. Address the root of the problem, rather than the symptoms. But I wouldn’t recommend hiring Reynier’s firm.

And while I’m at it, here’s some free advice for Wired. Hire a proofreader, and have Doug Newcomb read some articles on Co.Design or Boxes and Arrows.

Credit: Dan Saffer get’s the blame for initiating this tirade.