It is news like this one: two of the four apps that won the big prize of the 30 to Launch competition are built with RadControls for Windows Phone - the product our team is building with so much care.

And the apps are:
Play the hunt – built by Eshy Media
Social Mints – built by Techark. Social Mints was also the winner of Core77's FastTrack to the Mobile App International Design Award and was featured at Mobile World Congress 2012.

“We are extremely excited about this win as there were more than 130 apps submitted for the contest,” said Pratik Kothari from Techark.

And So Am I. Because our customers apps’ success is our team’s ultimate reward. 

 

 

If you want to try how RadControls for Windows Phone can improve your app or help you create a new one, download a free trial from here.

A lot of the Windows Phone developers out there are already considering porting their Windows Phone apps to Windows 8. May be you are thinking: from Metro to Metro - it has to be pretty easy and straightforward, doesn’t it? Let’s see if this is true.

This case study gives insights into porting the design of an existing Windows Phone app to a Windows 8 Metro app. It discusses the main similarities and differences between the design guidelines of the two platforms, what can and cannot be reused.

User Experience Design Guidelines for Windows Phone

User Experience Design Guidelines for Windows 8

For the purposes of the case study we are using Tasks - a free Windows Phone todo lists app with more than 100,000 downloads. The app was created by the Telerik Windows Phone team as a showcase of our UI components for Windows Phone. It started originally with an app called ToDoLists, which is meant to serve as a learning material for Windows Phone developers (the source code is freely available and can be downloaded from here.

We will touch upon all the key design patterns and processes that are part of a Metro app and comment on what makes Windows Phone and Windows 8 similar and different:

• Design process
• Layout and navigation
• Commands and actions
• Touch
• Orientation and views
• Notifications and live tiles
• Telerik upcoming Windows 8 suite

This is the first part from series of two blog posts where we will talk about the design process and layout and navigation. You can download the full series as:

high resolution pdf (~7 MB), or

low resolution pdf (~2 MB).

Design process

Before we even get to the rough design concept, no matter which platform we are targeting, we start with research, thinking about what users need and analyzing existing applications across all mobile platforms. In our case we had the initial information architecture sorted out in Tasks for Windows Phone. On this solid base we started improving it and make it work for all the screen sizes.
This is how the low fidelity wireframes looked at this phase – sketches of ideas, different pages of the application which formed the application flow and the early paper application prototype. The next step was increasing the wireframes fidelity and transferring them from paper to file.

 

Paper wireframes

The developers participated in every step of the design process, helping with ideas and technical knowledge. They started working on the prototype of the app simultaneously with me working on the visual design. This does not mean that my job was done once the visual design is delivered – on the contrary. A serious designer input was needed when all the functionality was put together. Only then, especially with touch, we can be sure everything is in the right place, the interaction is consistent and feels natural. Stick to the agile best practices and have as many iterations as needed with the developer team and your testers, if you have such.

My advice is to start working on the device as soon as possible. Once you’ve started working on the device don’t be afraid to make all the necessary changes in order for the app to work at its best. And remember, do not fall in love with the design or the feature which just won’t work.

 

Application flow diagram – one of the deliverables at the end of the design process

Layout and navigation

The Layout and navigation model of Windows Phone and Windows 8 are very similar and different at the same time. Let’s first look at some of the things the two platforms have in common:

1. Navigate through content

Content not chrome is one of the essential Metro principles and it applies to both the Windows Phone and the Windows 8 Metro app: they have the same hub and spoke navigation models. Here they are:

1.1. Hub page – or the home page of the application from where the user reaches the rest of the application content. The goal of the hub page is to show the variety and richness of the content the application provides. It is like a magazine created for the application. In Tasks we show excerpts from due tasks, projects and categories.

Tasks for Windows 8 hub page

 

Tasks for Windows Phone hub page

1.2. Section pages – these are pages with identical content type. For example All Tasks page.

Tasks for Windows 8 section page                              Tasks for Windows Phone section page

1.3. Detail pages – the name speaks for itself – a page that show the details of a single item.

Tasks for Windows 8 details page                         Tasks for Windows Phone details page

Now let’s examine the differences between the Windows 8 and Windows Phone design patterns.

2. No hardware back button in Windows 8

Software back button in Windows 8

Windows 8 has no hardware back button as opposed to Windows Phone, which results in the need for a back button in the page heading or navigation bar. The back button takes the user back where she came from and all pages but the hub page should have it.

In Windows Phone the Backstack is very important – this the list of pages/steps user went through till the current moment. The Backstack should be carefully managed – the user must not get lost in the application, fall into traps, loops, and phantom pages, because only in that way she will thrust the application to get her back where she wants.

I will give you an example for that. In Tasks for Windows Phone it is possible to pin a task (project, category) to Start menu. When the user taps on pinned task a details page is opened. To continue browsing in the application the user should tap on the home button close to the logo. When the user is in the home/hub page the details page is removed from the Backstack. The reason is to fulfill the requirement for publishing apps in the marketplace - when the user is on the home page and hit the back button she should go back to start.

In Windows Phone the user navigates through the app by tapping on the content items and application buttons, and goes back with the back button.

In Windows 8 the user has more opportunities to choose her way.

3. Navigating with the edge swipe

Swiping from the edge of the screen is what makes the app bar and navigation bar to appear. The Navigation bar provides global navigation controls - it shows on every page and provides consistent navigation experience. The Navigation bar in Tasks for Windows 8 is one of the main differences from the Tasks for WP. We chose to use it as addition to the already implemented navigation model because of the confidence it gives to the user to go everywhere she wants from any page of the app.

Navigation bar

4. Page filters and sorts

The pivot control is the Windows Phone way to manage views and pages within application. It is used for filtering the content, viewing multiple data sets or switching views. In Windows 8 the pivot control is replaced with page filters and sorts. It is pretty much like traditional tab pattern.

Tab control in Windows 8                       Pivot control in Windows Phone

5. List menu navigation. Filter menu.

This is the advantage of the bigger screen – to have a menu which is made from items of certain type alongside the detailed page of the selected item. Even better, instead of making this menu list long and unreadable, there is a filter available on top to help for easier access to the desired information. This is almost impossible on the smaller phone screen – to have both the detailed information and the available other choices on same place. It is not applicable in all cases, but in our Tasks app it was more than welcome.

List menu with filter in Windows 8

6. Horizontal/vertical scrolling

The other significant difference between Windows Phone and Windows 8 is the way of handling the scrolling. In the Windows Phone panorama control there could be both horizontal – within the panorama, and vertical – within the listboxes in the panorama. In Windows 8 this situation is not recommended. There could be only horizontal or only vertical scrolling. The reason for that is the cross-slide interaction – sliding the finger a short distance, perpendicular to the panning direction to select an item. There should be consistency of the selection interactivity within single page – that’s why the panning direction should be only horizontal or vertical.

7. Semantic zoom

Semantic zoom on the home page

Another element that needs to be designed in Windows 8 is the semantic zoom - a quick way to zoom out to groups of content and jump to the desired one.

8. Settings, sharing, about, feedback, search - with charms

Windows 8 provides for a special place to put all these pages and they are neatly organized. They are called charms and are just an edge swipe away. I must admit that in Windows Phone Tasks these pages are not so well organized but in Windows 8 they will be.

Feedback flyout

 

Tasks for Windows Phone is available for free on the marketplace. Check it out here

Tasks for Windows 8 is on its way and we will let you know once it’s live.
Tasks for Windows Phone is built with RadControls for Windows Phone – UI components and building blocks for building Windows Phone apps. Read more here and download a free trial.

Stay tuned for part two where we will take a look at commands and actions, touch, orientation and views, notifications and live tiles and Telerik upcoming Windows 8 suite!

Everyone in the mobile apps business needs real-time feedback about their app’s crashes. These have to be quickly fixed, so that you are not losing converted leads. Instead, these users need to be treated with the utmost attention. To get the feedback you have three ways to go:

1)    Use the error reporting procedure on App Hub, but you’ll have to wait for 3 to 4 days for the crash reports to be ready, which may result in losing some of  your users.
2)    Put some time and efforts and write the functionality yourself.
3)    Use Telerik ready-to-use Error Diagnostics control that allows the end-user to send real-time crash data. 

The 3rd option has two obvious advantages:

• No time is wasted writing something that already exists.
• The time lag issue that you face with the App Hub reports is solved.

Check out this short video:

Here are some details about the control. Implementing Telerik Error Diagnostic control in your Windows Phone app enables you to receive crash reports, get specific debug and run-time information from your end users when an issue (such as ApplicationUnhandledException) in your application is encountered. Whenever an exception occurs, a MessageBox dialog is displayed and users can send the report via e-mail. It will only take them a few seconds and you will get tons of data about the crash helping you to resolve the problem faster. Diagnostic data include: app version, app total runs, app runs after last update, device model, navigation stack and more. Optionally a screenshot of the current application state can be provided. Developers can also add custom data when an exception has occurred and to collect runtime logs. You may even send the data anonymously with the help of Web Services as detailed in this blog post. If you still need help in getting up to speed with Error Diagnostics, then you can watch our Q1 2012 webinar and check out the additional resources found here.

Apart from the automatic data which is provided out of the box developers can extend the component in two other ways:

• Add their own custom data when the exception occurs (using the ExceptionOccured event). Read how
• Add debug data in their application while it runs. When an exception occurs this debug data is sent along with the crash data. Read more

And the other good news is that it only takes three lines of code to implement the functionality in your app.

Telerik Error Diagnostics for Windows Phone can be downloaded as part of the RadControls for Windows Phone suite. Free trial is available here.

Share this blog post if you found it useful.

 

I’ve just added 10 great customers’ apps to the Telerik Windows Phone Showcase Gallery.

 

 Some of them are already doing great on the Marketplace, such as for example:

Free Music Cloud at # 9 in the music + video / free category

Private Photobox at # 94 in the photo / free category

Don’t forget to send us your apps built with RadControls for Windows Phone at [windowsphoneapps at Telerik dot com].

With our Q1 2012 SP1 release we managed to bundle something that will make your apps go off the fanciness chart, something that will make your apps look way better.

That something is called RadHubTile and the WP7 home screen experience is now available to your apps without any effort. Just put one of the hub tiles we have prepared for you on your page and watch your app shine.

That probably sounds great but how do you actually use that thing? “Where are the classes!?” I hear you shout. They will be revealed a little later because I think it’s time to show a picture. A motion picture of a beautiful page that is alive with information:

The hub tile classes that you asked about, shown on the video, are these: RadHubTile, RadMosaicHubTile, RadSlideHubTile, RadPictureRotatorHubTile and RadCustomHubTile.
Let’s start with the simplest tile: RadHubTile. It is used to display information such as how many notifications you have in your inbox, or how many tasks are left in your TODO list etc. It also has a back side. Developers can set its BackContent property to display more information if necessary. This property is actually available on all hub tiles. They all have a back side.

The mosaic tile mimics the fancy looking people hub tile on the Windows Phone home screen. It consists of smaller tiles, which flip randomly to show small pictures from a collection of image URIs.

RadSlideHubTile is the tile you are looking for if you want to show a picture and some info related to the picture. Since the area on the tile is limited, the picture is displayed on the bottom side of the tile and the info on the top side. In order to see both, the tile slides up and down. It is identical to the tile that is created on your home screen when you pin a contact.

RadPictureRotatorHubTile has the same API as the mosaic tile, a collection of image URIs that is used to get a picture to be displayed. The difference between the mosaic tile and this tile is in the presentation. The rotator tile rotates random images and has that slow smooth animation when the images are bigger than the tile. See the tile of the Pictures app on your phone to see what I mean.

Finally RadCustomHubTile is completely, well, custom… Devs can show any information on the back and front sides because the FrontContent and BackContent properties are of type object. You can put anything from a simple string to a dynamically updating mini UI. The capabilities are the same as those of ContentPresenter and ContentControl.

Of course, in order to actually get the hub tile you have to download the latest release and if you have questions or suggestions, our forums are a great place to submit them.

Now that Q1 2012 has been out for a while we have managed to gather some very useful feedback from you on the new stuff that we released with it and with Q1 2012 SP1 it’s time to bring it officially to you. Besides the fine tuning of existing functionality, we are really proud to announce one pretty important and powerful new component that can easily make your application shine: RadHubTile:

        

This component brings the Windows Phone home screen experience directly to your app without much complexity. It not only covers all native Tile behaviors (animations, layouts etc.) but delivers even new ones.

Another very important part of this release is the Wrap Mode support by RadDataBoundListBox and RadJumpList. With the Q1 2012 release we announced a Beta version of this functionality and immediately got very positive responses from you. We managed to address several issues and now we can proudly say that we support fully virtualized Wrap Layout by our ListBox and JumpList controls.
Last but not least we have extended the Pagination functionality by providing a possibility to define Navigation Mode. Two navigation modes are supported already:

• Adjascent
• Direct

The Direct mode implies that RadPaginationControl will directly go to the item of choice, whereas Adjacent implies one-item-at-a-time advancement based on the direction the user has specified by tapping on the list of pages.

Worth mentioning are also the Popup events that RadDate-/RadTimePicker now expose which you can use to track when the popup of the control has been opened or closed. These controls have also been extended to provide possibility to define a default DateTime value that will be displayed in the popup in case there is no selection in the control.

RadControls for Windows Phone Q1 2012 SP1 is already available for download from your account. Go check it out and send us your feedback!

14 new customers’ apps from different categories just joined our Windows Phone Showcase Gallery. Check them out here.

And while looking at them I couldn’t help but notice that 3 of them are in the very top of their respective categories.

Such as Gooroovster at #12 in the music + video / top category. The app is the first Google Music player for Windows Phone and is using Telerik’s PhoneApplicationFrame, JumpList, DatabountListbox and TileHelper.

Connecting with businesses, movies, people and what not is a piece of cake with Poynt at #20 in travel + navigation / free category.

And then there is Math Rocks at #42 in the education / top category for students, researchers and everyone who loves math.

If you want your WP7 app built with RadControls for Windows Phone to appear on our Showcase Gallery, just send us the Zune link to this e-mail windowsphoneapps at telerik dot com.

And if you still haven’t tried RadControls for Windows Phone, you can download the 60-day free trial.

The standard Silverlight for Windows Phone ListBox, as many of you already now, can be easily tuned to use a different Items Panel from the standardized Stack Panel. This is a really very powerful feature that many of pointed out was missing in RadDataBoundListBox. Since the WrapPanel is another commonly used layout panel in the ListBox context, many of you asked for similar feature in RadDataBoundListBox provided that it further extends to supporting the powerful UI virtualization approach that we already use in our control.

Some time ago Georgi Atanasov from my team gave a very thorough explanation of how to mimic a Wrap Layout in RadDataBoundListBox. This is a really nice approach but it is limited and also requires some additional coding. Now, the Wrap Layout support in Telerik’s listbox is fully functional, supporting Horizontal and Vertical orientation and utilizing the UI virtualization mechanism.

As opposed to the standard ListBox control, our terminology here is slightly different which comes from our different UI virtualization implementation. We call the way we order items in the viewport a Virtualization Strategy, so the standard stack mode comes as StackVirtualizationStrategy and the wrap mode is WrapVirtualizationStrategy. Although these are the names of the actual classes that hold the implementation, our API uses VirtualizationStrategyDefinition classes that simply describe a virtualization strategy instance. Currently the following two definitions are shipped:

• StackVirtualizationStrategyDefinition
• WrapVirtualizationStrategyDefinition

Here’s a quick XAML example of how activating the Wrap mode in RadDataBoundListBox is done: 

 

 

What the above snippet does is setting the VirtualizationStrategyDefinition property (now exposed by RadDataBoundListBox' Q1 2012 version) to an instance of the WrapVirtualizationStrategyDefinition class. The latter, as its name suggests, represents a simple definition for a virtualization strategy, i.e. instructs RadDataBoundListBox to order its visual items in Wrap mode and also contains property values that specify the wrap mode behavior. For now, the only option is to choose between Horizontal or Vertical orientation.

If you are already eager to check out the Wrap Mode (currently in Beta) for RadDataBoundListBox, go download our latest release and get back to us with your feedback so that we can put a final touch to it based on your suggestions!

Welcome to this milestone release for RadControls for Windows Phone, as it brings the suite to a whole new level - fully embracing the concept of Rapid Application Development. This is actually our first release which includes not only classic UI components, but also infrastructure that helps you implement and integrate very common scenarios used throughout mobile applications.

        

 

        

But let’s just skip the  lengthy introduction and move directly to the unpacking. I’ll start with the entirely new components that are available now:

• RadPaginationControl – a really powerful approach to deliver rich content presentation in your WP application. This control allows you to enable your users navigate through multiple pages of whatever content you want by using simple and known gestures. Performance and UX are focus point here.
• RadToolTip – a light and easy, Metro inspired way to display any type of information to your end user that is associated with an element on your page
• RadRating – a shiny new control that can be used to enable the end user to evaluate anything in your app. It ships with a couple of different styles and a beautiful example in the Telerik Demos app
• Application Building Blocks – a powerful  set of components that allows you to shape up your application with common scenarios like Trial notifications, user friendly Error Handling, Live Tile integration, etc.

Besides the freshly  baked ones, we have major upgrades of our existing controls.

        

RadSlideView has been thoroughly revamped to boost performance and build a solid platform for further extensions and improvements. Don’t miss the cool flip transition, both with vertical and horizontal orientation. On demand loading is another sweet new feature of the SlideView control. The app will load only the currently selected item, boosting the loading time of the app.

UI Virtualized Wrap Mode for RadDataBoundListBox is something that many of you have asked for and we are really excited to ship it with this release. This functionality is still in Beta and we rely heavily on your feedback to put the final touch. However you can start using immediately fully virtualized and performance tuned Wrap Layout Mode in a ListBox control for Windows Phone!

Horizontal Scrolling in RadDataBoundListBox: you can now scroll not only vertically but also horizontally and still be able to use all of the available features like UI Virtualization, Data Virtualization etc.

RadBusyIndicator adds the native WP7 OS dot-based progress animation to its predefined animations set.

So, it seems there’s a lot of new stuff to play with, right? You can find the fresh RadControls for Windows Phone Q1 2012 package in the downloads section of your account. Download it and let us know what you think!

If you’d like to see a preview of all the new capabilities and how you can use them in your development, join us for the What’s new webinar. One lucky winner will leave with a Telerik Ultimate Collection license worth $1999. To enter the drawing and participate in the Q&A session, you must attend the live webinar.
Webinar Schedule and Registration Link: http://www.telerik.com/support/webinars.aspx

An unusual thing happened at the Telerik Windows Phone team product planning meeting for Q1 2012 a few months ago. Instead of starting with our usual mantra “What does our customer need in order to build a great app?” we talked about love. What does love have to do with a mobile app you would ask? Well, a lot. Keep reading. The two questions we asked were:

1)    What is it that will make the end-users love our customer’s Windows Phone app?
2)    What is it that will make our customer’s app be loved by the Windows Phone marketplace? 

And here’s a preview of what comes next in the blog post:

 

We know that the end-user is smart, demanding and sophisticated. He wants super intuitive functionality, but also a simple one, he wants an app that’s slick and cool, he also wants an app that match his needs very closely, he wants to be surprised and he’s impatient – performance issues are simply unacceptable. Your app has a few minutes to make an impression, or it ends up being a one-time fling.

RadControls for Windows Phone already had the performance factor covered. We’re proud to have the fastest ListBox control, which is pretty much the backbone of every mobile app. We have lightning fast Chart and a JumpList controls that won’t fail you even when bound to 10,000 records.

That is why we focused on functionalities that help you achieve “that thing” that make your users simply love your app. Some call it “the wow factor”, Microsoft has called it “element of delight”, we are building it so that you can use it out-of-the-box.

RadSlideView adds this cool flip transition, both with vertical and horizontal orientation.

 

And guess what? You can achieve this with a single property.

On demand loading is another sweet new feature of the SlideView control. The app will load only the currently selected item, boosting the loading time of the app. You can also use a template to provide a light-weight snapshot of the two adjacent to the viewport items. But what does this mean to the user? It’s simple – he will have what he wants fast and he won’t get bored while waiting. Check the example:

 

How about horizontal scrolling in the ListBox control. You will not find this behavior in the Windows Phone toolbox.

Moving on to the next question, how to help our customers’ apps achieve better rankings on the marketplace. The starting point for this discussion was the analysis of the data and feedback collected from Tasks - a real-world app created by our team as a learning exercise. We noticed for examples that after implementing “Rate this app” reminder, the number of the app's ratings increased drastically, which consecutively affected positively the overall ranking of the app.

The marketplace is the primary distribution channel for your app and it has its logic and app’s success metrics. There are certain functionalities which are the absolute must-have composite parts of a mobile application that has potential to be successful on the marketplace.

The good news is that we started building these must-have capabilities to that you can concentrate on the logic and the “wow factor” of your app. We called them building blocks and we are introducing four of them with this release:

RadDiagnostics – enabling end-users to send instant crash reports to the developer. Read how to implement it and see a preview of how the report will look like in this blog post.

RateAppReminder – helping your app gets more ratings, which is one of the factors affecting greatly the app’s overall ranking. See how simple it is to implement the control.

TrialReminder – encouraging purchase of the paid version of the app or of premium content. Read how to implement the TrialReminder control here.

LiveTileHelper – allowing you to easily create context specific dynamic tiles. Read how

Quite a few other components and functionalities will be available with the new release of RadControls for Windows Phone in mid-February. Stay tuned.

Join us for the Release Webinar Week to learn for the cool, new stuff across all Telerik product lines. This 3-day event is packed with hour-long webinar sessions from February 20 till February 22, so mark your calendars. One lucky winner from each webinar will leave with a Telerik Ultimate Collection license worth $1999. To enter the drawing and participate in the Q&A session, you must attend the live webinar. 

Register here!