lickability,
@lickability@mastodon.social avatar

🧵 Well well well, if it isn’t another design critique thread! This week, we’re taking a look at the Quirks and Features™ of the Apple Journal app.

lickability,
@lickability@mastodon.social avatar

In case you’re not familiar, the core app flow is quite simple. There are three main screens:

  1. The timeline, where your entries are sorted reverse chronologically. This is where you start.
  2. Journal suggestions (after you tap the floating Add button)
  3. Edit entry
lickability,
@lickability@mastodon.social avatar

There are also a few loose sheets throughout and even those are super polished. For instance, here’s a prompt for setting up a journaling schedule. That full-bleed image at the top has been internationalized with four variants: light and dark variants for both LTR and RTL.

lickability,
@lickability@mastodon.social avatar

This is super easy to configure by the way, asset catalogs in Xcode have you covered:

lickability,
@lickability@mastodon.social avatar

Back to Journal, let’s start with the editor. We’ve seen this pattern a lot — a keyboard toolbar that summons other sheets. This is an elegant implementation: the toolbar stretches to the bottom and the keyboard sits on top.

lickability,
@lickability@mastodon.social avatar

When a sheet appears, it swaps place with the keyboard. The toolbar never changes position; the sheets are always the same size as the keyboard. Compare this to the X/Twitter composer, where the Add Media gallery is full-screened. Use modals sparingly!

The various bottom sheets that are presented as you tap the toolbar items in the entry editor.

lickability,
@lickability@mastodon.social avatar

Speaking of things you’ve seen before, take a look at what happens when you remove items from the attachment grid. It’s fairly similar to what you’d see on X, but they animate between layouts here, which is always a nice touch.

Animated resizing as images are added or removed from the media grid.

lickability,
@lickability@mastodon.social avatar

You can record audio and attach them to entries like this. The pulse animation doesn’t respond to amplitude or anything fun, but at least it gets turned off if the Reduce Motion accessibility setting is enabled!

The Journal app’s audio recorder in motion.

lickability,
@lickability@mastodon.social avatar

Take a look at the date picker in the editor view, this is so weird:

• Why does it appear in a pseudo-action sheet?
• Why are both buttons emphasized?
• It stretches, for some undetermined reason. Is this a fidget feature?? We can’t figure out why they did this. Theories?

A video of the stretchily animated date picker sheet.

lickability,
@lickability@mastodon.social avatar

While we’re talking about weirdness, let’s read the nav bar to absolute filth. Ahem:

• Why can you preemptively bookmark an entry? Is the expectation that you’ll write an entry, think “this one is a banger,” and bookmark before you even finish it?
• How is bookmarking more important than cancelling a draft?
• Under the More menu, the option to discard the draft is called Delete. It’s technically correct, but it rubs me the wrong way. You haven’t saved anything yet — there’s nothing to delete.

dale_price,
@dale_price@mastodon.online avatar

@lickability I‘ve only barely used the app but I think I really like “delete” here.

“Discard draft” or whatever would make it feel like you’re writing something ephemeral like a social media post that doesn’t really “exist” until you finish it.

“Delete” reassures that what you’ve written is permanent unless you actively delete it. That is, it’s continually saving everything as you write, and the entry is kept even if you swipe to dismiss the compose sheet.

lickability,
@lickability@mastodon.social avatar

Here’s our proposal: Get rid of the bookmark button. Move discard to its rightful place, as a cancel button on the leading edge. The nav title is already the date, so we can make this a button to change the date. We’ll give that a slight background as a hint to it being editable.

lickability,
@lickability@mastodon.social avatar

Alright, enough about the editor. Let’s get to that gorgeous, lickable timeline.

We actually got an early look back at WWDC of an earlier timeline concept. Which version do you prefer? 🤔

lickability,
@lickability@mastodon.social avatar

The timeline is this really nice card-style interface with a branded gradient in the background. In light mode, it’s quite subtle. In dark mode, it’s really 🅱️oppin’. Very good gradient, 9/10.

lickability,
@lickability@mastodon.social avatar

For the longest time, Apple’s guidance was to avoid Android-y floating action buttons (FABs) like the plague. But it seems they’re slowly coming around to them? We love to see it.

lickability,
@lickability@mastodon.social avatar

Taking a closer look at that footer, you’ll notice the variable blur effect. This has been showing up in a TON of first-party apps.

Achieving this effect is quite difficult. There’s nothing in Figma that lets you do this and the API to do this is private (for now) 😕

dale_price,
@dale_price@mastodon.online avatar

@lickability You can do it with a SwiftUI Metal shader as long as you don’t have any UIKit-backed views! (Sadly that includes SwiftUI List)

There are a few implementations out there such as my own https://github.com/daprice/Variablur or Glur https://github.com/joogps/Glur

  • All
  • Subscribed
  • Moderated
  • Favorites
  • random
  • ngwrru68w68
  • rosin
  • GTA5RPClips
  • osvaldo12
  • love
  • Youngstown
  • slotface
  • khanakhh
  • everett
  • kavyap
  • mdbf
  • DreamBathrooms
  • thenastyranch
  • magazineikmin
  • anitta
  • InstantRegret
  • normalnudes
  • tacticalgear
  • cubers
  • ethstaker
  • modclub
  • cisconetworking
  • Durango
  • provamag3
  • tester
  • Leos
  • megavids
  • JUstTest
  • All magazines