UI&us is about User Interface Design, User Experience design and the cognitive psychology behind design in general. It's written by Keith Lang, co-founder of Skitch; now a part of Evernote.  His views and opinions are his own and do not represent in any way the views or opinions of any company. 

External Articles

Entries in Mac (10)


The Rise and Rise of the Indie Mac/iOS Developer Conference


A good friend of mine is on the team of an upcoming indie-run iOS developer conference called Swipe.

It looks great. And it seems like a worldwide trend:

Melbourne, Australia: Swipe Conference  - Sep 5th

Brighton, UK: Update Conference  - Sep 5th

Denver, USA: 360iDev - Sep 11th

Edinburg, Scotland: NSScotland  - Oct 1

Massachusetts, USA: Voices That Matter  - Nov 12


Ageing Icons with Freshness App

I've previously written about the idea of visually ageing files and folders. The aim is to provide more metadata to the user visually—which of these folders did I just put here? What's been here a long time and really needs to be filed?

In the spirit of Getting Real I've made a quick mockup app called 'Freshness' to demonstrate how these 'ageing' and 'freshness' affects might be programatically applied to any icon.

You can download the Freshness app for free and have a play. I'd love to hear your feedback. Please note that Freshness.app requires Mac OS 10.6 Snow Leopard.

Are the effects too strong, or too subtle? Does this provide real value, or is it just novelty? How else can 'age' and 'freshness' be visually displayed? 


Credit: Original Folder Icon by Guifa. 'Custom' Application icon by Sebastiaan De With. Made with Quartz Composer and turned into an Application with Kineme's QuartzBuilder.


Creator of the Mac Startup Sound

OMT in San Francisco #3: 'Let it beep' from One More Thing on Vimeo.

Video interview with Jim Reekes creator of that fat C chord boooooonnng.

NOTE: Introduction is in Dutch, interview in English. 

via @jasperhauser


Adding Context to the Desktop

Here's a prototype I've created to show how the Mac desktop might be augmented with contextual information/images. I've been thinking about this for a while, but was inspired by the release of the Windows application, Fences. I'm using the desktop as a simple demo space, but in reality this information could be added to any spatial file/folder view. I look forward to your comments and ideas.

UPDATE: Rémy has pointed out the Mac app-in-development, Grape (thanks!). The developer has stated it's development is currently 'on hold', but it's stated plans are quite ambitious and would be something like a 2D combo of Fences and Bumptop.

Click to read more ...


MacDevs, meet GameDevs

I'm no hardcore gamer. I own a Wii and PS3, but they mostly gather dust. I've enjoyed some time playing Spider and Field Runners on the iPhone, but that's the limit of my attention. And occasionally I dust off Age of Empires on the Mac. Oh, and I strangely enjoyed playing Ramp Champ on the iPhone. What an odd game, there couldn't be anything simpler* to play the game at some level, just flick your finger up the screen. To play well, of course, is another matter.

So I'm as casual gamer as anybody. But I am desperately interested in gaming, and game development—game development is about building fun, engaging experiences, using motion, art, sound and flow. That's what we application creators want to do too, right?

Mac developers have always prided themselves on great looking graphics. And now we enter an age where that UI includes the subtle and practical use of animation and real-time graphical effects. Game devs have been working on making artistic, believable, fast and fluid OpenGL-optimized stuff for years, yet I've personally seen very little cultural crossover to date. I would love to see more cross-polinization from the game development community and Mac App development.

Tools-wise, I've been looking into Unity, a game-creation engine and development environment that seems to have become the winner in the space for creating physics-driven games. It seems like it could be a useful tool for mocking up and testing interfaces.

Now, of course, the 'game' experience and the App experience can be totally different things. Gaming can be all-encompassing, Apps simply a piece in a puzzle. Learning the interface of a game can be a fun experience, having to work out the interface of an App, an infuriating one. The same bright, loud and novel interface in a game might be completely tiring in an App, which instead aims to focus your attention on your content. Although, there are many hours spent in WoW (etc.) where I suspect any novel/distracting interface elements create the same annoyances as in an App.

I welcome the game developers** who are sniffing around after the iPhone App Store explosion. Come, share your wisdom.

*Ok, there is an interaction which could be simpler: a single button. And I'm proud to say I know a guy who's build an awesome game (Fishie Fishie) using just that.

** Oh and I should add that there's some great Mac Game dev houses, bust 'serious' gaming is still very much on the PC, afaict

Click to read more ...


Suggested Improvement to the Mac Dock

Here's a mockup I made for a slight improvement on the way Apps in the Mac OS X Dock indicate that they can accept files dragged to them. Do you think it would be helpful?

Click to read more ...


The Apple Lisa

The Graphical User Interface Gallery contains a tasty article on the development of the Apple Lisa OS. One amazing aspect to me is the iterations they went through before finalising on a simple iconic desktop. The image above is of a non-heirarchial faceted search, presented in what looks like a modern multi-coloumn view. Note though, that the modern multi-coloumn vie we have in Mac OS X for example is simply showing hierarchy, not a faceted search like the above image.

Via the Lukas Mathis' excellent Ignore the Code.

Click to read more ...


Realizations of Rounded Rectangles


My rounded rectangles cognitive argument is getting a good thrashing —  which is a good thing. I'm as keen as anyone to find out if the theory holds water, and if you can direct me to better research, I'd love to read it. Please share! May, 1981 According to folklore, in the early development of the Apple Macintosh, resident graphics genius Bill Atkinson performed a miracle. He found a way to overcome the Mac's 6800 chip's math limitations thus enabling the OS to draw circles and ellipses (not just rectangles) on the screen at a blistering speed. He proudly showed this new ability off to the team. But this was not enough for the leader of the Mac team, Steve Jobs. No, the father of the Macintosh asked for one more thing. That thing was rounded rectangles. Rectangles with rounded corners. Rectangles with the sharp bits beveled off. Friendly rectangles. Steve wanted the Mac to speedily draw ellipses, squared rectangles AND rounded rectangles. But Bill was certain this shape would be extremely difficult to draw at speed. And not even a necessary part of the Mac's drawing library. Jobs disagreed;
"Rectangles with rounded corners are everywhere!" — Steve Jobs

Steve took Bill on a walk, pointing out the ubiquity of rounded rectangles in the world around them. Eventually a rounded rectangular No Parking sign convinced Bill.

The very next day, Bill proudly returned triumphant. Overnight he'd written code to draw rounded rectangles at turbo speeds. And once rounded rectangles were as computationally cheap to draw as square-edges rectangles, they became ubiquitous on the Mac. "RoundRects" became buttons, sliders and regions in each window. They helped define the 'safe' interface of the Macintosh. And in the early days, those round beguiling corners spruiked the Mac's softer approach, luring customers away from IBM and Microsoft. And to be clear, I'm not saying that Apple were the first to use the rounded rectangle in interfaces — but they used it like no other company of the time. Today, the concept of 'round = touchable' survives and is formalized in Apple's HIG:
Visual cues, such as the arrow on a pop-up menu, help people recognize familiar elements. People learn to associate certain behaviors with specific elements based on their appearance. For example, people recognize push buttons by their rounded shape… — OSX Human Interface Guidelines

Rounded rectangles didn't stop with software. Increasingly, the rounded rectangle has become the parti of Apple hardware design. The shape made large machines approachable and small ones pocketable. But why is it so visually appealing? Sure, there is a certain synesthesia to a shape which has no 'sharp' edges to poke yourself on, even if it's just rendered out of pixels on a screen. But what of the aesthetic? Rounded rectangles simple seem 'easier on the eye' than the square-edged variety. Why?

Time for an expert: I asked Professor Jürg Nänni, author of the exemplary Visual Perception, a book detailing our best-to-date scientific understanding of the processes involved in visual cognition. "Could rounded rectangles actually take less effort to see?"

Nänni confirmed my theory: "You are absolutely right. A rectangle with sharp edges takes indeed a little bit more cognitive visible effort than for example an ellipse of the same size. Our "fovea-eye" is even faster in recording a circle. Edges involve additional neuronal image tools. The process is therefore slowed down."

Professor Nänni is saying that rounded rectangles are literally easier on the eye. Put another way, compared to square-edged rectangles, rounded rectangles are more computationally efficient for the human brain. To me, this is a revelation. An idea that at the very least demands more investigation.

If I'm an interaction or experience designer, the machine I am optimizing for is the human. I want a design that takes the least CPU cycles for the same output. And from my current perspective, rounded rectangles provide an example of optimizing a design to reduce human visual system's CPU cost. There's only so much visual attention to spend.

What is the visual cognitive cost of…
  • …a garish color scheme VS a beautiful one?
  • …instantaneous disconnected movement VS smoothly animated motion?
  • …one font as compared to another, in a particular context?

[UPDATE: I've switched the order of the 'animated' bullet point to save confusion]

So! The rounded rectangle is seemingly just the tip of the iceberg in linking cognition to aesthetics, but I'm not sure how to move forward. I don't expect UI and UX designers to have their skills replaced overnight by some magic formulae. I do expect that examples like the rounded rectangle will strengthen the argument to 'go the extra mile' to make interfaces which are aesthetically pleasing. Now I want to know what other examples there might be which show that certain aesthetic elements are, in fact, simply optimizations for the human visual system.

Click to read more ...



Ever find yourself wrestling with files, struggling to get them organized into folders in the Finder? A recent discussion about solutions for creating folders on demand with good friend Cris Pearson brought up a great solution he'd discovered (and blogged about in the past) for 'folderizing' a group of files, which I'd since forgotten about.
Check out atariboy.com for Cris' tutorial on how to set your Mac up with a folderize function that will take any group of selected folders, create a new folder for them and put those files in it. Easy!

Click to read more ...


Real Reasons Why PC Folks Don't Buy Macs

  UPDATE: Goodness knows, the last thing the interwebatron needs is another Mac vs PC crusade. The list I present below is stated from my own professional perspective and was a response to a computing culture which polarizes issues, rather than seeing a mix or another set of possibilities. Of course I'd love to hear any considered anecdotes or thoughts either way.  I'll also happily save you some time spent writing a 'you're anti-mac!' statement by letting you know I'm one of the guys behind the Mac applications Comic Life and Skitch.   Sensory Metrics is a great blog. Mitch lists some reasons why 'PC people' don't switch to a Mac. The reason for the article is Belkin's Switch-to-Mac hardware/software product, which I've never used, but suspect is a good honest attempt to make the 'switch' easier. It was the slightly snide list which struck a chord. Mitch has inspired me to make my own list.

Real Reasons Why PC Folks Don't Buy Macs

  1. They just learnt how to use Windows, and don't want to spend a whole bunch more time learning something else
  2. Cost. You can buy a PC for dirt cheap, even if it is sub-par
  3. They can't get community support from the majority of computer users around them with a Mac
  4. Some of the experience is better on a PC:
    • Getting to the Desktop is easier
    • Managing Windows is easier
      • Toggle window visibility with the Taskbar
      • Every Document has a window
      • You can Command+Tab through ALL windows easily
      • The minimize buttons work as predicted
  5. There are usually more USB ports on the laptops
  6. Replacement parts like power adaptors are cheaper
  7. Microsoft Office is usually bundled
  8. Games work out of the box, no fiddling around
  9. You can find more software choice at your local store (quality not withstanding)
  10. You don't want to be associated with snide fanboys and elitists
  One more thing… 11. You can find the on/off switch on your desktop machine and don't give up in vain (true story)   Oh, I forgot the Apple Mouse and the loss of contextual menus. The average PC user seems pretty comfy with right-clicking for contextual menus. On the Mac, you either use a "weird" modifier key, set up your trackpad for two-finger click (I see lots of accidental triggerings), or set your Apple mouse to allow for the right click. The right click on the Apple Mighty Mouse causes lots of accidental right-clicks, from my experience. I've no experience with the new trackpads which offer an 'invisible' right click area. Can you think of any other common reasons I've missed?

Click to read more ...