Designing The UI/UX Of Apps For iPhone 6 and iPhone 6 Plus: Tips & Pointers

By | May 11, 2016

Successful iOS applications mint a lot of money for their developers. However, that does not mean every iPhone app developer can expect to make big bucks – simply by choosing this line as his/her profession. Reports from a recent survey has shown that less than 65% of developers worldwide can boast of more than 50000 downloads for their applications. This figure comes down to only 11%, when we consider apps with over 500000 downloads. On average, 1 out of every 2 cases of app failures occur due to poor user-experience – which, in turn, generally stems from UI/UX designing errors. In what follows, we will highlight some important app designing tips for the latest flagship iPhones, 6 and 6 Plus:

 

  1. Know the difference between Screen Size and Display Size – For a layman, the two might be synonymous – but iOS app developers should never consider them to be the same. The ‘Screen Size’ of iPhone 6/6 Plus refers to the area that is utilized for marking out coordinates (thanks to the Retina Display of iPhones, the pixel density can be high). On the other hand, the ‘Display Size’ is the actual physical measurement of the screen of an iPhone, from one corner to another. ‘Screen Size’ is measured in points and is required while working with JavaScript/CSS. ‘Display Size’ is measured in inches.
  2. The resolution factor – On the latest iPhone models, pixels get compressed in a smaller area, as a result of which the view becomes sharper and of higher clarity. For mobile app designers, it all boils down to the higher resolution figures of iPhone 6 and iPhone 6 Plus. On the former, the resolution is 750×1334, while on the phablet, the screen resolution gets ramped up to 1920×1080. The pixels-per-inch figure for iPhone 6 Plus (401 ppi) is also higher than that of iPhone 6 (326 ppi).
  3. Scale up images – The new iPhone models are ‘larger’ – and apps optimized for them should include bigger image files. While designing for the mobile, UI/UX experts need to scale up website images accordingly, so that they do not appear distorted on the screens. The ‘Load Time’ is yet another factor that has to be considered, while using the heavier image files. If any image takes too long to load on the iPhone screen, it would be prudent to not use it in an app at all.
  4. Remember the asset resolution figures – There used to be a time when designers only had to consider the ‘@1x’ resolution of the 3.5”, 163 ppi iPhone. iPhone app development and designing have evolved a lot from those days, and at present, UI/UX experts have to keep in mind that the iPhone 6 supports ‘@2x’ asset resolution (same as what was required for iPhone 4 and iPhone 5, because the ‘ppi’ figure is identical). The larger Retina HD iPhone 6 Plus screen requires assets rendered at ‘@3x’, due to its higher ‘ppi’ level.
  5. Size of the browser window – This is particularly important for developers who create mobile-optimized websites (also, app-makers whose applications link out to external websites). On the iPhone 6, the size of the browser screen is 375 x 559 px, and users can access a total of 627 px area while scrolling. The corresponding figures for iPhone 6 Plus are 414 x 628 px and 696 px. These are significantly higher than the browser window sizes of all iPhone 5 models as well as the new iPhone SE (320x460px; while scrolling 528 px). Graphic designers have to work accordingly.
  6. So, what do the ‘@1x’, ‘@2x’ and ‘@3x’ asset resolutions mean? – Newbies in the field of iPhone app development might trip up while dealing with the different asset resolution levels required for iPhone 6 and iPhone 6 Plus. The ‘@2x’ asset resolution is just the double of the ‘@1x’ level (22x22px vs 11x11px). If you are designing for the Plus model, assets have to be displayed in ‘@3x’, which means 33x33px. Any app designer worth his/her salt would know that it is best to work with vector graphics – since they allow smooth image scalability, without any loss of quality whatsoever. All vector assets from iPhone 5 can be exported to .psd files, and then used on the larger devices.
  7. The matter of app icons – Not much changed in this regard in 2014, when iPhone 6 was launched. The required app icon size was still 120×120 px (the same as iPhone 4/4S and iPhone 5/5C/5S). The icon at the app store had to be of 1024x1024px. While the last-mentioned figure is the same for apps built for iPhone 6 Plus, the size of the app icon has to be larger (180×180 px). Given the larger screen size coordinates of the phablet, it is also only natural that a bigger Spotlight icon (120x120px) and a more prominent Settings (87x87px). Just to put matters into perspective, for the iPad Pro, the size of app icons has to be 167×167 px.
  8. Keep the THUMB in mind – On the new, larger iPhone screens, more and more interactions will be via taps done with the thumb. According to a reported thumb heat map picture on iPhone 6 and iPhone 6 Plus screens, the ‘Natural’ zone for using the thumb is pretty small (particularly on the phablet) – and users generally have to stretch their fingers, to reach the top of their screens. While creating apps for iOS 9 devices in particular, make sure that all the important buttons, tabs and links of your app can be easily tapped with the thumb (focus on this during the app testing phase). An easily usable app always has a greater chance of success.
  9. Need to downsample on iPhone 6 Plus – In the context of UI/UX designing for iOS applications, downsampling refers to the need to differentiate between the physical pixels and the pixels that are actually rendered. Except for one notable exception, pixel downsampling is not required for any of the other iPhone models (the count is 750×1334 pixels for iPhone 6, as already mentioned above). The exception is the iPhone 6 Plus, which has a higher ‘ppi’, and requires a 87% downsampling. The rendered pixel level on the Apple phablet is 1242×2208, while the physical pixel level is, of course, 1080×1920. The downsampling is required because the screen size of iPhone 6 Plus is slightly smaller than what is required for natural ‘@3x’ asset resolution.
  10. Aspect ratio – No significant rejig is required in the layout compositions for apps designed for iPhone 6 and iPhone 6 Plus. The aspect ratio required for the two new iPhone models (16:9) is the same as what developers have been using for earlier handsets. There are slight changes required in the navigation bar though. Since the screen real estate is more, the navigation bars have to be a little wider, while their heights should remain the same.
  11. Landscape split-view on iPhone 6 Plus – The iPhone 6 Plus allows split-view multi-tasking in landscape mode – and it presents a great opportunity for Apple UI/UX designers to show off their creativity. Apart from the chance to add more content on the bigger screens, developers can position the controls and other elements on the app windows in a more user-friendly, easily-tappable manner. Those who have already worked on iPad apps would find managing the split-view in landscape mode of iPhone 6 Plus easier. In essence, the greater display area provides designers the chance to give a distinct character and identity to their applications.
  12. Use the right font – The adoption of iOS 9 continues to be robust. A mid-April report on iMore highlighted that a whopping 84% of all active iPhones and iPads are currently running on the latest version of iOS. The device share of iOS 8, on the other hand, has fallen to a lowly 11% (with earlier versions making up the remaining 5%). Apple ditched Helvetica Neue in favor of San Francisco as the default font on iOS 9 – and it is essential for designers to use the new font in their applications. It also has to be kept in mind that, while the ‘SF UI Text’ shape of the San Francisco font is to be used for long text lines, ‘SF UI Display’ is the version required for creating the components of the app’s user-interface.

The default colour pallette of Apple is limited to only eight colours – but iPhone app designers have the license to use other custom colours (to make their applications stand out). Buttons present in the bars can be present either in the ‘active’ or the ‘default’ state. If any hover state feature is to be added (for instance, adding a drop-down menu), that also has to be done very carefully.

The total number of iPhone users in the United States is inching towards 102 million at present, and almost 62% of the devices are iPhone 6/6 Plus (or 6S/6S Plus). The onus is on UI/UX designers to keep themselves updated, and design applications optimally. Being lackadaisical about following these guidelines can lead to the failure of an otherwise good-looking app – and that is certainly not an option any developer would like!