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.

It's Made of People!

I frequently remember documents by the people that have also touched them in some way.

Contact details and related files

Viewing contact details and related files

The files shown below the contact details are those sent to or received from, or authored by the contact. The contact details section increases in height to the point of only showing two rows of files if necessary.

Contacts list popover

Contacts list popover

The iPad guidelines say popovers cannot be styled so consider this aspirational.

Contacts sidebar and details split view (landscape)

Contacts list and details in landscape

Editing Contact Details

Editing contact details

The details card slides down out of the corners and expands.

Viewing Files

Document viewer

The Info button at top right displays a popover listing file metadata.

Icon Sources

Some from app-bits, some from glyphish. My thanks to both.

0p3n_s3sam3

I use the Password Assistant in Keychain Access (/Applications/Utilities) to generate passwords for new accounts. The Assistant is pretty handy, but currently not integrated with any browsers, meaning I have to open Keychain Access, create a new Password Item (File > New Password Item), then click on the key to open the Assistant. I might then have to bounce back and forth between my browser and Keychain Access to find a password that complies with the (frequently unexpressed) password rules of the site.

Password Assistant integrated in browser

The Assistant would only appear when two password input fields are detected. What to do when a site doesn’t require confirmation? Maybe check the Keychain for existing accounts at the domain and show the key icon only if none is found?

Redemption from Error

I finally redeemed two iTunes gift cards last night, finding the process generally straightforward. That said, many Macs now have iSight cameras built-in. As proven by Delicious Library, an iSight can also function as a barcode scanner, moving the bulk of the input burden from the user to the computer.

Scanning an iTunes gift card

A second barcode (which creates a bit of confusion) would not have to be added if the scratch-off alphanumeric code could be recognized as such using OCR. With foreknowledge of the typeface and the processing power of modern Macs, this seems technically feasible.

In case the camera is in use by another application, the Scan via iSight button is disabled and the application name is displayed.

Camera in use by another application

There would have to be some conditional rules to hide the mention of optical scanning and the attendant button on Macs without a compatible camera.

iPhone Power Settings

Mike Davidson posted a critique of the number of steps required to change battery life-extending settings on the iPhone. Off the top of my head, I proposed what I mocked up and posted below; an always available means of switching among configurations.

  1. Tap the battery icon at the top right of the screen. This target is potentially problematic given the relatively small size and its proximity to other controls.

    Tap battery icon

  2. Tap the name of a configuration to activate it or the disclosure button to the right of the label to view/edit its details. The Add button opens an Untitled configuration with the default iPhone settings.

    Power settings list

  3. Edit the settings by sliding one or more sliders or tap the oval to edit the configuration name.

    Settings sliders

  4. Edit the name and tap Done. The sliders remain manipulable.

    Editing configuration name

  5. The configuration has been renamed. Tap the OK button to return to the configurations list.

    Renamed power configuration

November 12 Update: Minor changes to better follow iPhone conventions, larger thumbnails with alpha channels.

Data Store Store

During my holiday visit to Seattle, I helped two people address disk space shortages on their Macs. While purchasing additional storage was not the solution I recommended in either case, it got me thinking about the issue.

There are many places to buy storage online, and a few of them allow you to filter the options based on the Mac the drive will be in or attached to. This is helpful, but it would be better to filter the list automatically based on the known system configuration without requiring user input.

  1. The Warning Dialog

    I didn’t have a screenshot of the actual current dialog, so I had to work off an old screenshot I found. Regardless, the only important difference is the addition of the Additional Storage button.

    Low disk space warning

    1. Compatible Storage List with Item Details

      The list is generated based on your hardware. For example, if you have added an eSATA controller, eSATA drives would also be shown.

      Showing the formatted capacity makes it easier to determine exactly how much additional storage you will get. The filesystem type in parentheses could be a pop-up menu to select different formats.

      Additional item details could include cache size, noise levels, power consumption and conservation features, seek times, etc.

      Storage device list with item details

    2. Compatible Storage List with Item Reviews

      The value of reviews really depends on the number provided, but even one can contain useful information not provided elsewhere.

      Storage device list with item reviews

  2. Reviewing Your Storage Order

    Reviewing storage device order

  3. Placing Your Storage Order

    All credit card type logos would be fully opaque until the first digit is input. Once input, the matching logo remains opaque while the others become semi-transparent.

    Checking “Ship to a different address…” would vertically expand the window to accommodate another set of fields for shipping information. Billing and shipping fields would be auto-completed based on your address book.

    Placing storage device order

The Mac Pro, FireWire, Internal, USB, and generic External icons are property of Apple. The Cuica hard drive icon is Metal OS from Carlos Reyes' Carlito Drives set.

An Alternate Approach

System information could be sent to a web-based store as part of a generated URL (similar to Google Charts) after clicking Additional Storage on the warning dialog.

Reading at 160ppi

Prior to the unveiling of Books.app, a book reader for the iPhone, I’d begun working on my own design. I figured the iPhone would be fairly comfortable for extended reading due to the bright display and high pixel density (which allows it to render text closer to print quality). Thanks to Chris Messina for the Keynote template with basic iPhone images he posted.

Book List

The screen you initially see after pressing the Books app icon on the Home screen:

iPhone books sorted by author

Pressing Title switches the sorting method:

iPhone books sorted by title

Searching

Pressing Search on the bottom button row triggers a sliding transition; the navigation buttons are replaced by a search field and Search button. The keyboard appears below.

iPhone book search

iPhone book search results

Pressing Books returns to the list with the last active sort in effect.

Table of Contents

Nothing too special…

Dune table of contents

Book Info

Additional book details such as the original publisher and publication date. I haven’t settled on exactly what metadata should be displayed here.

Book information

Pressing the cover overlays a large version. The two-fingered spread/pinch gesture could zoom in and out.

Enlarged book cover

Index

Assuming an index is embedded in the book file (or automagically generated), this would be an alternative to Search.

Alphabetical book index

Pressing on a index entry displays excerpts of sentences containing the phrase in order of appearance. Pressing one of these navigates to the page.

Index of Baron Von Harkonnen

The Book

The page structure of the physical book should be retained, but a continuous scrolling interface sounds better to me than using paging. Pages are an implementation detail (unless you are reading scrolls). The pinch/spread gesture could be used here to decrease and increase the text size, automatically reflowing the text (minding widows and orphans!). Pressing on illustrations would either overlay them similar to the cover in the Info view or open them on their own screen. If the illustration has a title and caption, a separate screen with a Go Back-type button would probably be preferable.

Book text content

The zipped Keynote ’08 file has links set up to give some idea as to the flow. Keynote’s animation tools have improved, but they are not yet to the point where I can comfortably create the transition animations that I have in mind for a book reader.

Yes, there would be a Cover Flow view when in landscape orientation. You can mock that up with your imagination. No, I do not have an iPhone. I hate phones, but I do like books.

How about an SDK, Apple?

SearchKilt

The inline searching seen in the 10.5 Help menu could be used in other menus.

History menu searching in OmniWeb

History menu search results in OmniWeb

Providing searching in the Bookmarks menu in browsers and the menu immediately right of the Application (File/Document/Thingamajig) would also make sense. The default search scope would be filetypes the application can open or import.

This type of inline searching would provide the sort of application-specific search focus that I mocked up earlier, but it doesn’t provide an easy way to move a query between applications.

Yes, jazz bagpipes. That cat could burn!

Downbeat

An alternate visual music browsing interface.

Preview thumbnail

Downbeat Music Browsing (748K PDF)

  • The Genre bar would be hidden by default. Display could be toggled from the Edit menu (this and several other commands really belong in a View menu).
  • The Genre bar would automatically expand to multiple rows and a vertical resize handle would appear above the artist section scroll bar if all genre titles could not fit in a single row. Ugly, but overflow menus are ugly and cumbersome.
  • Multiple genres could be selected by Command- or Shift-clicking.
  • The search bar would appear immediately above the Genre filter bar, but the background would be the blue-gray seen in Mail to visually differentiate it from the Genre bar.
  • Adobe Illustrator does weird things when exporting to bitmaps and PDF.