Editor’s note: This post was written by Al Briggs, iOS and OS X developer working in Germany for ERGOSIGN Technologies GmbH.
Setup
The iPhone 6 and 6 Plus are the first iterations of iPhone that have become wider than their predecessors. In this article, to explore the app UI, we will take the relatively simple interface of Tweetbot on iOS and look how the expanded dimensions of the iPhone 6 and iPhone 6 Plus provide opportunities in the user interface.
You can find other tutorials for the iPhone on SpyreStudios if you want other iPhone design tips.
Mockup of Tweetbot on iPhone 6 Plus in Landscape
Previous iPhone display changes
The first jump in screen pixels for the iPhone was in 2010 when the iPhone 4 introduced the retina display. The iPhone 4 contained exactly 4 times the number of pixels of the iPhone 3GS, at the same aspect ratio of the iPhone 3GS. Apps only needed to add new @2x resources to make the most of the improved screen and older apps ran fine on the new phone, without the clarity of images that adjusted apps could have.
When the iPhone 5 launched in 2012, the aspect ratio changed for the first time. This time the width remained constant but the height expanded. Many iPhone apps consisted of content in scrollable lists that were now able to show slightly more content, so the design challenges were not too taxing for UI designers.
For the iPhone 6, the aspect ratio has remained constant (iPhone 5, 6 and 6 Plus all have a ratio of 16:9) but the number of pixels has again changed, but this time not in a simple x2 way as for the iPhone 4.
For the iPhone 6, the width and height have increased to 375 pixels and 667 pixels respectively. For the iPhone 6 Plus, the width and height become 414 pixels and 736 pixels respectively.
iPhone 5 apps will scale to work at these sizes but the interface will feel a bit strange because design elements become physically larger, for example the keyboard.
Extra space on iPhones 6
The increases in width and height create extra usable space on the new devices, but how is that space best employed?
For starters, increase the information on screen, add extra white space to the interface, and increase the size of elements.
In this rest of this article we will take an example app (Tweetbot for iOS) and look at the options the designers have with their app when using the extra space.
Tweetbot for iOS – iPhone 5 design
Before we make any design changes for Tweetbot let’s first familiarise ourselves with the design of the app as it is on an iPhone 5.
Tweetbot on iPhone 5
As you can see, the main content displayed in the app is a list of tweets. Each tweet has space to display the picture of the author, their name, twitter account, the content of tweet, any retweet information and the date/time of the tweet.
Each tweet has two elements, the left element contains the image and the right element contains the text. For the text the color and style of the font is utilised to explain the different meanings of the text along with the layout. Around the text, white space exists to keep the tweet content clear.
Between each tweet is a single pixel divider that does stretch across the entire length of the screen only above the text.
Tweetbot for iOS with extra space
Let’s first look at the how we could use the extra space if we maintain the font size and other aspects of the iPhone 5 interface and just let the content naturally expand to fill the space on the iPhone 6.
iPhone 6
iPhone 6 Plus
The interface looks OK, stretching the content has meant that the text does not take up as many lines as previously, and Tweetbot could arguably be implemented in such a fashion for the bigger iPhones.
Larger images
Why not increase the size of the image and see if the layout looks better, can we still make it so that more tweets are visible?
Increasing the size of the image reduces some of the white space under the image but does reduces the space for text.
The images have increased to a width and height of 80 pixels and some extra white space added around the image – 6 extra pixels left and right of each image.
Increasing the image size causes the bottom of images to clip for single line tweets – see my tweet at the bottom of the screen.
We can fix this by setting a rule that all tweets must not be smaller than 85 pixels in height – let’s see what the impact of this change is.
This looks much better. Just a couple of small changes have allowed us to have a larger image without reducing the number of tweets on screen. The only “cost” of this change is that now single line tweets take up more room and have some extra white space.
Larger fonts
Can we do anything with the fonts? Perhaps the name of the author could be larger at 18px? And, we could increase the spacing around the retweet line.
What about landscape?
Tweetbot doesn’t support landscape in the iPhone interface, but let’s just check out what the interface would look like, with our new changes included.
Mockup of Tweetbot on iPhone 6 Plus in Landscape (736 x 414)
Try out your own ideas – source files included
How would you alter the Tweetbot interface to better use the larger screen?
The UI changes suggested were rapidly prototyped using Antetype, an OS X app for designing user interfaces and rapid prototyping. All the iterations for this article took less than 15 minutes to try out and export the images shown.
You can download a copy of the Antetype file used to create these images from the Antetype Community page.
Tell us in the comments how you would alter the design, even mock up other app changes and show us some images of the changes you would make.
