This post is about my take away from the windows phone web cast series which happened thru the week of Sept 03 – Sept 07. In the first part of this post, I am going to cover about the topics presented by Amar Nityanada on “Designing Apps for Windows Phone”. Adding a caveat, kindly be patient as this would be pretty lengthy read 🙂
The session started with an intriguing question “What is LIFE ?” with respect to Windows Phone of course :-). As we think through the answer for this, Amar started the presentation with the key aspects to consider in designing apps for the Windows Phone. The very basic fact one has to keep in mind is NOT to hardcode any values for any of the controls’ properties. To quote a few example, the margin property of a Grid or any control for that matter should not be hard coded as the orientation of the mobile device could be changed anytime and that shouldn’t hamper the user experience, another example could be not to hard code the foreground color of any text, as the change of Phone theme could make this text sometimes invisible also. Definitely, one need to take care of the below 3 things if not for any other design aspects
-
Orientation(Portrait or Landscape)
-
Theme
-
Accent Color
Almost all the applications should support both the orientation as the user could change the orientation of the mobile anytime. Also the text’s foreground and accent color should always be set to inherit the values from Phone theme & accent color, so that any change in the phone theme wouldn’t harm the application’s UI at all. The worries of a developer to wear a UI designer’s hat have been taken care by Microsoft with this wonderful product- Expression Blend. A quick demo of this was also given to make everyone aware how easy it is to design a Windows Phone app with the help of this.
Now getting back to the initial question, LIFE is all about Layout Input Focus Events. These are the key aspects to be taken care while designing a windows phone app.
Layouts:
The Layout comprises the majorly of the below factors
Orientation
-
Portrait – Default orientation of all the apps, and most suited for almost all the simple apps
-
Landscape – The App should support this orientation, when there are too many user inputs to be taken, as the user could type in a better way in a landscape mode. Also, if the content to be presented is large, this would give a better look and feel.
App Bar & Menu icons
-
App Bar Icons are the ones which are visible at the bottom of every page. These icons should be used to launch a specific task, where there is no further navigation is required. As a good practice, a max of 4 App bar icons could be displayed. This is basically to reinforce the core principle of Windows phone design – MINIMALISM.
-
Menu Icons – These should be used when the action intended to perform requires navigation to a different page. Again, even here its better to limit the number of icons to 5(Max) though the user can scroll down if many are there
Grid & Canvas
-
Grid- A relative positioned control which automatically adjusts according to the orientation
-
Canvas – An absolute positioned control, which need to be used when the orientation is fixed.
Panorama & Pivot
-
Panorama – This is the one of the best application type Windows Phone offers. In this the background of the application moves slowly as compared to the foreground controls as we swipe thru the screen giving a parallax effect. If any application has more than 2 headers and in each page you want to display the user what this page does, panorama can be used. Ideal for apps which gives a sneak peek of the internal functionality.
-
Pivot- Though this is similar to panorama, this style is meant for data intensive applications where the whole of data has to span across multiple pages hierarchically. One example of this type of application present in the phone is the Settings menu.
Inputs:
There are multiple ways in which the Windows phone application can accept input. To name a few, Tap, Double tap, Flick, Pinch and Stretch, Hold, GPS, Camera. This list is not comprehensive, as I have mentioned only those I remember as of now. The inputs have to be used very wisely as not many users would really like to input a lot.
Focus:
This corresponds to the menus and other contextual stuff that needs to be taken care. For an example, setting InputScope of the key board to TelephoneNumber would bring up only the num pad, when the user want to text the phone number in any textbox. The other notable things are using context menus, subtle animations and live tiles.
Events:
Windows Phone has two types of events viz., Notifications & Alarms/Reminders. There are different kinds of notifications and one must be watchful of the choice.
-
Raw notification- This has to be used when the app is running(similar to a pop up)
-
Tile notification –When any background activity is complete or when the user is not really needed to be intruded with the notification, this should be used.
-
Toast notification – This appears on top of the page, and this will grab the user’s attention. So this has to be used when there is a real need to interrupt the user.
-
Alarms & reminders- Similar to the usual alarms and reminders available
Apart from the LIFE factors, another key aspect to keep in mind is the Navigation. The most important being not to override the hardware buttons ‘Back’ and ‘Start’ in the application. By default the back button should go back to the previous page and when pressed from first page it will end the app and exit. Pressing the start button will bring the user to the home page of the phone. Also, there shouldn’t be any circular navigation and phantom pages in place.
The session ended with a few of the keynotes on the design principles like
-
Know your user
-
Make it personal
-
Content over Chrome
-
Create an experience
Thanks much for being patient and reaching till here 🙂 I tried my best to understand the content presented in the webcast and briefed it here. Appreciate any comments/corrections/suggestions/feedbacks. In my next post, I will be covering about Developing Apps for Windows Phone.