Designing LookUp for macOS

How LookUp was designed to provide a native macOS Experience, as a Catalyst app.

Vidit Bhargava
Oct 12, 2019 · 14 min read

Earlier this summer, Apple announced Project Catalyst for third party developers to bring their iPadOS apps to macOS. I’ve been hoping to build a macOS version for LookUp for a couple of years now, and the rumblings of a tool to bring iOS apps to the Mac has always excited me.

In fact since Apple announced UIKit for Mac last year, I’ve been steadily prototyping what creating a desktop experience would mean for LookUp.

Using Catalyst to design a native macOS Experience

First, I feel the benefits that Catalyst provides of using a shared code base and the convenience to be able to use the framework that I’m most fluent with (UIKit) far outweigh the disadvantages or limitations of Catalyst at the moment.

In fact, I feel, that if designed carefully, one can create a good native macOS app experience with Catalyst.

I’m sharing this design document to highlight some of the design considerations I made for bringing LookUp’s iOS App to macOS. And while I did use fall backs to AppKit in certain situations (Even though i had no prior knowledge to AppKit, the APIs were relatively easy to get to), I still feel that a lot of apps can design a good experience without having to use them.

Not just about the Interface

Some of the Design Sketches from LookUp’s Design Process

With iOS, people value tangible interactions. They value change, motion and the interaction between the element and their fingers when they tap, swipe, pan or drag through different elements.

The layout of touch interfaces is such that it provides an affordance of interactions between the elements.

You can almost hear the elements of a touch screen interface say “Tap Me!”, and their motion hint at various gestures from Swipes, to Drags.

On a touch screen, The interaction and progressive disclosure of information help in providing an easy to use experience.

On a mac, high information density can often be more valuable than progressive disclosure.

Too many clicks, and you might just slow down the user.

Running LookUp for iOS on a Simulator is an experience where I’d always want to use the Keyboard. The clicking and dragging is too much for a Mouse or Trackpad.

Perhaps, the best starting point for any Catalyst app is the macOS simulator. Run the app on an iPad simulator and you’ll immediately realise the pain-points of using that interface with a mouse.

There‘s just too much clicking and the interface doesn’t feel nearly half as intuitive as on a device.

In fact, the very animations and interactions that are delightful on a device, are sometimes dreadfully slow or challenging on desktop.

Designing LookUp

First day of Catalyst Development

First day of Catalyst development. This is not how LookUp was going to ship!

What’s the equivalent to the Tab Bar on macOS?

First Option: Using Tabs in the Toolbar

While on surface this interface looks like an easy top down way to navigate through the familiar LookUp interface.

But Add a Search Bar, a Back Button Word Actions, The context of switching between these tabs becomes really murky, really quickly.

Which tab would searching for a word show up in?

What happens when I click the back button after switching a tab? Does it take me to back to the previous tab, or does it take me to the word I previously looked at in the selected tab?

The interface brings more complexity than order to the application.

Second Option: Placing Liked and Collections in the Sidebar

One of the very first mockups for LookUp on macOS: I decided to revisit this design, after the Tab Bar option didn’t appear as intuitive.

Taking a cue from Safari, I added a Sidebar to the app to add a Liked Words and Collections Segment.

While this looks like a nice interface that solves the problems of the previous one, it’s not entirely clear as to how I can navigate back to the Discover Words screen.

On safari, it’s not really important to go back to the launch screen, but the discover words screen holds a very important spot in LookUp

Third Option: Placing Navigation in the Sidebar

So we solve this problem by adding another action to the Sidebar.

“Are the segments a bifurcation of the Discover Words action?” was the first thing I heard from my friend to whom I showed this design.

And indeed, it’s not entirely clear whether they’re part of a separate category of options or whether they’re a part of the Discover Words Section. More over this approach wouldn’t scale really well for long lists of liked words.

Fourth Option: A Sidebar with multiple sections and quick access to recents.

This is what we finally went with for LookUp, the toolbar contains popular actions, the Sidebar contains navigation to key sections of the app.

This design actually solves two problems. first it provides clear visual indication of what the currently selected option is.

Second, it provides a quick way to access recently liked words or recently added collections.

It’s quick, it gets the job done, and it’s navigational structure is easy to understand. This is what I stuck with for LookUp on macOS.

Comparing the LookUp UI on iPad and Mac

A comparison of the Collections feature on iOS and that on macOS
Viewing Recently Searched Words on iOS vs macOS
Adding Words to a collection

Adding New Collections…

On iOS, when you’re in a more mobile environment, there’s value in instantly creating a collection without having to think of a name and then edit it if you have one in mind.

When you’re on a mac, you have access to the keyboard at all times it’s actually easier to write down a name before creating a collection than having to edit it later on.

if you’re still unsure of a name, just press return and the app automatically generates a collection name.

Consistency is Rewarding

The initial Toolbar layout for the Word of the Day Detail screen had the done button placed to the right.

This created an unintentional shift of the Word Actions group. An unintentional UI slip up on the mac, that creates a frustrating experience for the user who has probably already moved his mouse in position for the Word Action group.

Consistent placement of buttons, helps in creating a muscle memory

The core of this idea is the fact that consistency is rewarding on macOS. Reliable placements for the actions helps users work more efficiently without making unintentional errors.

Instead of hiding the Word Actions Group, the app simply disables the buttons when the action is not possible, and refrains from moving them around.

Instead of Hiding, Toolbar items are simply disabled

Less Motion is Better

At it’s core when you interact directly with a button, it’s rewarding to experience it moving with your fingers. The interactions of dragging, swiping and pan are a reinforcement of the affordances that the UI provides.

On the Mac, You’re interacting with your mouse or trackpad. And it’s more of a point and click interaction. In such a scenario the same interactions and motions are less rewarding where pointing and clicking a button would be much faster. The motion doesn’t necessarily help, and can in fact slow you down, as you wait for the animation to finish.

macOS Design Essentials

Menu Bar Design

A menu bar is also a visual representation of an app’s visual hierarchy.

Notice how mail offers a neatly structured menu. The View menu encapsulates actions with Sidebar and View Settings of the Mailboxes. The Mailbox menu is followed by the view Menu which offers the actions for the current mailbox, and then comes the Message Menu.

A Message lies inside a mailbox, which is a part of a list of mailboxes in the sidebar.

The preview app also has an easy to understand menu structure. The view contains actions regarding the sidebar and other view actions, the Go Menu is used to navigate through the main document in focus, and the tools menu applies different markup actions to the focused document.

Notice how the menu bar hierarchy moves from Left to Right in system apps.

A user should be able to scan the menu from left to right and have clarity as to what actions are present in which menu. A menu bar that’s consistent with how the app functions is much easier to understand.

LookUp offers a similar structure of menu bar hierarchy. View contains sidebar actions. Followed by Go which contains actions for navigation. Collections contain words, and the formatting changes are applied to the result screen in Question. Hence the Collection > Word > Format hierarchy.
Designing LookUp’s Menu Bar in Linea Sketch.

Note: Actions that result in the opening of a sheet or window end with an ellipse.

Using system provided menus before creating custom menus: There are certain actions that people expect to be present in System provided menus. It’s a good practice to stay consistent with the rest of the system when adding menu items for commonly used actions.

A small sheet of common, system defined menu bar actions and their menus. Apple’s Human Interface Guidelines provide a greater, more comprehensive list which is worth looking at when designing the menu bar.

Toolbar Design

For LookUp, Search occupies the center stage followed by Word Actions and Appearance options to the right, while on the left are the navigational controls.

Common interface elements like the Navigational Buttons occupy the same space as the rest of macOS does.

Touch Bar Design

Since, It’s designed to increase your speed as a user. There’s a spatial consistency to these elements as well.

When a user types on their keyboard, they’re not generally directly looking at it. They usually type with their muscle memory of the key arrangement.

Therefore, the same behavior should be expected from the Touch Bar which is an extension of the keyboard it self.

Avoiding Errors

Using the delete key to delete a collection shows a confirmation dialog to prevent unintentional errors.

Designing Dialog Boxes: Providing meaningful choices

The confirmation dialogs offer meaningful choices, often taking words from the message itself.

Avoid Yes / No actions that create ambiguous choices and confuse the user.

There’s always a clear exit path.

Embrace Multi-Window

What’s usually an overlay page sheet in iPad, may warrant a separate window on macOS

Unlike iPadOS, Users are used to using multiple, resizable windows on macOS. And therefore, they expect separate actions to offer separate windows.

In fact, in a lot of areas, where you’d present an overlay sheet on iPad, it may make a lot of sense to actually present them as a separate, auxiliary window in macOS.

LookUp completely embraces the multi-window approach of macOS. there’s hardly anything that cannot be opened as part of a separate window.

Showing change of focus with multiple windows:

Clear indication of the windows that are in focus. Notice how the tool bar grays out for the window that’s not in focus

Using Appropriate Window Titles:

Since we’re doing multiple windows, it also makes sense to offer clear, meaningful titles for each of the windows.

Keyboard Navigation

LookUp’s navigation is inspired from Brent Simmon’s incredible NetNewsWire app. Up and down keys help in selecting the words or actions in a column, and the Left and Right Keys help in switching the focus between each of the columns. This creates a fast and productive experience for the users.

Keyboard Shortcuts

Making use of system defined Keyboard shortcuts in LookUp for macOS

When designing keyboard shortcuts, the first priority was to map common actions (toggle sidebar, going back and forth switching between sections) to their system shortcuts and then proceeding to the rest.

Commonly used actions have single key commands
For example the shortcut to Like a word can be achieved easily by using the L Key. Or to Pronounce a word, you just need to tap the P Key.

Preferences and Customisation:

For LookUp on macOS, the preferences window was designed to provide more customisability than the iOS app.

Designed just for the Mac. — Opening app with an active Search Window
A lot of macOS users are used to the speed that an active search bar provides in Apps like Apple’s default dictionary app.

LookUp, even though it focuses on much more than just the definitions (Hence this being more of an additional preference than the default), also provides a mode where users can use the app to get quick definitions. Without the need to manually activating the search field.

Note: The iPhone Settings Bundle automatically transitions to the macOS Preferences window. There’s no need to create a separate AppKit Preferences Window.

Help Tags (aka Tool Tips)

While macOS takes care of the system actions, it’s usually good practice to providing help tags for all the Toolbar Items.

Help and Documentation

The help information has been divided into Task based and Overview Information.

Task Based information only contains step by step instructions on how to perform a task.

Overview Information also introduces the user to the topic in question.

Each design document answers the following questions:

1. What can users do?
2. Why do they want to do it?
3. How can they do it?
4. How can they solve the problems in doing it?

Search Indexing:
One of the key components of the Help Guide is the ability to be searchable in the Apple Help app as well as the help menu.

LookUp’s help books work just as natively as they look

Note: .Help Files are natively supported for Catalyst files and don’t require an AppKit Bundle

Supporting Accent Colors

The App Icon

Looking at the macOS icon set in macOS Catalina, there seem to be three different styles that the system apps adopt, the tilted-photorealistic icons, the front view icons, and circular icons that look similar to iOS app icons but use a circle instead of squircles:

I tried making sense of these by dividing them into three different categories (and taking a look at some of the older macOS docs):
1. User Applications — a 12 degree tilt with a perspective that’s akin to looking at something on a desk top.

2. Utilities — a front view projection with a head-on view, akin to an object placed on the shelf.

3. Services — Apple’s services (like Music, Podcasts, App Store, TV) have the circular icon, often not denoting any physical counterparts.

While these aren’t set in stone, and Apple’s own apps often mix and match different styles, In general, this is what the trend seems to be. Consumer apps get photorealistic icons, while utilities have a rather technical representation and services use a circular icon that doesn’t convey any physical object.

LookUp firmly sits in the category of consumer applications.

Taking the Pages app as an example, The Media is a page, and the tool, a pen reinforces the action of writing.

Consumer app icons generally have two components. The media and the tool. The media indicates the purpose of the app, and the tool reinforces the action performed by the app.

Sometimes the tool isn’t used, if the media alone conveys the purpose properly. See the Notes and Calendar apps for example.

Designing the LookUp app icon:

Trying different styles for the LookUp app icon
Media: Dictionary books with vivid graphics on the book jacket, like LookUp’s Word of the Day images | Tool: A bookmark, that reinforces the activity of collecting words.

The LookUp icon tries to stay true to the photo realistic nature of the consumer app icons, with it’s hard bound book texture, and a ribbon like texture for the bookmark.

Credits

The perfect build number does not exi…

LookUp Design

The design blog for LookUp, an english dictionary app on…