<p>Published on <a href="https://blog.prototypr.io/dear-instagram-writing-captions-sucks-fdd01646cb7e?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Caitlin O&#8217;Bunny </p>
<p>Redesigning Instagram’s captions. <a href="https://invis.io/54CT5AEWF#/246156089_Insta_1-_New_Post"><strong>Click here</strong></a> to see the prototype.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*HJgGetg8pfsVOZ35q5qd_w.png"></p>
<h4>Hello world,</h4>
<p>Instagram has become one of those apps I’ve adopted into my daily routine.</p>
<blockquote><p>Wake up, check Instagram. Walk to work, check Instagram. Eat lunch, take a story. In bed, creep people.</p></blockquote>
<p>I use this app all day everyday. More often now than ever since my best friend’s phone <em>(Android cough..) </em>longer wants to send photos over text message. Truth be told, I’m more of creep on Instagram than an avid poster.</p>
<p><em>But that’s partially because writing captions suck on Instagram.</em></p>
<p>In this article I’m going to investigate why Instagram’s current interface creates a bad experience and what users are doing to hack the styling of their captions.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*nmVji_xOz84TMUlLFfWexA.png">The guy in the photo is from a date I went on.</p>
<h3>🤷‍ Why is this Bad UX?</h3>
<h3>When Writing a Caption</h3>
<p>Whenever I am writing a long post I will use an <strong>external note app</strong>. It allows me to see the full post all at once which makes editing much easier.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*k-0b_l23KNlGQtw0N35YQg.png">Using the native iOS Notes app.</p>
<h4>Writing a Birthday Message</h4>
<p>I am often confronted with this UX problem whenever I am writing a birthday post. I usually write long captions that have lots of feelings and emojis.</p>
<h4>Tiny Text Box</h4>
<p>In order to proof read my post on Instagram, I have to constantly scroll the tiny text box which sometimes only allows you to read 4 lines at a time. The big grey void under the text box seems like wasted space.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*TUAkJ8NCVWf_6DEZKG0l7w.png">Writing a nice long birthday message to my favourite human.</p>
<blockquote><p>Showing disabled content isn’t providing users any additional value, so why not allow the caption text box to overflow into this area?</p></blockquote>
<h4>Hashtags</h4>
<p>Okay okay, so this big grey void is actually intended to provide value once a user begins to hashtag. Although I find it helpful to have a more focused view when typing the # symbol, this focused view returns to the caption view right after a user has tapped on a tag. This context switching becomes particularly disruptive when a user wants to add multiple hashtags.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*P3irpN19-ly3NIRzTNMLnQ.png"></p>
<p>The <strong>#</strong> character is found in the bottom right of the keyboard, but the tag they will likely be choosing is near the top of the screen. Each time a user adds a hashtag they have to tap the<strong> #</strong> symbol again to add another.<br />I can see this being useful when wanting to add a hashtag in the middle of a caption, but most users are inserting their tags at the end.</p>
<p>As a work around, users often have a note saved on their phone with all the hashtags they like to use on regular basis so then all they have to do is copy and paste! This ease of use is why apps like <a href="https://itunes.apple.com/us/app/tagsforlikes-copy-paste-tags/id566662729"><strong>Tags for Likes</strong></a> are so popular.</p>
<h4>No Preview</h4>
<p>While typing a caption a user has no idea what it will look like when it’s published. Often users will have to go back and make edits to their post to achieve the desired look. Since Instagram does not allow you to preview what a caption will look like, a user may have to edit their post multiple times before they are happy. Not being able to preview your post is especially annoying when trying to write multiple paragraphs.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*0AwBhH3zMk1acsPKPG8Wbg.png"></p>
<h4>No Paragraph Spacing</h4>
<p>For whatever reason Instagram does not allow spacing between paragraphs. No matter how many times you hit that ‘return’ key Instagram will make one paragraph appear one right after another. Visually this makes content hard to read. <strong>Which one do you find easier to read?</strong></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*q-6R0JzmgRYWrj7eVLzDHA.png"></p>
<h3>Once Photo is Posted</h3>
<h4>Hacking Paragraphs</h4>
<p>Since Instagram does not allow you to do paragraph spacing, users are hacking this by inserting various characters as dividers.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*cruC46hK1_eFEzRqy4lNfw.png">💜 One of my favourite accounts for body positivity 💜</p>
<h4>Hacking Links</h4>
<p>When you write a link in a caption, it does not appear as a clickable hyperlink. In the post below <a href="http://twitter.com/robineisenberg"><strong>@robineisenberg</strong></a><strong> </strong>is trying to promote her online store. She provides users a link (which users cannot click) and a promo code.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*zLCSuNImUSTXsoN9uYxuxg.png"></p>
<p>In order for a user to go to this link, they would have to:</p>
<ol>
<li><strong>Memorize the link</strong></li>
<li><strong>Exit Instagram</strong></li>
<li><strong>Open their mobile browser</strong></li>
<li><strong>Type the link in the nav bar</strong></li>
<li><strong>Hope and pray they typed it in correctly</strong></li>
</ol>
<p>Okay so one way Instagram users have hacked this is by putting a link in their bio.While I think this is a great way to get users to visit your profile, I think this is inconvenient for the situations where users just want to click a link. Having a link in your bio also limits you to having one clickable link available to users for a period of time. If you are to update the link, the older post where you instruct users to click a link in your bio is longer are relevant.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/823/1*Varw9qzyeE8Yi_pRpwjkaw.png"></p>
<p>While I think this is a great way to get users to visit your profile, I think this is inconvenient for the situations where users just want to click a link. Having a link in your bio also limits you to having one clickable link available to users for a period of time. If you are to update the link, the older post where you instruct users to click a link in your bio is longer are relevant.</p>
<h4>Hacking Hashtags</h4>
<p>When users are adding hashtags to a post, it’s because they want to increase their discoverability. Although people want their content to be seen by more people, they don’t actually want their hashtags to be apart of their main caption. Many users have hacked this by either adding characters to create a separate paragraph, or by posting these tags as a separate comment</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*gfArRkVu7q55VTlBWIDnGQ.png"></p>
<h3>✨ What is a Better UX? ✨</h3>
<p>I have redesigned the interfaces for when a user is writing a post as well as what the published post looks like. To see the redesigned Invision Prototype, please click the link below</p>
<h4>Wanna see the full prototype?<a href="https://invis.io/54CT5AEWF#/246156089_Insta_1-_New_Post"> Click here!</a></h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*dalfJG2F4spObX-iNVuKTA.png"></p>
<h3>When Writing a Caption</h3>
<h4>Preview Editing</h4>
<p>The interface for creating a new post now mirrors what a publish post looks like. This allows users to preview what their post will look like during the creation phase, therefore reducing the need to edit after publishing.</p>
<h4>Write your caption here</h4>
<p>When a user taps to write their caption, the photo collapses. This gives users a larger text box to write their caption so they no longer have to scroll to see more than a few lines.</p>
<p>Some other changes I have made to the Caption UI are:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/842/1*luuEczwGf9L-qF3fO7Vi3w.png"></p>
<p><strong>Caption under the username:</strong> one of the reasons users are going back and editing their posts is to ensure the content that is on the top line doesn’t get wrapped. Now users captions start on the line beneath their user name.</p>
<p><strong>Paragraph Spacing:</strong> when a user hits the “return” key, it will now create a new paragraph that is spaced out from the one found above or below.</p>
<p><strong>Bolded Hashtags and Links:</strong> you’ll notice that the hashtags and links are now bolded. This is because they are both now tappable!</p>
<h4>New Toolbar</h4>
<p>This toolbar allows users to Add a Caption, Hashtags, Links, and Social Media separately.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/903/1*pcO5lKxdqn7zPIojbzhJVA.png"></p>
<h4>Hashtags</h4>
<p><strong>Adding hashtags to your post has never been so easy</strong>! Now any hashtags you’ve used in you caption already will appear in your hashtag editor.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*7TjuHDqpUKuMX38XBmqfrg.png"></p>
<p>In this editor you will now see a carousel that allows you to see:</p>
<p><strong>Your Recent Hashtags</strong>: Since users frequently use the same hashtags, we have now provided a view to add these tags with just a tap. No more having to type or scroll a list to find the tag you user frequently.</p>
<p><strong>Trending Near You:</strong> These tags allow you to stay connected with what’s going on in your community. These will be the most recently used tags in your geolocation.</p>
<p><strong>Most Popular: </strong>These tags are for those users who want to increase their discoverability. By giving users the most popular tags you reduce the number of people having to leave the app to go to applications like Tags for Likes to copy their tags.</p>
<p>You will also still be allowed to search tags by typing.</p>
<h4>Links</h4>
<p>With the new links tab, a user can now add multiple links to their post. Similar to hashtags, any links you wrote in your caption will appear here.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/994/1*Rp_vJVBMWjS8BFOzLfisMw.png"></p>
<h3>Once Photo is Posted</h3>
<h4>New Icons</h4>
<p>The new icons found on a post correspond to the ones we just saw in the new toolbar.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*D6wpIdpQMWhzkcqq0nl8tw.png"></p>
<h4>Hashtag</h4>
<p>Tapping on the hashtag icon will show the hashtags a user has added to a post. Having these hashtags as a separate section allows users to shamelessly have a number of tags attached to their post, without having to hide them at the end of a paragraph or in a separate comment.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*QOaNzTm59DXd7r9ckDn39g.png"></p>
<h4>Link</h4>
<p>Similar to the Hashtag icon, tapping the Link icon will show the links a user has attached to their post. This is super helpful for Influencers who are promoting different products in a single post. It also prevents users from having to have the link in their bio, therefore allowing them to use links more often.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*qeR4uF7KSs0A3pyXTVXRSw.png"></p>
<p>If you haven’t already be sure to check out the full prototype:</p>
<h4>Wanna see the full prototype? <a href="https://invis.io/54CT5AEWF#/246156089_Insta_1-_New_Post">Click here!</a></h4>
<h3>Don’t feel bad Instagram. Bad UX is everywhere.</h3>
<p>I still love you.</p>
<p>Caitlin O’Bunny</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/417/1*_OIYLKjOSW1u7UcYTilqEw.png"><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=fdd01646cb7e" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/dear-instagram-writing-captions-sucks-fdd01646cb7e">Dear Instagram: Writing captions sucks</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Dear Instagram: Writing captions sucks

Top Stories