Designing Touch User Interfaces
When it comes to creating software there are several engineering processes and philosophies that take shape based on the type of product, release cycle, release vehicle, etc. … Regardless of the process, the following post is a quick glimpse into how I approach designing touch experiences. Below is a figure that illustrates the different factors which weigh in during my design process, the areas are intentionally oriented adjacent to the elements that have the most direct impact based on how I think about designing / how they feed into my development process… read into it as you much or little as you like.
Functional Requirements
What is the problem? Who are you designing for? Does your design approach solve the problem at hand? Does your solution provide real value? How does your design fit into the ecosystem’s landscape?
-
What is the end user problem to be solved?
-
What functionality does your design need to incorporate in order to provide a valuable solution to the problem?
-
Not everything gets built, prioritize the functional components in order to best address the problem at hand.
-
(The one we all hate) Based on the development platform what technical limitations need to be factored into your design?
-
Once again ask… what is the value proposition to the end user? Can this problem be solved without this feature?
-
Take a step back and ask, how does your feature relate to the product offering as a whole?
-
Will the user see your design/feature as a “nice to have”, “makes sense” or “I don’t know how I would have lived without it”?
Visual Design
Every user interface belongs to an underlining visual design style. When designing TUI I think that that the visual affordances and feedback dictates how a user perceives the level of touch-ability of something before and during their interaction. In my mind the the visual design equally if not more important than the interaction used to manipulate the UI it self.
-
Given the principles set forth by the visual design style how does this help or hinder your functional or interaction goals?
-
How do we maintain a clean, simple visual style and create a design that does not take us down the route of Fisher Price UI (next post).
-
Most touch devices today have limited screen real-estate, pair that with a large opaque interaction tool (your hand) how do we maximize functionality with the space that we have?
-
How does the user know what possible before touching the screen?
Interaction Design and User Experience
This is where great experiences are made (or lost). There’s a plethora of factors to consider when approaching any design, listed below are a few interaction principles and UX considerations I tend to consistently draw upon when approaching any design targeted at touch input.
-
There’s No Hover
-
There’s no touch hover state (well not on any mainstream hardware in the near future). Touch is fundamentally a two state interaction model, either the user is out of range of the device (“up”), or the user has made contact with the surface (“down”). For indirect pointing devices such as a mouse or stylus, the hover state allows users to confidently target and explore the UI’s functionality without committing to an action. With touch, the user is essentially committing to an action on touch down; so how do we give them back that level of confidence?
-
-
Leave the Mouse Behind
-
Let’s ensure our controls are truly optimized for the input method. Touch is not a single (x,y) pixel point, touch contacts are fat-opaque pointing tools that naturally have shape, size and even orientation.
-
Always design with the Fat Finger Problem in mind. Users’ fingers, hands and wrists will occlude the content beneath it.
-
Simultaneous / Multiple Input: For decades GUI has been designed against a “one point of input, and one area of focus” model. With touch we need to explore the use of multiple and simultaneous input across controls, applications, screens and even devices.
-
-
Touch with Confidence
-
How do we create something that not only is touchable, but more importantly designed such that the user perceives this UI element as confidently targetable?
-
Allow users to easily cancel or negate an action.
-
-
Feedback is King
-
Always give responsive feedback: touch is direct, so when that finger hits the screen we should immediately be providing feedback.
-
-
Be Forgiving
-
Touch input is direct, but imprecise and consequently users will accidentally tap or drag over unintended objects. Thus, users should be confident that their intended action can be reversed.
-
Require explicit user input to activate destructive functions or to cause large state transitions. It’s crucial to remember that touch is a very sloppy and users will accidentally touch objects, so there should be some sort of user action to confirm destructive actions like delete.
-
-
Posture
-
What is the target form factor?
-
How will the user be sitting, standing, (driving?) when using this device?
-
What are the primary postures and orientations the user will be utilizing this device?
-
Does the user change their posture based on their confidence of targeting the elements on the screen?
-
For example: some mobile phones promote experiences designed against one-handed-single finger input, whereas tablets can target whole handled or two even handed interactions.
-
-
Discoverability vs. Learnability
-
Something may not be immediately discoverable, but is it learnable? I favour learnability over discoverability. The challenge is how you use visual cues to teach the user what is possible.
-
Next….
I wont get into the implementation factors and you should note that there are two critical pieces to the design process clearly missing: validation and usability. I will talk about these later down the road using some usability data we gathered while working on Windows 7 Touch.
NEXT: IS BIGGER ALWAYS BETTER? Why are designers cranking up the size of their controls to “make them touch-able?” There’s a better solution!
Read MoreBlending the chrome …
Applications like Google Chrome have led the Windows browser UI “resurrection” by blending the window boarder chrome and the application chrome together. (The visible graphical interface features of an application are sometimes referred to as "chrome")*.
Google Chrome 7.0b
Zune 4
I decided to write this post after spending a week using Internet Explorer 9 Beta. One thing most people notice is the cleaner UI, its very "Google Chrome like”. As the week went went on there was one area of interaction that didn’t jive well with me at all.
Most, if not all Windows users have discovered and learned that double-clicking on the window chrome maximizes/restores the the application window. I think it’s safe to say this works in 99% of all applications; so the question is: what do you users expect to happed when we start to blend the chrome together?
If a user has a pre-established, pre-learnt expectation between input and action, we have to be very delicate on how we change the UI around them. This doesn’t mean we should never change the behaviour of our UI to deliver better user experiences, but more importantly we need to ensure that the change is predictable and clearly understandable.
Internet Explorer 9 Beta: Your chrome is not only confusing, its extremely frustrating….
I’m confident that this is something that will change as the IE team gathers beta feedback, but I want to call this out as a general problem we may all face sometime or another. The chrome surrounding Internet Explorer may look simpler, but looks can be deceiving. The images below illustrates how each area of the chrome reacts to a users double-click:
Green: maximize or restore application window Red: close window Blue: open new tab
If it looks like a duck?
Even though IE’s glass chrome is clean and continuous from the end user’s perspective, its far from that under the covers. Two different outcomes occur when performing the same action on what seems to the end user to be the same control. If the tip of your mouse pointer falls 1px into the blue area (across an invisible boarder), then instead of maximizing the window when double clicking you create a new tab (which is super annoying). What I find even more puzzling is the fact that the area to the left and right of the application controls also maximizes the window (little green boxes). It seems like the design is “when double clicking: if it looks like the window chrome it acts like windows chrome, except in an area of fixed height and dynamic width beside the address bar”. But what confuses me even more is that when the user drags anywhere on the chrome (blue+green) it moves the window (taking the approach of “if it looks like window chrome it acts like window chrome all the time”).
To add temperament to my frustration, I use IE9 on a Windows Touch enabled device, so when your large and opaque finger is double tapping on what looks like a nice large open area of window chrome, its really two small areas and you have no confidence or predictability on what the outcome will be! Finger crossed for maximize!
I’m a firm believer when it comes to UX design that a single interaction should perform the same outcome when afforded by similar or congruent visuals.
Here’s hoping they fix this one!
Amish Patel
* http://en.wikipedia.org/wiki/UI_chrome
Read MoreA little touch of colour …
Browsers… the battle for fastest browser and highest Sun Spider scores is full swing, but what about the end user experience? Yes, all the browsers are processing JavaScript at crazy and amazing speeds, but most users spend >70% of their time living in their browser so it seems like its time for UX solutions to differentiate and delight… right? Call me a sucker for shiny objects but for me a little UX goes a long way!
Windows 7 released with IE8 about a year ago today, and to be honest for me its just didn’t jive well with the cleaner look and feel that came with Windows7. With heavy chrome and the abundant use of hover UI it seems more remnant of the visual design afforded during the Vista era. However, the opposite is true with the recent release of IE9 Beta; its cleaner, leaner and more importantly….thank you a million times over to whomever decided to hide all those pesky tool bars!
New to Internet Explorer 9 is the ability to pin your favourite web sites as applications on your taskbar (not unlike Chrome’s “create application shortcut”)… the difference for me is the cleaner visual experience you get when you launch these “apps” from the taskbar.
In similar fashion to how Windows7 adds ‘light’ around its taskbar icons when hovered over them (above), when a user launches a pinned website, it also extracts the color of the pages icon and applies them as a theme the browser controls to create a more tailored/branded experience (below). To be honest most people probably don’t care about this little nuance, but I personally think it goes a long way!
Welcome to letapel.com… yet another blog….
Welcome folks… looks like it’s time for me to join the blog-o-sphere… if you are reading this, you (for some unknown and mysterious reason) are contemplating joining me on my journey. The goal for now is to tailor this blog toward expressing some of my thoughts and opinions on all things techy, touchy, and mobile from both the end user and engineer/designers perspective.
Hope you enjoy your stay…
-Amish
Read More
