This is the fifth post in a five-post series about O’Reilly’s Fluent Conference.
In the last few posts, we’ve talked about the expansion of front end development, the fundamental requirements of building on the web, and the evolution of JavaScript. As product-centric engineers, though, it’s important to remember that all of these things are tools, not products. These tools help us do our jobs better, and that’s why we strive to master them. But ultimately, our mission is not to write JavaScript or use frameworks—it’s to build beautiful, functional, delightful products.
Fluent didn’t miss that point. Between Paul Irish (Google Dev Tools), James Rosen (Fastly), and Steve Souders (SpeedCurve), there was a strong focus on user experience.
Paul Irish’s keynote dove into the meaning of the word “fast”. Specifically, he tried to answer the question of what a “fast” website is by breaking down website behavior into four chunks: Response, Animation, Idle, and Load.
With this Response-Animation-Idle-Load (RAIL) framework in hand, Irish turned to research done by usability expert Jakob Nielsen to develop justifiable benchmarks for webpage performance:
Response: To provide the experience in which a website works instantaneously, a webpage should respond to user interactions within 100ms.
Animation: The gold-standard for modern web browsers is 60 frames per second. This means each animation frame must be ready within 16ms. Because the browser also needs to to do some work to paint the frame, web engineers should realistically budget about 10ms per frame for calculations and DOM manipulations.
Idle: After a page is loaded, there is period where it is waiting for user interaction. This period can be taken advantage of to load more assets, prepare data, or anticipate what the user may do next, but all of these functions should happen in blocks not taking longer than 50ms to avoid freezing up the UI.
Load: According to Nielsen, one second is the threshold for keeping a user’s attention and providing an uninterrupted experience. Therefore, webpages should not take longer than one second to load.
This framework is valuable because it provides a systematic way to analyze web performance and identify bottlenecks, leading to an overall smoother user experience.
In his talk, Empathetic Experiences, James Rosen approached UX from another angle. Rather than looking at performance, he fixated on gaining a deep understanding of users to build true empathy, with the goal of creating lovable products.
James talked about the oftentimes-overlooked role of messaging and voice in products and the importance of giving users choices. In one example, he looked at signup forms: ubiquitous on the web, rarely differentiated, and often unnecessarily complex. When he builds signup forms, he asks himself five questions before asking the user a single one:
- Why am I asking this?
- Is it obvious to the user why I am asking this?
- Do I need to ask this now?
- Does the user definitely know the answer?
- Can I propose an answer for the user?
By reconsidering every form input with these questions, James builds signup forms that are much friendlier, much more succinct, and much more personal. He eliminates fields that aren’t immediately necessary for registration, pushing contact details and user agreements to other points in the onboarding flow when they are more relevant. Then, he transforms canonical First Name/Last Name fields into a simple Name field, enabling people with multiple first names (i.e. José Eduardo Santos Taveres Melo Silva or Aditya Pratap Singh Chauhan) to enter their names without confusion.
If the First Name field was being used for personal communication, a more empathetic alternative might be a simple field that asks, “What should we call you?”. To make things easier for the user, this field can be pre-populated with a portion of the name provided in the Name field.
Through these questions, James is able to build experiences that appeal to all of his users, not just the most obvious ones or the ones closest to home.
Whether quantitative or qualitative, I appreciated Fluent’s focus on products in addition to technologies. After all, the languages, frameworks, and tools are all just means to an end.