Code by Kevin

Code by Kevin, Programming, code, business, and other pursuits

Your Host
Kevin Walzer, software developer.


Subscribe to RSS Feed
Get a syndicated feed of my weblog.



Privacy Policy

Site design: Skeleton


Thu, 09 May 2013

Modernizing the UI

As I mentioned a couple of months ago, I'm in the middle of a large group of updates to my Mac apps. As I've delved into these updates (which focus on implementing libraries and frameworks that will improve all of my apps), I've come to the conclusion that it's time to update their user interface.

The last significant UI update to the apps came in 2011, when I implemented a native Cocoa toolbar for my programs, which, in my view, made them better integrated with OS X. At that point, I was taking a lot of UI inspiration from apps like NetNewsWire, the leading RSS reader for OS X, and which influenced a large number of Mac apps over the years.

Here's a screenshot of NetNewsWire:

Note the clean three-pane interface, the large, easy-to-understand icons in the toolbar, and other details.

And here's my implementation of this interface style in Manpower, my man page reader for OS X:

Note the three-pane interface, the large toolbar icons, and so on. By way of contrast, see this blog entry for some before-and-after comparisons of my apps with an older UI design and the new UI design using the native Cocoa toolbar.

I was very proud of this UI design when I completed it. However, I'm not as happy with it anymore. Several significant changes have come about in the Mac ecosystem, just since 2011: Apple's introduction of high-resolution Retina display technology in its MacBook Pro machines; and the increasing influence of iOS interface design on the Mac UI.

In terms of the Retina display, it has twice the pixel density of standard monitors, so that means that standard images look pixellated when displayed on it; Apple has implemented several API's and best practices to make images look sharp on the high-resolution machines. This requires to make several changes to their applications to work well with the Retina display, including bundling higher-resolution images with their applications.

In terms of iOS UI design, this is reflected in Apple's moving to a much more subdued color and icon scheme in the applications deployed on OS X since 10.7, Lion; buttons are muted, icons are smaller in size and monochrome in layout, and so on. Consider the Mail app in Lion:

What this means for my own apps is that their bright, large-icon interfaces now look somewhat dated, and they also need to be updated to support Retina displays.

A significant part of the work I'll be doing over the next several months is implementing these UI updates, and I've spent a significant amount of time in recent weeks mulling over options on how to proceed on these updates. These updates will require changes under the hood (code) and in the visuals and layout of the apps; it's much more than a simple matter of swapping out images.

While I haven't made a final decision about this yet, one approach I'm actively researching is based on my work on my iPhone apps: using font icons instead of actual image files for icons. A "font icon" is a font character that actually renders an icon image rather than a letter or number; it's a very recent development in web design, and it can translate fairly easily into desktop apps. Font icons offer several advantages over regular images. The most important one is that they are resolution independent, meaning that they scale up and down automatically with the resolution of the computer screen; this will greatly simplify the process of supporting the Retina display. Another advantage of font icons is that they are most commonly designed in the simple, muted style that is now the prevailing mode in both iOS and Mac UI design; this means that they will fit in better. Finally, there are several free, high-quality, open-source font icon sets that I can choose from; this will make the process of modernizing the appearance of my apps much smoother.

I don't have any mockups or other screen shots of my apps with a new UI design to share yet; I'm still very early in the process. But I will share more in coming weeks as I hit specific milestones in UI design. It's also important to note that a UI overhaul is not the only thing my apps will have as new features; I'm working on other framework/library improvements that will make my apps more pleasant to use, and each app will also have app-specific improvements as well.

Given the size of the task I've taken on for myself, it's likely that I will work for much of the rest of this year on these updates, and do a large-scale release of all of them, rather than rolling them out one by one. I've previously said that I want to do more frequent releases of my apps, and it's likely that I won't be following that advice here; but I don't see another way to proceed. In any event, keep watching this space for more updates.

[/software] permanent link