Designing for Touch & Gesture: Tips for Apps and the Web (Updated)

In the past, our fingers did the walking, sifting through files, papers, pamphlets, and phonebooks, and then by point-click-clicking with a mouse to interact with images and text, in essence, electronic imitations of the paper-based world. Traditional forms, brochures, ad inserts, and posters informed much of the design. 

How much have things change?   It is 2013, but you'd think it was 1997 from the PowerPoint look and feel of many apps and web sites!   Touch is everywhere, but from what I can tell, not enough designers and developers have stepped up to the plate to think more deeply about ways their applications can support human endeavors though touch and gesture interactions.  

For an overview of this topic, take a look at my 2011 post, written after a number of ugly encounters with user-unfriendly applications:  Why bother switching from GUI to NUI?  

For an in-depth look into the history of multi-touch, the wisdom of Bill Buxton is well-worth absorbing.  He's worked with all sorts of interfaces, and has been curating the history of multi-touch and gesture systems since 2007:


Multi-Touch Systems that I have Known and Loved
Bill Buxton, Microsoft Research, Updated 8/30/12



Even if you are not a designer or developer, I encourage you to explore some of the links below:

Touch Gestures for Application Design
Luke Wroblewski, 10/9/12

Common Misconceptions About Touch
Steven Hoober, 3/18/13

Designing With Tablets in Mind:  Six Tips to Remember
Connor Turnbull, Webdesign tuts+, 9/27/11

Finger-Friendly Design: IDeal Mobile Touchscreen Target Sizes
Anthony T, Smashing Magazine, 2/21/12

Best Practices: Designing Touch Tablet Experiences for Preschoolers (pdf)
Sesame Street Workshop


Are Touch Screens Accessible?
AcessIT, National center on Accessible Information Technology in Education

iOS Human Interface Guidelines
Apple

Android User Interface Guidelines
Using Touch Gestures
Handling Multi-Touch Gestures
Android

Designing for Tablets?  We're Here to Help!
Roman Nurik, Android Developers Blog 11/26/12

Touch interaction design (Windows Store apps)
Microsoft - MSDN

Multi-Touch Systems that I have Known and Loved
Bill Buxton, Microsoft Research, Updated 8/30/12

Usability of Windows 8: Food for thought from Jakob Nielsen's Alertbox

I haven't had the chance to play around with a tablet or PC running Windows 8, but from the screenshots and thoughtful comments posted on Jakob Nielson's Alertbox ,  I might be in store for some user confusion.  

Windows 8 -- Disappointing Usability for both Novice and Power Users 

"Hidden features, reduced discoverability, cognitive overhead fro dual environments, and reduced power from a single-window UI and low information density. Too bad." -Jakob Nielsen

I wonder how this will play out in the future, especially for people who often rely on two large monitors with several windows up at the same time to complete tasks efficiently, alone, or with a colleague.

RELATED
Take the time to read the following article, and if you have the time, skim through the over 200 comments:
Why Jakob Nielsen's Windows 8 critique is old-school thinking.
Jay Green, c|net, 11/21/12

Revisiting the Multi-touch Parody of CNN's Magic Map, by Fred Armisen on Saturday Night Live Weekend Update

Photo via engadget

About four years ago I almost rolled out on the floor laughing at Fred Armisen's parody of CNN's Magic Map Wall during the Weekend Update segment of Saturday Night Live.  When I came across the video clip, I couldn't resist sharing it on my blog, and thought I'd share the video clip once again in honor of Election Day:



Video clip via Hulu


My 10/25/08 post,  Multi-touch Parody of CNN's Magic Map Wall by Fred Armisen on SNL's MegaPixel Giant Touch-map, was written when large touch-screen displays were beginning to gain steam in a variety of markets.  At the time, not all of the kinks had been worked out, and there were few people around who knew much about developing programs for use on these displays.  Since then, there have been many improvements in both hardware and software.   

Jeff Han, of Perceptive Pixel, provided the multi-touch screen system for CNN and the SNL parody.  He recently sold Perceptive Pixel to Microsoft and now works as a general manager for Microsoft Office. He's spreading the word about Microsoft's venture into large multi-touch displays- (55 and 82 inches), powered by Windows 8.  

For more information about Jeff Han and Microsoft Office, take a look at my blog post featuring  a recent video of Jeff Han's presentation about Windows 8 for large displays, Microsoft's new multi-touch, pen, and ink technology. The video also includes a presentation about experience design considerations for large displays, by Nathan Fish.

Jeff Han Discusses Windows 8 for Large Displays, Microsoft's New Multi-touch, Ink & Pen Tech; Experience Design for Large Displays (2012 Microsoft Build)

Earlier this year, Microsoft bought Jeff Han's company, founder of Perceptive Pixel.  Jeff Hans now works for the Microsoft Office division of the company, where there is a push to bring new and improved large multi-touch displays to the corporate world. With this off-the-desktop move, developers are challenged to develop applications for Windows 8 that will be geared towards supporting collaboration in corporate settings.

Jeff Han and Nathan Fish were at Microsoft's "Build" conference recently  to give a presentation about the nuts and bolts of the new technology - how it works, and suggestions for design.  Although the video presentation is over an hour long, it is worth setting aside some time to watch! 

New multi-touch, ink, and pen technologies that can revolutionize your apps on any size of screens (10/30/12, Microsoft Build)



Here is the description of the presentation:
"Develop solutions that flow with your customers business - starting with individuals and information workers on their phones, desks or virtual offices, moving into conference rooms, brainstorm areas, boardrooms and common areas.  Learn how Microsoft's new pen and touch capabilities, software and hardware will enable you to develop products that will help businesses be more efficient.  Have a sneak peek on what our large multi-touch displays (82' and 55') can bring to your solutions." -Microsoft Build

Jeff Han emphasized that touch interaction is everywhere and is a fundamental requirement in applications. Windows 8 apps should be designed for all screen sizes, saying "It's all about collaboration of people and a collaboration of devices that gets your work done....this is the real thing, and it is about to happen.  Devices (referring to large displays) are coming... we do have a mechanism for early access hardware."

During the second half of the video (38:00), Nathan Fish discusses guidelines for designing experiences on large displays, including optimization, handling various interactions via pen, touch, and gestures, the use of application bars and context menus, and more.

At the beginning of his presentation, Nathan Fish briefly discusses the uncharted territory of designing for collaborative large displays, and tells the audience that the guidelines are just suggestions, " nothing is written, we are figuring this out as we go."

My fear is that Windows 8 developers might not have the inclination to think past the smaller screens of smartphones and tablets, resulting in touchy-feely variations of PowerPoint and other Office applications that have been around for too long.

RELATED
Microsoft Welcomes Perceptive Pixel to the Office Division
The Official Microsoft Blog, 7/30/12


What happened to the Surface Table?
I was surprised that Jeff Han's company was not folded into PixelSense, formally known as Surface, the division of Microsoft that focuses on large multi-touch tables. In my opinion, the tables had some potential to support collaborative work in the corporate world.  It will be interesting to see how things unfold!  

PixelSense
Take a look at the video clip below for more information:
 

Discover the Samsung SUR40 (with PixelSense)
Samsung SUR40 with Microsoft PixelSense
PixelSense Development Partners
Insights on Interactive Tabletops: A Survey of Researchers and Developers (pdf)
Hrvoje Benko, Meredith Ringel Morris, A.J. Bernheim Brush, and Andrew D. Wilson 2009, Microsoft Research

SOMEWHAT RELATED
I've been interested in large screen displays and how they interact with smaller devices for a very long time.  In 2007, I was taking graduate courses at UNC-Charlotte and planned to pursue further research and work related to this area.   At the time, I prepared a paper to present at a conference, but was unable to present due a serious health emergency in my family.  The abstract is below:


"Large screen displays support the collaboration of two or more people, especially 
when the nature of the content is visual.  These displays, in the form of walls, windows, 
boards, and touch-tables, will become ubiquitous in the future, and can be found in workplaces, educational institutions, museums, and other public spaces. New display systems have been developed that allow for co-located communication between groups of people, and also allow for collaboration with individuals in remote locations, using mobile computing or communication devices.  This paper will provide an overview of the technologies that support  this new way of communication, discuss the challenges involved in 
establishing "interoperability" within these new systems, and examine the possibilities for 
the future."

If this topic interests you, take a look at one of my Flickr collections:

Ubiquitous Sightings of Urban Screens: Interactive Displays in Public Spaces, Digital Signage, and Screens of All Sizes

Description:

"All kinds of displays are cropping up in shopping centers, malls, banks, stores, airports, schools, businesses, and meeting places. What is the purpose of all of these displays?

Displays and mobile devices, everywhere we go.

It doesn't look like we've really figured out how to harness the potential of the technology that surrounds us."

Lenovo's Touchy-Twisty Tablet-Laptops (Video)

I plan to get my hands on the IdeaPad Yoga and ThinkPad Twist someday soon. I'm curious to see how Windows 8 plays out the new touch-tablets.

In the following video, David Schmook, of Lenovo, demonstrates the new IdeaPad Yoga and Twist, running Windows 8.  


IdeaPad Yoga and ThinkPad Twist: Windows 8 Computers Bend and Twist
Joanna Stern, ABC News, 10/09/12


FYI: Lenovo will be manufacturing the "Think" family of computer products in my home state, North Carolina starting January, 2013. 

Photo Credit: Lenovo

Musings about NUI, Perceptive Pixel and Microsoft, Rapid Creative Prototyping (Lots of video and links) Revised

It just might be the right time for everyone to brush up on 21st century tech skills. iPads and touch-phones are ubiquitous. Touch-enabled interactive whiteboards and displays are in schools and boardrooms.  With Microsoft's Windows 8 and the news that the company recently acquired Jeff Han's company, Perspective Pixel, I think that there will be good support - and more opportunities- for designers and developers interested in moving from GUI to NUI.    


In the video below, from CES 2012, Jeff Han provides a good overview of where things are moving in the future.  We are in a post-WIMP world and there is a lot of catching up to do!

CES 2012  Perceptive Pixel and the Future of Multitouch (IEEE Spectrum YouTube Channel)



During the video clip, Jeff explains how far things have come during the past few years:

 "Five and 1/2 years ago I had to explain to everybody what multi-touch was and meant. And then, frankly, we've seen some great products from folks like Apple, and really have executed so brilliantly, that everyone really sees what a good implementation can be, and have come to expect it.  I also think though, that the explosion of NUI is less about just multi-touch, but an awareness that finally people have that you don't have to use a keyboard and mouse, you can demand something else beside that.  People are now willing to say, "Oh, this is something I can try, you know, touch is something I can try as my friendlier interface"."

Who wouldn't want to interact with a friendlier interface?  Steve Ballmer doesn't curb his enthusiasm about Windows 8 and Perceptive Pixel.  Jeff Han is happy how designs created in Windows 8 scales for use on screens large and small. He explains how Windows 8 can support collaboration. The Story Board application (7:58) on the large touchscreen display looks interesting.

I continue to be frustrated by the poor usability of many web-based and desk-top applications.  I like my iPad, but only because so many dedicated souls have given some thought to the user experience when creating their apps.  I often meet with disappointment when I encounter interactive displays when I'm out and about during the day.  It is 2012, and it seems that there are a lot of application designers and developers who have never read Don Norman's The Design of Everyday Things!

I enjoy making working prototypes and demo apps, but my skill set is stuck in 2008, the last year I took a graduate-level computer course.  I was thinking about taking a class next semester, something hands-on, creative, and also practical, to move me forward. I can only do so much when I'm in the DIY mode alone in my "lab" at home.  I need to explore new tools, alongside like-minded others.  


There ARE many more tools available to designers and developers than there were just four years ago.  Some of them are available online, free, or for a modest fee.  I was inspired by a link posted by my former HCI professor, Celine Latulipe, to her updated webpage devoted to Rapid Prototyping tools. The resources on her website look like a good place to start for people who are interested in creating applications for the "NUI" era.  (Celine has worked many interesting projects that explore how technology can support new and creative interaction, such as Dance.Draw.) Below is her description of her updated HCI resources:

"New HCI resource to share: I have created a few pages on my web site devoted to Rapid Prototyping tools, books, and methods. These pages contain reviews of various digital tools, including 7 different desktop prototyping apps, and including 8 different iPad apps for wireframing/prototyping. I hope it's useful to others. Feel free to share... and please send me comments and suggestions if you find anything inaccurate, or if you think there is stuff that I should be adding. I will be continuing to update this resource." -http://www.celinelatulipe.com (click on the rapid prototyping link at the top)

IDEAS
Below are just a few of my ideas that I'd like to implement in some way. I can't claim ownership to these ideas- they are mash-ups of what comes to me in my dreams, usually after reading scholarly publications from ACM or IEEE, or attending tech conferences. 

• An interactive timeline, (multi-dimensional, multi-modal, multimedia) for off-the-desktop interaction, collaboration, data/info analysis exploration.  It might be useful for medical researchers, historians, genealogists, or people who are into the "history of ideas".  Big Data folks would love it, too. It would handle data from a variety of sources, including sensor networks. It would be beautiful to use.
• A web-based system of delivering seamless interactive, multi-modal, immersive experiences, across devices, displays, and surfaces. The system would support multi-user, collaborative interaction.  The system would provide an option for tangible interaction.
• A visual/auditory display interface that presents network activity, including potential intrusions, malfunctions, or anything that needs immediate attention that would be likely to be missed under present monitoring methods. 
• Interactive video tools for creation, collaboration, storytelling.  (No bad remote controllers needed.)
• A "wearable" that provides new ways for people to express and communicate creatively, through art, music, dance, with wireless capability. (It can interact with wireless sensor networks.)*
• An public health application designed to provide information useful in understanding and sepsis prevention efforts. This application would utilize the timeline concept describe at the top of this list. This concept could also be useful in analyzing other medical puzzles, such as autism.

Most of these ideas could translate nicely to educational settings, and the focus on natural user interaction and multi-modal i/o aligns with the principles of Universal Design for Learning, something that is important to consider, given the number of "at-risk" learners and young people who have disabilities.

I welcome comments from readers who are working on similar projects, or who know of similar projects.  I also encourage graduate students and researchers who are interested in natural user interfaces to and move forward with an off-the-desktop NUI project.  I hope that my efforts can play a part in helping people make the move from GUI to NUI!  



Below are a few videos of some interesting projects, along with a list of a few references and links.

SMALLab (Multi-modal embodied immersive learning)

PUPPET PARADE: Interactive Kinect Puppets(CineKid 2011)



MEDIA FACADES: When Buildings Start to Twitter

HUMANAQUARIUM (CHI 2012)

 

NANOSCIENCE NRC Cambridge (Nokia's Morph project)






 
Examples: YouTube Playlists
POST WIMP EXPLORERS' CLUB
POST-WIMP EXPLORER'S CLUB II

Web Resources
Celine Latulipe's Rapid Prototyping Resources 
Creative Applications
NUI Group: Natural User Interface Group
OpenFrameworks and Interactive Multimedia: Funky Forest Installation for CineKid
SMALLab Learning

Microsoft Research Natural User Interface 

OpenExhibits: Free multi-touch + multiuser software initiative for museums, education, nonprofits, and students.
OpenSense Wiki 
CINEKID 2012 Website 
Multitouch Systems I Have Known and Loved (Bill Buxton)
Windows 8
Perceptive Pixel
Books
Natural User Interfaces in .NET  WPF 4, Surface2, and Kinect (Josh Blake, Manning Publications)
Chapter 1 pdf (Free)
Brave NUI World: Designing Natural User Interfaces for Touch and Gesture (Daniel Wigdor and Dennis Wixon)
Designing Gestural Interfaces (Dan Saffer)
Posts

Microsoft's"Magic Wall" Tech on Windows 8 Laptops and Tablets by Next Year

Bill Snyder, ReadWrite Web, 7/20/12

I noticed some interesting tools on the Chrome web store - I plan to devote a few more posts to NUI tools in the future.

User Experience and Windows 8, link to Steven Sinofsky's post.

Steven Sinofsky is an author of an informative MSDN blog. His recent post about user experience and the new Windows 8 operating system provides an interesting, detailed "back-history" of the development of the Windows UI over the ages. Steven's post is worth setting aside a chunk of time to read and reflect!

Creating the Window 8 User Experience

 

BTW, the numerous comments from readers of Steven's post are worth skimming.

Links - Web of Things: Touch the Web 2011; Web Patterns and the EPC Cloud, Windows 8 Rumors, Human Centered Service Design

WEB OF THINGS
Touch the Web 2011
Dominique Guinard|Web of Things|3/21/11


EPC Cloud: Reducing Software Complexity Thanks to Web Patterns
Dominique Guinard|Web of Things|3/8/11

View more presentations from Dominique Guinard.


WINDOWS 8 RUMORS

Windows 8 Beta Collectors Waiting with Bated Breath for a Leak

Mary Jo Foley |All About Microsoft|ZDNET|3/30/11

HUMAN CENTERED SERVICE DESIGN

Service Design Toolkit: A toolkit for the design of public service 

Service Design Toolkit Downloadables

(Via Putting People First)

FYI:  My dog woke me up very early this morning - so I decided to post a few interesting links. I'll share more in-depth posts in the future when I have a bit more time : )