TechPrufer
Get started
Meta
Meta logoMeta · Feature trail

Touchscreen Interface Design and Interaction

11 posts · May 2010 – Dec 2016

What this trail covers

Meta's evolution in touchscreen interface design and interaction has progressed from foundational principles of direct manipulation on touchscreens to the development and open-sourcing of sophisticated animation libraries like Rebound. This library enables physics-based animations, allowing for more natural and responsive user experiences, as seen in features like Chat Heads and Facebook Home. The 'Building Paper' blog post details the creation of the Paper app, which heavily relies on gesture-driven interactions and physics-based animations. This post specifically discusses how touchscreens break traditional GUI design assumptions, particularly regarding the pointer model and Fitts's Law, leading to new considerations for target sizes, occlusion, eye focus, and multi-touch gestures. It highlights the shift from abstract pointers to direct finger interaction, necessitating a re-evaluation of UI design principles for mobile and touch-first devices.

All Meta trails
  1. Yoga: A cross-platform layout engineThis post introduces Yoga, a cross-platform layout engine derived from css-layout, which aims to unify UI layout across different platforms (mobile, desktop, web). It highlights Yoga's implementation in C for performance, its bindings for Java, Objective-C, and C#, and its adoption in various Meta products and frameworks like React Native, Components for Android, Oculus, Instagram, and ComponentKit. The post details how Yoga simplifies complex layouts and optimizes performance by minimizing measurement calculations and only recalculating layouts for changed views.
  2. Keyframes: Delivering scalable, high-quality animations to mobile clientsThis post introduces 'Keyframes,' a new library developed to address the challenges of delivering high-quality, scalable animations to mobile clients. It details the specific constraints faced (resizability, quality, file size) and how existing solutions were insufficient. Keyframes was developed to export and play After Effects animations by extracting vector shapes and animation keyframe data, enabling real-time rendering at any size with fine-grained control over animation progression. The library has been open-sourced and applied to other products beyond Reactions.
  3. Shimmer for AndroidThis post introduces Shimmer for Android, an open-source component that provides a shimmering loading indicator effect for Android applications. It builds upon the previously released Shimmer for iOS, making it easier for developers to add visually appealing and unobtrusive loading states to their Android UIs. The component is implemented as a layout and can be applied to complex views, enhancing the user experience by providing visual feedback during loading.
  4. Introducing Origami LiveIntroduced Origami Live for iOS, enabling real-time interaction with Origami prototypes on iPhones and iPads. Released Origami 2.0 for Mac with new features including code export for iOS, Android, and web, improved presentation mode, and integration with Sketch and Photoshop for live asset updates. This allows designers to create high-fidelity prototypes and export them as code, reducing the iteration time with engineers.
  5. Introducing AsyncDisplayKit: For smooth and responsive apps on iOSThis post introduces AsyncDisplayKit, an open-source framework for iOS that addresses the challenge of maintaining smooth and responsive user interfaces by enabling asynchronous rendering of UI elements. It highlights the limitations of the main thread in iOS development and presents AsyncDisplayKit's 'node' abstraction as a solution for offloading UI creation and layout to background threads, thereby preventing interface freezes and improving performance, particularly for complex UIs and on older devices. The post also explicitly links AsyncDisplayKit to the development of the Paper app and its reliance on the Pop animation engine, further solidifying its role in Meta's approach to sophisticated mobile UI development.
  7. Introducing Pop, the animation engine behind PaperIntroduced Pop, an open-source animation engine for iOS, designed to provide dynamic, physics-based animations (spring, decay, custom) that go beyond traditional static animations. Pop allows animating any property of any Objective-C object and offers a developer-friendly API similar to Core Animation, enabling more natural and responsive user interactions based on gesture velocity and user intent, as demonstrated in the Paper application.
  8. Building PaperThis post introduces the Paper app, detailing its engineering approach focused on mobile-first design, gesture-driven interfaces, and pervasive use of physics-simulating animations. It highlights the challenges of disambiguating gestures and seamlessly interrupting animations, and outlines future technical posts on asynchronous UIs, advanced interactions, and GPU optimization.
  9. Under the Hood: Building and open-sourcing the Rebound animation library for AndroidThis post introduces and open-sources the Rebound animation library for Android. It details the motivations behind its creation, stemming from the need for physics-based animations that were difficult to achieve with Android's time-based animation frameworks. The post explains the underlying concepts of spring forces and damping, contrasts Rebound with existing Android animation APIs and full physics engines like Box2d, and provides examples of its usage for creating natural-feeling UI interactions like those seen in Chat Heads and Facebook Home. It also highlights the library's portability to JavaScript.
  10. Optimizing for the MacBook Pro with Retina displayThis post introduces the challenge of optimizing the user experience for high-resolution displays, specifically the MacBook Pro with Retina display. It details the concept of 'device pixel ratio' and its implications for image rendering, leading to blurry or pixelated results if not handled correctly. The post outlines Facebook's approach to dynamically adjusting image delivery based on this ratio, even when it changes mid-session, by implementing a system that guesses the ratio, corrects on refresh, maintains consistency within a window, and minimizes extra data transfer.
  11. Crowdsourcing Mobile Device CapabilitiesThis post introduces the challenge of diverse mobile device capabilities and how Facebook addresses it by rendering its mobile site differently for various devices. It highlights the reliance on WURFL for device mapping and details a significant effort to improve WURFL's accuracy by crowdsourcing mobile device capabilities from millions of users and employing programmatic experiments. The post explains the statistical methods used to derive device capability statistics from noisy user input and how this data is used to create WURFL patches. It also emphasizes the contribution of these findings back to the open-source WURFL project, demonstrating a commitment to improving the mobile web ecosystem.
  12. Touchscreens are FingerpaintThis post analyzes how touchscreens fundamentally alter traditional GUI design paradigms by breaking the abstract pointer model and impacting Fitts's Law. It introduces the concept of 'fingerpaint' interaction, emphasizing the need for larger touch targets due to finger size, the problem of hand occlusion, and the influence of eye focus. The post also discusses the implications of virtual edges not stopping real fingers, the role of handedness and fatigue, and the potential of multi-touch gestures. It concludes by highlighting the increased intimacy and responsibility programmers have with users due to direct physical interaction.