Software Design
Bringing UX to Your Code
Edit
#user-experience-ux
#usability
#ruby-on-rails
#software-design
#human-centered-design
Summarized using AI

Bringing UX to Your Code

Joe Mastey • April 21, 2015 • Atlanta, GA

The video titled "Bringing UX to Your Code" by Joe Mastey focuses on the application of User Experience (UX) principles to software code, particularly in the context of back-end development. Mastey emphasizes that while user-centered design has been embraced in product development and interface creation, it is often overlooked in coding practices. He provides several key points on how to improve the usability of code by integrating UX principles:

  • The Developer's Perspective: Mastey, with a background in back-end development and experience as a UI developer, addresses primarily back-end developers to highlight the importance of considering UX in code.
  • Key Principles from UX: Drawing from Don Norman's insights—particularly from his book "The Design of Everyday Things"—Mastey outlines principles applicable to software, such as the "Gulf of Execution" and "Gulf of Evaluation", which describe the gaps between user intentions and actions, and the need for feedback processes, respectively.
  • Intuitive Method Names: He argues for clarity in coding, highlighting that method names should align with typical user expectations (e.g., using 'destroy' instead of 'delete' in Rails to prevent confusion).
  • Natural Mappings and Error Handling: Mastey explains that controls should follow natural mappings and emphasizes the need to design error messages that provide constructive feedback, improving the usability experience for developers encountering issues.
  • Design for Constraints: The importance of designing systems that guide users toward correct actions while preventing mistakes is stressed, with anecdotes illustrating these points, such as safeguards in MySQL to prevent accidental deletions.
  • Grouping and Consistency in Code: Mastey refers to Whitney Hess's design principles that encourage grouping related items to imply relationships and maintaining consistent naming conventions to reduce confusion.
  • Emotional Connections and Accessibility: He discusses how creating a positive emotional experience in software—by avoiding jargon and enhancing clarity—can significantly improve user interaction.
  • Clear Documentation and Feedback: Mastey highlights the value of self-documenting code and providing clear feedback mechanisms, which are crucial for effective debugging and user guidance.

In conclusion, Mastey advocates for a proactive approach to usability in coding, encouraging developers to adopt UX principles to enhance the clarity, coherence, and overall user experience of their code. He encapsulates the core message: good design should alleviate suffering through improved user understanding and interaction with software.

Bringing UX to Your Code
Joe Mastey • April 21, 2015 • Atlanta, GA

By, Joe Mastey
User Centered Design as a process is almost thirty years old now. The philosophy has permeated our products and the way we build our interfaces. But this philosophy is rarely extended to the code we write. We'll take a look at some principles of UX and Interface Design and relate them back to our code. By comparing code that gets it right to code that gets it desperately wrong, we'll learn some principles that we can use to write better, more usable code.

Help us caption & translate this video!

http://amara.org/v/G6rI/

RailsConf 2015

00:00:11.840 Hello everyone, my name is Joe Mastey and this presentation is titled 'Bringing UX to Your Code'.
00:00:18.880 In my day job, I help companies build awesome internal education programs, essentially focusing on keeping employees happy and engaged. While this talk doesn't directly relate to my job, I thought it would be good for you to know what I do.
00:00:30.480 I've been working with Rails for about five years now. After getting tired of consulting, I decided to join a company. Initially, I felt overqualified for back-end work, even though I come from a back-end background.
00:00:36.880 So, I applied for a UI position, despite my lack of experience in that area, and to my surprise, I got the job. I want to emphasize that I'm approaching this from a developer's perspective rather than a designer's.
00:00:49.600 So, how many of you here are primarily UI front-end developers? [A few hands raised] Alright, and how many consider themselves more back-end developers? [Majority of hands raised] That's great, as you're actually the target audience for this talk.
00:01:08.960 When I joined the company as a UI developer, I received materials to help me learn Rails—a new framework for me. I was given a couple of books to read, one of which was by Don Norman, who started the User-Centered Design movement.
00:01:16.798 He released a book in the mid-1980s called 'The Design of Everyday Things.' How many of you have read this book? [Surprisingly many hands raised] In that book, you learn a lot about the usability of everyday objects, like doors.
00:01:58.079 In fact, it emphasizes how important design is in our daily interactions. For example, this door has identical handles on both sides, which often leads to confusion. They had to label one side 'Push' because users were getting it wrong. This realization taught me that if a door doesn't work intuitively, it's not the user's fault; it's a design flaw.
00:02:21.040 If you take nothing else from this talk, remember that it was highlighted in the mid-1980s that it’s not your fault if you struggle with everyday objects—it's the design that can often fail us.
00:02:37.760 The book provides many valuable lessons about usability that have influenced how I approach software development, particularly in web development. Unfortunately, we often neglect usability principles when it comes to our backend code.
00:02:53.760 As developers, we tend to overlook two main aspects: the older inventions and the approaches developed by non-engineers, like designers. Many engineers, including myself, often recreate functions without appreciating their roots in usability principles. Designers have developed a rich vocabulary for discussing usability, and it's essential for us to embrace this.
00:03:33.840 I believe that although the code we write may seem like a mystical process, it's fundamentally an interface. The terms we choose are significant, but we often overlook that these principles apply to the code just as they do in design.
00:04:05.120 Now, let's delve into some of the principles outlined in Don Norman's book and explore their relevance to coding. The first principle is the 'Gulf of Execution.' This concept describes the gap between a user's intention and their ability to act upon it.
00:04:29.680 For example, imagine you are new to Rails and you want to remove an active record model from the database. You might search for an appropriate method, thinking in terms of HTTP verbs like 'Delete' or SQL commands. However, if you use 'delete' in Rails, it can lead to data inconsistencies because it does not behave as expected. Instead, you should use 'destroy,' which doesn't align with the conventional term you would naturally look for.
00:05:08.400 This confusion illustrates how crucial it is to provide intuitive method names to avoid miscommunication and errors. The second principle is the 'Gulf of Evaluation.' Once a user has acted, they want feedback based on the result of that action. In Rails, every method returns a value, making it essential to provide clear feedback. However, methods like 'delete' can create ambiguity.
00:05:59.040 For instance, if 'delete' doesn't throw an error, but the result is incorrect, that feedback fails to help the user understand what went wrong. This should highlight the importance of effective feedback mechanisms in coding.
00:06:49.360 Another concept is 'Natural Mappings'—the idea that controls should be organized in a way that matches their actions. Consider a stovetop: if the dials are arranged logically, it’s straightforward for users to operate. In programming, this translates to consistent and intuitive method naming.
00:07:32.480 When Ruby developers want to sort an array, they can intuitively guess `Array#sort`. However, when dealing with method names like 'update' vs. 'update_attributes,' the confusion can disrupt the user's thought process. Ensuring method names follow natural mappings helps reduce cognitive load.
00:08:12.080 Similarly, the file class in Ruby presents a challenge with its path-related methods. The naming conventions don't align well with user expectations, creating confusion for new developers. It's vital to consider the user experience and strive to create a logical structure.
00:09:01.760 We should also design for error handling more effectively. As developers, we often find ourselves troubleshooting code that breaks frequently—it's simply part of the job. Designing software to help recover from errors and provide constructive feedback is crucial.
00:09:40.800 For example, my daughter was learning JavaScript and encountered an error that simply stated 'undefined is not a function.' Such vague messages provide no context and hinder user understanding. It’s our responsibility to create error messages that assist users in diagnosing issues effectively.
00:10:33.440 Don Norman's principle of exploiting the power of constraints is also significant. We should design systems to make the right choices easy and the wrong choices hard. A personal experience: when I used MySQL, the option '--i-am-a-dummy' prevented accidental deletion of data—this type of safeguard is invaluable.
00:11:02.560 In Ruby on Rails, it's crucial to ensure that methods don't allow dangerous operations accidentally. For example, if developers leave a console open in production without clear context, they can accidentally execute catastrophic commands.
00:11:30.480 We really must craft code that is resilient to user errors—programmers are human too and can find themselves in less than optimal mental states. Striving for this can lead to better overall user experiences.
00:12:15.680 Reflecting on these principles inspired me to investigate further into usability. I stumbled upon a blog post by Whitney Hess titled 'So You Want to Be a User Experience Designer.' Although I don't share the title's sentiment, the post contains insightful principles about user experience design.
00:12:57.679 One principle discussed involves grouping related items together. Items that are positioned close to one another suggest an implicit relationship. This reminds me of a concept from 'Confident Code' which emphasizes organizing code to minimize context-switching for the reader.
00:13:42.520 Being consistent in your code also plays a crucial role. If method names don't adhere to a pattern, it creates unnecessary complexity. For instance, using a different case for the same action can lead to confusion. Code should not catch users off guard.
00:14:28.720 Another principle is to leverage emotions in software design. We all develop emotional connections to the tools we use. Code that provides a positive experience, like a library that shows tests with color codes, can create a joyful programming experience.
00:15:05.280 It's essential to create a warm and welcoming environment in software, which can lead to users feeling less frustrated and more engaged.
00:16:01.440 Avoiding jargon is equally important. Ensuring that terms are accessible can help users comprehend functionalities. For instance, terms like 'protect from forgery' are simpler and more understandable than the technical acronym 'CSRF'.
00:16:47.200 However, in some cases like AJAX, context is important, and it's acceptable to use industry jargon if users are familiar with it. As designers, knowing when to deploy certain terminologies can enhance understanding.
00:17:37.840 Creating clear signposts and cues in your code helps users transition smoothly from one action to another while browsing functions. Expecting users to rely solely on documentation to determine their next steps can hinder productivity.
00:18:29.440 For instance, the newer syntax in Ruby allows easier understanding of method parameters, improving the user's experience. Each method should guide users on how to use it efficiently, reducing frustration.
00:19:07.840 Upon running RSpec tests, if a test fails, the output provides direction on how to rerun that specific test. This attention to detail in feedback supports the user in their debugging process.
00:19:33.440 In conclusion, we should constantly strive for better usability in our code. One insightful quote from Whitney Hess was: 'The world is filled with anguish; let's not add to it.'
00:19:56.560 We must work towards reducing suffering caused by poorly designed software. If we embrace principles of self-documentation in our code, we can improve its understandability and overall usability. Remember, design shapes understanding, and we should endeavor to create an inviting experience for everyone who interacts with our software.
Joe Mastey
@jmmastey
Explore all talks recorded at RailsConf 2015
+122