Skip to Content

Submit your nominations for the Luxist Awards' Best in Decor
AOL Tech

ui posts

Filed under: Analysis / Opinion, Odds and ends, Reviews, Developer, iPhone, Graphic Design, SDK, iPod touch

Mega-super TUAW shootout of the iPhone UI sketchbooks

Part of my work requires me to mock up iPhone apps, often to show developers how I would redesign a user interface to work better than something they've come up with. Over the past few months, a number of paper sketchbooks have appeared on the market, all designed expressly for this purpose. I decided to try out all of the sketchbooks that I could find in a cursory Google search, just to see which one would work best for me. Of course, that meant that I had to write a review!

The three products I discovered and tested were App Sketchbook (US$16.99), iPhone Application Sketch Book (US$14.99), and The Developer Sketchbook for iPhone Apps (US$19.99). All of them are designed for the same reason, to let iPhone devs or business analysts describe how they want an application's user interface to look. Follow along as I take a look at these three sketchbooks, as well as a metal stencil template for drawing UI elements.

Continue readingMega-super TUAW shootout of the iPhone UI sketchbooks

Filed under: iTunes, Terminal Tips

Change the behavior of the iTunes zoom button in 9

For me, one of the most welcome new features of iTunes 9 was the restoration of sanity to the way that iTunes responded to the zoom button. I had long been irritated by the non-standard behavior iTunes had displayed, brazenly flaunting the accepted practice of how the zoom button worked by toggling the mini player on and off, instead of zooming the window like a well-behaved Mac app.

Never once in all my years of using iTunes have I wanted to use the mini player. Whenever I tried to zoom the app and the mini player appeared, it would be quickly followed by muttering and grumbling. So you can imagine my joy and bliss at discovering that iTunes 9 finally validated what I had known all along. The zoom button was supposed to act a certain way, and if you want to do something different than the standard, then you ought to use the option/alt key.

I celebrated this change. I called friends I had not spoken with in ages to tell them about it. I wrote a sonnet to the proper use of the zoom button. A party was planned. Ok, maybe not all of that, but I was pleased with the change.

Then iTunes 9.0.1 came out and ruined everything. Yes, I said everything! No, you're the one who's overly emotionally attached to a relatively minor UI issue!

Well, apparently I'm not the only only one. Over on Twitter @zadr and @siracusa reported that you could revert iTunes 9.0.1 to iTunes 9.0's behavior through a command in Terminal.app:

defaults write com.apple.iTunes zoom-to-window -bool YES

This tip was then "retweeted" about 50 times and ended up on MacOSXHints.com which is where I first saw it, moments before breaking out into song and dance.

If you would prefer not to get into Terminal.app, you can get the 9.0 standard zoom behavior in 9.0.1 (and presumably later versions as well) by holding down the alt/option key when clicking the zoom button.

Filed under: OS, Software, TUAW Tips, Mac 101

TUAW Tip: Option-clicking the green button

When iTunes 9 changed the behavior of the green "maximize" button to shrink the player to the mini player, I adapted quickly. Option-clicking is pretty easy to do since the option key (unlike control) is on both sides of my laptops' keyboards. But I forgot that option-clicking the green button on windows in OS X does other things too.

For many applications, simply option-clicking the green button will "maximize" all the open windows of that application. Of course, maximize behaves differently in some applications. For example, option-clicking the green button in Safari makes all the open pages taller, but not wider. That's by design in Safari, and I rather like it. If you come from Windows, however, you'll be mortified that the window does not occupy the entire screen. In Firefox, it does indeed maximize to fill the screen. It's a matter of preference, but the key point: option-click will max all open windows of that application. Some are "smarter" than others.

As our last trick, try option-clicking the green button Calculator. It toggles between the expanded, scientific calculator to the programmer's calculator to regular calculator. Neat!

Filed under: iWork, Developer, iPhone

Free iPhone Keynote and PowerPoint templates help get you from thought to finish

Mockapp.com has created both Keynote and PowerPoint templates of iPhone UI elements, and has made them available as free downloads. Say you had a dream in the middle of the night about the most awesome iPhone app that, to your surprise, no one has thought of yet. Instead of waking up in a deep sweat and scribbling said ideas on paper, you could dream them up on Keynote.

After mapping out your concept on Keynote, you could then pitch it to others in a Keynote presentation. The Keynote and PowerPoint templates include alerts, the iPhone keyboard, arrow icons, buttons, as well as a host of other UI elements.

Filed under: Tips and tricks, iTunes, TUAW Tips

TUAW Tip: Multitasking in iTunes



Have you ever been playing one of your finely-tuned playlists, blissfully grooving to the music, only to connect your iPod or iPhone and lose your place? In other words, iTunes (if you've set it to automatically sync) will move your view from whatever playlist you're in to the sync window. That's handy, of course, but if you forgot which playlist you were in, it can be a pain. I have several playlists set to random, and when I try to go back, it re-shuffles the order. There are other multi-tasking issues with iTunes that largely stem from its one-window interface. If you want to browse the store and manage a playlist, for example, you're stuck doing a lot of scrolling. But iTunes isn't really one window!

If you double-click the title of a playlist, it allows you to edit the name of the playlist, right? But if you double-click the icon of a playlist (for a standard list it'll be a little blue note to the left of the title), iTunes will open an entirely new window, as seen above. You can open a bunch of these if you like and it works with TV, Movies, pretty much everything on the left side. It's much easier to drag and drop songs this way if you have a bunch of playlists. Plus, the window menu will give you quick access to whatever you opened, or you can switch through them with Exposé.

Note: yes, this has been in iTunes for a long time.

Filed under: Apple, iPhone

Future iPhone may detect when you are truckin' like the doodah man, offer video chat

Macrumors has a detailed breakdown of a couple of new iPhone patent applications, but here's the gist: Apple is looking at how to trigger events based on movements (or gestures), and one patent filing shows a front-facing video camera. The camera is easy -- there's your 2-way video chat (we hope). The motion stuff? Well, Apple could go in several directions with that.

According to the indications in the patent filing, Apple is suggesting the interface on the iPhone could change under certain conditions. Specifically, contacts would get larger if you are running. That makes them easier to tap when you aren't able to be as accurate. This is just one example, but I think the more the iPhone can correctly guess the context of its use, the better. We were all a little excited when we saw the auto-orientation of (some) apps, and the relatively minor miracle of a proximity sensor which turns off the screen when you raise the phone to your face. The motion-sensing stuff takes this way beyond all that.

While this stuff won't likely make it into the next iPhone revision, it does show you where Apple is headed: more features, better usability. Although I do notice the power button seems to have moved to the right, away from the top. Will that be part of the next iPhone? There's mention of everything from a stylus to a scroll wheel (like BlackBerry), but I think that's just patent chatter (covering the bases, as it were). Here's a link to the patent filing.

[thanks to Alejandro for help in plumbing the patent filing]

Filed under: Software, Productivity

Beta Beat: Grape, a new way to manage your Desktop clutter

Grape, just released as a beta, is a new take on desktop file management. I've seen several attempts at innovative user interfaces for file management in my day, some better than others, but this is the first one I've been really excited about. In the words of the author -- Stéphane at docklandsoft.com -- "Grape is a visual and spatial way to classify and organize temporary files." I use my desktop as a sort of Inbox, saving all of my working files, PDFs of web pages and other random bits there during the day, and then tagging and bagging the collected mess once or twice a day. It's not a bad system, but I love anything that might make my life simpler and/or more interesting.

Grape takes all of the files on your desktop and puts them into a kind of three-dimensional workspace where you can pan and zoom, group files and perform various functions, including filing them to folders anywhere on your hard drive. You can zoom in and out with your scroll wheel or by holding command-space and dragging a rectangle. You can pan around the space by holding space and dragging. Once you've started organizing, you're able to create boxes and text labels to highlight groups of interest or provide highlighted areas for sorting. You can also Quick Look files, as well as choose the preview image for movies and multi-page PDF files. You can't descend into folders, but if you have a Quick Look plugin for folders, it's really easy to identify previously grouped files without jumping back to the Finder.

At this point, Grape is interesting (and fun), but lacks some much-needed functionality. Among the list of things I'd like to see: more mouse-only navigation, droppable folders, the ability to create functional drop-boxes to send files to specific folders, OpenMeta tagging (or AppleScript access to selected files for apps like Tags) and a more customizable interface (I find the default blue gradient a little overwhelming). It's a great start, though, and has really piqued my interest in more "spatial" file-management interfaces. Check out a video of Grape in action after the jump, and grab the beta here.

Continue readingBeta Beat: Grape, a new way to manage your Desktop clutter

Filed under: Analysis / Opinion, Software, Internet Tools

Tabs in the title bar: a UI design trend that needs to go

Safari 4 Beta's new tab arrangement has me bothered. It seems to be largely lifted from Chrome's user interface that puts the tabs at the very top of the window. Not only is this a departure from Apple's typical UI choices, it presents problems for users with special needs.

On your average Apple user interface, every object -- a title bar, menu, button, or handle -- has a single function. It can resize the window, move it, close it, or scroll it. Safari 4's tabs, however, have a dual purpose: They not only can be selected to move the entire Safari 4 window, but can be clicked individually to display their contents. In Safari 3, this was handled by two different objects -- the title bar to move the window, and tabs in the tab bar.

Google chose to put tabs at the top of the window because it was an important part of the user metaphor for their web browser, Chrome. In Chrome, tabs are independent processes brought together in a kind of stack. This is all very well and good, but it poses the same problem of having the area at the top of the window do two things at once: move the window as a whole, and control each item in the stack.

Continue readingTabs in the title bar: a UI design trend that needs to go

Filed under: Rumors, Snow Leopard

'Marble' to be the next look-and-feel for Mac OS X?

Snow Leopard, the next major version of Mac OS X, will include minor tweaks to the user interface, according to MacRumors' Arnold Kim.

"The new theme will likely involve tweaks to the existing design and perhaps a 'flattening' of Aqua in-line with Apple's iTunes and iPhoto interface elements," Kim writes.

AppleInsider's Kate Marsal posted a screenshot of some controls purported to be part of the new interface, dubbed "Marble." It's unclear where the screenshot came from, as Kim writes that development builds have so far used Leopard's version of the Aqua theme. They could easily be Photoshopped screenshots of iPhoto or iTunes, so take that with a grain of salt.

Daring Fireball's John Gruber wrote that Marble was the codename for the new interface scheme in his Macworld predictions roundup, but said later he was wrong when it was not announced during the keynote. He wagered that the look would feature "iTunes-style scrollbars everywhere, darker window chrome, and a light-text-on-dark-background menu bar."

Snow Leopard is rumored to be released before the end of March.

Filed under: Analysis / Opinion, Gaming, Software, Odds and ends, Developer, iPhone, App Store

What's in an icon?

Gedeon Maheux has an post about how an icon is designed from the aptly-named Iconfactory (specifically the Frenzic app icon), and while I don't have any design skills to speak of at all, it's an interesting look into how those little snippets of art are made.

Icons are increasingly important, especially on the iPhone and OSX, as Apple leverages icons more and more in their interfaces, from the Dock to CoverFlow to the iPhone's home screen. He sounds a little sheepish that they obsess over icons, but why shouldn't they -- every time you decide whether or not to buy or use an app (some might say the most important part of an application's lifeline), you're likely looking right at the icon.

There are a few things to take away here: they designed the icon not by itself, but right alongside all the other icons on an average iPhone screen -- in context, where people would see it. And they walked a thin line: while they wanted it to stand out as something you'd chose even among the apps you've already purchased, they didn't want it to be so bright or flashy that it broke the UI. Truth be told, Frenzic's icon still looks a little bright to me, but the lesson is good: the UI comes first.

Ged closes with a sentiment I've agreed with for a while: while there's a disturbing trend of adding "On Sale" or "New!" to icons in the App Store (not to call anyone out, but ahem) that doesn't serve the developers or their customers. An icon, just like your app, should be subtle and simple and beautiful. After all, isn't that why we're all using Macs in the first place?

Filed under: OS, iPhone

Re-thinking the iPhone's home screen

The iPhone's home screen works just fine with 16 application icons on the main screen and four more on the dock at the bottom. It still works well with another screenful of 16 more apps on the adjacent screen.

But, says Chris Devers, as you start adding more apps, the home screen UI doesn't scale well to cope with them. Flicking across five screens of apps to find the one you want is time-consuming. And moving an app from screen five to screen three is chaotic, unless you've left "gaps" on each screen as you went along - in which case you'd have six to juggle, not five. And even then, it's still chaotic.

OK, so not everyone is going to be collecting that many third party apps. But for people who do, says Chris, there needs to be a better solution than this. He's posted a set on Flickr to illustrate his point.

What might work? A Quicksilver- or Spotlight-style app, where you type some characters from the name of the app you want and it gets launched? Or a gesture launcher, where you "draw" what you're looking for?

Filed under: Hardware, Software, Video, Odds and ends

A little kinetic scrolling with Smart Scroll X

Apple has already stolen the multitouch interface from the iPhone for the MacBook Air and the new MacBooks, but they haven't yet borrowed that other scrolling "feature," known here as "kinetic scrolling." If you'd like to steal it for your own Mac, however, jkOnTheRun has just the thing: a tip about Smart Scroll X, a program that lets you use your mouse to do some kinetic scrolling in any Mac app you want.

We've actually posted about Smart Scroll before, but the video is a pretty good demonstration of what's happening here. I'm not quite sure this is something Apple will want to implement in the OS, however -- it feels right enough on the iPhone, but I kind of like that my scroll wheel stops when I tell it to. If you'd rather have the iPhone experience on your usual Mac, however, the app is available as a free trial, or a complete license for $19.

[Via Nathan M]

Filed under: Software, Open Source

Missing Drawer for TextMate revisited

Way back in 2006 – after the excitement of the Midterm Elections and before the launch of the Wii – Hetima wrote MissingDrawer, a plugin for the oft-mentioned TextMate that took the standard-issue OS X drawer used by TextMate project file lists and turned it into an Xcode-like pane embedded in the edit window. It was lauded by many as a major improvement of the TextMate UI, but has gone pretty much untouched since then, perhaps because it was good enough for most users to begin with. But Jannis Leidel saw room for improvement.

The new MissingDrawer builds off of the original, adding some aesthetic UI tweaks along with some usability polish. On the aesthetic front, it increases the line height of the file list, shrinks the project buttons and tweaks the file list frame. A new resize method accompanies the Mail.app-style resizer handle and the position of the splitter pane is saved automatically now. And lastly, the panel now hides when using the Show/Hide Project Drawer menu item or shortcut.

You can download the 2008 MissingDrawer (including source code) at Jannis' site, and installation is a couple of double clicks away. TextMate users who liked the first version of the plugin will surely appreciate the touch-up. I know I do.

Filed under: Software

Candybar 3.1.2 is ready to go

The developers at Panic have released CandyBar version 3.1.2. If you're unfamiliar, CandyBar 3 is a super simple and fun way to customize Mac OS X's icons and dock (Leopard required). Version 3 introduced some very cool features - like Pixadex integration - that make this killer app even cooler.

Changes to version 3.1.2 include:
  • Importing Pixadex libraries on first launch is more reliable
  • Application and volume icons update more reliably in the Finder
  • Fixed a potential problem with generic file icons
There's more, of course, and you can read the change log here. CandyBar 3.1.2 is a free upgrade for registered users for version 3.x (a single license will cost you $29US).

Filed under: iPod Family, iPhone, iPhone 101

iPhone 101: Two-fingered Scrolling

Everyone knows that you can use a single finger to scroll web pages in Mobile Safari but it's less well known that you can use two fingers to scroll frames and other subpage elements. Normally, on personal computers, you use a separate scroll bar for webpage frames. On the iPhone and iPod touch, these scroll bars do not appear and the content expands to fill the frame set area. By using two fingers at once, you tell Mobile Safari to scroll the element rather than then entire page. I find this especially useful when filling out forms with scrolling selections such as when I do blog posts and need to add categories.

Tip of the Day

F11 moves all your windows off the screen so you can quickly glance at your desktop. F10 shows you every open window in an application. F9 shows every open window for every application that isn't hidden or in the dock.


Follow us on Twitter!
 TUAW [Cafepress]

Featured Galleries

DNC Macs
Macworld 2008 Keynote
Macworld 2008 Build-up
Google Earth for iPhone
Podcaster
Storyist 2.0
AT&T Navigator Road Test
Bento for iPhone 1.0
Scrabble for iPhone
Tom Bihn Checkpoint Flyer Briefcase
Apple Vanity Plates
Apple booth Macworld 07
WorldVoice Radio
Quickoffice for iPhone 1.1.1
Daylite 3.9 Review
DiscPainter
Mariner Calc for iPhone
2009CupertinoBus
Crash Bandicoot Nitro Kart 3D
MLB.com At Bat 2009
Macworld Expo 2007 show floor

 

More Apple Analysis

AOL Radio TUAW on Stitcher