Touchscreen Interface Design and Interaction

12/7/2016

This 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.

11/22/2016

This 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/5/2015

This 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.

2/24/2015

Introduced 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.

10/15/2014

This 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.

4/28/2014

Introduced 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.

3/7/2014

This 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.

12/10/2013

This 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.

9/18/2012

This 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.

10/18/2010

This 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.

5/13/2010

This post analyzes how touchscreens fundamentally break traditional GUI design assumptions based on a pointer model and Fitts's Law. It discusses the implications for UI design, including the reduced applicability of Steering Law, the increased importance of obvious and large touch targets due to lack of tactile feedback and hover states, and the challenges posed by finger occlusion. It also touches on subtle changes in eye focus, the continued relevance of 'hot zones' for touch targets, the absence of virtual edges to stop physical fingers, and the impact of handedness, fatigue, and multi-touch gestures like pinch-to-zoom and swipe. The post argues that touch interfaces require a new interaction model, moving from 'Etch-A-Sketch' to 'fingerpaint', and necessitates designers to consider anthropometric variations and new interaction paradigms.