Oct 12, 2019
Designing LookUp for macOS
How LookUp was designed to provide a native macOS Experience, as a Catalyst app.
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
One of the most frequent questions I’ve been asked about is Why use Catalyst to design a native experience when there’s AppKit?
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
One of the key things I’ve discovered over this design process is that the experience of a macOS app is not just about its interface, but it’s also about how people use their Macs to get work done. People use their macs differently from how they use they use their iPads or iPhones.
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.
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
Once you tick the check box, what you see is pretty similar to a simulator. As you can see here, there’s a lot of work to do.
What’s the equivalent to the Tab Bar on macOS?
LookUp uses the tab bar controller for navigation on iOS. What would it use on the Mac in the absence of a native Tab Bar controller. I made a few mockups to explore this idea:
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
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 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
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.
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.
Less Motion is Better
On iOS, motion can be rewarding. It provides context for possible interactions, it leads the user to different parts of the interface and in general makes the experience more joyful.
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
Apple’s Human Interface Guidelines, are a great primer on macOS Menu Bar Design. One of the key inputs is that a menu bar is only drawn once and then actions are disabled or enabled according to their relevance to the Window in focus. And so the Men Bar has to be an extensive list of all available actions in the app.
A menu bar is also a visual representation of an app’s visual hierarchy.
A Message lies inside a mailbox, which is a part of a list of mailboxes in the sidebar.
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.
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.
Toolbar Design
The most common actions of the app are represented in the toolbar.
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
The Touch Bar is a quick action menu. It includes single click actions that help in interacting with the most common actions without having to look at the screen directly.
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
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
Context switching is hard, and having to click every time you want to navigate to a different spot in the app tends to slow users down at times. Therefore, Keyboard navigation is something that’s essential for macOS apps.
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
Using System defined Keyboard Shortcuts should work as intended: Command + N generates a new window, the delete key can be used to remove a word from a collection or to delete a collection, The return key can be used to rename collections.
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:
Mac users love customisation and preferences and therefore it makes sense to provide more granular control to the users who use the mac in a variety of conditions.
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)
Help Tags (also known as Tooltips) are a great way of proving a succinct description to an app’s controls.
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
Providing proper Help and Documentation is a macOS essential. It provides users with detailed task oriented guide on how to accomplish different tasks.
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
One small detail to LookUp, is it’s ability to adapt to the native accent colours. Just as the rest of the OS, LookUp for macOS also adapts to the native macOS preferences.
The App Icon
Given how native the app has been designed to be, it would’ve been a shame if the icon was just a rectangle or circle presenting the iOS icon. And so, I went on to design a native macOS icon for LookUp.
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.
LookUp firmly sits in the category of consumer applications.
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:
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
You can download LookUp for macOS at https://apps.apple.com/us/app/lookup-english-dictionary/id1476163639?ls=1
