Tag Archives: iphone

Supporting the iPhone X with Storyboard

There are a ton of guides out there for updating your app(s) to support the iPhone X.

If you create your view programmatically, you can use iOS 11’s safeAreaLayoutGuide. If your app targets iOS 10 or below, you can use the availability condition, #available().

With the Storyboard, one thing I appreciate from Apple is making the safe area layout guide backwards deployable.

Apple told us in WWDC 2017 Session 412 that Storyboards using safe areas are backwards deployable. This means you can switch to using the safe area layout guide in Interface Builder even if you still target iOS 10 and older.

via https://useyourloaf.com/blog/safe-area-layout-guide/

I don’t always use the storyboard for my layouts, but for apps that I need to update, this backwards deployability helps a lot.

Visual iOS guide on switching from Chinese to English

I wanted to document for my own future reference how to switch an iPhone (in the iOS Simulator) back to English from Chinese. My Chinese literacy is not very high, so I’m sure this guide will be handy.

Note: follow the red ovals and you will be able to change your iOS language back to English

1

2

3

4

5

6

7

8

Why would I need to do this? I’m working on language localization for different apps, and testing localization in the simulator is often easier than on actual hardware.

iOS Universal iPad Portrait Gotcha

I wanted to share a small tip that reinforces the necessity of on-device (non-simulator) testing.

While finalizing my latest iOS app (universal for both iPhone & iPad), I found an issue through manual QA on an actual iPad. I had only left Portrait checked in the Project > General section of Xcode, but my app was somehow running in landscape mode on the iPad.

general

Confused as to why it was rendering in both landscape & portrait mode on my iPad, I found a handy stack overflow post.

For one reason or another, you have to update your Info.plist to only specify portrait settings for iPads. Below is my Info.plist after I updated it to only target Portrait mode.

info_plist

It’s confusing as to why the Project General section’s Device Orientation is not sufficient to force only Portrait orientations and you have to also update the Info.plist.

Through simulator testing, it’s not likely that I would have caught onto this portrait vs landscape issue. I relied mostly on my primary iPhone and copious amounts of simulator testing for the other iOS universal devices.

For the highest level of quality control, you would need an iPhone 4s, iPhone 5, iPhone 6, iPhone 6+, iPad, and iPad Pro. That’s a lot of devices and I certainly don’t have all of those. Sidenote: if you do have all those devices, you would also be positioned to record App Preview videos for all devices natively (AKA lots of work).

iOS Simulator

When previewing a site on my iPhone (1136 x 640), I wasn’t satisfied with using my iPhone 5 or a Chrome browser Window Resizer app.

Turns out it’s super simple to use the iOS Simulator with Xcode on OS X (version 10.8.5).

Select Xcode > Open Developer Tool > iOS Simulator

xcode

You’ll be presented with an iPhone to navigate within. Select Safari and you can use a site like localhost:3000 for development.

 
ios_sim

iOS Redeem App Code Mockup

New rule: if I have to google “how to [do something],” your UI needs improvement.

While redeeming an iOS app, I couldn’t figure out where to enter in the app code. I instinctively went to the Search section, as I know that has a text input section at the top:

iPhone App Store Search screen

No dice.

So as with everything in modern life, I went to Google for help. It turns out it’s at the bottom of the Featured screen.

iPhone App Store Featured screen top

Scrolling down…

iPhone App Store Featured screen bottom

I find the Redeem button, and the rest is cake.

Without googling, I wouldn’t have stumbled upon Featured > New > page bottom to find the Redeem button.

I recognize that for most people, redeeming an app code is not a typical, common use case. That said, it should be somewhere logical. I’ve mocked up the Search screen with a Redeem button:

iPhone App Store Search screen mockup

This way, the user is able to associate entering in names of apps, keywords, or app codes in one convenient field.

The upside is an extremely easy to find Redeem button. A possible downside is that users will get led astray while searching for paid apps (by hunting for app codes instead of proceeding to checkout).

Camera Design

This is what constitutes popular (good?) camera design today:

Olympus E-P1 digital pen

An obvious design throwback to the days of film cameras, but not very imaginative.

I’m of the firm belief that camera design as we know it today has tremendous room for change. Take the micro 4/3 standard that is mirrorless.  It’s what enables the E-P1 above to be significantly slimmer than a traditional DSLR and retain interchangeable lenses. Going slimmer is just one possible direction.

Below are some camera concepts that break away from “the standard camera” look (think Leica).

D5R Concept by Ned Mulka

This is a neat concept, but not super practical. Why go through all that body change without a number of obvious benefits? Still, +1 for daring to make a camera body that doesn’t conform to legacy design.

WVIL Concept by Artefact

The WVIL concept excites me a lot more. I think the future of professional cameras may involve wireless lenses syncing to a generic touchscreen (think Android phone, iPhone, iPod Touch, or iPad). The WVIL concept is great, but why reinvent the wheel with a proprietary touchscreen when an off-the-shelf generic touchscreen suffices?

I can easily envision a world where a professional photographer has many wireless lenses (perhaps with a gorilla pod each) that are all controlled by a single iPad remotely. All a person would have to do is set up multiple wireless lenses before a sporting event starts. During the event, the lenses would (since this is the future we’re talking about) take continuous ultra high-definition video. The touchscreen controller would be used to monitor focus and other settings.

iPhone 4

Another trend in camera hardware is the disappearance of noticeable hardware. With smartphones packing incredibly better cameras (as in “decent enough”), it’s possible to get high quality photos without carrying around a point and shoot. The trend of nearly invisible camera hardware will only get better as phone cameras improve.

Pandora’s Dated Browser UI and Poor Monetization

As an iPhone user, I’ve been using Pandora for a couple years now. The mobile user interface (UI) works well.

Pandora iPhone UI

In this iPhone screenshot, we can see that the Kanye West station is currently playing. We can easily change stations by scrolling up/down and selecting a station. Adding or removing a station is intuitive. This is a solid, popular mobile application that makes great use of the environment.

My question is how come the desktop browser implementation is so poor? Perhaps they want you to use Pandora One? I don’t hit 40 hours a month and don’t need to pay for ad-subsidized radio.

Pandora browser UI

The current implementation works, but that’s like saying the DMV works. Don’t get me wrong, Pandora is a great service. If they spent time improving their free browser application, they could significantly improve the usability and monetization.

Pandora browser UI with Ad

Their current model is to frame the audio player with rotating ads, which is a perfectly fine business model. What is not acceptable is how little of the screen is used. It’s one thing to have a simple application with simple controls. It’s another to have a simple application with poor controls.

The audio player takes up a ballpark of 600 x 300 (w x h) pixels. It’s debatable whether your site should have a minimum width of 800 or 1024 pixels. It’s inefficient to only use 600 x 300 for your audio player and force your users to scroll up and down within the tiny box of radio stations.

I wanted to make the point that Pandora should allow you to flag songs into a wishlist for easy purchase later. Apparently this exists as their bookmark feature. After reading the FAQ, I’m unable to access my bookmarks or my profile. This is because Google Chrome blocks new windows by default. In this case, I’m siding with Chrome, because there is no reason that Pandora has to open a new window/tab so I can view my bookmarks. How about using some of that screen real estate, outside of the 600 x 300, to display page elements. Crazy right?

Pandora is a great, free service that works. They could improve their monetization by explaining bookmarks and improving their UI. Their browser conversion rate for song purchases would be significantly higher with a better browser UI.