Rob Tiffany » Tablet

Windows 7 Slates: Touch-First UIs

Rob Tiffany — Wed, 17 Aug 2011 01:51:48 +0000

When it comes to building apps with “Touch-First” user interfaces for Windows 7 Slates, there are a few principles you need to follow. Instead of talking about gestures, swiping, pinching or receiving multi-touch Windows messages, I’m going to stick to the basics in this article. I’m not an artist or UX guru, but I have been designing user interfaces for mobile and embedded devices with small screens since the late 90’s.

Runtime

If you remember the last time I talked about Windows 7 Slate development, I mentioned that plain-old .NET WinForms are actually a great choice. Since every copy of Windows 7 includes .NET 3.51 as part of the image, you might consider targeting that runtime or C++ for friction-free deployment and best performance if it gives you the functionality you’re looking for. Performance-tuned, Xaml-based apps are also an option as long as you’re not targeting Tablets with low-end CPUs and poor-performing, integrated graphics. The same advice goes for HTML5 as long as you’re running IE9.

Immersive

Creating an immersive app that takes over the entire screen is step one. This means that when you design your WinForms in Visual Studio, set them to be Maximized and get rid of the Control Box, Minimize/Maximize buttons, and the Border.

In the Spash Screen below, you can see it completely takes up the entire screen of the Tablet:

UI Element Size

Since some people have been known to have fingers as large as 80 pixels wide, you can no longer get by with the default sizes of UI elements when you drag them from the toolbox. You need to increase the size of UI elements to be 40+ pixels wide/high as appropriate to users a large hit target for their fingers.

In the Login Screen below, you can see a giant power button icon in the upper-right side as well as a large User selection combo box, Password text box and Login button:

UI Element Spacing

Besides making UI elements larger, you also need to make them farther apart. I know this flies in the face of you desire to cram as many things on a screen as possible. Each screen should provide just a single function or idea so keep it simple, uncluttered, and elegant. The term “fat finger” exists for a reason. In order to prevent accidentally tapping on the wrong button, space all UI elements at least 20+ pixels apart.

In the Reservations Screen below, you can see a date picker, combo boxes, a button, and check boxes that are easy to touch and give each other breathing room:

Go Big!

Get accustomed to making everything bigger because the presentation paradigm for a Tablet is fundamentally different. You don’t have the precision of a mouse to click on small hit targets. You should also pump up the size of things you don’t touch, like the font of text on a screen so it’s clearly visible to the user from any angle. Large, beautiful, typography as well as iconography is a good thing.

In the Schedule Screen below, you can see a large grid with big cells and text with large font. The screen title is big and so is the arrow icon used to close and return to the previous screen.

One More Thing

In the touch-first world of mobile devices, you can never assume the use of a keyboard. That’s why it’s important not to throw lots of empty text boxes at users to fill in. It’s cumbersome and slow and a user may choose to not use your app. Give users finger-friendly choices via UI elements like radio buttons, combo boxes and checkboxes where possible.

Now go start building those Touch-First UIs for today’s Windows 7 Slates!

Rob

Windows 7 Tablets outselling the RIM Playbook

Rob Tiffany — Thu, 21 Jul 2011 15:35:52 +0000

According to Strategy Analytics, Microsoft outsold RIM in the tablet space during the second quarter of 2011. Tablets that run Windows 7 now represent 5% of the market. The Apple iPad and Google Android tablets continue to lead the pack.

Even without the tablet-focused “Windows 8″ on the market, OEMs like Asus, HP, Viewsonic, Dell, Archos, Acer, and others continue to create multi-touch, capacitive screen tablets running Windows 7. With unparalled security, device management, Microsoft Office and millions of other apps, Windows 7 is actually a great choice for tablets today.

-Rob

Windows 7 Slates: Rapid App Deployment

Rob Tiffany — Fri, 15 Jul 2011 05:33:04 +0000

The tablet craze is really in full swing and new Windows 7 devices are being released almost every week. Consumers and business users alike are snapping up these tablets and they want to be productive with apps right away. Yes, they’re treating these wireless devices just like they’re Smartphones or iPads. As well they should! This means that aside from Microsoft Office, they’re expecting to quickly download apps from the Internet or various marketplaces without a lot of fuss. This means no DVDs.

One way to ensure fast, seamless downloads of your apps is to not take dependencies on large runtimes, installation media, or plugins that may not already be installed on Windows 7 by default. Silverlight isn’t a big deal because the plugin is very small and should download and install quickly along with your app. If you’re delivering an app that requires all the power of .NET though, you might consider using version 3.51 since it’s part of the Windows 7 OS image.

Don’t flame me for not recommending .NET 4.0, I use it all the time. That being said, if the requirments of your WinForm app are met by the features and base class libraries found in .NET 3.51, then don’t unnecessarily take dependency on 4. Your app will download, install and run without any extra steps. This is not unlike how most Windows Mobile enterprise customers over the last decade targeted the version of the .NET Compact Framework found in ROM instead of taking advantage of the extra features found in version 3.5. It frustrated me for a while, but I finally got it.

The Consumerization of IT must drive new behaviors by corporations. Speed and simplicity of app deployment to employees is one of those behaviors.

Keep Coding,

Rob

Windows Phone 7 Line of Business App Dev :: Uploading Data back to Azure

Rob Tiffany — Wed, 04 May 2011 05:11:35 +0000

Looking back over the last 6 months of this series of articles, you’ve created wireless-efficient WCF REST + JSON Web Services in Azure to download data from SQL Azure tables to Windows Phone. You’ve maintained in-memory collections of objects in your own local NoSQL object cache. You’ve used LINQ to query those collections and bind results to various Silverlight UI elements. You’ve even serialized those collections to Isolated Storage using memory-efficient JSON. So what’s left to do?

Oh yeah, I guess you might want to know how to upload an object full to data back to a WCF Web Service in Azure. In order to keep this article simple and to-the-point, I’m going to work with a basic Submarine object and show you how to fill it with data and upload it from a Windows Phone or Slate to a WCF REST + JSON Web Service. Let’s take a look at this object:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Runtime.Serialization;

namespace Models
{
[DataContract()]
public class Submarine
{
[DataMember()]
public int Id { get; set; }
[DataMember()]
public string Name { get; set; }
}
}

It includes just an integer data type called Id, and a string called Name. As in previous articles before, its decorated with a [DataContract()] and two [DataMember()]s to allow .NET serialization to do its thing. So the next thing we need to do is create and populate this Submarine object with data, serialize it as JSON, and send it on its way using WebClient.

Below is the method and its callback that accomplishes this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using Microsoft.Phone.Controls;
using System.IO;
using System.Runtime.Serialization.Json;
using System.Text;

private void AddSubmarine()
{
Uri uri = new Uri(“http://127.0.0.1:81/SubService.svc/AddSubmarine”);

Models.Submarine submarine = new Models.Submarine() { Id = 3, Name = “Seawolf” };
DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(Models.Submarine));
MemoryStream mem = new MemoryStream();
ser.WriteObject(mem, submarine);
string data = Encoding.UTF8.GetString(mem.ToArray(), 0, (int)mem.Length);

WebClient webClient = new WebClient();
webClient.UploadStringCompleted += new UploadStringCompletedEventHandler(webClient _UploadStringCompleted);
webClient.Headers["Content-type"] = “application/json”;
webClient.Encoding = Encoding.UTF8;
webClient.UploadStringAsync(uri, “POST”, data);

}

void webClient_UploadStringCompleted(object sender, UploadStringCompletedEventArgs e)
{
var x = e.Result;
}

As you can see above, I point the URI at a WCF Service called SubService.svc/AddSubmarine. How RESTful. Next, I create an instance of the Submarine object, give it an Id of 3 and the Name Seawolf. I then use the same DataContractJsonSerializer I’ve been using in all the other articles to serialize the Submarine object to a JSON representation. Using the MemoryStream, I write the JSON to a stream and then artfully turn it into a string. Last but not least, I instantiate a new WebClient object, create an event handler for a callback, and upload the stringified Submarine object to the WCF Service.

So where did I upload the Submarine object to?

It takes two to Mango, so let’s take a look. For starters, it goes without saying that every WCF Service starts with an Interface. This one is called ISubService.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;

namespace DataSync
{
[ServiceContract]
public interface ISubService
{
[OperationContract]
[WebInvoke(UriTemplate = "/AddSubmarine", BodyStyle = WebMessageBodyStyle.Bare, RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, Method = "POST")]
bool AddSubmarine(Models.Submarine sub);

}
}

Unlike previous articles where I had you download data with WebGet, this time I’m using WebInvoke to denote that a PUT, POST, or DELETE HTTP Verb is being used with our REST service. The UriTemplate gives you the RESTful /AddSubmarine, and I added the Method = “POST” for good measure. Keep in mind that you’ll need the exact same Submarine class on the server that you had on your Windows Phone to make all this work.

Let’s see what we get when we Implement this Interface:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
using Microsoft.WindowsAzure;
using Microsoft.WindowsAzure.Diagnostics;
using Microsoft.WindowsAzure.ServiceRuntime;
using Microsoft.WindowsAzure.StorageClient;
using System.Configuration;
using System.Xml.Serialization;
using System.IO;

namespace DataSync
{
public class SubService : ISubService
{
public SubService()
{

}

public bool AddSubmarine(Models.Submarine submarine)
{
try
{
if (submarine != null)
{
//Do something with your Deserialized .NET Submarine Object
//… = submarine.Id //… = submarine.Name

return true;
}
else
{
return false;
}
}
catch
{
return false;
}
}

}
}

Here we end up with SubService.svc with the simple AddSubmarine method where you pass in a Submarine object as a parameter. What you do with this object, I’ll leave to you. Some might be tempted to INSERT it into SQL Azure. I’d prefer that you drop it into an Azure Queue and have a Worker Role do the INSERTing later so you can stay loosely-coupled. Just in case you need a refresher on a REST-based Web.config file, here’s one below:

To persist the traces to storage, update the DiagnosticsConnectionString setting with your storage credentials.
To avoid performance degradation, remember to disable tracing on production deployments.

–>

name=”AzureDiagnostics”>

contract=”DataSync.ISubService” />

–>

This Web.Config gives you the webHttpBinding you’re looking for to do a REST service. I even left you a spot to add your own database or Azure storage connection strings.

This article wraps up the Windows Phone 7 Line of Business App Dev series that I’ve been delivering to you since last September. Who knew I would make fun of OData or have you create your own NoSQL database to run on your phone along the way? I think I actually wrote the first article in this series from a hotel room in Nantes, France.

But have no fear, this isn’t the end.

In preparation for Tech Ed 2010 North America coming up on May 16th in Atlanta, I’ve been building the next-gen, super-fast, super-scalable Azure architecture designed for mobile devices roaming on wireless data networks. I’ve spent the last decade building the world’s largest and most scalable mobile infrastructures for Microsoft’s wonderful global customers. Now it’s time to make the jump from supporting enterprise-level scalability to the much bigger consumer-level scalability.

Yes, I’m talking millions of devices.

No, you won’t have to recreate Facebook’s servers, NoSQL, Memcache, or Hadoop infrastructure to make it happen. I’m going to show you how to make it happen with Azure in just two weeks so I’m looking forward to seeing everyone in Atlanta in two weeks.

Keep coding,

Rob

Making MEAP Real

Rob Tiffany — Mon, 01 Feb 2010 23:53:03 +0000

After all the logical diagrams of Microsoft MEAP and spelling out how it meets Gartner’s critical capabilities, I thought I’d show you a picture that provides a more concrete view of what our MEAP offering looks like. Hopefully, this will better crystallize how Microsoft lines up with those critical capabilities and how our reusable mobile application platform plugs into a customer’s enterprise. I think we have a great story here that shows customers how we can save them money on a platform that:

1. Works the same across laptops, tablets, Netbooks and phones.
2. Gives them reusable mobile middleware that can support multiple simultaneous applications rather than needing something different for each point solution
3. Lowers risk to their projects by reducing the amount of custom code needed to build any given solution.
4. Gives them adapters that plug into the existing enterprise packages they use to run their business.

Regards,
Rob