1 00:00:00,470 --> 00:00:02,930 Human beings love to organize things. 2 00:00:02,930 --> 00:00:06,540 We need to, because it helps us make sense of the world around us. 3 00:00:06,540 --> 00:00:08,550 But organizing content on our websites and 4 00:00:08,550 --> 00:00:12,010 apps is just the first step in making sense of things. 5 00:00:12,010 --> 00:00:13,910 Once you group your content together, 6 00:00:13,910 --> 00:00:16,720 you'll still need to know what those groups represent. 7 00:00:16,720 --> 00:00:22,480 You need a label, a clear and obvious term like a name or a symbol that tells 8 00:00:22,480 --> 00:00:26,580 you immediately what the group contains, or what's common about every item in it. 9 00:00:27,720 --> 00:00:31,590 Consider this scenario, you are moving from one apartment to another. 10 00:00:31,590 --> 00:00:35,830 You pack everything you own into generic looking boxes and containers. 11 00:00:35,830 --> 00:00:37,450 And when get you get to your new place, 12 00:00:37,450 --> 00:00:40,250 you have to figure out where everything is. 13 00:00:40,250 --> 00:00:41,450 If you've ever moved before, 14 00:00:41,450 --> 00:00:46,420 you'll know the key to surviving this moving process is to label your boxes, so 15 00:00:46,420 --> 00:00:49,680 you understand where all your stuff is and where it should go. 16 00:00:49,680 --> 00:00:54,211 A box labeled clothes doesn't really help anyone, who's clothes? 17 00:00:54,211 --> 00:00:56,270 Which bedroom should it go in? 18 00:00:56,270 --> 00:00:58,460 Is it winter clothes or summer clothes? 19 00:00:58,460 --> 00:01:01,370 But labeling the box Mike's t-shirts, 20 00:01:01,370 --> 00:01:05,370 master bedroom, makes the content within the container very clear. 21 00:01:06,510 --> 00:01:11,530 So if you can accurately and clearly label the content within all your 22 00:01:11,530 --> 00:01:17,150 website containers, your users will be able to find what they need immediately, 23 00:01:17,150 --> 00:01:21,220 accomplish their goals and will enjoy the experience. 24 00:01:21,220 --> 00:01:25,690 If you don't label the information on your website or do a lousy job of it, 25 00:01:25,690 --> 00:01:28,390 you're taking a lot of risks. 26 00:01:28,390 --> 00:01:32,135 Users may get frustrated if they can't find what they want. 27 00:01:32,135 --> 00:01:35,244 They may get lost clicking around from place to place. 28 00:01:35,244 --> 00:01:40,930 And if they can't accomplish their goals, they may leave and never come back. 29 00:01:40,930 --> 00:01:44,850 Labels are the signals users need to find their way. 30 00:01:44,850 --> 00:01:47,540 So it's your job to provide clear signs and 31 00:01:47,540 --> 00:01:50,750 checkpoints, so they can continue their journey. 32 00:01:50,750 --> 00:01:54,680 So what kind of things need labeling on a website? 33 00:01:54,680 --> 00:02:00,130 Navigation menus absolutely need clear and accurate labels. 34 00:02:00,130 --> 00:02:04,390 We'll dig deeper into navigation in the next video, but the labels you use for 35 00:02:04,390 --> 00:02:08,300 the links in your menus are vitally important for usability and 36 00:02:08,300 --> 00:02:10,060 the user experience. 37 00:02:10,060 --> 00:02:14,480 The best way to label your menu links is to consider the user's point of view. 38 00:02:14,480 --> 00:02:20,890 What information would they look for if they were a new user or a returning user? 39 00:02:20,890 --> 00:02:25,760 What tasks are they trying to complete by using your app or visiting your site? 40 00:02:25,760 --> 00:02:30,110 What links would they look for if they wanted to buy something, 41 00:02:30,110 --> 00:02:33,020 fix something or download something? 42 00:02:33,020 --> 00:02:39,130 These terms should be clear and easy to understand, and the shorter the better. 43 00:02:39,130 --> 00:02:40,290 For example, 44 00:02:40,290 --> 00:02:45,700 this website about autism research has a simple looking menu at the top. 45 00:02:45,700 --> 00:02:49,920 But while Research and Newsletter seem straightforward enough, 46 00:02:49,920 --> 00:02:53,740 Discover leaves you wondering, discover what exactly? 47 00:02:54,880 --> 00:02:59,120 Using different tests, we could evaluate the effectiveness of that label 48 00:02:59,120 --> 00:03:03,420 to see if users understand what they'd find if they click the link. 49 00:03:03,420 --> 00:03:05,150 It's actually their blog. 50 00:03:05,150 --> 00:03:09,360 So maybe a label that just said blog would make more sense here. 51 00:03:10,820 --> 00:03:13,800 Page headers are another aspect of the website and 52 00:03:13,800 --> 00:03:16,920 user experience that need to be labeled effectively. 53 00:03:16,920 --> 00:03:21,560 Just by looking at the top of a page users should know what they'll find there. 54 00:03:21,560 --> 00:03:26,060 So don't try to be too clever, make it obvious. 55 00:03:26,060 --> 00:03:28,706 When you look at this science project page, 56 00:03:28,706 --> 00:03:32,646 it's clear what you're looking at and what the page will cover. 57 00:03:32,646 --> 00:03:36,409 But page headers do more than just tell you what's on the page, 58 00:03:36,409 --> 00:03:39,080 they help establish trust. 59 00:03:39,080 --> 00:03:41,060 Many times when you click a link, 60 00:03:41,060 --> 00:03:44,650 the link says what's on the page you're going to, right? 61 00:03:44,650 --> 00:03:46,650 So if you arrive at the page and 62 00:03:46,650 --> 00:03:51,210 it's called something else, you're gonna wonder if you're in the right place. 63 00:03:51,210 --> 00:03:57,240 Consistency between the link label and the page label builds confidence. 64 00:03:57,240 --> 00:04:01,900 When you look at an HR solutions website, like Insperity, for example, 65 00:04:01,900 --> 00:04:06,460 you'll see that when you click any of the links under their Individual Solutions 66 00:04:06,460 --> 00:04:10,640 menu, the corresponding page matches the link you chose. 67 00:04:10,640 --> 00:04:13,720 You can't help but feel confident in the organization of a site 68 00:04:13,720 --> 00:04:16,300 when the page header matches the link. 69 00:04:16,300 --> 00:04:20,450 Now, another element that needs strong labels are page sections. 70 00:04:20,450 --> 00:04:25,050 These labels help signal to users what they can find within a page. 71 00:04:25,050 --> 00:04:27,190 They communicate the structure of the page, 72 00:04:27,190 --> 00:04:29,825 helping to put things in a logical order. 73 00:04:29,825 --> 00:04:33,070 They could be in order of importance or in a specific sequence, 74 00:04:33,070 --> 00:04:37,170 like a page with instructions on how to set up Christmas lights. 75 00:04:37,170 --> 00:04:40,980 Clearly labeling each section means users will be able to follow along without 76 00:04:40,980 --> 00:04:45,710 frustration, and if necessary quickly locate a specific piece of information 77 00:04:45,710 --> 00:04:49,430 simply by skimming section headers or outlines. 78 00:04:49,430 --> 00:04:54,011 Our biggest goal with labels should be to make them clear and obvious. 79 00:04:54,011 --> 00:04:57,100 There's another great quote I wanna share from Steve Krug, 80 00:04:57,100 --> 00:05:00,446 author of Don't Make Me Think, on the topic of links and labels. 81 00:05:00,446 --> 00:05:04,510 He says, It doesn't matter how many times I have to click, 82 00:05:04,510 --> 00:05:09,700 as long as each click is a mindless, unambiguous choice. 83 00:05:09,700 --> 00:05:14,560 So whether you're grouping content within sections on a website or on a page, 84 00:05:14,560 --> 00:05:21,320 the labels you use to identify everything should be clear, obvious, and helpful. 85 00:05:21,320 --> 00:05:24,560 Remember, these label are guides, so 86 00:05:24,560 --> 00:05:28,250 don't make your users think about which path to take. 87 00:05:28,250 --> 00:05:31,430 The simplest approach almost always works best.