I’ve been pretty happy with the GUI designs I’ve managed to put together, especially considering its my first time doing anything like it. Its been a great learning experience. Still, as happy as I am with the work, the point of posting it online is to get feedback. In particular, Guest Judge John Gruber (Daring Fireball) got me moving in a new direction. I’ve tried to make the it clearer how one file might be associated with more than one Mac. From that basic goal came the ‘Stripe’, which the new designs revolve around:
The result is that I’ve put together a second set of three mockups for Portal’s main window. Treat this like an eye exam, Which do you like better, 1 or 2?
Mac View
Taking a closer look at the Mac View, I’ve enlarged the Sync button and removed the navigation buttons from the bottom. Getting from one view to another is now done by hitting the UP and DOWN arrow buttons. In the Mac View, LEFT and RIGHT cycle through all the available Macs. All the important information is shown below the Mac icons: Specs, number of Items, and Animations. The desktops for each of the Mac icons are screen grabs from the actual systems’ desktop wallpaper.
Item View
From the Mac View, hitting the DOWN arrow takes you smoothly to the Item View. This brings up a Stripe of icons representing all the files in the sync queue for the selected Mac. Hitting LEFT or RIGHT in this view scrolls the file icons. Whenever a file is selected, you are given a preview and the basic information for that file. To re-sort the File Stripe according to size, type, or edit date (the default is by name), just right-click anywhere in the stripe and select what you want from the menu.
All the items are divided into two groups: Files and Applications, and these are viewed separately (there are two buttons beneath the main Mac’s icon, used to tab between the two views). If a file is set to sync to more than one Mac, the other Mac’s icon is highlighted as well. To add a file to a new Mac, simply drag the file icon from the Stripe to the Mac’s icon (CTRL-click for multiple selections is also available). To view the file lists for another Mac, click on the Mac’s icon or hit the UP arrow to go back to the Mac View.
Animation View
Hitting UP once from the Mac View or twice from the Item View will get you to the Animation View. I’ve replaced the Front Row turntable with a Stripe, exactly like the one found in the Item View. Hit LEFT or RIGHT to scan through all the styles, including a blank one (for no animation). Screenshots from the animations are used instead of icons. For the smaller styles, like the progress bar, a special set of icons will be needed instead. Selecting a style displays a live preview and all the available options/information. (Each style will have its own unique customization options.)
Navigating the entire interface should be capable with just the four arrow buttons, and all the transitions should be ’smooth as butter’. Once you’ve found the file or the animation you want, you’ll have full access to all the settings you need, in a very logical layout. All of the basic features will be accessible from within the Finder’s right-click menu (right-click on a file or application and select “Sync with Portal”) as well as from Portal’s Dock icon.
I hope this second design option helps to flesh out the ideas I’ve got for how Portal should behave. I’d love to hear your comments about this new look as well as any other ideas for sync animation. Up next I’ll try to polish the GUI some more, put a bit of polish on the feature list, and get the roadmap for future versions sketched out. There are a lot of features being tossed around, and I just want to make it clear where my priorities are. If I leave anything out, or fail to emphasize something you really want, just let me hear it in the forums!
