Apple books toolbar
annotation toolbar redesign
Picture this:
You're reading a book. Your pencil case sits right in front of you on the desk. You come across an important sentence in your book that you want to highlight. You open the pencil case, take the highlighter out, unplug the cap, highlight the sentence, put the cap back on, and put the highlighter back into the pencil case. You do all of this, over and over again, about 30-35 times.
This isn't for people who're going "You spent like...15 seconds more putting the highlighter back in the pencil case in total. What’s the big deal?" This is for people who're going "Why do I have to repeat a small task that doesn't need repeating?" As the DRY principle in coding states, "Don't repeat yourself".
So why not just leave the highlighter outside the pencil case, if you know you're going to highlight more sentences while you're reading anyway? Exactly.
A niche case, but a problem nonetheless. With a very simple solution.
But more applicable to reading ebooks, especially with Apple Books.
(Yes, I'm aware that with Apple Pencil, you can just drag the pencil tip on a word and it'll highlight with the last used colour. But to change the colour, the user is still required to invoke the annotation tool bar, by first long pressing, then pressing “highlight”.)
Okay, Lets look at it!
Here's the Apple original annotation toolbar from Apple Books, that pops up upon long pressing a word or dragging and selecting a sentence.
On pressing "Highlight", the highlight toolbar shows, hiding the primary annotation toolbar.
This current state is a 2 step process.
What we want is the highlight colours to show up alongside the tool bar.
So what’s it gonna be?
Well, we could place them side by side with the current existing design, sure.
But this is overcrowded. We don’t want users to be overwhelmed!
Speaking of users, we know there’s plenty of research that says visuals are faster registered than text in a user’s brain. What better an opportunity to use icons instead of text, than now?!
NOICE!
Now, about that side-by-side highlight and tool bar. I love a good harmony. (I should be president.)
Here’s it. Highlighting toolbar + icon’d utility toolbar.
Much nicer! One step closer (TO THE EDGE, AND I’M ABOUT TO BREAKKKK!!!)
(And yes I did remove the lines in between the icons. Just to keep it a bit cleaner.)
But we can go one step further.
Pilled tool bar! Now, I’m that’s not in Apple’s design guidelines. But we’re creatives. We push the limits. (Okay that’s enough philosophy for today.)
Nice!
But there’s another problem. The tool bar blends in too much with the page background of white.
How about we give it a nice separation?
How about a stroke? (Remember to eat your veggies! 🥬)
That’s so much better!
That’s all set for the iPad screen, where we have a wider screen real estate. A side-by-side bar works fine for that.
But what about the iPhone users? Where’s the love?!
Okay lets fix that.
There we go. A vertical stack instead of a horizontal one.
With Highlighting at the bottom for quicker reach, and the utility tool bar above it, with all the icons included, no scrolling necessary!
But wait! There’s more!
Why not combine it as part of one? After all,
UX Law of common region states:
Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.
Law of proximity states
Objects that are near, or proximate to each other, tend to be grouped together.
And so, I present to you, the final form!
Below are the technical aspects of the design.
And that's it. One step less for repeated functions!
Less time doing the same things.
More time…I don't know…eating ice cream? Whatever you want. Its your time.
Spend it wisely!
Thank you for spending your time on my blog breakdown.