FREELessons: 17Length: 2.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.6 Handling Input Mechanisms

Hello, and welcome back to Bombproof Web Design. In this lesson, we are going to be learning about input mechanisms. Just like everything else at web design, things are changing all the time with the type of input devices and input mechanisms that people can use to actually interact with your websites. It's no longer possible to assume that somebody will have a mouse to hover over menu items, and to interact with your page. There's now a multitude of input devices and input mechanisms that you might find people are utilizing. So you have the classic mouse, which is something that web designers have depended on for a long time. But also and probably just about equal proportions, we now have to consider touch interaction, which is a different mechanic. On top of that, we also have to think about enabling pure keyboard navigation There are a couple reasons for this. One is that enabling keyboard interaction is great for accessibility, which we'll talk about in the next video. But it's also because if you make sure that your site can be navigated by keyboard, then by default, you know that it can also be navigated via game controller or via TV remote. And with the rising popularity of browsing the Internet on the television, this is good to have in place for the proportion of people who already are browsing the internet on their television or through their console. And also for any increase that we see in the popularity of this approach in the future. And the other means of interaction that's not yet a major consideration but may well be moving forward is voice interaction. Voice interaction will probably be the primary way that people interact with smart watches, at least that's how it looks so far. And we're also seeing voice recognition becoming more and more sophisticated and popular on all different types of devices. So even though there's no guidelines I can give you on voice interaction right now, keep an eye out for this development so you can stay well ahead of the game in that regard. The guidelines for ensuring you can allow interaction with these different types of mechanisms are really not very complicated. It pretty much just comes down to two things. One is don't use interactions that depend on a hover state because a mouse is the only input mechanism that actually has a hover state. You need to make sure that all of your interactions can happen without hover state. And the second guideline is to make sure that you can move around your website in its entirety using nothing but the tab key, the arrows, the escape key, and the enter keys. We're going to start with a look at what is currently probably the major offender in terms of not allowing touch interaction on a particularly immobile devices and that is the drop down menu. Drop down menus are very popular, however, they're not very touch friendly. So this is a fairly simple, fairly standard drop down menu. You hover over the menu items. And you're able to see additional sub menu items. And that's fine, if are using a mouse. However, if you have a look at the same drop down menu on a mobile device now, because there's no way for a mobile device to interpret any type of hover action, it's not possible to make these sub menu items show up. So what you need to do instead is make sure that your menus and every other UI element can be activated and can be interacted with via touch or via keyboard. A great example of a menu that is capable of interacting with both touch and with keyboard is the standard menu in the Bootstrap framework. This is an example of a Bootstrap driven site. So instead of activating the drop down menus via a hover, they're activated via a click. And the click makes the sub menu items appear. And notice that we also have a visual indicator of an arrow to let you know that there are sub menu items to be interacted with. And if we interact with that same menu on a mobile device, it becomes a lot more usable. So we have that arrow to let people know that there are sub menu items, and now you can just click on the drop down menu in the same way and your going to be able to interact with it using purely touch driven events. You can also interact with this menu using just the keyboard. If I start pressing the tab key, it takes me through these menu items. If I use Shift+Tab to go back the other way, I can return along those menu items. When I want to enter in to this submenu I can press enter, and then I can continue to tab through each of these items or to tab backwards. So this is an excellent example of a menu that's wonderful for both touching direction as well as keyboarding interaction. Another example of a layout that is designed for keyboard interaction is YouTube's layout that's designed for viewing on a television. You can actually interact with this layout purely using the arrow keys. You don't even need to tab. So I'm using my right arrow key to page through these videos. And I can use my up and down keys to move through these menu items. Now if you are doing a design where you want to accommodate televisions and large displays, this is a great example to look at in that regard. The fact that you can interact with this UI just purely using your arrow keys also translates to meaning, it's going to be very easy to navigate this layout using a game controller or a TV remote. Another consideration that you want to make when you're ensuring keyboard navigability is to give visual feedback to the user on which part of the page they are interacting with. So if I start to tab through this layout, you can see that I've made sure that the item that's focused on has a very clear outline around it so that it's obvious which part of the UI the cable has engaged you with. As you can see from those few examples, ensuring that you are able to interact with your sites with more than just a mouse is actually a fairly straightforward thing. There's just a couple of considerations that you need to make as part of your planning and execution. And once you've taken care of those few simple things, you'll know that you're well equipped for interaction on every possible device. In the next lesson, you'll find out how to take the most important steps in insuring that your sites are built to be accessible.

Back to the top