Designed for iPad

Over the last few years, the iPad has transformed significantly from being a large touch screen device to a device that supports multiple inputs and can be used in a variety of situations. It’s changed the way people interact with their apps.

A good iPad app experience is not only defined by an adaptive interface that scales to the different window sizes, but it’s also defined by technologies like multi window & drag and drop, along with support for the different input modes that the iPad offers.

To me designing a great iPad app experience involves three parts: 

  1. An adaptive layout that makes use of the large touch screen
  2. Support for multiple input methods like the Keyboard, Trackpad and Apple Pencil.
  3. Being in lockstep with the latest iPad technologies like Drag and Drop, Multi Window and picture in picture.

So, while designing LookUp, I kept all this in mind and documented how the app takes advantage of some of the latest technologies to provide a modern iPad experience:

Layout

Readable Margins: From typographic principles, we know that the legibility of written text depends on its line length (i.e. the number of characters per line). If the line is too wide, it becomes difficult to parse and challenging to read at a decent cadence. On the other hand, if it’s too thin, the text becomes disjoint and it becomes difficult to stay in context of what’s written.

The ideal line length is generally considered to be 45–90 characters

These principles can also be applied to a user interface. On the iPad, where you have a wide screen, the thin 16pt margins of the iPhone make the text look too wide, it becomes difficult and slow to read.

In fact, sometimes it’s best to use a multi-column approach, because the margins can be too wide and the UI appears a bit sparse on larger iPads. For LookUp’s definitions I took a similar approach. While text follows a readable line length, the UI shows a two column layout where the left column can be used for actions and images corresponding to the text on the right. This balance makes the text both readable but also utilizes the screen space in an efficient way.

The result screen maintains a readable reading margin and utilizes the screen space by placing the word actions and images to the left column

Modified for the larger screen: When designing for the iPad, each interface element is carefully analyzed to consider how it can work on larger screens.

On the left, the screen takes the full width of the iPhone, ensuring a legible experience. On the iPad however, this turns into a two column layout with more margins, utilizing the larger screen.

On the iPhone, the card comes from the bottom of the screen and offers an easy way to pick the collections. On the iPad, the same approach would make a big change to the UI, so we just use a popover to display the same content.

Using Grid Layouts: Another great way to scale an interface is to use a grid based layout instead of a single column layout. Here the grid can adapt to present different columns based on the width of the window.

For LookUp, this is how we present much of the UI. From Word of the Day cards, to Collection lists They all appear as grids that scale depending on the size of the device.

Supporting Multiple Input Modes

iPad Pointer

The pointer on iPadOS is a little different from the regular pointer that we see on desktop computers.

While traditional desktop computers use pointers that work at pixel level precision, i.e. the pointer clicks specific pixels on an interface; the iPadOS pointer uses a slightly different method. Because interface elements on iOS are always designed by regions (as they are touch first), the iPadOS pointer takes the shape of the region to allow for clicks. This is just one of the many ways in which the iPadOS pointer works differently.

To add support for the iPadOS pointer in LookUp, I decided to take a look at how Apple’s own apps behave with the pointer and documented my learnings below:

Pointer effects are used sparingly: Not everything warrants a pointer effect. For example going through a list of notes in the notes app doesn’t show an effect when the pointer hovers over or scans through the items.

Pointer effects never distract the user from the task at hand. They don’t come in the way of using the iPad, and are only shown when needed.

The pointer shape rarely changes to a custom shape. But when it does, it’s a meaningful change. For example, when hovering over a drag handle for a column in Numbers the pointer changes shape to show that dragging in that region would change the width of the column. But this effect is not seen on something like a slider, which is a much more commonly used interface element and already shows an accordance of change.

The pointer takes the shape of a rounded rectangle in transparent buttons

For transparent buttons, like the ones we see in the navigation bar, toolbar or the tab bar, the iPadOS pointer takes the shape of a rounded rectangle encapsulating that button. i.e. it adds the highlight effect to the pointer interaction.

Lift effect is used on opaque buttons of small or medium size

The Lift effect adds an interactive shine to an opaque button. On an opaque button the highlight or hover effect may not show enough change to indicate a selection. Whereas adding a parallax and shine not only results in a playful interaction, it also makes the selection more easily apparent.

This is one of the areas where I tested out different effects to get the right one. These buttons are not too large but they’re not exactly button sized either. While a hover effect would’ve done the job to show interactiveness, the lift effect really makes these buttons pop and shine in a way that makes them standout. And because they don’t interfere with the usability of the app, I went with the latter.

Sizes and margins matter! Notice how the Cancel button takes a pill shape that matches the create button on the right. Create, an opaque black button, gets the lift effect, while Cancel gets the highlight effect.

Using the Hover Effect

This is one of the effects that can be a bit tricky to use. The hover effect adds a scale, tint or shadow depending on the button. It’s subtle enough to not distract the user, but also significant enough to show interactiveness. And that makes it an ideal effect for a lot of interface elements. But at the same time, it’s important to not over-use the effect.

The buttons are interactive. While an hover effect would only accentuate that affordance of a button, hovering over a list of items is something we do all the times, and for a variety of reasons, sometimes just to parse through a list and having each button lift ever so slightly would create an annoying experience instead of providing an affordance for the button’s interactiveness.

A much smaller list or one that indicates a significant change (The appearance popover), can make use of the hover effect to add that additional affordance of interactiveness without being distracting.

Right Click Menus:

Contextual menus change to right click menus. And one of the important changes made to LookUp’s contextual menus earlier this year, was to add a good amount of options and shortcuts. It comes in handy when you’re using the trackpad.

Adding support for hover on Progress charts

In LookUp’s progress charts, you need to drag through or tap on a particular data point to see how much you scored in a quiz. This is an easy to use interaction that’s designed for touch. But when you try to do the same with a trackpad, clicking the precise data point can be a bit challenging. So what I did here, is added a hover recogniser that enables users to just hover their trackpad and get details without having to tap multiple times.

Keyboard Support

For an app like LookUp where it’s usually a user’s writing companion on the iPad, it’s common for the users to be using their keyboard while launching the app. And one of the things that you quickly realize while using the iPad with a keyboard is, that context switching can difficult. People don’t often switch between the keyboard and touch screen. So it’s important for iPad apps to have an extensive support for keyboard usage.

Keyboard Navigation: In LookUp, The entire interface can be navigated through the keyboard, this is really usefull if you’re using LookUp as a companion to your writing app. You can quickly look up words and then switch back to writing without ever having to lift your fingers.

Arrow Key Navigation: You can use the arrow keys to navigate through any list. Each time you use the arrow key, the app shows a focus shadow around the selected item, you can then press enter or any of the keyboard shortcuts dedicated for a selected collection.

For example: if you were to press enter you could jump into the definition of the word or if you were to press delete the option it would let you remove the word from the collection.

Using Single Key Shortcuts: Using cmd-[key] shortcuts can sometimes slow you down. Especially when it’s a common and quick action. For example, Liking a word in LookUp. It’s something you’d want to do quickly and with minimum fuss.

So for these, important and quickly accessible actions in LookUp single key shortcuts are used. If you are reading the meaning of a word and you’d like to mark it as liked, all you need to do is press L on your keyboard.

Supporting System Shortcuts: These are the keyboard shortcuts that the user expects after having used iOS / macOS.

For example, a popular way to launch preferences for any app on macOS is to use the [ Cmd , ] keyboard shortcut, and to increase or decrease the text size we’re familiar with the [Cmd + and Cmd – ] shortcuts. Mac users are also familiar with using the space bar to quickly scroll down a page, a shortcut that’s lasted generations of macOS.

It’s common sense to support these system shortcuts, as it adapts to the user’s mental model of using keyboard shortcuts in system apps and shows them the change they expect to see. When the system behaves the way they expect it to, it creates a satisfying experience.

One of the interesting things about the iPad Smart keyboards is the absense of an escape key. However, many external keyboards have the escape key, so LookUp does support escape to go back but also maps the top left key [~] to the move back action. This is done to adapt to muscle memory of the escape key’s location. So when you think of hitting the escape key, your fingers naturally move to the top left of the keyboard, and even though there isn’t one, the navigation still pops back to the previous screen.

Opening new windows with a command + click: This keyboard shortcut lets users to hold the command key and click or tap on the screen to launch items in a separate window. It’s a power user feature that once you know about you find yourself using every time.

Supporting State of the Art iPad Technologies

Drag and Drop

Drag and Drop is one of the most intuitive ways of using iOS. With two windows placed on the side, it’s only natural to assume that you can drag items between the windows.

For LookUp it presents a great opportunity where users can drag out parts of the definition to use as excerpts in their written text, and they can also drag words into the app to quickly look them up.

Multi Window Support

Starting iOS 13, apps can support multiple windows on iPad. This is especially useful for writing tools that allow users to have multiple documents at the same time. However, It also brings about a change in user behaviour where users begin to think of apps as multi window instances, they begin to expect multiple windows in more applications.

For an app that’s your reading and writing companion (Two areas where it makes a lot of sense to support multiple windows), it becomes important for the companion app to think in terms of multi window experiences too.

With LookUp, users can create new windows for just about every instance in the app, be it a word’s definition or a specific collection. Almost everything can have it’s own separate window.

This lends to two important uses:
1. Pinning collections to different windows: Let’s say you’re writing a report for your biology lab, and you’ve collected all the requisite terminology in the Biology Lab collection, you could pin that collection to your pages document. So when you next launch your report, you’re taken straight to that collection.

2. Comparing definitions: This is specially important when comparing things like homonyms, or homophones, or even comparing synonyms for a word. Having the definition by the side, makes it easy to understand the differences in usage and connotations.

Multi Window Titles: Small things add up. Using relevant window titles not only guide the user about the app’s state, they make it easy to understand the context of a window at a glance.

Contextual Menus

Contextual Menus are great ways to add secondary controls and shortcuts to specific functions. And with the new trackpad support, they easily transform into right click menus.

LookUp uses them everywhere. You can long press on a word of the day, and have it added to a specific collection. You can long press on a collection and take it’s quiz, or have it be open in a separate window or rename them with ease. These actions would usually involve multiple steps. But contextual menus provide an easy way to access them.

Designing for iPadOS 14

By adding support for macOS with Catalyst last year. We learnt a lot about how LookUp adapts to bigger screens, multi window interfaces and a flattened navigation structure.

With iPadOS 14, some of these learnings are coming to the iPad with a brand new sidebar design that fits in well with the rest of the system.

For us, sidebars bought two key takeaways.

  1. Sidebars are a great way of showing information and changes on larger displays without creating big animations and swipes.
  2. They work great when it’s easy to trace a consistent focus lineage. Showing focus at each step of the sidebar columns results in an easy to understand navigation.

While I’m still working on LookUp’s next big release, here’s a sneak peak at what the new sidebars look like.

Always on display on the Apple Watch Series 5

For anyone who has used the Apple Watch Series 5, the always on display is something that’s literally hard to miss. It’s an essential feature that Apple’s done well. 

The watch faces elegantly fade into their dimmer versions. Not only reducing the alpha values, but also adjusting the interface so as to be entirely readable in a ‘dim mode’ of sorts. Just look at how the Solar watch face which has a bright day time interface, dims out to maintain the legibility of sun position. The interface animations have this apple like detail to them that feels more than just a nice touch.

Solar Watch face in active and dimmed out mode
Solar Watch face in active and dimmed out mode

Apple also extends the always on display to the Workouts app where the always on mode retains some of metrics visible in the normal mode. But then stops there. There’s literally no other app on the Apple Watch platform that takes advantage of the always on display. Every other app gets this blurred out mode where only time is visible, and while that is the right thing to do in some apps, in a lot of cases, that’s not really helpful, in fact those apps would benefit from glanceable information being present on screen.

The workouts app is the only app that has a different always on mode.

I did a few mockups on how Apple could take advantage of the always on display for some of its default apps on the Apple Watch:

The idea behind always on mode is to keep presenting the glanceable information on the screen and dim out or remove the interactive elements. As you’d have to raise your wrist or touch your watch to perform them any way. In the timer app, I remove all the buttons from the active timer, and keep only the countdown on the always on display. 

The Stopwatch also presents the counter in an always on mode. It also retains the lap information on the always on screen, but dims it a little.

In the calendar app, there are two glanceable elements. First, the current date and month (which is part of the UI in the app’s normal interface) and second the upcoming events on the day. Which would usually require the person to tap on the date but because that’s the intent of using the calendar app on the watch, that information is retained on the always on screen.

The Weather app poses an interesting conundrum. Much of the app’s interface is interactive and doesn’t always show the required information in big bold letters until you interact with it. So, in the always on mode the interface is blurred and the essential information from all three interactive states is put forward.

I would really like to see the Apple Watch gain this functionality in upcoming watchOS releases as, much of watchOS app design is about putting glanceable information above the fold, and glanceable in its true sense should mean, alwaysglanceable and not glanceable when the app is active. The always on mode doesn’t have to have fancy graphics. It only needs basic text elements, and that seems like a plausible solution for the battery restrictions that need to be put in for such a mode.

Introducing Bondi

It started with a twitter thread about how people didn’t like the latest Photoshop icon, as it was a rounded rectangle compared to the square of the illustrator. I’ve always hated the aesthetic, but my latest experience with designing a macOS icon for my Catalyst app was so much fun that I decided to mock up my own versions of the Adobe icons for Apps that I often use.

My reference point like that for Catalyst icon, was an old design document highlighting details about the aqua icons. And how they have a unique shape and perspective with a strong graphic that conveys the app’s functions clearly.

So with this idea in mind, I mocked these up:

Next morning I jotted down some ideas, this time for apple’s own apps which seem to have taken a liking towards the circular icon aesthetic. They’re good, but they feel so out of sync with the rest of the OS that offer such a great homage to real world counterparts while maintaining the ease of being relatable to the app’s function.

No one looks at the Garageband icon and thinks it’s an app to edit photos!

News
The newspaper communicates news. It’s got a unique shape to it and a desk-like perspective of a newspaper that’s about to unfolded.

Stocks
The stocks app icon is designed to look like a part of larger ticker symbol. Something that you’d normally associate with a stock exchange. The metallic rims and lights are in sync with the utility apps in the rest of the OS.

TV
This one was slightly tricky to get right. It took me multiple attempts to get to something that I’d eventually like to use.

The first icon I designed was a modern flat TV with the light emitting as if to illuminate a dark room. A couple of hours with the icon and I quickly realized, that there was a problem. The icon was too thin and too wide. You could see very little of it in the dock.

So, I designed the second icon in mind with a 4:3 aspect ratio. Unrealistic for modern TVs but gives a lot more shape to the icon. Even this one felt a bit bland. TVs are hard to get right. They’re just giant rectangles. It’s difficult to convey much meaning with them.

But it wasn’t always the case, a few decades back TVs were a representation of modern technology at the time, and they adorned the most elaborate textures and styles.

So I took a leaf out of that era and designed something that’d look good as a TV.

Ultimately I settled onto something that looked a lot like this TV. It’s not what TVs look like today, and most youngsters have never seen anything like this in real life. But it’s hard to look at it and think of anything else but it being your gateway to entertainment.

Photos
Photos offers an interesting conundrum that’s similar to the TV icon. Photos used to be a physical media, but they’re really that anymore, and so any visual representation of a photo would be a rectangle.

I used a similar approach to the TV icon with this one as well, albeit slightly more modern. Here I make use of the Polaroid instant pictures, along with physical filters as a reinforcing tool. Polaroid’s instant images and filters have often had an inspiration on how photos work on modern day devices, and these just feel ideal for the app.

Another thing I did with this icon, is that I scribbled photos in the area where you’d usually see a message written on a polaroid image, and since photos are so location centric, I also, picked a couple of photos to offer the icon in three different variants with photos taken across Berkeley and Delhi.

The Delhi version of the photos icon also has a localized title, with a marigold flower. I intend to add more localized icons for the Photos app in the future.

Voice Memos
A rather simple icon, Voice Memos has a mic, signifying a recording app, with the tool at the bottom showing the voice memos icon from iOS. The red color is also used to signify a recording button.

Podcasts: 
Podcasts’ icon has traditionally shown a generic icon that seems like a combination of a person and a broadcast. I didn’t want to go as far as creating a 3D figurine for the Podcasts icon. So, I used a different media here. Podcasts, more often than not get associated with conversations and talk shows. So to communicate the idea, I tried to use a podcasting mic.

While a podcasting mic is a decent idea, it was far too thin and lacked visual contrast for the . The broadcasting echoes seem whimsical but they’re not really in line with the rest of the icons in the pack.

And so, I decided to use the Voice memos mic, to signify a talk show here, with the podcasts icon at the bottom indicating that it’s still the podcast app.

Download the Bondi icon set with the icns files here

Pixel Quiz January 2019

Q1. Designed by Travis Kochel, X uses the OpenType font features to create a useful utility out of a type-face. For example: Typing 50 using the X font ren- ders it into a semi circle. The reason behind creating X was to make it easier to edit a particular visualelement in graphic design software. The existingmethods would often require recreating the element every time you wanted to make an edit, and thus X was born. X uses Open Type’s Stylistic alternativesto provide different visual styles such as bubbles and floating rings. A photo of X in the Bubbles stylisticalternate is shown. What is the X font used to generate?

Q2. “They told him they’d have to cut his pocket money if he keeps doing it, so he got really angry and chucked his X out of the window.” Is a quote about Y, from a popular book. The interesting bit is, the incident quoted took place in the summer of 1994 and the X wasn’t released until December 1994, and therefore Y couldn’t have had a X in 1994. A certain Wiki suggests that X could’ve been a prototype that was pre-ordered directly from the manufacturers & knowing Y’s behaviour, that doesn’t sound like a far fetched idea, especially given the job Y’s dad had at a drill manufacturing facility. Who is Y, and What is X?

Q3. Made by a Chinese company called 90Fun, thePuppy 1 is a smart suitcase that follows you around, so you don’t have to drag it. To add a “gravity adap- tive system”, something crucial to it moving all by itself, 90Fun collaborated with X, which uses this technology in its infamous product line. In 2018, Xbecame famous for creating their “SE 3” product, which grew in popularity after a certain category of services saw a meteoric in major US cities. The SE3 major competitor in thismarket is Xiaomi. Look at the image and identify X, and what is X’s SE3 product?

Q4. Biohax Technologies is a Sweden based technology com- pany that specialises in a certain type of gadget X. X is a rage amongst the Swedes, designed to make life easier for its users, X makes it convenient to unlock smart home locks, stores eTick- ets for rail travel, and also contains a user’s emergency contactinformation. Put funda and explain what is X, and how’s it inte- grated into people’s lives.

Q5. This a screenshot from the original manual of a popular game. It’s the story behind the game (popularly, it’s assumed that the game didn’t have any). Identify the game.

The Laziness of the Home Tab

If you use apps and websites like I do, you’ve probably seen a “Home” tab on many them. It’s usually meant to tell the user that it’s the first screen in a number of screens. It’s where you start your navigational journey.

I’ve been thinking about the name “Home”. It’s not really an intuitive name for the first screen on your tab. It doesn’t contain any meaning that’s relevant to the screen’s function. It’s a lazy title slapped to the screen that’s meant to be the screen that’s shown to you when you open an app and doesn’t offer any information abou the screen at all. I feel, It can definitely be labelled better. So, I looked closely at the tab bars of some apps, and indeed, digging through the UI of the default apps on my iPhone, I was able to find examples that support my idea. There isn’t a single default iOS app that contains ‘home’ as the title of a tab

Here are some examples:
Default iOS Apps
Notice how each of the different states in the apps have an icon that‘s contextual and a title that‘s relevant to the purpose of the tab? There’s meaning associated with each of the names.

Other Examples

Twitter Clients

Twitter Clients

The twitter app on iOS is guilty of the home tab laziness. They call their timeline “Home”. On the other hand, Tweetbot calls it’s timeline “Timeline” (for some reason their icons don’t display text labels, but the navigation bar titles suggest these names), a slightly more appropriate title for the twitter feed.

other Examples

Apollo: The Reddit Client

Apollo’s first screen is called “Posts”. It’s a simple title with icon that’s descriptive enough to let you know that it’s a text + images timeline you’re going to look at.

Instagram

Instagram uses a “Home Glyph” for its first screen. It could easily be replaced with something like “Posts”, “Feed” or even “Timeline”.

BookMyShow

BookMyShow the ticketing service also uses the home glyph, for the screen that’s supposed to let you book tickets. How about “Book Tickets”, or just “Tickets” for a title?

Netflix vs Prime Video

Netflix vs Prime Video

Netflix’s first screen is called “Home” while Amazon Prime Video’s first screen is title “Browse”. While “Browse” is fairly descriptive of the purpose of that screen, even if it doesn’t always encompass every thing that the screen does (also shows your watch list and the movies that you’re currently watching). Home doesn’t really offer any information.

There are more examples for apps that do or don’t use the Home as a tab bar button, but it’s easy to observe here, that sometimes lazy design practices easily seep into apps, and form an unhealthy tradition of sorts. There’s no reason for Instagram’s and Twitter’s timelines to be called Home. But it’s been a convenient name given to the first screen. And that tradition’s carried on.

I hope more apps switch to clearer navigation structures.

Variable Fonts

Variable Fonts

Pixel Quiz July 2018

Q1.When you plug your phone into a car stereo, the phone starts playing music alphabetically, this usually means that there’s one song that you’ll hear whether you want to or not. Many songs starting with the letter A have probably been ruined thanks to this quirk, but if you were to download Samir Mezrahi’s creation called “A a a a a Very Good Song” you’d be able to circumvent this problem, and be able to buy enough time to queue your music. Samir’s creation was so helpful, that when the song released, it immediately began climbing the iTunes Top Music charts. What’s so special about the song?

Q2. The word X has it’s origins in Middle English, where it meant “to roar”. Today however, it’s referred to as the onomatopoeic sound describing a low pitched noise. X is also a prominent feature in game controllers. Simply name X.

Q3. Poe’s law is an Internet adage that states that, without a clear indicator of the author’s intent, it is impossible to create a parody of extreme views so obviously exaggerated that it cannot be mistaken by some readers or viewers as a sincere expression of the parodied views.

We often see the implication of the law, when someone puts an X at the end of their post. Just so, people don’t mistake it for something genuine. Put Fundae. What is X?

Q4. While he was designing the X for a popular movie in 2008, John Nelson hung up this poster from 2001: A space Odyssey as an inspiration. In this scene the characterDave had his helmet on, reflecting the graphics that were visible to him. The shot would end up being the inspiration for X. X went on to be a ubiquitous element of the movie. Just explain what is X and the 2008 movie.

image

Q5. An X attack is a dDOS attack aimed at XML parsers. An example X attack consists of defining 10 entities, each defined as consisting of 10 of the previous entity, with the document consisting of a single instance of the largest entity, which expands to a billion copies of the first entity. (Basically repeating the first defined entity, a billion times). In the most frequently cited example, the entity is a string called “LOL”. Hence the name X. What is X

Getting Started with iOS Automation

Intro
Vidit Bhargava
I’ve been using the workflow app since it came out back in 2014, and over the years, I’ve been able to amass a few nifty workflows that help me increase my productivity. With Shortcuts (a successor to Workflow, which was acquired by Apple about an year and half ago), this gets taken a step further, as the app has gained some more capabilities and has Siri support, which lets users present the Shortcut’s results in a Siri Interface. So, I thought of sharing some of my favourite Shortcuts / Workflows:

firstSet

Photos > PDF > Share

A simple shortcut that takes multiple photos, converts them into a PDF and then presents a share sheet to share the files. It’s a workflow that I created to share my class notes with friends back in college. You can also add a Dropbox / iCloud Drive / Google Drive upload command to upload the files to a cloud sharing service and then share its link. (I removed that after Whatsapp started allowing PDF Sharing).

Workflow |
Shortcuts

Batch Resize Images

This one lets you resize multiple images to your desired size all at once, and then saves them in an iCloud Drive folder to access them later. Incredibly useful for when I need to upload images for my blog.

Workflow |
Shortcuts

Live Photo To GIF or Video

Live Photos are really cool, but they’re seldom supported by websites Like Facebook or Instagram. To make them shareable one could convert them into videos or GIFs, depending on the nature of the photo.

Workflow |
Shortcuts

Set 2

Combine PDFs

Takes multiple PDFs and combines them into one. I’m not sure why more PDF readers don’t have this option by default. It’s such a handy tool that helps in consolidating files.

Workflow |
Shortcuts

Speed Test

I found this one online but decided to a bit of customisation to get the Network Name in Shortcuts as well. So now, technically Siri can report the results for my WiFi’s speed every time I feel the need to.

Workflow |
Shortcuts

Top 25 Songs

Back in the day iTunes had this cool feature which’d let you rank your songs by play count and create a smart playlist for you. This can be done by using Shortcuts in iOS now. You can even add filters to restrict the genres or artists in the list.

Workflow |
Shortcuts

Device Overlay

Device Overlays are something that I often need to for my blogposts and product shots. In this shortcut it’s easy to select multiple screenshots for different devices and add overlays to them. It even masks the screenshots for iPhone X around the sensor area.

Shortcuts

Siri Specific

Lumous Maximus

I’m a Harry Potter Fan, and I like the idea of saying magic spells to my phone. Complete with the “you must speak clearly” part! 😉

Shortcuts

Speak Clipboard

Another one that’s largely specific to the Shortcuts app, it’s a simple shortcut that lets Siri speak your clipboard items allowed, useful for proof-reading.

Shortcuts

What I want Marzipan apps to be

I’ve been observing the Marzipan* apps on Mojave for a couple of days now and there’s something that’s been nagging me.


Design paradigms on iOS are very different from that on macOS. On iOS there’s a lot of direct manipulation involved, and so it makes sense to have animations and interactions that respect that manipulation. The date picker on iOS needs to change under my finger, and it must respond to my gesture, the date picker on macOS is not that. It’s a pop down list, which makes a lot of sense for a point and click system. Buttons don’t need to be too large on macOS either, they can be much smaller.

image

What I hope Marzipan is about : A way to bring iOS apps on macOS so that they feel native to macOS. I shouldn’t look at them and feel as though they’re from a different world of apps. I want them to feel as native as possible.

What I hope Marzipan isn’t about : A way to bring iOS apps for developers who want make a bare minimum effort of doing it, without caring about how their apps look and feel on macOS. Such apps would stand out and would feel odd.

image

Apple gets to define what is Native here. But what happens if the Apps that Apple’s supplied this year don’t feel native to the platform? There’s a big responsibility on the design of these apps. And while it’s still early days and the UI will almost certainly change over time, the decisions that they make, will form the decisions made by developers in 2019. As a consumer, I don’t want iOS date-pickers on my macOS apps, ever!

– 
* :  I don’t usually like using unofficial names to refer to products or their features but for the lack of a better word, I’m using Marzipan to refer to Apple’s UIKit on the Mac initiative. 

Oppo’s Find X ditches the notch for pop-up cameras

Oppo’s Find X ditches the notch for pop-up cameras