User Interface Notifications

0
207

The Tailspin Surveys mobile client application performs some tasks asynchronously; one example is the potentially time-consuming synchronization with the Tailspin Surveys web service. Asynchronous tasks must often inform the user of the outcome of the task or provide status information while they’re running. It’s important to consider the usability of the application when you’re deciding on the appropriate way to notify users of significant events or to provide status information. The developers at Tailspin were concerned they would either flood the user with alerts or have the user miss an important piece of information.

For the Tailspin Surveys mobile client application, the developers identified two categories of notification,  informational/warning notifications and error notifications.

Informational/Warning Notifications

Informational or warning notifications should not be disruptive, so the user should see the message but not be interrupted in their current task. The user does not need to perform any action in response to this type of message; the Tailspin mobile client application uses this type of notification to inform the user when a synchronization completes successfully, for example. Tailspin uses a custom toast notification for these messages because the application does not have access to the Windows Phone 7 toast notification system.

Error Notifications

Error notifications should be disruptive because the message is informing the user that some expected action of the application will not happen. The notification should inform the user of the actions they need to take to resolve the problem; for example, to retry the synchronization operation again if it fails for some reason. Tailspin uses message boxes for this type of message.

Inside the Implementation

This example shows how Tailspin implements custom toast notifications and error notifications on the SurveyListView page to inform users when the synchronization process finishes or fails. In the sample application, many of the notifications and error messages are not intended for the imaginary user of the sample; instead, they are there to
help you, the developer understand what the application is doing as you explore its functionality. You should follow the guidance published in the UI Design and Interaction Guide for Windows Phone 7 (http://go.microsoft.com/fwlink/?LinkID=183218) when you design the user notification system for your application.

The following code example shows the relevant declarations in the SurveyListView.xaml file.

XAML
<prismInteractionRequest:MessageBoxRequestTrigger RequestBinding=
“{Binding SubmitErrorInteractionRequest}”/>
<prismInteractionRequest:ToastRequestTrigger
RequestBinding=”{Binding SubmitNotificationInteractionRequest}”
PopupElementName=”SynchronizationToast”/>

<Popup x:Name=”SynchronizationToast”>
<Grid Background=”{StaticResource PhoneAccentBrush}”
VerticalAlignment=”Bottom” Width=”480″>
<TextBlock Text=”{Binding Title}”
HorizontalAlignment=”Stretch” Foreground=”Black”
TextWrapping=”Wrap” Margin=”14,5,14,5″>
<Custom:Interaction.Behaviors>
<pag:PopupHideOnLeftMouseUp/>
</Custom:Interaction.Behaviors>
</TextBlock>
</Grid>
</Popup>

The view model uses the SubmitNotificationInteractionRequest binding to trigger the toast notification and the SubmitError InteractionRequest binding to trigger the error message notification. The following code example shows how the SurveyListViewModel displays a toast notification when the synchronization process completes successfully and an error message when it fails.

C#
private readonly InteractionRequest
<Microsoft.Practices.Prism.Interactivity.InteractionRequest
.Notification> submitErrorInteractionRequest;
private readonly InteractionRequest
<Microsoft.Practices.Prism.Interactivity.InteractionRequest
.Notification> submitNotificationInteractionRequest;

public IInteractionRequest SubmitErrorInteractionRequest
{ get { return this.submitErrorInteractionRequest; } }
public IInteractionRequest SubmitNotificationInteractionRequest
{ get { return this.submitNotificationInteractionRequest; } }

private void SyncCompleted(
IEnumerable<TaskCompletedSummary> taskSummaries)
{

if (taskSummaries.Any(
t => t.Result != TaskSummaryResult.Success))
{
this.submitErrorInteractionRequest.Raise(
new Microsoft.Practices.Prism.Interactivity
.InteractionRequest.Notification
{ Title = “Synchronization error”, Content =
stringBuilder.ToString() },
n => { });
}
else
{
this.submitNotificationInteractionRequest.Raise(
new Microsoft.Practices.Prism.Interactivity
.InteractionRequest.Notification
{ Title = stringBuilder.ToString(), Content = null },
n => { });
}

}

 

Note: This solution uses the InteractionRequest and Notification classes and two custom behaviors, Message BoxRequestTrigger and ToastRequestTrigger, from the Prism Library.