Logo Icon Logo
A Crowd-sourced Cookbook on Writing Great Android® Apps
GitHub logo Twitter logo OReilly Book Cover Art

Onboarding - The Welcome Process

Author: Ian Darwin
Published? false -- FormatLanguage: W

Problem:

Most applications will require some introduction for non-technical users. The "onboarding" process, that of introducing the user and your app to each other, is your chance to inform, to inspire, and to get the user excited about using your app. This is a standard aspect of "user experience" (UX) design, but is often overlooked when technical people design an app.

Solution:

The first time your app is run, offer the user a choice of seeing an introduction, which may be a web page, a video, or some other modality. Also, give them a way to bypass the intro quickly and painlessly, in case they have had to re-install the app (which will remove your "User has seen intro" token).

Discussion:

To demonstrate the process, I have added a simple onboarding process to JPSTrack, my GPX data logger. It offers the user two "skip" buttons - one for "I can figure it out" and the other for "I've been here before." At present they both do the same thing, but I thought it would be fun someday to collect statistics on which buttons are used more. It also offers a choice of a web-based introduction or a video.

Where to store the media? I store the web version on my web site, so I can make small editing corrections to it. The video is large enough that I include it in the application. This makes the app bigger, but will play the video without pausing. These decisions are subject to reconsideration later.

To keep track of the user having been here before, I used code similar to that in our discussion of first-time preferences, in 2842.

So I have three activities, OnboardingActivity, ShowWelcomePage and ShowWelcomeVideo. The first (and main) one is invoked from the main application if it thinks the user has not been here before. OnboardingActivity simply waits for the user to press one of the buttons. For the Skip buttons, it just calls finish(), which ends the OnboardingActivity and returns to the main app; for the web and video ones it creates and starts an Intent for the presentation activity.

Here is the bulk of the code from the OnboardingActivity class.

public class OnboardingActivity extends Activity implements OnClickListener {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.onboarding);
                // If called from Main's Menu, intent will have extra boolean
                // reminding us to skip the skip buttons
		boolean skipSkip = getIntent().getBooleanExtra(Main.SKIP_SKIP, false);
		if (skipSkip) {
			ViewGroup layout = 
                        (ViewGroup) findViewById(R.id.onboardLayout);
			layout.removeView(findViewById(R.id.skipButton1));
			layout.removeView(findViewById(R.id.skipButton2));
		}
                // For each button that's still around, add us as a click listener
	for (int id : new int[]
            {R.id.skipButton1, R.id.skipButton2, R.id.videoButton, R.id.webButton}) {
	    Button b = (Button)findViewById(id);
	    if (b != null) {
		b.setOnClickListener(this);
	    }
	}
    }


	@Override
	public void onClick(View v) {
		int id = v.getId();
		switch(id) {
		case R.id.skipButton1:
		case R.id.skipButton2:
			Log.d(TAG, "Skip Tutorial");
			finish();
			break;
		case R.id.webButton:
			Log.d(TAG, "Web Tutorial");
			startActivity(new Intent(this, ShowWelcomePage.class));
			finish(); // So user goes back to main, not to here.
			break;
		case R.id.videoButton:
			Log.d(TAG, "Video Tutorial");
			startActivity(new Intent(this, ShowWelcomeVideo.class));
			finish(); // Ditto
			break;
		default:
		}
		SettingsActivity.setSeenWelcome(this, true);
	}

The last line in OnboardingActivity above sets the "user has been here" flag in the SharedPreferences (via a convenience routine in my SettingsActivity). If the user wants to see the material again, it is also accessible from the main application's Menu, under "Tutorial".

The two presentation Activity classes, too, are quite parallel, but not very involved. They set up to display their information (in a WebView and a VideoView as appropriate), and condition a Button to call the activity's finish() method. Here is the onCreate() activity from the ShowWelcomePage Activity.

@Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.onboard_webpage);
		
	WebView view = (WebView) findViewById(R.id.onboard_webView);
	view.loadUrl(WEB_TUTORIAL_URL);
		
	Button b = (Button)findViewById(R.id.onboard_webDoneButton);
	b.setOnClickListener(new OnClickListener() {
			
		@Override
		public void onClick(View v) {
			finish();
		}
	});		
}

The corresponding code ih the ShowWelcomeVideo activity is the same except that the two lines for displaying the web page in a WebView are replaced by the following:

	setContentView(R.layout.onboard_video);
	VideoView vw = (VideoView) findViewById(R.id.onboard_videoView);
	// This URL loads the Video file from the res/raw folder.
	String VIDEO_URL = "android.resource://" + getPackageName() +  
		"/" + R.raw.welcomevideo;
	vw.setVideoURI(Uri.parse(VIDEO_URL));
	vw.setMediaController(new MediaController(this));
	vw.start();

With a fairly small amount of code, you can provide a functional onboarding process for your application's new users, which will encourage them to keep using the application. Comments on the web page and the video are outside the scope of this book.

See Also:

UX is an outgrowth of Human Factors and, as such, there is a lot of material available in books and the web.

No records found.