Windows Phone App :: UI Components :: Contracts and Activity Life cycle

Contracts:

It’s like an agreement between two different apps for sharing the contents. The two different contracts used are Source and Target. When the app needs to share the content supports source contract by meeting a specific requirement. Whereas the app that needs to receive content from the outside source uses a Target contracts by meeting a specific requirement.

Activity Life Cycle:

 

 The various activities performed on user’s interaction with the app are listed in the activity life cycle diagram:

When the app was launched by the user, the OS displays the Splash screen of the app. Once it is displayed, the app should be ready to display it’s UI to the user. This should be performed in few seconds.

The app may not be in the running state when splash screen is displayed. Once the app enters the running state, the app is activated and the app UI is shown. When the user moved out of the app, it moves to the suspended state. The data that are used will be saved. When the user re-enter to the app, the data will be shown again.

 The OS can also terminate the app after being moved to suspend state for various reasons like, the user sign-out from the app or closed the app manually or the system may be running on the low resources. Once that was happened and when the user re-launches it again, the app should start displaying the splash screen.  Not running state occurs when the app is not been used for long time. On resuming it, the app will be activated.

Animations:

Add and delete:

It enables us to add or remove item(s) from a collection.

Content Transitions:

It helps to change the content in the area of the screen while keeping the background constant. When the new content fades in, the existing content fades out.

Drag:

Use to move the object from one location to the other.

Edge based UI:

Edge based show or hides the UI that originates from the edge of the screen.

Fade:

It is used to bring/move the item from the view.

Page transition:

It is used to display the first page of the newly launched app or the transition between screen within the app.

Pointer click:

It provides a visual feedback about the tap on an item. Pointer down is used when the user tap the item. The animations slightly shrink an item indicating that it has been tapped. Pointer up animation is used when the tap is released.

Re-positions:

It is used to move an element/s to a new position.

Pop up UI:

It is used to show/hide pop ups which includes fly outs and context menu.

Swipe:

It is used when the swipe gesture is implemented for selection of an item.

Windows Phone app :: UI components :: List of Controls with image

I have shared the list of controls name in my previous blog post. To get into that post, please click here . In this post,I am sharing the controls name with the image.

Gestures: Apps behavior on applying single and double tapping

Recently, I noticed the risk of implementing two different actions on making a single and double tapping. Here is the scenario.

I was on the screen which has three text fields and all the three are mandatory. I entered data in first two fields and submitted the data by leaving the other one as empty. I got an error pop up which says enter the data in the third text field (this is not an actual error message content) with the button “OK” provided to close that pop up. So, I made a single tap on the button and noticed the behavior. I also noticed the behavior on making double tapping the button in the same pop up screen.

The actions for single and double tapping are not same. For single tapping, it closes the pop up screen and now the screen with the three text field is in foreground. On making double tapping, I noticed that, the action for the first tap closes the pop up screen and the second action was hitting the text field which was overlapped with the “Ok” button in the pop up screen. So, the second action was enabled by itself and taken to the different screen. I noticed the risk of having such behavior. I know that the risk varies based on the context.

Imagine, if it is a Payment button, Send button for email, or any other options (that needs just one action to compete the task) has been replaced in the place of text field. Here the task will be invoked automatically without the user actions.

The risk rate could be low for the app where I noticed this issue. But still it is not a best practice as it adds one more screen to complete the task  and also as context change the risk rate might also change within that app. So, I suggest that the gestures double/single behavior should be same to avoid such risk. 

Few investigations we made to get into the issues are

• We saw the pix-elation applied between the header and the text field.
• Length of the dialog box in the screen.
• Increased the size of the font size through phone setting and noticed the behavior.

Windows Phone App :: List of app bar icons

The app bar icon which includes 192 styles are listed here.

Windows Phone App :: Windows App UI Components :: Controls

Windows App Testing :: Windows App UI Components :: Tiles & Notifications

In this article I am sharing my knowledge about the Tiles and Notifications used in the Windows Phone app. To know about the components of Windows Phone app which I have shard in my last post,  please click here

TILE

App tile which is used for launching the app is present in the device home screen (if pinned to home screen) and app list screen. The tiles are of different types

• Live
• Static 
                   

Live Tile

Live tile are used for updating the current event occurrence to the user.  It comprises of Notifications, Logo, and Badges. Different sizes are applied to the tile set up. They are Small, Medium, Wide, Large.

The tile can contain text, Images or both. It can also contain badge and logo or a name. The badges are shown at the lower right corner of the tile. Name or Logo will be placed at the right end corner of the tile.

Example: Weather report app, Sports.

Static Tile

Static tile show the default content. When your app is not intended to share the live content then a static tile could be preferred.

Example: Game app.

Secondary Tile

They are pinned to the Start screen to provide a user with a consistent and efficient way to launch directly into a frequently used area of the parent app.

Splash Screen

The first screen that appears when the app was launched by the user is called as splash screen.

NOTIFICATION

Notifications can be sent to the tile by the app when it is running, retrieved periodically from a specified Uniform Resource Identifier (URI), or sent by a cloud-based service associated with the app. In the latter case, notifications are routed through the Windows Push Notification Services (WNS).

The different kinds of notifications used are

• Periodic
• Push
• Raw
• Scheduled
• Toast

Periodic

By polling a cloud service for new content, periodic notifications updates tile and badges in a fixed interval of time. At the start of each interval, windows send a request to the service, download the content provided by the service and display a new content in the app tile. Periodic notifications are well suited for the app that is updated at a fixed interval. For example, Weather app context can be updated once in 30 mins.

Push

This is used to send a notification at any time even when the app is not running. For example breaking news, emails can be implemented with the push notifications.  The push notifications could be used while sharing the time sensitive alerts or scheduled alerts.

Scheduled

The scheduled notifications are used when the app tile is updated regularly or when the toast needs to be send within the app.  

Example:  Calendar app

Raw

Raw is a type of push notification without any associated UI. Raw notifications could be used for multiple purposes like

• Triggering the app to run a background task
• To inform the user when there is a data available for download from its cloud service.

For more information, refer the URL given below:

 URL: http://msdn.microsoft.com/en-us/library/windows/apps/hh779721.aspx

My next blog post will contains the information about the “controls” used in windows phone app.

Contact information

E-mail: ktg.pradeep@gmail.com

Mobile: 08748887074

Skype: pradeep.lingan

Twitter: pradeeplingan1