Derik Whittaker

Syndication

News


Images in this post missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at imagehelp@codebetter.com
Tablet Design Part 2: GUI Layout/Presentation

****** NOTE ******
Sorry for the long dely in getting this post out.  With the holidays and my project at work winding down (which oddly enought means work longer/harder) I really have not had much time to sit down and put togher a solid post.
****** NOTE ******

On to the post............ 

When it comes to designing the user experience for a tablet based application all/most conventional ideas appear to go out the window.  However, if you really think about it, they do not.  A goal of any application (in respect to user experience) must be simplicity and ease of use.  One large downside to developing for most tablet based application is screen resolution.  On the tablet 800x600 is about all you get.  Compare this to most other apps which are designed for 1024x768 and you will see a lot of your design ideas have to be modified.

Everything is bigger
The one thing that you MUST take into account when designing a tablet based application is that everything must be larger than normal.  This includes things such as icons, buttons, text boxes, labels, etc.  The reason for this is 2 fold.  First, because most tablet based applications are meant to be used on the 'go' or in front of clients and you want to make sure that everything is in easy reach.  Second, because the user is using some sort of pen as a pointing device, and not a mouse, you will need to make everything larger so it is easier to select.

One way to look at the UI design of tablet applications is to think of it as looking cartoonish or being bubblegumish.:)  In a standard application a button control may have a size of 100 x 23 a tablet button control may be 150 x 50.  The 50% increase in size will allow for users to more easily access the different features of the application.  You will find the same thing with text boxes, especially if you are using inking.  These text boxes may be 200x50 and you will only be able to get 4-6 of them on a form.  Compare this to a standard application where you can get dozens of text boxes on a form if need be.

Less is more/K.I.S.S.
One of the standard pitfalls in application development in information overload.  I once worked on an application that was said to have more UI controls this an airplane cockpit.  When designing the UI layout for tablet applications you MUST keep it simple.  As I stated above, most of the time the users of your application are going to be on the go so you must keep that amount of stuff on a given screen to a minimum.  This means that some of your favorite controls such as the tree view, menus, tool bars, combo boxes (standard ones that is), fly-out panels are really not useable.

When designing the layout for a tablet application you must be 100% consciences of the K.I.S.S principle at all time.  Unfortunately, the UI cannot be ultra slick, or cutting edge.  It is best to have the UI layout be simple, concise and do only what is needed an nothing more.

Even though the UI layout for a tablet is a little more challenging then other applications, it is still possible to have a slick, clean and professional presentation layer that gets the job done and allows for your users to have a greatexperience.  However, in order to achieve this, you need to be a little patient and be willing to forgo using your favorite controls or be willing to try something completely different in terms of design for a Tablet application.

Until next time where I talk about Inking......


 


Posted 01-17-2007 6:38 AM by Derik Whittaker

[Advertisement]

Comments

Jay Glynn wrote re: Tablet Design Part 2: GUI Layout/Presentation
on 01-17-2007 10:15 AM

Tablet PC standard is at least 1024x768. I don't know of any (that aren't a couple of years old) that are running at 800x600. My Toshiba uses 1400x1050, as do a couple of Fujitsu models.

Also, the controls that you are talking about are precisely the controls that you want to use. Tree views are perfect for use with a pen. As are toolbar, dropdowns, list boxes etc. I've been developing software for pen based computers for 10+ years and what you want is limit the amount of pen entry. We've done usability studies with our sales staff (over 6000 all with Tablet PCs) and the more you can limit inking the better they like it. We use tree views extensively. Perfect for showing hierarchical data and being able to manuever through it with a pen.

Derik Whittaker wrote re: Tablet Design Part 2: GUI Layout/Presentation
on 01-17-2007 10:21 AM

Jay,

Our tablets are made by Motion and they do not support anything other than 800x600.  Are you working with the laptops that double as tablets?

As for the other controls, our usability study with our customers (our corporate users) has lead us to belive that using tree views and such are not that great.  In place of combo boxes, have use a list dialog type form that allows for selection.

You are 100% correct though, the less inking the better.

Derik

Jay Glynn wrote re: Tablet Design Part 2: GUI Layout/Presentation
on 01-17-2007 10:42 AM

You using the LS800 I take it. Most tablets are 1024 x 768. We demoed just about every tablet known a couple if years ago. We currently use Fujitsu Stylistic 5020D. Pure tablet with 12" XGA displays. My Toshiba is a convertable (an early engineering demo of the M200. Doesn't have the model number on the sticker and no serial no.). We had several Motion products. Still a couple floating around here I think.

Motion seemed like a good group to work with. It came down to cost for us. Fujitsu was able to offer a better support deal since we typically run these things for 4+ years.

The GUI will be difficult for both you and the users. Don't be afraid to build full featured GUIs. Your users don't feel comfortable with the pen at first, they WILL learn. Don't compromise, you'll regret it later. We learned that lesson the hard way. Make the forms as if you were using a keyboard with the exception of limiting the data entry as much as possible.

Best of luck and welcome to the world of ink. If you have questions down the line, jlsglynn at gmail.com.

Aineias wrote re: Tablet Design Part 2: GUI Layout/Presentation
on 04-14-2007 8:43 PM

Cool}Cool!

Adonis wrote re: Tablet Design Part 2: GUI Layout/Presentation
on 04-15-2007 2:12 AM

interesting

Vasilios wrote re: Tablet Design Part 2: GUI Layout/Presentation
on 04-15-2007 2:44 AM

Nice

Demetris wrote re: Tablet Design Part 2: GUI Layout/Presentation
on 04-15-2007 4:57 AM

Nice!

Euaggelos wrote re: Tablet Design Part 2: GUI Layout/Presentation
on 04-15-2007 6:48 AM

Nice!

Angelos wrote re: Tablet Design Part 2: GUI Layout/Presentation
on 04-15-2007 9:49 AM

Cool...

Alexis wrote re: Tablet Design Part 2: GUI Layout/Presentation
on 04-15-2007 11:14 AM

Cool...

Halu wrote re: Tablet Design Part 2: GUI Layout/Presentation
on 04-15-2007 1:48 PM

Nice

Kypros wrote re: Tablet Design Part 2: GUI Layout/Presentation
on 04-17-2007 3:26 PM

Cool...

Cosmo wrote re: Tablet Design Part 2: GUI Layout/Presentation
on 04-18-2007 10:06 AM

Nice!

Manos wrote re: Tablet Design Part 2: GUI Layout/Presentation
on 04-18-2007 10:29 AM

Cool}Cool!

Anninos wrote re: Tablet Design Part 2: GUI Layout/Presentation
on 04-18-2007 12:00 PM

Nice...

Halu wrote re: Tablet Design Part 2: GUI Layout/Presentation
on 04-18-2007 2:27 PM

Nice...

Panagiote wrote re: Tablet Design Part 2: GUI Layout/Presentation
on 04-18-2007 4:41 PM

interesting

Lambro wrote re: Tablet Design Part 2: GUI Layout/Presentation
on 04-18-2007 6:47 PM

Nice

Lambro wrote re: Tablet Design Part 2: GUI Layout/Presentation
on 04-18-2007 6:48 PM

Nice

Anastasios wrote re: Tablet Design Part 2: GUI Layout/Presentation
on 04-18-2007 7:20 PM

Nice

Charilaos wrote re: Tablet Design Part 2: GUI Layout/Presentation
on 04-18-2007 10:56 PM

Cool...

Moris wrote re: Tablet Design Part 2: GUI Layout/Presentation
on 04-19-2007 10:25 AM

interesting

Philippos wrote re: Tablet Design Part 2: GUI Layout/Presentation
on 04-19-2007 1:01 PM

Nice

Michail wrote re: Tablet Design Part 2: GUI Layout/Presentation
on 04-19-2007 11:14 PM

Nice...

Eleftherios wrote re: Tablet Design Part 2: GUI Layout/Presentation
on 04-19-2007 11:50 PM

Nice...

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Subscribe
Google Reader or Homepage

del.icio.us CodeBetter.com Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl CodeBetter.com Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of Devlicio.us
Red-Gate Tools For SQL and .NET

NDepend

SlickEdit
 
SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
LiteAccounting.Com
DevExpress
Fixx
NHibernate Profiler
Unfuddle
Balsamiq Mockups
Scrumy
JetBrains - ReSharper
Umbraco
NServiceBus
RavenDb
Web Sequence Diagrams
Ducksboard<-- NEW Friend!

 



Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers

 

Community Server (Commercial Edition)