DesignAday

Worth a Mint

I’m a long-time user of Quicken, but Intuit hasn’t been making Mac customers very happy recently. The current version of Quicken is from 2007 and it shows its age. It never really behaved like a Mac OSX application, and it’s a bit buggy. It’s feature rich in the same way that MS Word is—meaning I don’t use or even know about a large percentage of the features. And they keep postponing the next version. I believe they are currently claiming February. I just updated to Snow Leopard, and it had to install Rosetta for Quicken to run. I also had to run an updater for the security keys it uses after it failed to communicate with my bank.

I’ve been looking at some of the competitors that have been released in the last year or so, such as Squirrel, which won an Apple Design Award in 2008, and Midnight Apps’ Cha-Ching. Both of these look quite attractive with their slick visualizations and iPhone apps. However, it doesn’t appear that they will interface directly with banks and credit cards—a capability that I rely on in Quicken.

Just last weekend, I decided to try out Mint, which I have heard a lot about from the design community. Unfortunately, it doesn’t currently interface correctly with my bank, so I didn’t get very far with it. But I received an intriguing email just before I left my office yesterday.

Thank you for being a part of what’s becoming a revolution in active personal financial management. I’m excited to say that Mint.com and Intuit are coming together to take personal finance to the next level. Mint.com has entered into an agreement to be purchased by Intuit. Once the acquisition closes, Mint.com will have the opportunity to spread that revolution to more people, more quickly, together with one of the world’s strongest software brands. The acquisition is expected to close by the end of 2009.

Aaron Patzer, Mint’s founder and CEO, will become General Manager of Intuit’s Personal Finance group, which is “…responsible for online, desktop and mobile consumer personal finance offerings.”

This could be huge for Intuit. It could also be huge for Intuit’s customers. Here’s hoping Aaron is able to do as great a job with Intuit’s products as he has with Mint.

Designer’s Toolbelt: The Typography Manual

There are a very few iPhone applications I have paid for so far. The most recent is a resource specifically of interest to designers. The Typography Manual combines, as the name implies, a typography manual with a conversion table, em calculator, rulers, and a number of references.

The manual is 60 pages covering type basics, history, typesetting, and web typography. It also includes a style guide, type anatomy glossary, and a handful of typeface specimens. From the little that I have perused, it appears to be accurate and well written. It includes photos and illustrations, especially effective for the type anatomy. It is fairly basic and shouldn’t be thought of as a replacement for a good typography book, but it seems appropriate for what it is—a pocket reference. It is missing one important feature, however. While some sections, such as type anatomy, provide a search field, there isn’t a manual-wide search capability.

There are a number of useful references that are provided under “Resources”, rather than as part of the manual. A conversion table lists inches (in fractions and decimals), millimeters, and points. Another table presents HTML character codes. There is a table of standard paper sizes and one for web banner dimensions. There are also lists of periodicals, organizations, type foundries, blogs, and other web resources.

I question the usefulness of the font size ruler, which lets you drag a slider to resize a line of text between 5 and 47 points. You can display the sentence in either Georgia or Helvetica. I have trouble getting it to recognize that I’m trying to drag the slider. The standard ruler also seems relatively useless. It displays an image of two rulers with markings for inches, centimeters, points, and picas, but I can’t imagine using it for any practical purpose.

The Mac keyboard characters utility is a bit more functional, displaying a keyboard on which you can tap the modifier keys to see what characters become available on the regular keys. The em calculator works as expected, allowing you to enter pixel values for font size, line height, and element size, and displaying the corresponding em values based on your setting for the browser default.

My biggest complaint is that the UI doesn’t behave as it should. When you scroll to the end of a page, it doesn’t bounce. Flicking a page doesn’t have the same momentum as standard apps. Scrolling lists don’t have the alphabet shortcuts on the right edge. Rotating the phone doesn’t have any effect on the content display.

All things considered, it is a robust app. The visual design and organization is quite good. It will be particularly useful to a student, or a designer that wants to brush up on their type knowledge. And the developer has promised additional functionality in the future, so there is even more type goodness to come.

The Bane of Web Design

Very rarely do I feel the need to rant on DesignAday. I spent hours today trying to solve what should be a very simple layout issue. I have a variable width div that I need to center within the window. I achieved this without a problem in Safari and Firefox. True to form, IE threw a wrench in the works.

In IE, the div is expanding to fill the width of the screen, instead of fitting to the width of its content. I spent hours trying to fix it. I finally figured out that IE doesn’t like the fact that I have some content within the div that I have floated right. I must have tried a dozen different approaches this afternoon to get some semblance of the layout I have designed, but to no avail. By the time I left the office, I had retreated to a fixed width div in which long lines of content will truncate with an ellipsis. However, there is a new layout issue plaguing me that I’m still trying to resolve. At this rate, I’m going to be resorting to using a table.

IE truly is the bane of web development. I would love to see a tally of the man hours spent troubleshooting its incompatibilities with web standards. I fervently wish we could forget about it—stop supporting it—and tell our customers to get a real web browser. But we can’t. IE has a chokehold on the industries in which our products are used. It has only been within the past year that we’ve been able to stop developing for IE 6 (what a nightmare that was)! I know IE 8 is a significant improvement, but I’ll be stuck developing for 7 in the foreseeable future.

Rant over. We’ll now return to our regular programming.

Tabs vs. Title Bar

The Safari 4 Beta drew a lot of criticism for its implementation of tabs. Perhaps drawing some inspiration from the recently released Google Chrome, that version of the browser moved the tabs to the top of the window, above the address bar. This makes a lot of sense, as the address shown in the bar changes as you change tabs. For a strict tab metaphor, anything that changes should be contained within the tabbed pane.

However, unlike Chrome, Apple decided to replace the title bar, or more accurately, merge the tabs with the title bar. It broke all windowing conventions and caused confusion. Safari was the first browser to introduce draggable tabs, and now there was a conflict. Where do you click to drag a tab, and where do you click to drag the window? Apple decided that dragging the window was more important, so the majority of the tab/title bar was given to window dragging. The right corner of each tab was textured as the grip for dragging a single tab. This took some time to get used to, but I became comfortable with it. Another issue was that the tabs automatically grew to fill the width of the window. As a result, the tabs would all shift every time a tab was added or removed from the bar. This could be disorienting. The bigger problem, to my mind, was the inconsistency within the operating system. Why should a single application have a completely different title bar from all the others?

I just installed the final release of Safari 4 and was surprised to discover that the tabs have been moved back down below the address bar. I find this interesting, and uncharacteristic. Apple doesn’t tend to go back on its changes. They have decided that this tabbing model isn’t optimal, so I’m expecting them to change it again in the not too distant future. For now, given the choice between this model and the Beta model, I think they made the right decision.

If only this title could be set in Sabon

Jeffrey Veen announced a new project a few days ago that has stirred a fair amount of excitement in the web design community. In a nutshell, Typekit will be a service that allows you to license fonts for use on the web, serving them up through a single line of JavaScript in your code. The big news here isn’t the technology—it will rely on the browsers’ support for font linking. The problem that Veen and company are trying to solve is the licensing issue. Fonts are not intended to be freely distributed, which is, in effect, what you are doing if you use them in a webpage.

While I am excited about the possibilities of using more than the standard OS-supplied fonts, I’m taking the Typekit announcement with several grains of salt.

For one thing, their model makes your website dependent on a live internet connection and the availability of their server. The former arguably won’t be an issue for typical websites, as a live internet connection is required for anyone to get to them in the first place. However, such is not the case for many web applications, which is what I work on. My company’s products can’t be dependent on connectivity. As for the latter, I think many people will be wary of a single point of failure. Even Google has not been immune to occasional outages.

There is also a question as to exactly how it works. What is that single line of JavaScript doing? Is it going to degrade performance? And there is the question of cost. Jeffrey mentioned that they will provide a free service and a paid service. I’m expecting that the free service will allow you to, say, specify a font or two for your blog, but the paid service will be required for any commercial use. How much will it cost? Will it be based on the number of fonts used, the number of pages they are used on, or something else? Is it a one-time fee or a subscription model? It may be hard for designers to sell their customers on the benefit of paying for TypeKit when they can use the standard fonts for free.

I’m interested to learn more about it, and I hope that they are able to address all of these concerns satisfactorily. Regardless, I think it’s great that they are working on it—there certainly won’t be a solution if nobody tries. As I already said, the licensing is the biggest issue here, and Typekit has a good chance of getting foundries and type designers to think differently about the way type is sold, licensed, and distributed. That, in itself, would be a significant accomplishment.

Radio Menu Field Thing

The other day, I was filling out a product registration form on Black & Decker’s website, when I came across one of the strangest things I’ve ever seen in a form. There were several questions that had text fields after them. When I clicked on, or tabbed into, a field, a little menu would pop up under the field containing radio buttons. Selecting a radio button would then insert the text beside the radio button into the field and close the menu.

Why in the world did they go to all the work of coding that up when they could have used a standard menu for exactly the same result?

Confirmation Disinclination

Many registration forms require that you enter your email address twice. The reasoning behind this is that you aren’t likely to mistype it twice, and if you mistype it once, a script can compare the two and catch it. Supposedly, this will increase the chance that a valid email address will be submitted.

These days, it is a useless practice. When I fill out forms, Safari automatically inserts my address for me. Or 1Password does it, while automatically generating a password. Or I could use TextExpander to insert it based on a couple keystrokes. Or I could paste it in from CopyPaste Pro. Of course, there is always plain-old copy and paste. There are many tools out there that are used to get around the onerous task of filling out web forms with information that already exists in your system. The email address confirmation field is becoming more superfluous every day.

For more opinions on this matter, check out this discussion on the IxDA forums.

Sound Reasoning

Sound often gets overlooked in user interface design. Sometimes it is intentionally ignored. Given that so many people work in public spaces, sound can be a real annoyance. My co-workers have never complained about my snap-to-grid sounds in Freehand, but I often worry that it bothers people. I find them to be very useful, so I haven’t turned them off. Typically, sound is only used for notification. Sounds alert me to reception of a Skype or iChat message (and differentiate between them), reception of email, alerts from iCal, and errors. I also use the feature that speaks the time on the hour. “It’s 8:00.” This helps me stay aware of my chronological context. Sound works well in this role because it is utilizing a channel that isn’t already occupied.

I find it interesting that very little has been done with auditory cues on the web. CSS 2 includes “aural stylesheets” specifically for accessibility purposes that work with screen readers. I’m not too surprised that general audio “styling” hasn’t been included—as I said, sound often gets overlooked. There is huge potential for it to be abused. If you think the blink tag is bad, just imagine what could be done with audio. At the same time, I think there is potential for useful applications.

This is probably one case in which the potential for misuse has won over the opportunities for true utility.

Designer’s Toolbelt: GammaSlamma & Name Mangler

Until relatively recently, I haven’t been able to make much use of PNGs in my web application UI designs. IE 6 doesn’t support the alpha channel that allows for partial transparency. However, IE 7 now has wide enough adoption that we are able to drop support for IE 6 in some cases. Even better, our developers have started using GWT for our client-side development, and it applies a fix that causes transparency to work in IE 6.

So, it was only a few months ago that I started running into the gamma correction problem. You can read a detailed explanation of the issue if you are interested, but the short of it is that when a graphics application creates a PNG file, it stores the gamma values for the display on which it was created. This then allows the browser to adjust the colors in the graphic to match on various displays. While this might be a good thing for photographs, it is extremely problematic for graphics meant to match colors on the page specified in CSS, as those colors are not adjusted. This leads to color inconsistency within a page—egads!

I found a free application called GammaSlamma that strips all gamma information out of the PNG. Drag a bunch of PNGs onto the application icon and presto-chango, all of the colors within the page match as they should.

There’s just one small annoyance. It creates new versions of the files, leaving the old ones, and adding “_slammed” to the file name for the new ones. That’s not part of my naming convention, so I have to rename all of the files. That’s where Name Mangler comes in. This is another free download, although donations are welcome. The application makes it extremely easy to replace a string in a file name (“_slammed” for example), as well as sequential numbering, changing case, setting extensions, and more. It does batch processing and can even create droplets for frequent drag-and-drop use.

A Question of Security

I was registering for the “advanced security” on the site of my mortgage company. This required me to select three security questions and provide my answers to them. Each of the three questions was presented as a menu of six choices. Questions appearing in one menu were not repeated in the other two. The final menu gave me the following choices.

I don’t want to trust my security and ability to log in on any of those questions. My grandfather doesn’t have a nickname that I know of. The name of my junior high school could be ”Miller”, ”Miller Junior High”, ”MJHS”, or some other variant, depending on my mode of thought. The question about meeting my spouse could be answered many different ways, from “at an orchestra concert” to “West Virginia University”. There wasn’t a restaurant that I would consider my favorite in college. Whether or not I’ll be able to remember the street on which by best friend lived at any given point of time is questionable. And I’m not sure that I could name a single favorite teacher from all my years in school.

I did end up picking an option and giving an answer. I hope that if I ever have to answer it, I will do so in the same way. Online security measures continue to be extremely annoying. For more discussion on the subject, see this thread on the IxDA discussion forum.