<p>Published on <a href="http://ift.tt/2slAd8o">| Prototyping: From UX to Front End &mdash; Medium</a> Caitlin O&#8217;Bunny </p>
<p>Redesigning Apple’s Notes styling experience.</p>
<p><img alt="" src="http://ift.tt/2tE8MKU"></p>
<h4><strong>Hello World,</strong></h4>
<p>One of the tools I use frequently in my day to day life is the native <strong>Notes </strong>application. This handy app allows me to quickly write a note and then access it on any device I have synced with my Apple Account. I use this app for everything under the sun. Grocery lists, creative ideas, long rants, love notes.</p>
<blockquote><p>If someone were to read through my Notes, they would be peaking right into my brain.</p></blockquote>
<p>Although this magical app is one of my favourites, one aspect that has always bothered me is <strong>how</strong> <strong>difficult it is to style your notes</strong>. Mac users are usually creative visual learners, so you would think that Apple would make the styling tools more easily accessible.</p>
<p>I’m going to run through all the ways in which Apple creates a <strong>bad user experience </strong>for someone wanting to beautify their notes</p>
<p>Take a look at the image below. Here you can see multiple notes I’ve created.</p>
<p><img alt="" src="http://ift.tt/2sl5ng3"></p>
<p>The one currently open is about the<a href="http://ift.tt/1S31np1"><strong> iOS 10 Human Interface Guidelines</strong></a>. As you can see this note has not yet been styled. I will take you through a few scenarios I often encounter and find troublesome.</p>
<h3>Scenario 1: Top Toolbar Styling</h3>
<h4>User Story:</h4>
<p>I want to style <strong>Titles, Headings, Body</strong>, <strong>Dashed and Numbered Lists </strong>quickly and easily.</p>
<h4>Problem:</h4>
<p>Every time a user wants to style highlighted text to be either a Title, Heading, Body, or List, they have to:</p>
<ol>
<li><strong>Drag curser</strong> to the top of the screen</li>
<li><strong>Click </strong>on Styling Button</li>
<li><strong>Select</strong> a style from a dropdown</li>
</ol>
<p><strong>This is a lot of steps… </strong>especially since its location is at the top of the screen away from where you were just clicking.</p>
<p><img alt="" src="http://ift.tt/2sloFlr"></p>
<h3>Scenario 2: Styling with a Small Window</h3>
<h4>User Story:</h4>
<p>I like using notes as a small window so it fits beside other windows. I would like to style my Note while in a small window.</p>
<h4>Problem:</h4>
<p><strong>The Styling Button disappears when the Notes window is too small</strong>.</p>
<p>In order to style highlighted text a user would have to:</p>
<ol>
<li><strong>Click the More Arrow ( &gt;&gt; )</strong> on the far right end of the toolbar</li>
<li><strong>Click Format. *</strong>(In the latest version of notes, this says Style)</li>
<li><strong>Select a style</strong></li>
</ol>
<p>Having to click through more than one dropdown option to get when I want seems like a lot of wasted effort.</p>
<p>I was really hoping and almost expecting the styling options to be in the dropdown menu. But instead I found a list of options I rarely ever find useful.</p>
<p><img alt="" src="http://ift.tt/2tEp7PT">Although this article was written during iOS 10, this flow has not changed.</p>
<h3>🤷‍ Why is this Bad UX?</h3>
<h4>Both these scenarios take 3 steps to do <strong>one</strong> style!</h4>
<p>This is an extraordinarily long time considering to style 3 lines of text it would take me a total of<strong> 11 clicks.</strong></p>
<h4><strong>1 Title (3 Clicks) + 2 Headings (9 Clicks)</strong></h4>
<h4><strong>= 3 Styles (11 clicks)</strong></h4>
<p>Thats not even counting the <strong>7 Dashed Lists (21 Clicks)</strong> if a user weren’t to use commands.</p>
<h3>🤦‍Why Apple. Just why?</h3>
<p>I was really hoping and <strong><em>almost expecting</em></strong> the styling options to be in the right click dropdown menu. But instead I found a list of options I rarely ever find useful.</p>
<p><img alt="" src="http://ift.tt/2sl1xDX">If you haven’t ever clicked this option, I highly suggest using an inappropriate sentence when you do.</p>
<h3>✨Better UX: Styling Dropdown</h3>
<p>I have created <strong>a dropdown menu</strong> <strong>that allows users to style highlighted text simply by right clicking</strong>. This removes one click from the current user flow and doest take the user away from where they currently are.</p>
<p><img alt="" src="http://ift.tt/2tE8Av4"></p>
<h3>Some additional edits I have made</h3>
<p><img alt="" src="http://ift.tt/2sl1yaZ"></p>
<ol>
<li>This menu also allows you to do<strong> Bold, Italics and Underlines</strong> so all styling options can be found in one central location</li>
<li>I found using the checkmark as the selected state made it look cluttered. Here I have changed the selected styles to be blue.</li>
<li>Removed <strong>“Add to iTunes as a Spoken Track”. </strong>I feel as this should have been a tool in the located in the top toolbar. But this could just be my personal option.</li>
</ol>
<h3>Don’t feel bad Apple. Bad UX is everywhere.</h3>
<p>I still love you.</p>
<p>Caitlin O’Bunny</p>
<p><img alt="" src="http://ift.tt/2tDTOo5"><img src="http://ift.tt/2sl1yI1" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2tEavzX">Dear Apple: Notes text styling sucks.</a> was originally published in <a href="http://ift.tt/2cAqCpx">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Dear Apple: Notes text styling sucks.

Hello World,

Top Stories