Design advices for quick navigation between view

Question

Usually, when a View requires a lot of bindings, or some UI Elements like a Bing Map, it takes a "while" to load (like between half a second and a second).

I don't want a delay between a "tap" action (like tapping an element on a ListBox) and the navigation action (displaying a new page).

I don't mind displaying the page progressively. For example, for a Bing Map, I don't mind displaying a black page with only a title, and a second later, having the Map appear.

What are the best practices ? It could post a sample if i'm not clear enough

edit: I'll keep the question open for a while, so other can answer. Thanks Matt and Mick for awesome answers. I'm already working on some improvements. The major one being binding my controls after the page loaded.

Answer 1

It's expected on resource constrained devices that non trivial actions will take at least a little time to execute.

The most commonly recommended best practice for dealing with this is to use animations to give the user the impression of perceived performance. This has been a recurring recommendation throughout the CTP and Beta phases by the product team and in presentations at Mix 10 and Tech Ed 2010.

Page transitions are a common approach to this.

Discussed here by Kevin Marshall, prior to inclusion in the November toolkit.

WP7 – Page Transitions Sample

And here, referencing the control in the toolkit.

Transitions for Windows Phone 7

There are also a number of very basic optimisations you can do that will give you some bang for a little effort.

• don't name controls that you don't reference in code
• use background worker to load any data to avoid impact the UI thread (already busy loading your page) and fire this off after the page is loaded (disable any controls not usable in leui of this) (Phạm Tiểu Giao - Threads in WP7)
• use httpwebrequest over webclient for the same reason (WebClient, HttpWebRequest and the UI Thread on Windows Phone 7)

I would also reiterate Matt's suggestion for not loading controls that aren't used initially.

If you decide to go the extra mile, there is more you can do to optimise page loading. These two posts are worth absorbing in that regard.

Creating High Performing Silverlight Applications for Windows Phone

WP7 Development Tips Part 1 - Kevin Marshall's Epic Work Blog for Awesome People

If using Listboxes, also familiarise with Oren Nachman and David Anson's

WP7 Silverlight Perf Demo 1: VirtualizingStackPanel vs. StackPanel as a ListBox ItemsPanel

Keep a low profile LowProfileImageLoader helps the Windows Phone 7 UI thread stay responsive by loading images in the background

Never do today what you can put off till tomorrow DeferredLoadListBox (and StackPanel) help Windows Phone 7 lists scroll smoothly and consistently

and be sure image sizes are optimised for their display size.

Answer 2

My suggestions/recommendations:

• Create and navigate to the new page as quickly as possible.

• Display the page with placeholder content while it loads (if appropriate).

• Give an indication that something is happening while the page loads. An indeterminate progress bar (use this one) is the convention on the platform.

• If it's not possible to use the page until all controls are loaded, then prevent access to the page. A semi-transparent object displayed over the entire page is a common technique to not only prevent touching of controls but also to indicate that they can't yet be touched.

• If possible/practical set the size of the items in xaml/code to prevent relayout due to resizing once an item is loaded.

• Try delay loading of items which aren't on the screen initially to get the perceived total load time down.

and finally:

• Optimize everything to get the load time down and the application as responsive as possible.