ux.artu.tv » Blog Archive » 24 Weeks of Windows Phone Metro Design | #23 Perceived Performance

24 Weeks of Windows Phone Metro Design | #23 Perceived Performance

 24 Weeks of Windows Phone Design Index

Twitter   

Notice the title of this blog post re: “Perceived” Performance. When creating a Windows Phone app there is design and there is engineering involved. Even though we could think that when it comes to performance, it’s all about engineering, the truth is there’s a number of visual, motion and interaction tricks we can implement to make it feel as if the application was more responsive or faster than it really is… there are common sense things that we’ve learned back in the day when creating websites. For example, something is loading? show a loader just so people know something is happening on the backend. Now this is where things get interesting as there could be different types of loaders, for example loaders that simply tell people to wait indefinitely (hopefully not forever!) and loaders that show how something is going from 0% to 100%… it could be a download or a task that is making progress. Just like these best practices we’ve used and mastered on the web, mobile devices are no different and we want to use these type of tricks to make the user experience a better one. Notice that we say “perceived” performance as whether we provide a loader or not, the system will take exactly the same time to load something or download something or to full fill a task. But when we provide visual cues to users, the perceived time or wait they go through “feels” or is “perceived” as being less than without any of these visual hints.

The best source of tips and tricks for Perceived Performance is this video produced by the Windows Phone team.  I highly recommend you watch it :)

I also asked my brother Alejandro if he wouldn’t mind writing a post to aggregate some of the best engineering (and experience) performance tricks he knows of. He is a developer so if you are a developer you will find the following very valuable. Please leave us a note for comments/questions. Here is Alejandro’s post:

Windows Phone Application Performance

One of the key elements for a great user experience design is the application performance. From the point of view of the end user a great app is just a responsive, quick and interactive app. In order to give our users a responsive app we need to take into consideration that our Windows Phone device has limited resources compared to a desktop or even a tablet PC, -Battery life, CPU/GPU, connectivity, bandwidth, storage capacity, multi-tasking model - to mention a few.

Here is a list of aspects to take into consideration while designing the UX for you app.

Loading performance

Today’s mobile systems have their constraints regarding app loading and in Windows Phone the system terminates an app that takes more than 10 secs to load. But even 10 seconds to load is so much time for a common user. We need to make it faster as we can.

Consider psychological time

One element is the splash screen whose design should have a compelling design and some information about the app. Keep it minimal but not boring. Splash screen is the may entrance to your app so you should offer something useful and compelling to the user. With this you may get a psychological effect on the loading time of your app.

Larger the application assembly, the longer it takes to load

Keep your assets, images, media, files, etc as content of your app and not within your assembly. So remember to set the Build Action property to Content for each. Set elements as Resource will increase the size of your assembly, but don’t take this as law because in some circumstances you may need something set as resource for architectural reasons.

Minimize the size of application assemblies

Break the Application into Smaller Assemblies so you don’t have to load a huge one.

Look at this code to check how we can load a page that is in some other assembly.

private void button1_Click(object sender, RoutedEventArgs e)

{

// Use the name of the separate assembly when generating the Uri for the page

NavigationService.Navigate(new Uri(”/PageInExternalAssembly;component/ExternalPage.xaml”,

UriKind.Relative));

}

Runtime performance when a user interacts with an application

Run heavy code in background thread or composition thread, not UI thread.

If you put heavy processing code in the main UI thread then it will block the thread so you may put it in other thread or an event such as LayoutUpdated.

Watch for API’s that may block the UI thread.

Location services, push notifications, network information, and radio may block the UI thread due to their processing nature.

Don’t rely on Windows Phone emulator

It will never be the same as a targeted device.

Check memory usage

Even though currently we can’t control memory in Windows Phone we can check how we are doing with ApplicationMemoryUsageLimit and ApplicationCurrentMemoryUsage

Hiding elements: Visibility Property vs Opacity/BitmapCaching

As stated in the documentation

“When you set the Visibility property of an element to Collapsed, Windows Phone does not hold any visual data for the element in visual memory and does not do any processing related to the element. However, when you bring the element back on the screen, by setting Visibility to Visible, the contents of the visual tree have to be drawn again. The element is redrawn completely.”

If you use the visibility property technique make sure the draw process is not too complex.

When you use opacity alone, performance of the app could get really messy. But if you mix the opacity with Bitmap caching you can improve performance in some scenarios. Bitmap caching allows visual elements to be stored as bitmaps after the first render so the main purpose of this technique is to avoid the heavy processing of complex xaml code instead of a bitmap. In this case the technique is similar between choosing xaml or images for certain graphical elements. If you have a complex xaml graphic that is static use a bitmap.

Remember you should evaluate the performance of each technique on a case-by-case basis

Image transparency and format

If the images you are going to use don’t need transparency use jpg and if you must use png format.

Performance knowledge of controls

Check the performance considerations of controls when designing your app. Knowledge of which are the main performance differences between controls can help you decide whether use one or the other. At the end there will be decisions to make.

 

Use perfomance tools

Windows Phone Performance Analysis

Lets you measure, evaluate, and target performance-related issues in your code

Frame Rate Counters in Windows Phone Emulator

Use the frame rate counters to monitor the performance of your application.

Silverlight EnableRedrawRegions Property

Enables a diagnostic feature that is used during development for performance-tuning your application by showing the areas of the plug-in that are being redrawn each frame.

Useful links

Performance Considerations in Applications for Windows Phone

Technical Certification Requirements

Execution Model Overview for Windows Phone

Performance Techniques for Windows Phone

Leave a Reply