TweetFollow Us on Twitter

Appearance-savvy Apps

Volume Number: 14 (1998)
Issue Number: 1
Column Tag: Programmer's Bookshelf

Designing Appearance-savvy Applications

by Avi Rappoport

Using Apple's Mac OS 8 Human Interface Guidelines and the Appearance Manager

This was supposed to be a simple review of the Mac OS 8 Human Interface Guidelines, a Developer Note from Apple. But, while trying to write the review, I ended up tracking down additional issues, such as what, exactly, the "Mac OS 8 Human Interface" refers to, what "Appearance" means, how the Appearance package updates the Control Manager and the Dialog Manager, and how to go about using this information in your design. Here's what I found.

About the Mac OS 8 Human Interface

Mac OS 8 has some fairly radical changes from System 7 automatically propagated throughout all applications which call the standard Toolbox. These changes include a gray-scale look, windows with draggable borders, button-like popup menus, new controls such as progress bars, an explicit Help menu, and more. All common interface elements are now grouped together under the term Appearance, a concept salvaged from Apple's Copland effort. This Appearance concept will allow future Mac OS releases to support switchable themes - unified sets of interface elements, including windows, dialogs, controls and color. When themes are supported, designers will be able to create themes without having to program them. Applications which call Toolbox-standard interface elements will automatically display these new interface elements. This will allow users to customize the look of their desktops, without using extensions or changing any basic functionality.

In the meantime, the new Appearance Manager extends interface elements from the Window, Control, Dialog and Menu Managers. These finally bring Mac Toolbox support for new standard controls, including sliders, progress bars, digital clocks, disclosure triangles and tab panes, as well as menu key command icons and more.

In a striking instance of rationality and clarity, Apple will allow developers to ship this functionality with their applications to run on earlier systems! Appearance 1.0.1, an extension/control panel package, is designed to work with versions of Mac OS from 7.1 through 8.0, and runs on 68K and PowerPC processors. You can use these Gestalt selectors to check for the Appearance Manager:

/* Gestalt selector and values for the Appearance Manager */

enum {
   gestaltAppearanceAttr        = 'appr',
   gestaltAppearanceExists      = 0,
   gestaltAppearanceCompatMode  = 1
};

According to Apple, the Appearance package supports three run-time models: Classic 68K, CFM-68K, and PowerPC CFM. Color QuickDraw is required for Appearance, so it requires a 68020 or better processor. You can download the current Appearance package from Apple's developer site, as described below.

About The Human Interface Guidelines

Back to the design issues and the guidelines: designing the user interface of an application or control panel is not trivial. Designers, and especially programmers working without formal design training, are often confronted with situations where they must present complex information without confusing beginners or annoying expert users. Apple has traditionally provided advice and design information in the Human Interface Guidelines. This has helped interface designers to be consistent in their standard elements and to create good solutions for situations specific to applications. The Mac OS 8 Human Interface Guidelines continue this tradition, describing the changed elements and new features in Mac OS 8, and how to incorporate them in your interface. However, these Guidelines do not include background materials on the theories and principles of interface design: for these, see the earlier Macintosh Human Interface Guidelines.

Showing that Apple "gets it" about web distribution, both the original Human Interface Guidelines and this update (among other documentation) are available free on the Web, in both HTML and Adobe Acrobat PDF format at http://devworld.apple.com/dev/insidemac.shtml.

The Mac OS 8 Human Interface Guidelines is aimed at people designing and implementing interfaces for applications and control panels, so they can make best use of the new features. It includes such specific guidelines as detailed pixel counts of distances between radio buttons, and suggestions for when to use a scrollbar instead of a slider. The writing is clear and concise, and the examples are good - of the high quality we've come to expect from the Inside Macintosh series.

Unfortunately, the reasons for changes in Mac OS 8, such as the removal of the border around dialogs, the new text "Help" menu, changes to the scrollbar arrows and the "affordance" (cursor change to indicate move, copy, alias, etc.) are not described at all. Past versions of the interface guidelines explained more of the theory behind design decisions, which educated interface designers and helped them when they had to create elements not covered by the standard interface. In addition, this book does not provide much to help designers use contextual menus or extended menu key commands.

Therefore, this document is only adequate: it provides the basics but does not go beyond. It does not give enough background, theory and examples to ensure that Mac designers create programs with consistent and appropriate use of new interface elements, and that's a shame.

What Is in the Book

The Mac OS 8 Human Interface Guidelines covers Controls, Dialog Boxes, Menus, Windows, and Control Panels. I'm going to describe it very briefly, as all interface designers and most programmers should just get a copy and read it themselves!

Old Controls Updated

The Control Guidelines chapter describes the changes to the old controls: push buttons, radio buttons, popup menus, list boxes, scrollbars, edit text fields and static text fields. They have all been updated to a more three-dimensional, "modern" look:

Figure 1. New Checkbox Control.

The chapter describes new features, such as "mixed states" for radio buttons and checkboxes (for situations when the selection includes multiple states, such as text with several fonts).

Figure 2. Mixed State Checkbox (with Disclosure Triangle on the left).

One of the nice changes is the new disabled states for selected radio buttons and checkboxes, which fixes one of my pet peeves with the classic look. There's no longer a big black bullet or X in the selected control: the selection indicators are now dimmed as well.

In addition, the text of this chapter has been updated using examples from the real world. My favorite:

Avoid the use of negative labels. A checkbox labeled "Delete read messages" with a default state of off is a clearer choice than a checkbox labeled "Do not delete read messages" defaulting to on.

List Boxes now have built-in arrow key support and focus rings, and there are other similar changes that will make all programmers happy.

New Controls

In addition, the Control Guidelines chapter covers the interface to new controls. These are elements that are useful and helpful and were not included in the previous Control Manager.

The controls are:

Figure 3. Bevel Buttons.

Figure 4. Horizontal Sliders in a Primary Group Box (there's also a Vertical Slider control).

Figure 5. Secondary Group Box.

Figure 6. Digital Clock with Little Arrows.

Figure 7. Disclosure Triangle.

Figure 8. Tabs (and User Panes to go with them!)

Figure 9. Visual Separators (horizontal rule).

Figure 10. Placard control, with the new Scrollbar Arrows and Resize Box.

The new control definition for scroll bars has a variation which supports live scrolling. With a System 7 scroll bar, the user drags a ghost of the scroll box, and the value of the scroll bar changes when the user releases the mouse. With a live scroll bar, the whole scroll box moves, and the value changes as the user drags. You can see this behavior in the Mac OS 8 Finder.

As in the old version, you need a control action procedure to keep up with the changing value of a live scroll bar. But watch out: where the thumb of an old-style scroll bar takes an action procedure with no parameters, a live scroll bar now uses the same action procedure as the other parts of the scroll bar, with parameters.

Figure 11. Help Icon.

And there's more than we can show here.

Dialog & Window Appearance

The Alert section of the Guidelines replaces the previous description of alerts, with full explanation of which version to use and how they will appear. The Dialog Box Guidelines cover such new features as key navigation (using the Tab key to move among edit text fields), and the focus ring, now automatically drawn around the field which will accept the keystrokes.

Figure 12. Focus Ring Around Current Text Field.

The Layout Guidelines provide complete directions for designing standard spacing of the dialog box or window, text in controls, spacing between controls, and even the Help button. These details will allow interface designers to make clean, elegant layouts without having to guess at the proportions. Use them!

The new standard Utility window is designed for palettes and other non-standard windoids. It can have a top or side title area.

These sections do not describe much of the theory behind the changes in these elements, but they have excellent detail for precise layout.

Menus

The Guidelines finally provide the final word on the location of the Preferences menu item: at the bottom of the Edit menu, after a separator. It will be nice to have the Preferences in the same menu locationin all new applications.

In addition, the Appearance package provides a new standard way to accept and display Control, Shift and Option keys as command-key shortcuts. Use these calls instead of third-party MDEFs for best display on future systems. However, this guide does not define a set of standard meanings for these extended command keys. Losing the opportunity to define these standards is a mistake: developers need rules so users can have cross-application consistency.

Contextual menus are another new feature of Mac OS 8, providing context-sensitive menus when the user holds down the Control key and clicks. This guide offers a good, basic description of how they work, but provides none of the theoretical background or design criteria.

Control Panels

This chapter provides new insights into the issues of Control Panel interfaces. It shows what the standard arrangements should be, and gives guidelines and helpful hints on how to deal with exceptions. New information on fonts, menus, and icons, along with expansion and contractions of a details area should help as well.

Multi-Pane Windows

In the context of Control Panels, the Guidelines discuss the four standard ways of displaying multi-pane windows (using the new and helpful user pane toolbox control). They are Tab controls, Buttons, Scrolling list of Icons and Pop-up menus. Unfortunately, my favorite, the disclosure-triangle list used by the CodeWarrior Pro 1 Preferences Window, is not covered. The guide uses four versions of the Appearance control panel to show the strengths and weaknesses of each approach, and provides some suggestions on how to choose between them. This is exactly the kind of practical advice that Apple should be sharing, although it would be nice if they chose one of these options and used it consistently for the system control panels.

More About Mac OS 8 Changes and the Appearance Manager

The new Guidelines do not cover some of the interface changes in Mac OS 8, and you may be wondering how they came about. Here are some tidbits I picked up at the Developer Conference, and from conversations and discussions on the Apple HI Developers mailing list. These notes apply to the Platinum Appearance only: we won't see the real implications of these changes until the Appearance Manager supports multiple Themes.

Why Modal Dialogs Lost Their Borders

In System 7 and earlier, all dialog boxes have thick gray and black 4-pixel borders, but normal windows have a simple black line border, one pixel on the left and top, two pixels on the bottom and right. This changed in Mac OS 8: now windows have the thick molded border and dialogs are almost borderless.

Figure 13. System 7 Alert showing dialog with border.

Figure 14. Mac OS 8 Alert showing borderless dialog.

Figure 15. System 7 Window with thin borders.

Figure 16. OS 8 Window showing thick borders.

The border now signals window draggability - users no longer have to click the title bar to drag, they can drag anywhere. However, users can't drag modal dialogs, so they don't have borders. It's logical but disconcerting, and there's nothing in the new guidelines that explains this.

The Collapse Box

The collapse box in window title bars shows the WindowShade functionality explicitly.

Figure 17. Collapse Box. (On right side of a window without a close box.)

As most designers have figured out, invisible functions are rarely used or remembered - that's a great part of the Mac's success. So, Apple had to create a way for users to know they could collapse a window; the collapse box is the result. As for why the zoom box moved from the outside right corner to leave room for the collapse box: "some windows will not have a zoom box but they will have a collapse box. We thought it was more important to keep the consistency between windows with and without [a] zoom box (the collapse box being always at the same place) than between windows of different versions of the operating system." [-Arno Gourdol, on the Apple HI Developers mailing list].

Active vs. Inactive States

The new appearance shows more distinction between active elements and inactive ones: "One of the design goals of the grayscale appearance was to give better definition for active and inactive states. Active objects are beveled and 'pushable' whereas inactive objects are flat, and blend in with the background." [-Arlo Rose, on the Apple HI Developers mailing list]

Popup Menu Changes

Rather than a square placard with a subtle shadow and a simple black down-arrow, popup menus now look more like buttons. I like this because it tells the user "push me" rather than "look at me".

Figure 18. New Popup Menu Appearance.

In future OS releases, there will be a distinction between pop-up and pull-down menus. "The new pop-up menu has the dual triangles because when you click on it, the content goes both above and below the menu. Sure this may not mean much now, but in an upcoming release, we plan on introducing a pull-down menu control, and we need to have a visual distinction between the two."

"Pop-ups are for changing state... pull-downs are for executing a command. Since you never want to obstruct the title of a pull-down, the menu will have to be anchored to the control, rather than floating above it." [-Arlo Rose, on the Apple HI Developers mailing list]

Scroll Bar Arrow Changes

The scroll bar arrows were changed to up and down pointing triangles from gray arrows for "aesthetic consistency with the visual appearance of the platinum look." [-Arlo Rose, on the Apple HI Developers mailing list]

Help Menu changes

Apple has done a large number of user tests on the Help menu, and finally put the word Help after the last menu on the right for each application. "Our results would consistently show that people just didn't see it where it was. Most users thought that question mark meant that the clock wasn't sure if the time was right. We tried all combinations of location, and symbol, and the only one people 'got' was the word 'Help' at the end of the application menu list. That and the new sticky menu behavior made for a much higher rate of discovery." [-Arlo Rose, on the Apple HI Developers mailing list]

Cursor Affordances

With Mac OS 8, the Finder has a new set of cursors, which provide user feedback on what will happen when they let go of the mouse. For example, an arrow cursor with a + (plus sign) indicates a copy, an arrow cursor with a small right-facing arrow indicates a move, and an arrow cursor with a curved arrow indicates an alias. Although the cursors are included in the Appearance Manager resource file, there are no interface guidelines, or specific functions to enable this behavior automatically within your application.

Writing Appearance-Savvy Apps

To write Appearance-savvy applications, you'll have to avoid nonstandard CDEFs and WDEFs. Most of the old control calls will automatically be routed through the new control manager in the Appearance package, so they will look good even with the new Themes. But any additional controls or window types, such as the Grey Council, will appear as they do in System 7, rather than participating in the systemwide appearance.

The guidelines, however, are not enough. You'll need some of the following tools and sources of information to get started:

Appearance Manager SDK

To get the most current Appearance Manager, with the newest features and bug fixes, download it from Apple's DevWorld site at ftp://devworld.apple.com/MacOS8/.

Application Frameworks

Metrowerks has announced that the PowerPlant Application Framework version in CodeWarrior Pro 2 supports most of the Appearance features. It wraps both new and old OS calls and directs them automatically according to the presence or absence of the Appearance package, so you can just use the classes and ignore the issue entirely. Please note that PowerPlant has not implemented Contextual Menus in the CodeWarrior Pro 2 release, although there are already third-party shareware classes supporting these new features. Warning: if you've written to the old grayscale classes, you'll have to make some major changes to use the new Appearance classes instead.

Apple's MacApp framework may be updated to support the Appearance package, although the status is not clear right now. MacApp uses the AdLib interface library and licenses some of the Grey Council classes. Current information is at http://devtools.apple.com/macapp/.

TCL (Think Class Library) for Symantec C++ seems to be in maintenance mode. I couldn't find any information on support for the Appearance package at http://www.symantec.com/.

Resource Editors

ResEdit's templates do not support the new features added by the Appearance Manager, and there is no indication that Apple will ever do so. Resorcerer version 2 supports the new controls and most of the other Appearance features. It's available from http://www.mathemaesthetics.com/.

Constructor for CodeWarrior Pro 2 will support most of the new controls and other Appearance features. For unsupported controls, you can just add an item, enter its attributes, and it will appear as a gray box in Constructor, but will draw correctly when you compile and run.

Conclusion

The Appearance package contains welcome additions to the Mac interface and will promote consistency across applications as well as saving all developers a great deal of effort. The lack of theoretical information in the Mac OS 8 Human Interface Guidelines is probably due to the new, leaner Apple. But Apple has been known for it's intelligent, intuitive user experience, and the only way to continue to offer consistency and quality to customers is to work with developers. To keep the edge in interface, as we go forward with the Mac OS and Rhapsody, Apple must invest in both research and communications.

Acknowledgments

Thanks to Arlo Rose, Arno Gourdol, Gordon Garb, Quinn, Greg Dow, David Alter and Tom Lippincott for information used in this article.


Avi Rappoport, avirr@well.com, is interested in user experience design (combining interface and functionality), particularly for information retrieval applications. She is a veteran of StarNine, Metrowerks and Niles & Associates.

 

Community Search:
MacTech Search:

Software Updates via MacUpdate

Garmin Express 7.0.0.0 - Manage your Gar...
Garmin Express is your essential tool for managing your Garmin devices. Update maps, golf courses and device software. You can even register your device. Update maps Update software Register your... Read more
ClipGrab 3.8.12 - Download videos from Y...
ClipGrab is a free downloader and converter for YouTube, Vimeo, Facebook and many other online video sites. It converts downloaded videos to MPEG4, MP3 or other formats in just one easy step Version... Read more
VMware Fusion 11.5.5 - Run Windows apps...
VMware Fusion and Fusion Pro - virtualization software for running Windows, Linux, and other systems on a Mac without rebooting. The latest version includes full support for Windows 10, macOS Mojave... Read more
Civilization VI 1.3.0 - Next iteration o...
Civilization® VI is the award-winning experience. Expand your empire across the map, advance your culture, and compete against history’s greatest leaders to build a civilization that will stand the... Read more
Corel Painter 20.1.0.285 - Digital art s...
Corel Painter lets you advance your digital art style with painted textures, subtle glazing brushwork, interactive gradients, and realistic Natural-Media. Easily transition from traditional to... Read more
iTubeDownloader 6.5.19 - Easily download...
iTubeDownloader is a powerful-yet-simple YouTube downloader for the masses. Because it contains a proprietary browser, you can browse YouTube like you normally would. When you see something you want... Read more
OmniFocus 3.8 - GTD task manager with iO...
OmniFocus is an organizer app. It uses projects to organize tasks naturally, and then add tags to organize across projects. Easily enter tasks when you’re on the go, and process them when you have... Read more
Hazel 4.4.5 - Create rules for organizin...
Hazel is your personal housekeeper, organizing and cleaning folders based on rules you define. Hazel can also manage your trash and uninstall your applications. Organize your files using a familiar... Read more
Macs Fan Control 1.5.7 - Monitor and con...
Macs Fan Control allows you to monitor and control almost any aspect of your computer's fans, with support for controlling fan speed, temperature sensors pane, menu-bar icon, and autostart with... Read more
Acorn 6.6 - Bitmap image editor.
Acorn is a new image editor built with one goal in mind - simplicity. Fast, easy, and fluid, Acorn provides the options you'll need without any overhead. Acorn feels right, and won't drain your bank... Read more

Latest Forum Discussions

See All

Steam Link Spotlight - Signs of the Sojo...
Steam Link Spotlight is a feature where we look at PC games that play exceptionally well using the Steam Link app. Our last entry was XCOM: Chimera Squad. Read about how it plays using Steam Link's new mouse and keyboard support over here. | Read more »
Steampunk Tower 2, DreamGate's sequ...
Steampunk Tower 2 is a DreamGate's follow up to their previous tower defence game. It's available now for both iOS and Android as a free-to-play title and will see players defending their lone base by kitting it out with a variety of turrets. [... | Read more »
Clash Royale: The Road to Legendary Aren...
Supercell recently celebrated its 10th anniversary and their best title, Clash Royale, is as good as it's ever been. Even for lapsed players, returning to the game is as easy as can be. If you want to join us in picking the game back up, we've put... | Read more »
Pokemon Go Fest 2020 will be a virtual e...
Niantic has announced that Pokemon Go Fest will still take place this year although understandably it won't be a physical event. Instead, it will become a virtual celebration and is set to be held on 25th and 26th July. [Read more] | Read more »
Marvel Future Fight's major May upd...
Marvel Future Fight's latest update has now landed, and it sounds like a big one. The focus this time around is on Marvel's Guardians of the Galaxy, and it introduces all-new characters, quests, and uniforms for players to collect. [Read more] | Read more »
SINoALICE, Yoko Taro and Pokelabo's...
Yoko Taro and developer Pokelabo's SINoALICE has now opened for pre-registration over on the App Store. It's already amassed 1.5 million Android pre-registrations, and it's currently slated to launch on July 1st. [Read more] | Read more »
Masketeers: Idle Has Fallen's lates...
Masketeers: Idle Has Fallen is the latest endeavour from Appxplore, the folks behind Crab War, Thor: War of Tapnarok and Light A Way. It's an idle RPG that's currently available for Android in Early Access and will head to iOS at a later date. [... | Read more »
Evil Hunter Tycoon celebrates 2 million...
Evil Hunter Tycoon has proved to be quite the hit since launching back in March, with its most recent milestone being 2 million downloads. To celebrate the achievement, developer Super Planet has released a new updated called Darkness' Front Yard... | Read more »
Peak's Edge is an intriguing roguel...
Peak's Edge is an upcoming roguelike puzzle game from developer Kenny Sun that's heading for both iOS and Android on June 4th as a free-to-play title. It will see players rolling a pyramid shape through a variety of different levels. [Read more] | Read more »
Clash Royale: The Road to Legendary Aren...
Supercell recently celebrated its 10th anniversary and their best title, Clash Royale, is as good as it's ever been. Even for lapsed players, returning to the game is as easy as can be. If you want to join us in picking the game back up, we've put... | Read more »

Price Scanner via MacPrices.net

Sams Club Sales Event: $100 off every Apple W...
Sams Club is discounting all Apple Watch Series 5 models by $100 off Apple’s MSRP through June 3, 2020. Choose free shipping or free local store pickup (if available). Sale prices for online orders... Read more
New 16″ MacBook Pros now on sale for up to $2...
Apple reseller DataVision is now offering new 16″ Apple MacBook Pros for up to $255 off MSRP, each including free shipping. Prices start at $2194. DataVision charges sales tax for NY, NJ, PA, and CA... Read more
Apple now offering Certified Refurbished iPho...
Apple is now offering Certified Refurbished iPhone Xr models in the refurbished section of their online store starting at $499. Each iPhone comes with Apple’s standard one-year warranty, ships free,... Read more
Sale! Get a 10.2″ 32GB WiFi iPad for only $27...
Walmart has new 10.2″ 32GB WiFi iPads on sale for $50 off Apple’s MSRP, only $279. These are the same iPads sold by Apple in their retail and online stores. Be sure to select Walmart as the seller... Read more
Apple resellers offer new 2020 Mac minis for...
Apple resellers are offering new 2020 Mac minis for up to $50 off Apple’s MSRP with prices available starting at $759. Shipping is free: (1) B&H Photo: – 2020 4-Core Mac mini: $759 $40 off MSRP... Read more
Sprint is offering the Apple iPhone 11 free t...
Did you miss out on Sprint’s recent free iPhone SE promotion? No worries. Sprint has the 64GB iPhone 11 available for $0 per month for new lines when you trade-in a qualifying phone in any condition... Read more
Apple has clearance 2019 13″ 1.4GHz MacBook P...
Apple has Certified Refurbished 2019 13″ 1.4GHz 4-Core Touch Bar MacBook Pros available today starting at $979 and up to $440 off original MSRP. Apple’s one-year warranty is included, shipping is... Read more
Apple restocks 2019 MacBook Airs starting at...
Apple has clearance, Certified Refurbished, 2019 13″ MacBook Airs available again starting at $779. Each MacBook features a new outer case, comes with a standard Apple one-year warranty, and is... Read more
Apple restocks clearance Mac minis for only $...
Apple has restocked Certified Refurbished 2018 4-Core Mac minis for only $599. Each mini comes with a new outer case plus a standard Apple one-year warranty. Shipping is free: – 3.6GHz Quad-Core... Read more
Apple’s new 2020 13″ MacBook Airs on sale for...
B&H Photo has Apple’s new 2020 13″ 4-Core and 6-Core MacBook Airs on sale today for $50-$100 off Apple’s MSRP, starting at $949. Expedited shipping is free to many addresses in the US. The... Read more

Jobs Board

*Apple* Mac Desktop Support - Global Dimensi...
…Operate and support an Active Directory (AD) server-client environment for all Apple devices operating on the BUMED network + Leverage necessary industry enterprise Read more
Surgical Technologist III, *Apple* Hill Sur...
Surgical Technologist III, Apple Hill Surgical Center - Full Time Tracking Code D5.29.2020 Job Description Surgical Technologist III Apple Hill Surgical Center Read more
Security Officer - *Apple* Store - NANA (Un...
**Security Officer \- Apple Store** **Description** About NMS Built on a culture of safety and integrity, NMSdelivers award\-winning, integrated support services to Read more
Transition Into Practice Program (TIP) - Sept...
…Academy-Transition into Practice (TIP) Residency program at St Mary Medical Center in Apple Valley, CA. **We are seekingRegistered Nurses who are:** + New graduate Read more
Essbase Developer - *Apple* - Theorem, LLC...
Job Summary Apple is seeking an experienced, detail-minded Essbase developer to join our worldwide business development and strategy team. If you are someone who Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.