Focus5:49 with Nick Pettit
One of the most common problems in usability is a lack of focus. In this video, you'll learn how removing elements, reworking a layout, and even rewriting copy, can bring focus to your page.
[?upbeat music?] 0:00 [Think Vitamin Membership] [??] 0:03 [UX Fundamentals - Designing with Focus - with Nick Pettit] [??] 0:08 When assessing usability, one of the most common problems is a lack of focus. 0:13 Let's take a look at how we can redesign a page to appear more intentional, 0:18 deliberate, and focused. 0:22 Most of the time when you're assessing usability, 0:24 you're looking at a web application. 0:26 However, the user experience starts the first time that a user hears about your application. 0:29 This homepage is advertising an imaginary product. 0:35 We want to highlight the product, point out a few key features, 0:38 and give people an idea of what it does. 0:42 Hopefully by the end, this page will be enough to encourage people 0:45 to click through to the sign-up form. 0:49 Now, this homepage has all the components that we need, 0:52 but it also has a lot of other things that we don't. 0:56 When conducting a usability review and looking for ways to improve the site, 0:59 it's much like cleaning up your home. 1:03 The first step is to throw out all the garbage. 1:05 By cleaning up the clutter, you help the user stay focused on the task at hand, 1:08 which in this case is signing up for a product. 1:13 In the sidebar there is a Sign-Up button for newsletters. 1:16 This could very easily be confused with the Call to Action button, 1:20 which is asking users to sign up for the service. 1:25 The newsletter might be helpful to some people, 1:29 but overall, it's very distracting to the focus of the page, which is the product. 1:32 So let's go ahead and remove that piece. 1:37 [clicking] 1:40 The next thing that you'll notice on the sidebar are the social icons. 1:45 There's an icon for Twitter, Facebook, and various other social networks. 1:48 While these are nice, they could probably be relegated to the footer or header of the site 1:53 and don't really belong in the main content of the page. 1:59 So let's go ahead and remove these as well. 2:02 [clicking] 2:05 Great. 2:10 Lastly, the portion about the company blog with the RSS icon 2:12 and the tag cloud really do nothing to sell the product. 2:16 Let's go ahead and remove these as well. 2:20 [clicking] 2:22 Again, all of these things in the sidebar might be helpful, 2:27 but they really take away from the focus of the page. 2:30 Now that we've cleared out the sidebar, we have a lot more space to work. 2:34 Let's start by removing the sidebar and expanding the left panel 2:38 to fill the width of the page. 2:42 [clicking] 2:44 Great. 2:50 As your users move down the page, 2:52 you want them to go from very general, broad topics to more specific information. 2:54 The features are nice, and we do want to keep them on the page, 3:00 but they're far too specific to be so high up. 3:04 Let's go ahead and move them down here. 3:07 In order to do that, we'll need to move the Call to Action button up, 3:09 which is really a good idea anyway. 3:14 Let's go ahead and do that. 3:16 [clicking] 3:18 So we'll just go ahead and move this Callout bar up, 3:20 expand it across the page, [clicking] 3:24 put the Call to Action button in a nice, prominent place there, 3:29 and we'll move up this "Get Started for Free" message a little bit. 3:35 Now we have enough space to move these icons down the page. 3:40 So we'll put "99% Uptime Guaranteed" down there, 3:45 "Get it on the Go" on the right side, 3:49 and "Cloud-Based Software" in the middle. 3:52 [clicking] 3:56 Already this is looking much less cluttered and more focused on the task at hand. 3:59 Let's now focus on the upper half of the page. 4:04 The video explaining the product along with the headline 4:06 are the most important things on the page, 4:09 so we need to make them much larger. 4:12 So let's start by expanding out this video. 4:14 [clicking] 4:17 And we'll increase the size of this headline. 4:23 [clicking] 4:27 And we'll put in a line break 4:32 [clicking] just to break things up a little bit. 4:35 [clicking] 4:39 And we'll put it right in the center of the page so that visitors can't miss it. 4:42 We'll move it over just a little bit. 4:47 [clicking] 4:50 Now you're ready to just do a few final tweaks. 4:52 For my final tweak I think that everything is a little bit bunched up on the bottom of the page, 4:55 so let's go ahead and just move things up a little bit. 5:01 [clicking] 5:04 That spacing looks much better, and I think we're done. 5:13 Now, let's look at the before and after. 5:16 [Before - After] Which do you like better? 5:19 The less cluttered one looks much more aesthetically pleasing to a potential customer. 5:21 When improving a user experience, always remember that you're not designing for you; 5:26 you're designing for the user. 5:31 Removing page elements, reworking a layout, 5:33 or even rewriting copy can do a whole lot to bring focus to your page. 5:36 By saying less you can actually say a whole lot more. 5:40 [?upbeat music?] [Think Vitamin Membership] 5:43 [??] 5:47
You need to sign up for Treehouse in order to download course files.Sign up