UI Versus UX2:32 with Nick Pettit
We've looked at the difference between UI patterns and persuasive patterns, but before we move forward, we should distinguish UI or user interfaces, and UX, or user experiences.
- UI Patterns - UI Patterns is one of the most comprehensive resources for both UI patterns and behavioral patterns.
- Balsamiq Mockups - Balsamiq Mockups is the drawing tool used in these lessons. If you'd like to follow along using the same tool, download and install it. However, any other drawing tool (including pencil and paper) will work fine.
- Project Files - This is the Balsamiq Mockup file that was created during these lessons (as it appears at the end of the course). It's not necessary to download it, it's just here for your review.
We've looked at the difference between UI patterns and persuasive patters. 0:00 But before we move forward, I want to quickly make the distinction between UI, 0:04 or user interfaces, and UX, or user experience. 0:08 They both have the word user in them, and 0:13 sometimes they're both done by the same person. 0:15 So what's the difference then, really? 0:18 Let's define each one and then explore the relationship between them. 0:21 UI is the mode of interaction for a product. 0:26 In a website or a phone app, it's the buttons, icons, menus, 0:30 and all the things a user can click or tap. 0:34 In spatial computing, like virtual reality or 0:38 augmented reality, it's the things a user can touch with controllers or hands. 0:40 And in audio interfaces, like Voice Assistance, it's the phrases and 0:46 commands the user can say. 0:50 The definition of UI will expand over time as more devices and 0:53 modes of interaction become available. 0:57 And for the purposes of this course, we're only going to focus on 1:00 visual user interfaces, like those you might find on a website or in an app. 1:04 Keeping that definition in mind, let's compare that to UX. 1:09 UX is the way it feels to use a product. 1:14 It's the emotions and thoughts that a person has 1:18 as they try to accomplish a task using a piece of software. 1:21 Some definitions of UX also include other aspects of a company, 1:25 like the product marketing or customer support, to encompass the experience 1:29 a user might have throughout the entire life cycle of a product. 1:34 When creating a website or an app, the user sees and 1:38 interacts with a UI, and the UX is how they feel while using it. 1:42 There is a relationship between these two ideas because 1:47 the UX could be heavily influenced by the UI. 1:50 For example, they might find paginating through search results to be useful and 1:54 valuable. 1:59 If the pagination UI is confusing, 2:01 they might find the experience to be frustrating. 2:04 In this course, we're looking at design patterns for user experiences, 2:08 and a subset of those patterns concerns user interfaces. 2:12 That's because when a user is navigating an experience, their feelings and emotions 2:17 are largely influenced by how they interact with a product through the UI. 2:22 It's a subtle distinction but important to understand. 2:27
You need to sign up for Treehouse in order to download course files.Sign up