Navigating LinkedIn News on the iPhone

May 23, 2011

LinkedIn Today, our social news product, launched on March 10th both on our website as well as a standalone feature - News - on our iPhone App. LinkedIn News for mobile was built to make top industry news available to professionals on the go, wherever they work.

Get LinkedIn for iPhone 3.6

One of the key themes our team focused on while designing the News module was the user interface design. We wanted to keep the interaction model simple by leveraging familiar design patterns outlined in Apple’s Human Interface Guidelines for the iPhone. Keeping those basic principles in mind, we wanted to introduce innovative gestures that made navigation more fluid and natural. Now, LinkedIn members have the choice of using either the standard navigation controls or the following new touch gestures to browse News on the app.

http://www.youtube.com/watch?v=5M2Y-g5yq0E&fmt=22]

Here is a step-by-step guide to the two new touch gestures we introduced with the News app. The first is the ability to navigate to the previous or next article while in the detail view.

To view the next article from the article detail screen:

  1. Scroll down to the bottom of the screen
  2. Once at the bottom, pull the screen up until you see a headline preview of the next article below
  3. Then, lift your finger from the screen, and watch it animate to the next article

The second new gesture is related the one above, but there's a twist ... you can preview the headlines of the articles beyond the next article, and actually skip ahead several articles without leaving the detail screen. We call this gesture “Jog-dial”, and here's how it works.

To preview multiple article headlines before selecting one:

  1. Scroll down to the bottom of the screen
  2. Once at the bottom, pull the screen up until you see a headline preview of the next article, only this time keep your finger on the screen
  3. To preview the headline of the article beyond the next one -- keeping your finger on the screen -- slide it down until the arrow flips, and without letting go, slide your finger back up (repeat as many times as you want)
  4. Once you see the headline you want, simply lift your finger, and the screen will animate to that article

Both gestures also work in reverse, so you can navigate up to view previous articles and beyond. You've now caught a glimpse at some of the design thinking behind the News app on LinkedIn for iPhone.

Get LinkedIn for iPhone 3.6

I hope the video demo and walk-through was useful, and if you haven't had the chance yet, give Jog-dial a try! We think it’s a fun and useful way to quickly browse News articles in the app. As always, if you have any feedback, please let us know.

And, if you’re a designer and liked this post, you may also like Careers at LinkedIn.

Topics