{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "news",
    "type" : "single",
    "title" : "Trends on Tuesday: 5 Tips for Designing Touch Interactions |Digital.gov",
    "description": "Trends on Tuesday: 5 Tips for Designing Touch Interactions",
    "home_page_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/","feed_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/2015/11/10/trends-on-tuesday-5-tips-for-designing-touch-interactions/index.json","item" : [
    {"title" :"Trends on Tuesday: 5 Tips for Designing Touch Interactions","summary" : "Josh Clark, one of the pioneers of touch Web design, and author of Tapworthy and Designing for Touch, published an excellent article on A List Apart analyzing How We Hold Our Gadgets that has a wealth of data and graphics about this interesting and emerging design challenge. Below are 5 notable lessons from the post: 1. Portrait (vertical) orientation dominates","date" : "2015-11-10T10:00:14-04:00","date_modified" : "2025-01-27T19:42:55-05:00","authors" : {"wsullivan" : "Will Sullivan"},"topics" : {
        
            "design" : "Design",
            "emerging-tech" : "Emerging tech",
            "human-centered-design" : "Human-centered design",
            "mobile" : "Mobile",
            "user-experience" : "User experience"
            },"branch" : "bc-archive-content-3",
      "filename" :"2015-11-10-trends-on-tuesday-5-tips-for-designing-touch-interactions.md",
      
      "filepath" :"news/2015/11/2015-11-10-trends-on-tuesday-5-tips-for-designing-touch-interactions.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/bc-archive-content-3/content/news/2015/11/2015-11-10-trends-on-tuesday-5-tips-for-designing-touch-interactions.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/bc-archive-content-3/content/news/2015/11/2015-11-10-trends-on-tuesday-5-tips-for-designing-touch-interactions.md","slug" : "trends-on-tuesday-5-tips-for-designing-touch-interactions","url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/2015/11/10/trends-on-tuesday-5-tips-for-designing-touch-interactions/","content" :"\u003cp\u003e\u003ca href=\"http://globalmoxie.com/\"\u003eJosh Clark\u003c/a\u003e, one of the pioneers of touch Web design, and author of \u003ca href=\"http://shop.oreilly.com/product/0636920001133.do\"\u003eTapworthy\u003c/a\u003e and \u003ca href=\"http://abookapart.com/products/designing-for-touch\"\u003eDesigning for Touch\u003c/a\u003e\u003c/span\u003e\u003cspan style=\"font-weight: 400\"\u003e, published an excellent article on A List Apart analyzing \u003c/span\u003e\u003cspan style=\"font-weight: 400\"\u003e\u003ca href=\"http://alistapart.com/article/how-we-hold-our-gadgets\"\u003eHow We Hold Our Gadgets\u003c/a\u003e\u003c/span\u003e\u003cspan style=\"font-weight: 400\"\u003e that has a wealth of data and graphics about this interesting and emerging design challenge. Below are 5 notable lessons from the post:\u003c/p\u003e \u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2015/01/600-x-522-Tablet-PC-and-Smart-Phone-monicaodo-iStock-Thinkstock-463424415.jpg\"\n    alt=\"Responsive web design mock-ups shown on mobile devices.\"/\u003e\u003c/div\u003e\n\n\u003c/p\u003e\n\u003cp\u003e\n  \u003cb\u003e1. Portrait (vertical) orientation dominates over landscape (horizontal) usage with a 60-40 split.\u003c/b\u003e This is often driven by the app or content experience and will probably continue to grow more divided as many applications now aren’t even offering landscape orientations anymore—including Facebook, Flipboard, Instagram, Pandora, even Netflix (on Android, however, along with video playback, Netflix\u0026#8217;s library browsing mode can still be viewed horizontally). Landscape is largely dominated by video games and video and photo viewing.\n\u003c/p\u003e\n\u003cp\u003e\n  \u003cb\u003e\u003ci\u003eReal world take away: \u003c/i\u003e\u003c/b\u003e\u003ci\u003eDepending on your content and user needs, you might not have to build a horizontal version of your application, which could save design, development and testing time. (Sorry, websites creators. You can always be turned sideways, but design and development priority should be making sure the portrait version is bullet-proof.)\u003c/i\u003e\n\u003c/p\u003e\n\u003cp\u003e\n  \u003cb\u003e2. Most people use the phone with one hand and have thumb-driven touch actions.\u003c/b\u003e Forty-nine percent of research subjects used a single hand and thumb to interact with their devices. The next most popular was 36% holding with one hand and then using an index finger to navigate.\n\u003c/p\u003e\n\u003cp\u003e\n  \u003cb\u003e\u003ci\u003eReal world take away: \u003c/i\u003e\u003c/b\u003e\u003ci\u003eMake sure your most valuable (and used) navigation elements are near the bottom of the window within easy reach of thumbs. Think of how Facebook puts all of it’s core navigation at the bottom of the interface.\u003c/i\u003e\n\u003c/p\u003e \u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2015/04/600-x-400-Woman-holding-digital-tablet-closeup-scyther5-iStock-Thinkstock-ThinkstockPhotos-455273179.jpg\"\n    alt=\"Woman holding digital tablet, closeup\"/\u003e\u003c/div\u003e\n\n\n\u003cp\u003e\n  \u003cb\u003e3. Mind your meat pointers and safe zones for touch interaction.\u003c/b\u003e When designing apps and mobile-optimized websites, it’s crucial to consider the human anatomy for touch interfaces to make navigation and the user experience effortless. Clark deftly points this out with an amazing visualization quote, comparing touch interactions to the simplicity and preciseness of mouse-driven interactions:\n\u003c/p\u003e\n\u003cblockquote\u003e\n  \u003cp\u003e\n    “We also, of course, often reach into the middle of the screen; as screen size grows, our hands field ever more surface. However, unlike a mouse cursor, which sweeps effortlessly across a screen’s sprawl, our fingers are weighed down by this thing called an arm. This meat pointer goes all the way up to the shoulder, and hefting it around the screen demands effort. An interface shouldn’t be a physical workout. Group frequent controls within easy reach of thumbs. Nobody ever broke a sweat twiddling their thumbs.”\n  \u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp\u003e\n  \u003cb\u003e\u003ci\u003eReal world take away: \u003c/i\u003e\u003c/b\u003e\u003ci\u003eSeriously, put your most important- and frequently-used content at the bottom of the phone near the thumbs and make tap areas large and easy to hit, since users don’t have the precise control of a mouse device and instead have a big, floppy meat stick pointer in their arm.\u003c/i\u003e\n\u003c/p\u003e\n\u003cp\u003e\n  \u003cb\u003e4. Phablet users have many varied techniques, but thumbs still rule, driving 60% of touch interactions.\u003c/b\u003e Phablet users switch grips much more frequently than smaller phone users, often using more than one hand, but thumbs still drive the majority of the interactions over index fingers. By using their thumbs predominately, almost half the screen is difficult to reach for users.\n\u003c/p\u003e\n\u003cp\u003e\n  \u003cb\u003e\u003ci\u003eReal world take away: \u003c/i\u003e\u003c/b\u003e\u003ci\u003eNavigation and frequently-used features are even more crucial to be placed at the bottom of the screen on phablets. An adaptive design that customizes for these screen sizes might be something to consider, depending on your user needs.\u003c/i\u003e\n\u003c/p\u003e\n\u003cp\u003e\n  \u003cb\u003e5. Touch interactions on laptops and hybrids are a whole other ballgame. \u003c/b\u003eIn the article, Clark illustrates how touch laptop and hybrids throw a wrench into some of the more defined standards that mobile devices generally share, depending if someone is using their thumb or index finger. The optimal touch areas are almost mirror images of each other: Thumb users prefer the lower corners and index finger users prefer the middle and upper part of the screen.\n\u003c/p\u003e\n\u003cp\u003e\n  \u003cb\u003e\u003ci\u003eReal world take away: \u003c/i\u003e\u003c/b\u003e\u003ci\u003eThere’s no easy solution here. Do user research on how your audience uses your content, look at the analytics on what devices are used and optimize your experience for those users. \u003c/i\u003e\n\u003c/p\u003e\n\u003cp\u003e\n  Check out the \u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/resources/mobile-user-experience-guidelines/\"\u003eMobile User Experience Guidelines and Recommendations\u003c/a\u003e for more practices for good design. Join the \u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/communities/\"\u003eMobileGov Community of Practice\u003c/a\u003e to help build anytime, anywhere government.\n\u003c/p\u003e\n\u003chr\u003e\n\u003cp\u003e\u003cstrong\u003eDisclaimer\u003c/strong\u003e: References above are for illustrative purposes and do not imply endorsement by the General Services Administration (GSA).\u003c/p\u003e\n"}
  ]
}