The Language of Segues

In iOS Segues are used to get from one content screen to another. A tranistion occurs between screens when a sgue is invoked. There are a few simple transitions that are default, and you can also make your own custom transitions.

The default transitions, simple as they are, provide a good foundation for presenting content. Used correctly they act as a language that communicates the relationships between content screens.

Show/Push Segue

When screen slides in from right to left you are moving deeper into the content. Like turning pages in a book. This is a Show Segue in iOS. When the Screen slides left to right you are moving up in content, like turning back to the previous page.

Notice that in both of these cases the current content is pushed off the left or right. This is a subtle part of the communication. Telling you that the you are moving on to new content and the old content has moved aside. It also gives the impression of content screens as a row or a timeline, and adds to the feel of content having a structure or history.

This is what you get when working with the Navigation controller. Which makes sense. Notice in most cases there will be a back button in the upper left. A UI element people universally understand.

Modal Segue

When a screen slides up from the bottom this is a Modal segue. In this case you are staying in the current content screen and showing a screen on top. A modal is a dialog box. You’ll answer any questions, set any options before it goes away and the current content revealed again. The Alert dialog box is a modal. Though in this case it is small enough to allow you to see the current content behind it.

Use a modal when you want to ask a question or get information. Like, asking for a user name and password, presenting some settings, or showing an option to buy some gems in the app store.

Notice when a screen slides up from the bottom the current screen is covered, it is not pushed out of the way. This is telling you that the current content screen is still there behind this new modal content waiting for you.

You’ll notice this is what you get when you open the camera or photo picker in an app. It slides up from the bottom, covering the current screen. You take a photo with the camera or pick a photo from your library, and the photo picker slides down revealing the previous screen. This is exactly what you expect. You don’t want the photo picker to push the current off the left, you would worry that you’d be losing that email, or text message as you moved on to a new content screen.

Non transition

Think about the tab bar controller. Notice there is no transition when switching tabs. In this case I’m guessing Apple felt they wanted to convey that each tab was it’s own separate area, almost like each tab section was an app within the app. With no motion you get the impression you have teleported to a new location. With motion you might feel you are moving to content that is connected to the current content. Instead you are leaving the current content behind, and jumping to a new area with new content. You should be able to visit the previous tab and return to that part of the app in the state you left it.

Imagine if there was a slide/push to the left or right. You might feel like you were moving deeper into the current content rather than moving on to a new content area, which would be confusing when that content belonged to an unrelated area of the app.

It’s all about Communication

You’re not using transitions as a creative tool, instead use them as a form communication. While transitions can be very creative, without thinking about communication first you can create a confusing user experience.

Corona SDK – Scrolling landscape

Here are a few ideas to get started creating a scrolling background. Create a background image that repeats, where the left edge would tile seamlessly when connected to the right edge. Copy a section the size of the visible area of the screen and add it to the right side of the image.

Here are a couple images for example. Look at the images carefully and you will see the the 480 pixels on the right side match the first 480 pixels on the left.



Landscape-2 Landscape-3
These images link to the originals at full size. You can download them to use with the example code which follows.


Here’s a simple example that works with a single image.


local landscape = display.newImageRect( "landscape-1.png", 1440, 320 )

-- landscape:setReferencePoint( display.TopLeftReferencePoint )
landscape_1.anchorX = 0
landscape_1.anchorY = 0
landscape_1.x = 0
landscape_1.y = 0

local function reset_landscape( landscape )
	landscape.x = 0 landscape, {x=0-1440+480, time=30000, onComplete=reset_landscape} )

reset_landscape( landscape_1 )

Here’s an example that takes the code above and turns it into a function allowing you to create more animated landscapes without having to duplicate the code.

local function make_landscape( image, width, height, time )
	local landscape = display.newImageRect( image, width, height )

	-- landscape:setReferencePoint( display.TopLeftReferencePoint )
	landscape.anchorX = 0
	landscape.anchorY = 0	
	landscape.x = 0
	landscape.y = 320 - height
	landscape.time = time
	local function reset_landscape( landscape )
		landscape.x = 0 landscape, {x=0-landscape.width+480, time=landscape.time, onComplete=reset_landscape} )
	reset_landscape( landscape )
	return landscape

local landscape_group = display.newGroup()

local landscape_1 = make_landscape( "Landscape-1.png", 1440, 86, 10000 )
local landscape_2 = make_landscape( "Landscape-2.png", 1440, 168, 20000 )
local landscape_3 = make_landscape( "Landscape-3.png", 1440, 215, 30000 )

landscape_group:insert( landscape_3 )
landscape_group:insert( landscape_2 )
landscape_group:insert( landscape_1 )