Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Site updated at 2014-08-18 14:20:56 UTC
- Loading branch information
1 parent
dd23128
commit 49bf54c
Showing
7 changed files
with
316 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,197 @@ | ||
| <!DOCTYPE html> | ||
|
|
||
| <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> | ||
| <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> | ||
| <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> | ||
| <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> | ||
| <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
|
|
||
| <!-- Set the viewport width to device width for mobile --> | ||
| <meta name="viewport" content="width=device-width" /> | ||
|
|
||
| <title>Recreating the radial menu from iMessage in iOS 8</title> | ||
|
|
||
| <meta name="author" content="Brad Jasper"> | ||
| <meta name="description" content="Brad Jasper is a web and mobile freelance software developer living in North Carolina"> | ||
|
|
||
|
|
||
|
|
||
| <!-- Included CSS Files (Uncompressed) --> | ||
| <!-- | ||
| <link rel="stylesheet" href="stylesheets/foundation.css"> | ||
| --> | ||
|
|
||
| <!-- Included CSS Files (Compressed) --> | ||
| <link rel="stylesheet" href="/static/css/foundation.css"> | ||
| <link rel="stylesheet" href="/static/css/app.css"> | ||
|
|
||
| <script src="/static/js/modernizr.foundation.js"></script> | ||
| </head> | ||
| <body> | ||
|
|
||
|
|
||
| <div class="row blog_about"> | ||
| <div class="twelve columns"> | ||
| Hello! I'm Brad Jasper, an independent software developer (Web/iOS/Mac), follow me on Twitter at <a href="https://twitter.com/bradjasper">@bradjasper</a>. | ||
| <hr> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| <div class="row page"> | ||
|
|
||
| <!-- Main Blog Content --> | ||
| <div class="eight centered columns blog_entry" role="content"> | ||
|
|
||
| <article> | ||
|
|
||
|
|
||
| <div class="row"> | ||
| <div class="mobile-four ten push-two columns"> | ||
| <h1>Recreating the radial menu from iMessage in iOS 8</h1> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="row"> | ||
| <div class="mobile-four eight columns centered"> | ||
| <h6 class="subheader"></h6> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="row"> | ||
|
|
||
| <div class="eight mobile-four columns centered"> | ||
| <p>This year at 2014 WWDC, Apple introduce lots of new shiny toys.</p> | ||
|
|
||
| <p>One that caught my eye in particular was the new radial menu in iMessage. Apple mentioned it was the most used app on the device, which is why when they introduced a new custom control (a radial menu) to record short audio and video messages for their newest feature—I was intrigued.</p> | ||
|
|
||
| <div align="center"> | ||
| <img src="/static/images/content/imessage-radialmenu-screencast-example.gif" alt="Example of new radial menu control in iMessage from iOS 8" /> | ||
| <br /> <br /> | ||
| </div> | ||
|
|
||
|
|
||
| <p>The radial menu is interesting because it's essentially the "right-click" for touch (a context menu).</p> | ||
|
|
||
| <p>Context menu's can be a UI smell, so you have to be careful when using them. They can hide important actions & make the experience of using your app worse with poor usability.</p> | ||
|
|
||
| <p>In this case, I think the radial menu's are a good choice (but still need some usability work). Why?</p> | ||
|
|
||
| <p>In the new iMessage, recording an audio or video file accidentally could be catastrophic (accidentally sending your boss a sensitive discussion you're having about work).</p> | ||
|
|
||
| <p>But at the same time, when you do plan on recording a message (like in the car at a stop light), it needs to be fast and efficient.</p> | ||
|
|
||
| <p>The radial menu (with its long press + slide gesture) makes an accidental action unlikely and a intentional action easy.</p> | ||
|
|
||
| <p>And I think that's the point of iMessage's radial menu: it's hard to do accidentally but fast & easy when you want to.</p> | ||
|
|
||
| <br /> | ||
|
|
||
|
|
||
| <h2>Problems with radial menus</h2> | ||
|
|
||
| <p>Radial menu's aren't all good though.</p> | ||
|
|
||
| <ul> | ||
| <li><p>They're new, and will need to be learned by a large part of the population. Apple introducing this as a standard control will help.</p></li> | ||
| <li><p>The usability can be really poor. In iMessage the tap area is too small. This is especially bad for long-presses because the miss doesn't register for 1 or 2 seconds—much longer than a regular button.</p></li> | ||
| <li><p>The menus's can have too much state. iMessage changes what menu depending on your current state (newly opened or recording). If this happens too much, a user can get confused. Radial menu's should be simple and have very little state change to be easily understood.</p></li> | ||
| </ul> | ||
|
|
||
|
|
||
| <br /> | ||
|
|
||
|
|
||
| <h2>Recreating the iMessage radial menu control</h2> | ||
|
|
||
| <p>I'd actually <a href="https://github.com/bradjasper/bjradialmenu">been working on a generic radial menu control</a> and finished it up the Sunday before the keynote. I joked that I'd hold it to see if WWDC 2014 had anything interesting to contribute before releasing.</p> | ||
|
|
||
| <p>As it turned out WWDC 2014 was a huge year, and in addition to releasing the radial menu in iMessage, Apple also introduced Swift, their new programming language.</p> | ||
|
|
||
| <p>So I did what any rational Cocoa developer would do, I re-wrote everything in Swift and recreated the iMessage radial menu:</p> | ||
|
|
||
| <div align="center"> | ||
| <img src="https://raw.githubusercontent.com/bradjasper/RadialMenu/master/images/imessage-radialmenu-screencast-example.gif" /> | ||
| <br /> <br /> | ||
| </div> | ||
|
|
||
|
|
||
| <p>The control is built to be flexible so you can customize almost everything, including the animations themselves (built using <a href="https://github.com/facebook/pop">POP</a>, Facebook's incredible animation library for iOS).</p> | ||
|
|
||
| <div align="center"> | ||
| <img src="https://raw.githubusercontent.com/bradjasper/RadialMenu/master/images/default-radialmenu-screencast-example.gif" /> | ||
| <br /> <br /> | ||
| </div> | ||
|
|
||
|
|
||
| <p>There's still a lot of work to be done, but there should be enough available to start implementing radial menus into your own apps. It's been clear to me as touch-based apps become more complex we're going to need to find new ways to build the UI's. I think radial menu's are a great step in that direction, and am happy to see Apple pursue this route with one of their flagship apps.</p> | ||
|
|
||
| <p>Everything is open source on GitHub. Forks, pull-requests & comments welcome. Especially interested in advice on how to make animations tigther & cleaner.</p> | ||
|
|
||
| <p><a style="font-size: 16px" href="https://github.com/bradjasper/radialmenu">Download on GitHub</a></p> | ||
|
|
||
| <br /> | ||
|
|
||
|
|
||
|
|
||
|
|
||
| <iframe src="http://ghbtns.com/github-btn.html?user=bradjasper&repo=radialmenu&type=watch&size=large&count=true" | ||
| allowtransparency="true" frameborder="0" scrolling="0" width="160" height="30"></iframe> | ||
|
|
||
|
|
||
|
|
||
|
|
||
| <br> | ||
|
|
||
|
|
||
| <br> | ||
|
|
||
|
|
||
| <br> | ||
|
|
||
|
|
||
| <br> | ||
|
|
||
|
|
||
| <br> | ||
|
|
||
|
|
||
| <p>Send feedback to <a href="https://twitter.com/bradjasper">@bradjasper</a></p> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| </article> | ||
|
|
||
|
|
||
| </div> | ||
|
|
||
|
|
||
| <!-- End Main Content --> | ||
|
|
||
| </div> | ||
|
|
||
| <!-- End Main Content and Sidebar --> | ||
|
|
||
|
|
||
| <script src="/static/js/jquery.js"></script> | ||
| <script src="/static/js/foundation.min.js"></script> | ||
| <script src="/static/js/app.js"></script> | ||
|
|
||
| <script type="text/javascript"> | ||
|
|
||
| var _gaq = _gaq || []; | ||
| _gaq.push(['_setAccount', 'UA-11057852-1']); | ||
| _gaq.push(['_trackPageview']); | ||
|
|
||
| (function() { | ||
| var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; | ||
| ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; | ||
| var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); | ||
| })(); | ||
|
|
||
| </script> | ||
| </body> | ||
| </html> |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.