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!
