Product
Support
Everything Else
macOS Design Considerations
Introduction

Adjusting view designs for macOS provides a good opportunity to step back and consider the ‘look and feel’ of your collection. Collections that were designed back when most users had MacPlus and SE machines with 9" black and white monitors look extremely cramped on today’s expansive displays. The migration to macOS presents an excellent opportunity to update views for today's environment.

The images on the right (click to enlarge) show a typical expense entry view. The first one shows the original form, designed for a small screen Classic environment. The second screen shot shows the same form redesigned for macOS. Note the use of labeled group boxes to bring like-purpose fields together, as well as the Apple-tested pattern of right-aligning the labels next to the fields. This version looks very much at home in the world of macOS. (The main exception is that it uses the font Verdana instead of Lucida Grande. This is because Lucida Grande was not available when this redesign was done in Classic Helix RADE.)

Macintosh programs ‘work’ because they present a consistent user interface. This happens mostly because Apple has published documentation known as the Human Interface Guidelines (HIG) that developers refer to when creating applications.

Apple’s HIG documentation offers much more information than you need to create a Helix application, but knowing the principals behind the HIG can help you create more Mac-like applications. Of particular note, the Layout Guidelines section gives excellent tips that can be applied to views, making them look like they belong in the macOS world.

Group Boxes

One place where designs look quite different in macOS is on templates where framed border rectangles are used, particularly if they are part of the overall design of the form. In macOS border rectangles are drawn using the group box interface element. Consequently they automatically gain rounded corners, a light gray background, and a subtle 3-D effect. This change gives you the ability to create collections that genuinely look like macOS products without resorting to static images. And since these elements are now drawn by the system itself, they will automatically update to a new look if (or when) Apple changes the basic interface.

One of the trade-offs of this change is that drawing lines of differing color or thickness is no longer supported. In macOS all group boxes are drawn with the same border and background color. (We may add this again someday, once all of Helix is running in macOS.)

As this second screenshot shows, when group boxes are nested within group boxes, they take on darker and darker shades of gray. They really make a Helix view quite attractive, but it means you have to know how to reproduce these colors and when to apply them to labels rectangles so they will blend in with the group box.

Colors Apple uses in macOS 10.4–10.6 Colors Apple uses in macOS 10.7–10.8
     Pct.  Hex  8-bit  16-bit
  1. 96.9 — F7 — 247 — 63479
  2. 93.7 — EF — 239 — 61423
  3. 90.6 — E7 — 231 — 59367
  4. 87.5 — DF — 223 — 57311
  5. 84.7 — D8 — 216 — 55512
  6. 82.0 — D1 — 209 — 53713
  7. 79.2 — CA — 202 — 51914
     L*a*b     gRGB      Native
  1. 96.88 — 244 (F4) — 246 (F6)
  2. 93.75 — 232 (E8) — 237 (ED)
  3. 90.59 — 221 (DD) — 228 (E4)
  4. 87.41 — 211 (D3) — 219 (DB)
  5. 84.56 — 201 (C9) — 211 (D3)
  6. 81.69 — 191 (BF) — 203 (CB)
  7. 78.79 — 182 (B6) — 195 (C3)

Creating these exact colors is a bit tricky in Classic Helix, as the colors required to match the nested group box background shades are difficult to recreate using the Classic color picker. The best results can be had by using the “HTML Picker” and turning off the “Snap to Web color” option. You can then enter the hex value in each of the three fields in the picker. It is important to tab through all three of the color fields and then to click OK after you have entered the colors. If you switch to a different picker before clicking OK, the color will adjust to the nearest neighbor that can be shown in that picker. It’s a bit annoying, but once you get the hang of it, it is not too bad.

Rethinking Your Design

Some collection designers went “above and beyond” to try to create attractive designs in Classic Helix. Unfortunately, as the first image on the right shows, these designs do not always translate well to macOS.

The second image shows that, with a little work, we can turn this view into something that not only looks acceptable in Classic Helix, but looks great in macOS. This redesign took less than 5 minutes. All it took was to to remove the excess rectangles that were used to create the fancy design, then create a new color in Helix of the proper shade (247, 247, 247) and then apply that color to the background of the label rectangles..