Designing NetNewsWire for iOS
NetNewsWire for Mac is a surprisingly complex application, so rebuilding it for iPhone made for interesting challenges in both the engineering and design departments. I hope you’ll get to hear about some of the clever engineering eventually, but my area is primarily design. I have been involved with the NetNewsWire iOS user interface since December 2011, though iOS 7 sent us back to the drawing board in summer of 2013.
The Newsreader in Miniature
NetNewsWire is an app that collects the latest articles from your favorite sites, thanks to the magic of the RSS format. We wanted our iOS users to be able to do as much with sites and articles on the iPhone as they can on the Mac. For instance, if you like to organize sites in a folder hierarchy, you can create and manage those folders on either platform. One of the trickier challenges we faced when designing this app for iOS was finding a decent method for nesting and un-nesting folders in an interface where your whole display is frequently occupied entirely by a folder’s contents. In the end, we decided to reserve this functionality for the Edit mode on the dedicated Sites list view.
Not every feature made the transition. On the Mac, it’s possible to open multiple tabs in NetNewsWire to keep several articles handy at once. The iPhone client doesn’t offer this option, nor is it possible to adjust text margins in our article display view. We made this a feature on the Mac where the NetNewsWire app window can be scaled to any arbitrary size. On the iPhone, the display size is fixed, and we’re able to optimize margins accordingly.
Reading is Fundamental
NetNewsWire is primarily a reading app, so typography and simplicity were important considerations. On the Mac, we aimed for a base goal of 12 words per line as an optimal reading experience. Of course, the user is able to adjust this quite a bit with margin, typeface, and text size controls. On the iPhone, the text size would need to be rather small to achieve the same standard. Rather than induce eyestrain, we make up for the fewer words per line with generous negative space and a gentle degree of contrast.
We knew that not everyone who enjoys reading has the best eyesight for it, so we built in multiple accessibility considerations. While the user directly controls typeface and text size in article views, list views are tied to iOS Dynamic Type and will scale to the preferred setting. We’re especially proud of our support for VoiceOver, Apple’s screen-reading assistant. A good deal of testing and tweaking went into it, particularly around the “trough” buttons exposed by sliding an article row to the left. Swipe-left has a dedicated purpose in VoiceOver mode, so we couldn’t rely on it for opening the trough. Instead, a single tap both opens the trough and reads the article summary, while swiping left and right navigates between the action buttons. Double-tapping the article row drills down into the full article view.
No Hamburgers on Our Menu
Our conversion of the main NetNewsWire interface configuration to the iOS version was a bit slavish at first. NetNewsWire on Mac displays article categories as All Unread, Today, Bookmarks, Favorites, and the complete list of subscribed sites in that order. Naively, we took this arrangement as canon for our iOS tab bar, with Sites List moving to the left-most tab to become our default landing area.
It turns out that displaying a list of site names is a dull and unhelpful way to present content in an article-focused app. Eventually we realized that the Today tab was the natural starting point and made it so.
In the future, I’d like to eliminate the Favorites tab and integrate it as a special section of the Sites List.
Favorites represents a feature which has existed in the Mac app beta for some time, but was always targeted for eventual use on the iPhone. To save on bandwidth, you can enable Smart Site Refresh. With this option activated, only favorite sites will refresh automatically. You can use this in conjunction with the “Hide read items” setting to put the app in a kind of satellite mode (app icon pun intended). Eventually only new articles from favorite sites will show up in the app unless you manually pull to refresh.
(Don’t worry if you don’t understand why you’d want that feature. It’s meant for users with extremely high numbers of subscribed sites.)
Make it Work, Then Make it Fast
Smooth responsive scrolling is as important as reading for NetNewsWire. Improving it was largely engineering’s job, but design had a part to play too. By using Debug > Color Blended Layers in the Xcode simulator, I was able to see where a heavy dose of translucent color values were slowing down NetNewsWire’s rendering and therefore its scrolling speed. Translating these to the nearest “flattened” color values where possible improved performance significantly.
Skin Deep
These decisions were mostly about how NetNewsWire for iOS works. What about how it looks? This is where I have to lay my personal design biases on the table.
Windows Phone 7 sparked a debate on the merits of textured realism in interfaces versus a “flatter” approach to design. That debate has only intensified with Apple’s interface overhaul in iOS 7 and Google’s development of Material Design.
I don’t miss leather or metal in my software, but I do think drop shadows and definite button borders are handy conventions that help the user to distinguish key interactive components.
At the same time, I place a priority on designing with native elements as much as possible. There are two reasons for this: First, it ensures that your app feels at home in the operating system. Second, it makes the design far easier to maintain as the system receives updates to both its appearance and plumbing.
We did what we could to enhance NetNewsWire’s visual impact with large retina images drawn from articles and thoughtful typographic choices. However, I couldn’t shake the feeling that flat design had painted us into a bland corner. I appreciate an interface that doesn’t draw attention to itself, but ours lacked a certain spark of identity.
The answer presented itself in the form of my favorite grocery list app. Developer Sophia Teutschler came up with a neat trick for the Groceries accent color — it changes depending on the aisle tied to the top-most item in your list.
I wondered if we could take a color-changing approach with NetNewsWire. Could we draw the key color from a site’s bookmark icon and use it to colorize the UI around that site and its articles?
The engineers found a way to make it happen. The tab bar, row action buttons, bookmarks, and more would adopt the new color technique. Instantly, I knew this was what the app had lacked.
Of course, some sites present us with colors that don’t really work, such as bright yellow against the app’s light theme or dark blue against its dark theme. Our developers further enhanced the feature with “safe” ranges for hue, saturation, and brightness which I could tweak. By experimenting with a rainbow’s worth of bookmark icons, we were able to solve most of the problems.
The way that NetNewsWire adapts to what you’re reading is something of which I’m especially proud.
Many other design choices were made on the road to public release, but there’s no substitute for using the app yourself. You can download NetNewsWire for iOS right now, and sync your sites and articles with our just-as-carefully-crafted Mac version.
