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.
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.
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:
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!