The Leaking Balloon

The Mac App Store was released in January 2011 and it marked the beginning of a great new distribution channel. Even though it lacked some bells and whistles, the developer community was hopeful the problems would be addressed in due course. Unfortunately, it has been years and there’s no evidence that the core issues would be addressed in the future, at all.

Milen Dzhumerov’s Mac App Store: The Subtle Exodus

I bought Affinity Designer recently because I was able to use the beta releases, which proved the app to be stable, performant, and very functional. I don’t buy Mac apps without being able to try them.

Visual and Interaction Design on the Mac

It’s a hopeful time for design tools on the Mac.

  1. Adobe having killed Fireworks, I’ve moved over to Boheman Coding’s Sketch. The addition of symbols in v3 made it practical to use for larger projects. I still miss shared layers from Fireworks, but not the crashes.
  2. Affinity Designer has great performance, a customizable UI, and a good balance of vector and bitmap tools. It’s not geared toward mocking up numerous screen views, but it seems like a good option for individual illustrations and icons.
  3. Flying Meat’s Acorn is a great alternative to Photoshop if you need bitmap editing capabilities.
  4. Quasado’s Gravit provides a good deal of Fireworks’ functionality in an open source, web technologies-based package. It’s still very much a work in progress (no Boolean ops on vectors, no vector export, bugs, etc.), but it already surpasses Fireworks in some ways. The multiple master pages would have been great in Fireworks.
  5. Not having been released, I have not used it, but there is good reason to believe that Bjango’s Skala will be a quality visual design app.
  6. Relative Wave’s Form looks like a way to build iOS prototypes without all the complexity of Quartz Composer.
  7. Along similar lines, there is Facebook’s Origami.
  8. Framer Studio is another good option for mobile prototyping. There are many examples if you’re new to writing JavaScript.
  9. Tumult’s Hype is a good way to build interactive prototypes without coding. I’ve built fairly extensive prototypes using the combination of Sketch and Hype. Unlike Form and Origami, Hype’s output can run on anything with a decent browser.

Most designers for screens could be well served by some combination of the above. My workflow these days is mostly doing graphics and some layout in Sketch, then prototyping in the browser using jQuery with Velocity.js or Snap.svg for animation.

Minimal Cover in Sight

When in the Artist view in iTunes, rather than album covers scrolling along with the tracks, they should bump up against the header and stay in view until all of the album’s tracks scroll out of view, much like Music on the iPad or the header bars in the iOS Contacts app.

Current iTunes Artist view cover scrolling

Suggested iTunes Artist view cover scrolling

Sketch Align and Add Guides

The persistent alignment controls in Sketch could double as a way to add guides around canvas selections. The basic idea is that depressing a modifier key would switch the toolbar into a guide placement quasi-mode, with the icons and tooltips updating to reflect the change. Ideally, the icons in the toolbar would reflect the guide color set in Sketch’s preferences (red being the default).

Sketch: Add guides around a canvas selection

Built using the recently released Tumult Hype 2.

Sketch Guides

A few ideas to improve the alignment guides in Bohemian Coding’s Sketch, which I’ve been using more and more since Adobe announced that they pulled the plug on Fireworks — just like Obama will do to your sweet old granny.

In the current version (2.3.1), guide positions are hard to read and you can’t easily space them from each other and the edge of the artboard.

Guide positioning and spacing
Guide positioning and spacing

There is also currently no way to position them by numeric input, a feature I found very useful in Fireworks.

Numeric position input
Numeric position input

Say you’ve decided to change the height (or width) of an element in your design, a change that must propagate. It would be great to be able to move all of the guides on one axis in one pass.

Y axis ruler contextual menu
Y axis ruler contextual menu

Batch guide positioning adjustment
Batch guide positioning adjustment

The input boxes for individual and batch position adjustment would of course let you increment their values using the arrow keys and change them using mathematical operations, two features I’ve found really useful in Sketch.

Chain of Commands

I’d like to see the app switcher’s ability to quit and hide applications extended to allow other commands to be sent to applications without having to exit the app switcher quasi-mode. This could be handy with browsers, writing tools, and media players.

HUD Commander

This would work best if the selected application’s windows were presented when using the switcher so you can see what you are acting on. If not, it may be best to limit the additional commands to those that appear in the application’s Dock menu (usually, create a new document or window) and have a keyboard shortcut.

Gateways

Working with a laptop and large external display reminded me of an interface irritation particular to multi-monitor setups in which the displays are of different sizes. For instance, a stacked arrangement with the menu bar on the large display on top and the Dock on the small one below. You can easily move the cursor to the large display anywhere along the top of the smaller screen. The inverse is not true; there are portions of the large display that will not allow the cursor to move to the smaller display.

Gateways animation (use a respectable browser)

Graphics created in Fireworks, animated in Hype.

Design Notes

  1. I believe an indicator showing just the passthrough zone is the best design, but there are alternatives:
    1. Show indicators for the portions of the display that do not allow the cursor through
    2. Show indicators for both
    3. Keep the existing “mouse around until you find it” implementation
  2. The color of the indicator could be calculated based on the desktop background to ensure sufficient contrast.
  3. Some smarts about determining cursor movement direction (like that used to keep sub-menus open when the cursor is moved diagonally) would prevent the indicator from appearing when the cursor is moved toward a hot corner to activate Mission Control or an Exposé mode.
  4. The indicator is obviously not needed when moving between displays of the same size.

Historical Exposé

As of Mac OS X 10.7, applications that provide a list of Recent Items display these documents as thumbnails at the bottom of the screen in the App Windows Exposé mode. The concept could be expanded to allow developers to specify what information appears in this section.

Users could navigate the history by two-finger swiping left and right or clicking the page dots immediately above the thumbnails.

Browsing History

Current browser window with history thumbnails

  1. Notice the bookmark icon displayed atop the page third from the left; I’ve bookmarked the page, so the mark appears to help me identify it.
  2. Modified behavior should apply to clicks/taps on thumbnails just as with links; if I hold Command and tap on a thumb, it should open in a new tab or window as specified by the browser settings.

Listening History

Audio player window with previously heard track thumbnails

  1. Star ratings or a favorite icon could be displayed for tracks.
  2. Hovering over a track thumbnail could trigger a fast crossfade between the playing track (if any) and the hovered track, making it easier to relocate a song you don’t know by name. The key would be a bit of a delay on hover so it doesn’t trigger as you are simply moving the cursor across the screen.

End Task

That the Windows 8 Task Manager in simple view is very similar to the Mac OS X Force Quit window is not surprising. What’s interesting is that Microsoft apparently arrived at this design via telemetry data and user observation. I doubt Apple used mountains of data to come up with what seems like an obvious design.

To the Windows 8 team’s credit, the expanded view’s resource consumption heatmap and contextual command to search the web for a process name are nice additions that I’d be happy to see Apple steal for the Activity Monitor on OS X.